Tines

Tines uses a playful, vibrant UI that combines a dominant violet backdrop with a spectrum of soft, pastel-colored cards and a handful of vivid accent colors. Typography mixes a quirky geometric sans-serif for body text with a serif display font for headlines, creating an unexpected but engaging contrast. The system emphasizes clear information hierarchy through distinct, colorful card surfaces, thin borders, and ample internal padding, all within a spacious, contained layout that feels organized yet energetic. Prioritize Tines Violet (#4d3e78) as the primary background for sections and main call-to-action buttons. Use Alabaster (#ffffff) for all primary text on darker backgrounds and as button text, ensuring high contrast. Apply Reckless font for headlines at larger sizes (e.g., 52px, 64px) with negative letter-spacing (e.g., -0.020em) to create a distinct, impactful display. Utilize Roobert font for all body text and UI elements, opting for weights 400 and 500 for readability. Construct multi-color card layouts using the pastel range of Card Lavender (#e1d2f9), Card Blue (#ccdcf8), Card Peach (#ffdcb6), Card Pink (#ffcee2), and Card Sage (#c4e7cb) to add visual interest and segmentation. Maintain a generous border-radius of 14px for all cards and primary buttons to ensure a consistent soft, approachable shape. Use 24px as the standard internal padding for cards and primary content blocks to provide ample breathing room. Avoid using flat black text (#000000) on white backgrounds; instead, use slightly desaturated dark grays if a darker text is needed on light surfaces. Do not introduce strong, saturated accent colors that deviate from the established violet, orange, green, and blue pastel palette. Refrain from heavy, dark drop shadows; prefer subtle elevation via borders and slight background shifts. Do not use generic sans-serif fonts for headlines; always use Reckless to preserve the brand's unique typographic voice. Avoid tight letter-spacing for body text; Roobert should generally use positive or normal letter-spacing, unlike the display font. Do not break the 14px border-radius standard for cards and main buttons, unless specifically designing a micro-component with a 7px radius.