Prose

This design system evokes a sense of refined, organic luxury through its earthy color palette and bespoke typography. Soft, desaturated greens and beiges (#4d523c, #f1ece0) cradle content, while custom fonts, particularly the whisper-weight display typeface Saol, convey a premium, artisanal feel. Button-level details like the generous 60px radius create a distinctive, approachable tactility against an otherwise structured layout, grounding the brand in natural ease. Use Saol weight 300 with negative letter-spacing (-0.42 to -0.96px) for all primary headings (h1, h2) to establish a distinct, whisper-weight authority. Prioritize Charcoal Bark (#323429) for primary body text and Pine Needle (#4d523c) for emphasized text and links, to maintain the organic, refined palette. Apply a 60px border-radius to all primary call-to-action buttons, creating a soft, pill-shaped tactile feel. Employ Lunar Dust (#f9f7f2) as the default page background, and White Linen (#ffffff) for card or modal surfaces, creating subtle layering. Utilize an 8px base unit for all spacing, with common increments of 16px, 20px, 32px for larger element and section gaps. Ensure input fields are transparent with a #6c6c6c (Ash Grey) bottom border for a minimalist, integrated look. Incorporate the muted Sunken Orange (#f69371) sparingly for high-visibility accents, such as small promotional text or warnings, to provide gentle emphasis. Do not use sharp, angular buttons; all interactive elements that are not pure text links should adopt the characteristic 60px or 50% border radius. Avoid stark white (#FFFFFF) for large background areas; instead, use the slightly warmer Lunar Dust (#f9f7f2) or Powder Sand (#f1ece0). Do not use highly saturated or vivid colors outside of the defined accent palette; maintain the brand's near-gray and muted chromatic aesthetic. Refrain from heavy shadows or harsh borders; elevation should be subtle, like the #e2d9c2 (Shadow Tint) used for modals. Avoid mixing Simplon Norm and Saol indiscriminately; Saol is reserved for display headings, while Simplon Norm handles everything else. Do not introduce new typefaces; the current selection (Simplon Norm, Saol, Simplon Mono) is specific and central to the brand identity. Do not overuse Simplon Mono; it is for specific, technical-looking details and should not compete with body or headline text.