Coda

Coda operates on a 'digital-first canvas' aesthetic, mixing a soft, near-white background with bold, condensed typography and large, organic shapes in deep forest green. The system leverages strong visual contrast between high-impact headlines and more conservative body text. Components are minimalist with generous corner radii, emphasizing functional clarity over decorative elements, punctuated by dynamic shapes and a striking brand green. Use Canvas Creme (#f8f9eb) as the dominant background for most sections. Apply abcMonumentGrotesk, weight 800, with letter spacing -0.01em for all major headlines to ensure high-impact visual presence. Utilize Forest Green (#003d21) for large, decorative background shapes and elements to establish strong brand identity. Implement a default border-radius of 22.3625px for cards and 8.94498px for filled buttons, contributing to the soft, modern aesthetic. Pair Carbon Black (#000000) for primary text with Canvas Creme (#f8f9eb) backgrounds for optimal contrast (19.7:1 AAA). Employ jetBrainsMono for all badges and smaller functional labels to convey precision. Maintain comfortable density with an element gap of 9px and a section gap of 63px. Avoid using multiple chromatic colors in close proximity; the color palette is designed for accent, not proliferation. Do not use generic sans-serif fonts for headlines; abcMonumentGrotesk is essential for brand recognition of prominent text. Never use dark text on dark backgrounds; ensure sufficient contrast by pairing light text with dark backgrounds or vice-versa. Do not introduce sharp, angular corners; all interactive and card-like components should feature generous border radii. Refrain from heavy drop shadows; elevation is achieved through color contrast and layered shapes rather than pronounced shadows. Do not treat every color in the palette as a functional UI color; some are specifically for decorative backgrounds or accents. Avoid generic button styles; prefer outlined or filled buttons that adhere to the specified radii and color contrasts.