---
version: alpha
name: Nymphai
description: Italian botanical-luxury skincare — warm cream canvas, deep olive-ink serif headlines, soft gold-leaf accents, generous editorial whitespace and quiet uppercase EXPLORE calls-to-action that frame product photography like a gallery.
colors:
  # Canvas + ink
  background: "#f6f1e7"        # warm cream paper
  surface: "#fdfbf6"           # lighter card / panel
  surface-soft: "#efe7d6"      # muted sand band
  ink: "#2c3120"               # deep olive-black headline + body
  ink-secondary: "#5a5a48"     # muted olive-grey supporting copy
  ink-muted: "#8a8674"         # captions, metadata

  # Brand accents
  primary: "#7c7a3f"           # olive / herbal green-gold CTA
  gold: "#b89d63"              # soft gold-leaf accent line + detail
  gold-soft: "#d8c79a"         # tint of gold for hovers / fills
  clay: "#a8755a"              # warm terracotta secondary accent

  # Neutral scale
  cream-200: "#ebe3d2"
  sand-300: "#ddd2bb"
  taupe-400: "#b7ab92"
  stone-500: "#8f8568"

  # On-color
  on-primary: "#fdfbf6"
  on-ink: "#f6f1e7"
  on-gold: "#2c3120"

  # Lines + states
  border: "#ddd2bb"            # hairline on cream
  border-strong: "#b89d63"     # gold divider
  surface-hover: "#efe7d6"
  primary-hover: "#65632f"     # darker olive on CTA hover

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Cormorant Garamond, Garamond, Georgia, serif"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.3px
  sub-heading:
    fontFamily: "Cormorant Garamond, Garamond, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "Cormorant Garamond, Garamond, Georgia, serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.1px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.1px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 2.4px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 2px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  # Primary olive CTA (the framed EXPLORE)
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px

  # Outline EXPLORE — quiet gold hairline
  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    borderColor: "{colors.gold}"

  # Eyebrow tag above headlines
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Product card — gallery framing
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border}"

  # Feature / story card
  card-featured:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 40px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    padding: 20px 40px
    borderColor: "{colors.border}"
---

# Nymphai Design System

## Overview

Nymphai is an Italian botanical-luxury skincare brand, and its site reads like the printed front matter of an apothecary monograph. The canvas is a warm cream paper tone (`{colors.background}`), never sterile white, which immediately signals "natural, hand-made, gentle on the skin." Against that paper, deep olive-black serif headlines (`{colors.ink}`) carry the brand's literary, chaptered storytelling — products are introduced as characters ("Dafne, il primo capitolo") rather than SKUs. The whole system is built to make product photography feel like museum plates: framed, spaced, and quiet.

The typographic split is the spine of the identity. A high-contrast display serif (Cormorant Garamond stands in for the brand's elegant Didone-adjacent serif) handles every headline and product name, lending an editorial, almost editorial-magazine refinement. A clean geometric humanist sans (Jost) handles body, navigation, and the brand's signature wide-tracked uppercase "EXPLORE" calls-to-action. That 2px letter-spacing on tiny uppercase labels is the recurring detail that ties navigation, eyebrows, and buttons into one calm voice.

Color is herbal and restrained: an olive green-gold primary (`{colors.primary}`) for the main calls-to-action, a soft gold-leaf accent (`{colors.gold}`) for dividers and fine detail, and a warm terracotta (`{colors.clay}`) as the only real secondary warmth. Nothing is saturated or loud. Corners are mostly squared or barely softened — buttons are sharp rectangles, not pills — reinforcing the sense of a printed label rather than a glossy app.

**Key Characteristics:**
- Warm cream paper canvas (`{colors.background}`), never pure white
- Deep olive-black serif headlines (`{colors.ink}`) with chaptered, literary product naming
- Cormorant Garamond display serif paired with Jost humanist sans
- Wide-tracked (2px) uppercase micro-labels for nav, eyebrows, and EXPLORE buttons
- Herbal palette: olive green-gold primary, soft gold-leaf accent, terracotta warmth
- Squared / barely-rounded corners — printed-label rather than app feel
- Gallery-grade whitespace framing product photography
- Quiet, low-saturation chrome that lets imagery and serif type carry the brand

## Colors

### Canvas & Ink
- **Cream Paper** (`{colors.background}`): Page background — the warm base of the whole system.
- **Surface** (`{colors.surface}`): Lighter card and panel fill, a step brighter than the page.
- **Sand Band** (`{colors.surface-soft}`): Muted section bands and featured cards.
- **Olive Ink** (`{colors.ink}`): Headlines and primary body text.
- **Olive-Grey** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Olive** (`{colors.ink-muted}`): Captions and metadata.

### Brand Accents
- **Herbal Olive** (`{colors.primary}`): Primary CTA fill — the EXPLORE action.
- **Gold Leaf** (`{colors.gold}`): Fine dividers, accent lines, decorative detail.
- **Gold Soft** (`{colors.gold-soft}`): Tinted gold for hover fills.
- **Terracotta Clay** (`{colors.clay}`): Warm secondary accent, sparingly used.

### Neutral Scale
- **Cream 200** (`{colors.cream-200}`): Subtle surface tint.
- **Sand 300** (`{colors.sand-300}`): Hairline borders, dividers.
- **Taupe 400** (`{colors.taupe-400}`): Muted lines and disabled states.
- **Stone 500** (`{colors.stone-500}`): Deeper neutral for icons.

### Lines & States
- **Border** (`{colors.border}`): Default hairline on cream.
- **Border Strong** (`{colors.border-strong}`): Gold divider for emphasis.
- **Primary Hover** (`{colors.primary-hover}`): Darker olive on CTA hover.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, fallbacks `Garamond, Georgia, serif` — high-contrast elegant serif for all headlines and product names.
- **Body / UI**: `Jost`, fallbacks `Helvetica Neue, Arial, sans-serif` — geometric humanist sans for reading text, navigation, and uppercase labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero — chapter/opening headline |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, product intros |
| `card-title` | Product / story card titles |
| `body-large` | Lead paragraphs, ingredient stories |
| `body` | Standard reading text |
| `body-small` | Secondary UI text |
| `eyebrow` | Wide-tracked uppercase nav + tag labels |
| `button-ui` | Uppercase EXPLORE buttons |
| `caption` | Metadata, image captions |

### Principles
- **Serif announces, sans explains**: Cormorant Garamond carries all headlines and product names; Jost carries everything functional.
- **Wide-tracked uppercase as signature**: Nav, eyebrows, and buttons share a 2px-tracked uppercase treatment for a quiet, editorial calm.
- **Generous line-height on body**: 1.65–1.7 keeps ingredient storytelling airy and readable.
- **No bold display**: Serif headlines sit at weight 500, not 700 — refinement over force.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large editorial jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (140px) between major sections.

### Grid & Container
- Max content width: approximately 1280px
- Hero: centered serif headline over cream, framed product image below
- Product grid: 3-column gallery of framed cards, each with an uppercase EXPLORE
- Story sections: alternating image / text two-column layouts

### Whitespace Philosophy
- **Gallery framing**: Large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) frames each product like a plate.
- **Cream over white**: The paper background does the warming work; chrome stays minimal.
- **Calm rhythm**: Sections separated by space and gold hairlines, never heavy blocks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs — squared printed-label edges |
| `xs` | 2px | Tiny detail rounding |
| `sm` | 4px | Product cards |
| `md` | 8px | Featured story cards |
| `lg` | 16px | Large image containers |
| `pill` | 9999px | Eyebrow tags only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Olive fill, cream text, squared corners, wide-tracked uppercase. The framed EXPLORE.
- **`button-outline`** — Cream surface with a gold hairline border for secondary actions.

### Tags
- **`badge`** — Sand pill with wide-tracked uppercase eyebrow text.

### Cards
- **`card`** — Bright surface, hairline border, holds product photography and an EXPLORE.
- **`card-featured`** — Sand band, larger padding, for ingredient / story features.

### Inputs
- **`input`** — Squared, hairline-bordered; focus shifts the border to olive `{colors.primary}`.

### Navigation
- **`nav-bar`** — Cream sticky header, wide-tracked uppercase links, gold/sand hairline below.

## Do's and Don'ts

### Do
- Keep the canvas warm cream (`{colors.background}`) — never pure white
- Use Cormorant Garamond serif for all headlines and product names
- Apply 2px uppercase tracking to nav, eyebrows, and buttons
- Keep button and input corners squared — printed-label feel
- Let product photography breathe inside generous whitespace
- Use olive `{colors.primary}` as the single dominant action color

### Don't
- Don't use saturated or neon accents — the palette is herbal and muted
- Don't round buttons into pills — pills are reserved for eyebrow tags
- Don't set serif headlines bold (700); weight 500 is the ceiling
- Don't crowd product images — framing space is the brand
- Don't introduce cool greys; every neutral is warm (cream, sand, taupe)

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Nymphai. Brand names and trademarks belong to their respective owners.