Prose

# Prose — Style Reference
> Organic luxury, soft earth tones. Imagine sunlight filtering through linen onto a stoneware table.

**Theme:** light

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.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| 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. |

## Tokens — Typography

### Simplon Norm — Primary sans-serif for body text, navigation, and functional elements. Its range of weights and precise letter spacing ensures versatility from small captions to impactful headings. · `--font-simplon-norm`
- **Substitute:** Inter
- **Weights:** 300, 400, 500
- **Sizes:** 10px, 12px, 14px, 16px, 24px, 28px, 40px, 48px
- **Line height:** 0.86, 1.15, 1.30, 1.50, 2.00
- **Letter spacing:** -0.48px at 48px, -0.4px at 40px, -0.32px at 28px, -0.24px at 24px, 0.24px at 16px, 0.49px at 14px, 0.38px at 12px, 0.31px at 10px
- **Role:** Primary sans-serif for body text, navigation, and functional elements. Its range of weights and precise letter spacing ensures versatility from small captions to impactful headings.

### Saol — Signature serif for headings, where its light 300 weight against typical heading sizes creates a sophisticated, understated elegance. The generous negative letter spacing further enhances its delicate appearance. This is a deliberate choice for authority through restraint. · `--font-saol`
- **Substitute:** Playfair Display
- **Weights:** 300
- **Sizes:** 24px, 28px, 32px, 36px
- **Line height:** 1.10, 1.30
- **Letter spacing:** -0.96px at 36px, -0.62px at 28px, -0.42px at 24px
- **Role:** Signature serif for headings, where its light 300 weight against typical heading sizes creates a sophisticated, understated elegance. The generous negative letter spacing further enhances its delicate appearance. This is a deliberate choice for authority through restraint.

### Simplon Mono — Monospaced font for technical details or subtle accents, adding a touch of precision and contrast to the primary typefaces without being overly dominant. Its use is minimal. · `--font-simplon-mono`
- **Substitute:** Space Mono
- **Weights:** 400, 500
- **Sizes:** 10px, 12px, 14px, 16px
- **Line height:** 1.20, 1.50, 2.00
- **Letter spacing:** 0.83px at 16px, 0.83px at 14px, 0.71px at 12px, 0.63px at 10px
- **Role:** Monospaced font for technical details or subtle accents, adding a touch of precision and contrast to the primary typefaces without being overly dominant. Its use is minimal.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | 0.31px | `--text-caption` |
| body | 14px | 1.5 | 0.49px | `--text-body` |
| body-lg | 16px | 1.5 | 0.24px | `--text-body-lg` |
| subheading | 24px | 1.3 | -0.42px | `--text-subheading` |
| heading | 28px | 1.3 | -0.62px | `--text-heading` |
| heading-lg | 32px | 1.3 | — | `--text-heading-lg` |
| display | 48px | 0.86 | -0.96px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 72 | 72px | `--spacing-72` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 10px |
| buttons | 60px |
| dialogs | 10px |

### Layout

- **Card padding:** 16px

## Components

### Text Link Button
**Role:** Navigation, secondary actions

backgroundColor: rgba(0, 0, 0, 0) (transparent), color: #000000 (Black), border: none, padding: 0. Used for minimal, understated interactive elements that blend into textual content.

### Input Field
**Role:** User input

backgroundColor: rgba(0, 0, 0, 0) (transparent), color: #6c6c6c (Ash Grey), borderBottomColor: #6c6c6c (Ash Grey), borderRadius: 0px, paddingTop: 4px, paddingRight: 16px, paddingBottom: 4px, paddingLeft: 16px. Underlined input fields maintain a minimalist aesthetic.

### Offer Badge
**Role:** Promotional highlights

Circular badge with a pale yellowish-green background and bold text indicating discounts, often '60% OFF' and '+ FREE GIFT'.

### Navigation Link
**Role:** Primary site navigation

color: #000000 (Black), font family: Simplon Norm. Subtle, clear text links with an emphasis on content over decorative styling. Uses Simplon Norm at various weights and sizes depending on context.

## Do's and Don'ts

### Do
- 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.

### Don't
- 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.

## Imagery

The site predominantly uses product photography, often featuring custom-designed bottles and packaging in warm, natural light. Products are typically presented as contained compositions, either tightly cropped on a clean background or arranged aesthetically with other natural elements (like the comb and soap bar in the modal). Some imagery uses abstract gradients as backgrounds, suggesting a fluid, natural feel. Icons are minimal, subtle, and outline-based, blending into the refined aesthetic; they are not heavily featured. The overall role of imagery is to showcase the product's premium nature and bespoke appeal, less about lifestyle and more about the object itself.

## Layout

The page primarily uses a max-width contained layout, with content centered. The hero section often features a split layout with text on one side and a product visual on the other, or a centered headline over a background image. Sections alternate between light backgrounds and slightly darker, more muted tones, creating a gentle visual rhythm without harsh dividers. Content is often arranged in a classic text-left/image-right or vice-versa pattern, promoting easy readability. Navigation is a simple top bar, with elements subtly integrated rather than boldly highlighted. The overall density is comfortable, with generous breathing room around content blocks.

## Agent Prompt Guide

### Quick Color Reference
- Text: #323429 (Charcoal Bark)
- Background: #f9f7f2 (Lunar Dust)
- CTA: #323429 (Charcoal Bark)
- Border (input): #6c6c6c (Ash Grey)
- Accent: #4d523c (Pine Needle)

### 3-5 Example Component Prompts
1. Create a primary call-to-action button: background #323429, text #FFFFFF, border-radius 60px, padding 15px vertical, 32px horizontal. Text 'Unlock Offer' in Simplon Norm, weight 500.
2. Design a modal with a heading: background #f9f7f2, border-radius 10px, subtle shadow using #e2d9c2. Heading 'Get 60% off + a free Prose Comb' in Saol, size 36px, weight 300, letter-spacing -0.96px, color #000000.
3. Implement a standard input field: transparent background, bottom border 1px solid #6c6c6c, padding 4px vertical, 16px horizontal. Placeholder text 'Enter email address' in Simplon Norm, size 14px, weight 400, color #6c6c6c.
4. Generate a navigation link: color #000000, font Simplon Norm, size 14px, weight 400. Text 'Haircare' without underline by default.

## Similar Brands

- **Aesop** — Shares a focus on luxury, organic feel, and a muted, earthy color palette with a strong brand specific typeface.
- **Byredo** — Similar high-end aesthetic with an emphasis on bespoke products, refined typography, and subtle, natural tones.
- **Glossier (early branding)** — Employs custom typography and a soft, approachable, yet premium visual style with a limited, specific color palette.
- **Farmacy Beauty** — Uses natural ingredient emphasis, clean packaging, and a similar blend of greens and neutrals for an organic, trusted feel.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pine-needle: #4d523c;
  --color-powder-sand: #f1ece0;
  --color-lunar-dust: #f9f7f2;
  --color-white-linen: #ffffff;
  --color-charcoal-bark: #323429;
  --color-deep-moss: #161716;
  --color-ash-grey: #6c6c6c;
  --color-pale-mauve: #ead7f3;
  --color-sunken-orange: #f69371;
  --color-stone-grey: #a6a6a6;
  --color-shadow-tint: #e2d9c2;

  /* Typography — Font Families */
  --font-simplon-norm: 'Simplon Norm', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-saol: 'Saol', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-simplon-mono: 'Simplon Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.31px;
  --text-body: 14px;
  --leading-body: 1.5;
  --tracking-body: 0.49px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: 0.24px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.42px;
  --text-heading: 28px;
  --leading-heading: 1.3;
  --tracking-heading: -0.62px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;
  --text-display: 48px;
  --leading-display: 0.86;
  --tracking-display: -0.96px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;

  /* Layout */
  --card-padding: 16px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 50px;
  --radius-full-2: 60px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-buttons: 60px;
  --radius-dialogs: 10px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pine-needle: #4d523c;
  --color-powder-sand: #f1ece0;
  --color-lunar-dust: #f9f7f2;
  --color-white-linen: #ffffff;
  --color-charcoal-bark: #323429;
  --color-deep-moss: #161716;
  --color-ash-grey: #6c6c6c;
  --color-pale-mauve: #ead7f3;
  --color-sunken-orange: #f69371;
  --color-stone-grey: #a6a6a6;
  --color-shadow-tint: #e2d9c2;

  /* Typography */
  --font-simplon-norm: 'Simplon Norm', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-saol: 'Saol', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-simplon-mono: 'Simplon Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.31px;
  --text-body: 14px;
  --leading-body: 1.5;
  --tracking-body: 0.49px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: 0.24px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.42px;
  --text-heading: 28px;
  --leading-heading: 1.3;
  --tracking-heading: -0.62px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;
  --text-display: 48px;
  --leading-display: 0.86;
  --tracking-display: -0.96px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 50px;
  --radius-full-2: 60px;
}
```