Studio
Studio
The Prose design system uses a light-themed visual language. The primary brand color is Sunken Orange (#f69371); text is Charcoal Bark (#323429) on a Lunar Dust (#f9f7f2) background. Typography is set in Simplon Norm, Saol and Simplon Mono. This DESIGN.md contains 11 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Prose.
Independent Style Review
Organic luxury, soft earth tones. Imagine sunlight filtering through linen onto a stoneware table.
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.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Pine Needle | #4d523c | --color-pine-needle | Major text and brand accents; a muted, verdant green providing organic warmth to headings and links. |
| Powder Sand | #f1ece0 | --color-powder-sand | Subtle surface backgrounds and highlights, giving a soft, natural base for UI elements. |
| Lunar Dust | #f9f7f2 | --color-lunar-dust | Clean primary background, a slightly off-white that adds warmth without starkness. |
| White Linen | #ffffff | --color-white-linen | Secondary surface background, contrasts gently with Lunar Dust, also used for button text. |
| Charcoal Bark | #323429 | --color-charcoal-bark | Primary text on light backgrounds and button fills; a very dark, desaturated gray that is softer than pure black. |
| Deep Moss | #161716 | --color-deep-moss | Darkest text and background for high-contrast elements, subtly colored rather than truly black. |
| Ash Grey | #6c6c6c | --color-ash-grey | Subtle text and input colors for secondary information, providing clear readability without dominance. |
| Pale Mauve | #ead7f3 | --color-pale-mauve | Internal UI background for distinct sections, adding a touch of muted color. |
| Sunken Orange | #f69371 | --color-sunken-orange | Highlight accent color for specific textual elements, a warm pop of muted orange. |
| Stone Grey | #a6a6a6 | --color-stone-grey | Disabled states for buttons and subtle border details. |
| Shadow Tint | #e2d9c2 | --color-shadow-tint | Subtle, diffused shadows, almost a light beige, contributing to the soft, natural aesthetic. |
| Font | Weights | Fallback |
|---|---|---|
| Simplon Norm | 300, 400, 500 | Inter |
| Saol | 300 | Playfair Display |
| Simplon Mono | 400, 500 | Space Mono |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 10px | 1.5 | --text-caption |
| body | 14px | 1.5 | --text-body |
| body-lg | 16px | 1.5 | --text-body-lg |
| subheading | 24px | 1.3 | --text-subheading |
| heading | 28px | 1.3 | --text-heading |
| heading-lg | 32px | 1.3 | --text-heading-lg |
| display | 48px | 0.86 | --text-display |
