Evernote

Evernote projects a calm, confident workspace aesthetic with an off-white canvas and muted neutral surfaces. Typography is grounded and readable, while a single vibrant green accent provides functional punctuation for primary actions and key highlights. Interaction elements are lightweight but clearly defined, emphasizing clarity and focus over heavy ornamentation. Prioritize text legibility by using Midnight Graphite (#141414) or Deep Black (#000000) for primary content on light backgrounds like Canvas (#f9f6f2) or Pure White (#ffffff). Use Vivid Evernote Green (#94e130) exclusively for primary calls to action or key interactive states to maintain its impact and clarity. Apply 5px border radius for interactive elements like buttons and navigation items to give them a soft, approachable geometry. Maintain a clear content hierarchy using Figtree for all typographic elements, with display sizes (72px, 50px) using negative letter-spacing for impact. Segment content using distinct background colors: Canvas (#f9f6f2) for the main page, Pure White (#ffffff) for elevated cards, and Surface Off-White (#f4eee5) for secondary sections. Utilize an 8px base unit for all spacing values, ensuring consistent rhythm and density across layouts and components. Employ Light Gray Stroke (#e7e7e7) for all hairline borders and subtle dividers, maintaining a lightweight interface feel. Do not introduce new saturated colors; limit accents to Vivid Evernote Green (#94e130) with occasional Decorative Violet (#000015) for non-interactive elements. Avoid heavy drop shadows or complex gradients on cards; the system relies on background color shifts and solid borders for surface separation. Do not use letter-spacing on body text; it should remain at its default for optimal readability. Do not use Pure White (#ffffff) as a background for direct page sections; it's reserved for contained components like cards to appear elevated. Do not vary border radii arbitrarily; stick to 5px for interactive elements, 10px for standard cards, and 16px for larger feature cards. Avoid dense, information-heavy blocks without sufficient padding; use 32px padding for cards and sections to ensure comfortable breathing room. Do not introduce unnecessary iconography that distracts from core content; icons should be functional and simple, often with a subtle color accent.