Toggl Track

Toggl Track employs a playful yet professional aesthetic, characterized by a predominantly light theme with deep violet accents for structure and emphasis. Interactive elements pop with a vibrant 'Orchid Bloom' color, lending a dynamic and engaging feel to the user interface. Typography balances crisp readability with distinct, branded headlines, while generous internal padding and rounded corners contribute to a soft, approachable component style. The system leverages subtle surface variations to define hierarchy rather than heavy shadows. Prioritize Orchid Bloom (#e57cd8) for primary calls to action, active states, and elements requiring significant visual emphasis. Use Midnight Plum (#412a4c) for major text elements, hero section backgrounds, and defining container fills. Employ GT Haptik Medium for all headlines, using GT Haptik Medium Rotalic for emphasis on key words within headings. Maintain a default border-radius of 10px for cards and general containers, extending to 26px for most buttons and 200px for fully rounded buttons. Separate content sections with White Canvas (#fefbfa) and Frost Haze (#fcf1f8) backgrounds to create visual breaks without hard lines. Utilize Inter for all body copy, links, and functional UI elements to ensure consistent readability. Ensure generous internal padding for all cards, standardizing around 15px to 30px depending on prominence, and a default element gap of 10px. Avoid using multiple accent colors; confine strong saturation to Orchid Bloom (#e57cd8) to maintain visual hierarchy. Do not introduce heavy drop shadows or excessive elevation; rely on varied background colors and subtle borders for surface distinction. Do not deviate from the specified GT Haptik fonts for headlines; generic sans-serif alternatives will compromise brand identity. Do not use highly saturated colors for large text blocks; reserve them for accents and calls to action. Avoid tight spacing in cards and between elements; maintain a comfortable density for an approachable feel. Do not use dark backgrounds without providing sufficient contrast for text and interactive elements; ensure readability against deeper tones like Regal Violet (#2c1338). Do not use square corners; ensure all interactive elements and content containers have a degree of roundedness, with a minimum of 8px for small elements.