---
name: Prose
description: "This site is an excellent example of a modern, premium Direct-to-Consumer brand that uses high-quality photography and refined typography to elevate a clean, functional interface."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#323429"
  tertiary: "#F49674"
  neutral: "#4D523C"
  bg-soft: "#F9F7F2"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.5px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.3px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"
  button:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1
    fontWeight: 400
    letterSpacing: "1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 60px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A premium custom beauty brand blending clinical precision with warm, approachable aesthetics

*A boutique apothecary meets a high-end design studio*

## Colors

A restrained, natural palette where deep olive-greens ground the design, crisp whites provide breathing room, and a singular coral accent draws the eye to primary actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#323429`)** — uses `ink-soft` token
- **Accent (`#F49674`)** — uses `accent` token
- **Muted (`#4D523C`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-mono

- Serifs are reserved exclusively for high-impact headlines to convey elegance.
- Sans-serif is used for all functional navigation and body copy for maximum legibility.
- Monospaced type is used exclusively for small uppercase overlines and labels.
- All-caps treatment is applied consistently to secondary labels and buttons with wide tracking.

## Layout

A wide, 12-column centered grid that transitions to a single-column stacked layout on mobile devices.

*Rhythm:* A consistent 4px baseline grid ensures rhythmic vertical spacing and predictable alignment throughout the layout.

## Elevation & Depth

- rgba(0, 0, 0, 0.04) 0px 10px 14px -10px
- rgba(0, 0, 0, 0.25) 0px 4px 4px 0px
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 60px

## Components

- **button:** Pill-shaped buttons for primary CTAs and standard rectangular buttons with subtle corners for secondary actions.
- **card:** Minimalist horizontal ingredient cards with light borders and generous internal whitespace.
- **chip:** N/A - Not visibly used as a standalone component.
- **input:** N/A - Not visible in the provided screenshots.
- **hero:** Full-width cinematic background video or image with a clean text overlay and centered primary action buttons.

## Do's and Don'ts

**Don't:**
- Don't use loud, neon, or highly saturated colors — the palette is strictly muted earth tones and whites.
- Don't use playful or decorative scripts for headlines — typography remains strictly serif, sans, or mono.
- Don't add heavy borders, drop shadows, or strong background colors to every card — elements are kept highly minimal.
- Don't clutter the layout with too many competing elements — the design relies on large amounts of whitespace.
- Don't use lowercase for primary button text — the site consistently uses all-caps with wide letter-spacing for labels.
- Don't use a standard grid of square product shots in the hero — the brand prefers cinematic, full-bleed lifestyle imagery.

---

## System Prompt (paste into AI agent)

```
Design a premium, clean beauty or consumer product brand interface that balances scientific precision with warm, approachable aesthetics. Use a neutral palette of white, soft beige, and deep olive-green, with a singular coral accent for primary calls to action. Typography should pair elegant transitional-serif for display headlines with highly legible humanist-sans for body copy, and use a geometric-mono for small uppercase overlines. Ensure layouts are spacious, airy, and minimalist, avoiding cluttered grids or heavy UI elements. Do not use playful fonts, neon colors, or aggressive drop shadows. Keep interactions smooth and subtle, focusing on high-quality cinematic photography and clean typography.
```