Coda

Coda's design system revolves around a crisp, functional aesthetic, emphasizing readability and clear interaction. It pairs a stark monochrome palette with a warm, inviting accent background for key sections. Typography is confident and impactful for headlines, complemented by a versatile sans-serif for body text. Components are well-defined with consistent border radii and subtle elevations, guiding users through structured content. Prioritize a clean, spacious layout using White Canvas (#ffffff) for primary backgrounds and Amber Glow (#fff6ec) for accent sections. Use Calibre-R (or Montserrat) 700 for all major headings, applying precise negative letter-spacing for impact. Limit the use of Sunset Orange (#ee5a29) to specific highlight elements or decorative text, preventing overuse. Employ consistent 8px border-radius for all interactive elements and content containers (buttons, cards, images). Use Obsidian (#000000) for primary call-to-action buttons; for secondary actions, use either Ghost Buttons (Midnight Ink #212121 outline) or Tertiary White Buttons. Maintain a comfortable element gap of 8px (base unit 4px) for most UI components and content structures. Apply subtle shadow styles from the component list for cards and elevated elements to imply hierarchy without heavy visuals. Avoid arbitrary color choices; all colors must map to a defined role within the palette. Do not use generic system fonts; stick to Inter for body and UI text, and Montserrat (or Calibre-R) for headlines. Do not vary border-radius on buttons or cards; maintain the strict 8px rounding. Avoid clutter; ensure page content has sufficient negative space, adhering to a comfortable density. Do not use highly saturated colors other than Sunset Orange (#ee5a29); the system favors a monochrome base. Do not create new shadow styles; use the defined elevation tokens for consistency. Do not use arbitrary padding values; adhere to the 4px base unit and derived spacing tokens like 12px, 16px horizontal, and 8px vertical for buttons.