Getclockwise

Clockwise employs a crisp, professional visual system with a bright canvas and strong green branding. Text is highly structured, using a custom display font for headlines and a clear sans-serif for body content. Borders are prominent, acting as dividers and enclosures, while color accents are used sparingly for links and interactive elements, maintaining an airy yet authoritative feel. Prioritize PP Mori for all headlines and display text, leveraging its strong character at larger sizes. Use Midnight Pine (#003f2e) for primary text content to maintain strong contrast and brand presence. Apply Forest Link (#039861) exclusively for active links and interactive elements, ensuring its vibrancy draws attention. Employ Light Gray Border (#d6d6d6) and Steel Border (#a6a6a6) for functional dividers and UI element outlines, using 3px solid for major sections and 1px solid for subtle distinctions. Maintain generous vertical spacing between sections (32px to 64px) to emphasize clarity and airiness. Utilize the circular (9999px) and soft (800px) radii for all interactive elements and badges, to convey a friendly tangibility. Ensure all body text uses Inter with -0.0300em letter spacing for enhanced readability on screen. Avoid using saturated colors other than Forest Link (#039861) on interactive elements. Never use generic rectangular buttons; all buttons must adopt the circular (9999px) or soft (800px) radius. Do not introduce new serif fonts; the system relies on the distinct contrast between PP Mori and Inter. Avoid heavy drop shadows or complex gradients; the system prefers a flat, border-driven aesthetic. Do not deviate from the established text colors; use Midnight Pine (#003f2e), Slate Text (#333333), and Ash Gray (#6e7673) only for their designated roles. Refrain from using tight line spacing; maintain the established line heights (1.3-1.4) for all body copy to prevent text density. Do not use accent colors for large background areas; reserve them for small, functional UI elements.