---
version: alpha
name: Jong & Jeong
description: A romantic editorial wedding invitation — Oranienbaum display serif with wide tracked-out caps over Inter body, near-monochrome ink-on-white palette with a single faint lavender accent, circular and pill controls, generous whitespace, and interactive moments (spinning globe, countdown, photo gallery).

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f2f2f2"
  ink: "#222222"
  ink-strong: "#1a1a1a"
  ink-pure: "#111111"

  # Secondary text scale
  ink-secondary: "#444444"
  ink-muted: "#555555"
  ink-tertiary: "#777777"
  ink-faint: "#999999"
  ink-disabled: "#aaaaaa"

  # Accent — faint lavender used sparingly for romantic highlights
  accent: "#bbaacc"
  accent-soft: "#eeeeee"

  # Alert — RSVP decline / dietary warning
  alert: "#ff3232"
  alert-soft: "#fff0f0"        # rgba(255,50,50,.08) flattened over white

  # Borders + hairlines
  border: "#eeeeee"
  border-strong: "#cccccc"
  border-soft: "#dddddd"

  # Overlay scrims (over imagery / globe)
  scrim-dark: "#000000"        # used at low alpha over photos
  scrim-light: "#ffffff"       # used at low alpha for glass chrome

  # On-color
  on-ink: "#ffffff"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Oranienbaum, Noto Serif KR, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 4px
  display-title:
    fontFamily: "Oranienbaum, Noto Serif KR, Georgia, serif"
    fontSize: 28.8px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 2px
  display-section:
    fontFamily: "Oranienbaum, Noto Serif KR, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 2px
  display-subtitle:
    fontFamily: "Oranienbaum, Noto Serif KR, Georgia, serif"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1.5px
  eyebrow:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 2px
  label-caps:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 11.2px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 19.2px
    fontWeight: 300
    lineHeight: 1.70
    letterSpacing: 0.5px
  body:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.5px
  body-light:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.70
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 13.6px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 1px
  micro:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1px
  micro-caps:
    fontFamily: "Inter, Noto Sans KR, sans-serif"
    fontSize: 10.4px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 2px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 6px
  md: 10px
  lg: 16px
  pill: 9999px

components:
  # Primary dark CTA — Submit RSVP
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px

  # Outline / ghost — secondary action, sits on white or over photo glass
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
    borderColor: "{colors.border-strong}"

  # RSVP toggle — Accept / Decline segmented choice
  toggle-accept:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  toggle-decline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
    borderColor: "{colors.border-strong}"

  # Circular icon control — audio, dark mode, gallery, globe nav
  icon-button:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    size: 44px

  # Text input — name, email, dietary restrictions
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.ink}"

  # Countdown unit — Months / Days / Hours / Mins / Secs
  countdown-cell:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display-section}"
    rounded: "{rounded.md}"
    padding: 16px 12px
    borderColor: "{colors.border}"
  countdown-label:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.micro-caps}"

  # Content card — schedule item, info block, FAQ
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Gallery photo tile
  photo-tile:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"

  # Eyebrow / section kicker
  eyebrow:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.eyebrow}"

  # Glass chrome over imagery / globe (translucent white nav, captions)
  glass-chip:
    backgroundColor: "{colors.scrim-light}"
    textColor: "{colors.ink}"
    typography: "{typography.micro-caps}"
    rounded: "{rounded.pill}"
    padding: 8px 16px

  # Divider hairline
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Jong & Jeong Design System

## Overview

Jong & Jeong is a bespoke wedding invitation site that treats a celebration like an editorial keepsake. The palette is almost entirely achromatic — soft ink (`{colors.ink}`) on pure white (`{colors.background}`), supported by a long, careful gray scale from `{colors.ink-secondary}` down to `{colors.border}`. There is no brand color in the loud sense; instead a single faint lavender (`{colors.accent}`) appears in the gentlest of highlights, and a saturated red (`{colors.alert}`) is held in reserve for one job only — the RSVP "decline" and dietary warnings. The restraint is the romance.

The typographic pairing carries the entire personality. Oranienbaum, a tall high-contrast display serif with delicate hairlines, sets every title, name, and section header — always at generous size with wide positive tracking (1.5px to 4px), so the couple's names read like an engraved invitation. Inter handles all body copy, labels, and UI in lighter weights (300/400/500), with its own gentle letter-spacing that keeps captions feeling typeset rather than typed. Korean content gracefully swaps to Noto Serif KR and Noto Sans KR, mirroring the serif/sans hierarchy so the bilingual experience stays visually consistent.

What separates this from a static template is its sense of motion and intimacy. The site is interactive: a spinning globe reveals "hidden moments," a live countdown ticks down to the day, guests upload photos to a shared gallery, and a dark-mode toggle and audio control float as circular glass chips over imagery. Chrome that sits on top of photographs becomes translucent — built from low-alpha white and black scrims — so the photography always leads and the interface recedes. Controls are soft and friendly: full pills for actions, perfect circles for icons.

Layout is unhurried. Single-column, centered, with large vertical breathing room between sections (`{spacing.3xl}`–`{spacing.4xl}`) and hairline dividers (`{colors.border}`) rather than heavy rules. The result reads as calm, modern, and personal — an invitation you'd want to keep.

**Key Characteristics:**
- Oranienbaum display serif for all titles, with wide positive tracking (1.5px–4px) — engraved-invitation feel
- Inter for body and UI in light weights (300/400/500); Noto Serif/Sans KR for Korean
- Near-monochrome ink-on-white palette with a deep, intentional gray scale
- One faint lavender accent (`{colors.accent}`) used sparingly; red (`{colors.alert}`) reserved for decline/warnings only
- Full pills for buttons, perfect circles for icon controls
- Translucent glass chrome over photography and the interactive globe
- Interactive set pieces: spinning globe, live countdown, shared photo gallery, dark-mode + audio toggles
- Calm, centered single-column layout with generous whitespace and hairline dividers

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page canvas, cards, surfaces. The dominant field.
- **Ink** (`{colors.ink}`): Primary text, headings, primary button fill. Soft near-black, never pure.
- **Ink Strong** (`{colors.ink-strong}`): Emphasis, the darkest typographic weight.
- **Ink Pure** (`{colors.ink-pure}`): Reserved for maximal contrast moments.
- **Surface Soft** (`{colors.surface-soft}`): Subtle tinted fill for icon buttons and photo tiles.

### Secondary Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Strong body text, sub-labels.
- **Ink Muted** (`{colors.ink-muted}`): Standard secondary copy.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Eyebrows, captions, metadata.
- **Ink Faint** (`{colors.ink-faint}`): Muted hints, low-priority labels.
- **Ink Disabled** (`{colors.ink-disabled}`): Disabled and placeholder text.

### Accent & Alert
- **Lavender Accent** (`{colors.accent}`): The single soft brand highlight — used in small romantic touches, never as a fill for chrome.
- **Accent Soft** (`{colors.accent-soft}`): Faint tinted backgrounds, hover wash.
- **Alert Red** (`{colors.alert}`): RSVP decline state, dietary warnings only.
- **Alert Soft** (`{colors.alert-soft}`): Background tint behind warning copy.

### Borders & Hairlines
- **Border** (`{colors.border}`): The default hairline — dividers, card outlines, countdown cells.
- **Border Soft** (`{colors.border-soft}`): Input outlines at rest.
- **Border Strong** (`{colors.border-strong}`): Outline buttons, emphasized edges.

### Overlay
- **Dark Scrim** (`{colors.scrim-dark}`): Low-alpha overlay over photography and the globe.
- **Light Scrim** (`{colors.scrim-light}`): Low-alpha white for translucent glass chrome.

## Typography

### Font Family
- **Display**: `Oranienbaum`, with fallbacks `Noto Serif KR, Georgia, serif` — every title and name.
- **Body / UI**: `Inter`, with fallbacks `Noto Sans KR, sans-serif`.
- **Korean**: `Noto Serif KR` (display) and `Noto Sans KR` (body) swap in for Hangul.
- **Icons**: Material Symbols Outlined.

### 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` | Couple's names / hero — Oranienbaum, 4px tracking |
| `display-title` | Major section titles |
| `display-section` | Section headers, countdown numbers |
| `display-subtitle` | Sub-headers, dates, venue names |
| `eyebrow` | Section kickers above titles |
| `label-caps` | Button and control labels, tracked caps |
| `body-large` | Lead paragraphs, the couple's letter |
| `body` | Standard reading text |
| `body-light` | Soft body in weight 300 |
| `caption` | Photo captions, secondary metadata |
| `micro` | Fine print, timestamps |
| `micro-caps` | Tiny tracked labels (countdown units, chips) |

### Principles
- **Serif announces, sans informs**: Oranienbaum is for emotional, ceremonial moments (names, dates, section titles); Inter carries everything functional.
- **Positive tracking on the serif**: Titles open up to 1.5px–4px letter-spacing — the opposite of a tech wordmark, and the source of the engraved-invitation feel.
- **Light is the default weight**: Inter leans on 300 and 400; 500 only for tracked caps labels. Nothing heavier than 500 in chrome.
- **Bilingual parity**: Korean uses Noto Serif/Sans KR at the same hierarchy so the layout reads identically across languages.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening into large section gaps (`{spacing.3xl}`–`{spacing.4xl}`) for editorial breathing room.

### Grid & Container
- Single centered column, roughly 640–720px max reading width
- Hero is full-bleed photography or the interactive globe with centered serif names over it
- Sections stack vertically; multi-cell rows (countdown, gallery grid) are the only horizontal layouts
- Separation comes from whitespace and 1px `{colors.border}` hairlines, not heavy rules

### Whitespace Philosophy
- **Calm and unhurried**: Large vertical padding lets each moment land on its own.
- **Photography leads**: Imagery is full-width; interface chrome turns translucent so it never competes.
- **Centered symmetry**: Almost everything is center-aligned, reinforcing the formal invitation tone.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, countdown cells, dividers |
| Glass (Level 1b) | Translucent `{colors.scrim-light}` + blur | Chrome floating over photos/globe |
| Soft Lift (Level 2) | `0 2px 12px rgba(0,0,0,0.06)` | Hovered cards, gallery lightbox |
| Scrim (over media) | Low-alpha `{colors.scrim-dark}` gradient | Legibility wash under text on imagery |

**Depth Philosophy**: Depth is whisper-quiet. Most structure is drawn with a single hairline border; the only real elevation comes from translucent glass chrome over imagery and a faint soft shadow on interactive cards. Nothing floats loudly — the photography and serif typography carry the visual weight.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media |
| `micro` | 2px | Tiny chips, tags |
| `xs` | 3px | Small inputs, fine controls |
| `sm` | 6px | Text inputs |
| `md` | 10px | Cards, countdown cells, photo tiles |
| `lg` | 16px | Large content cards |
| `pill` | 9999px | Buttons, toggles, glass chips, circular icon controls |

## Components

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

### Buttons & Toggles
- **`button-primary`** — Ink fill, white tracked-caps label, full pill. The Submit RSVP action.
- **`button-secondary`** — White with `{colors.border-strong}` outline, full pill.
- **`toggle-accept` / `toggle-decline`** — Segmented RSVP choice; accept is solid ink, decline is outlined and muted (red only on confirmed decline).

### Controls
- **`icon-button`** — 44px perfect circle on `{colors.surface-soft}`, Material Symbol centered. Audio, dark mode, gallery, globe nav.
- **`input`** — Soft-bordered text field; focus deepens the border to `{colors.ink}`.

### Set Pieces
- **`countdown-cell`** — Hairline-bordered cell with a large Oranienbaum number and a `{typography.micro-caps}` unit label below.
- **`photo-tile`** — Rounded gallery tile on a soft surface; opens into a lightbox.
- **`glass-chip`** — Translucent pill that floats over photography and the globe for captions and nav.

### Cards & Structure
- **`card`** — White, hairline border, 16px radius, roomy padding. Schedule, info, FAQ.
- **`eyebrow`** — Tracked tertiary-gray kicker above serif section titles.
- **`divider`** — 1px `{colors.border}` hairline; the primary separator.

## Do's and Don'ts

### Do
- Set names, dates, and section titles in Oranienbaum with wide positive tracking (1.5px–4px)
- Keep Inter in light weights (300/400) for body; reserve 500 for tracked caps labels
- Hold the palette achromatic — let the gray scale do the work
- Use the lavender accent (`{colors.accent}`) only as a faint, occasional highlight
- Reserve red (`{colors.alert}`) for RSVP decline and dietary warnings exclusively
- Use full pills for buttons and perfect circles for icon controls
- Let photography go full-bleed and make overlay chrome translucent
- Separate sections with whitespace and single hairlines, not heavy borders

### Don't
- Don't apply negative letter-spacing to Oranienbaum — its identity is openness
- Don't use bold weights in chrome — nothing heavier than 500
- Don't introduce additional brand colors; this is a monochrome system with one soft accent
- Don't use red anywhere except decline/warning states
- Don't put opaque chrome over photography — keep it glass
- Don't tighten the generous section spacing; the calm is the point
- Don't mix the serif and sans hierarchy across languages — keep Noto parity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, countdown wraps to 3+2 |
| Tablet | 600–900px | Wider reading column, gallery 3-up |
| Desktop | >900px | Centered ~720px column, gallery 4-up, globe at full size |

### Touch Targets
- Icon controls are 44px circles — comfortable taps for audio/dark-mode/globe
- Pill buttons use 12–14px vertical padding
- RSVP toggles are full-width on mobile, side-by-side on larger screens

### Collapsing Strategy
- Hero: serif names scale from 4px tracking down proportionally on small screens
- Countdown: 5-across → wraps to two rows on mobile
- Gallery: 4-up → 3-up → 2-up
- Floating controls stay pinned as circular glass chips at all sizes

### Image Behavior
- Photography is full-bleed and uses a `{colors.scrim-dark}` gradient wash where text overlaps
- Gallery thumbnails keep a consistent `{rounded.md}` radius and open to a full lightbox
- The interactive globe maintains aspect and centers within the hero at every breakpoint

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` with white tracked-caps label
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}` in Oranienbaum
- Body text: Ink Muted `{colors.ink-muted}` in Inter
- Hairline / border: `{colors.border}`
- Accent (rare): Lavender `{colors.accent}`
- Decline / warning: Alert Red `{colors.alert}`

### Example Component Prompts
- "Create a wedding hero: full-bleed photo with a dark scrim wash. Center the couple's names in Oranienbaum 32px, weight 400, letter-spacing 4px, white. Below, an Inter tracked-caps date at 12px weight 500, letter-spacing 2px."
- "Build an RSVP form: Inter body inputs with 6px radius and `{colors.border-soft}` outline (focus deepens to `{colors.ink}`). Accept/Decline toggle as two pills — accept solid `{colors.ink}` white text, decline outlined `{colors.border-strong}` muted text. Submit button: ink-filled full pill, white tracked-caps label, 14px 32px padding."
- "Design a countdown: five hairline-bordered cells (`{colors.border}`, 10px radius). Each shows a big Oranienbaum number (24px) over a `{typography.micro-caps}` unit label in `{colors.ink-tertiary}`."
- "Create a floating control: 44px circle, `{colors.surface-soft}` fill, Material Symbol icon centered in `{colors.ink}`. Used for audio, dark-mode, and globe navigation, and turns to translucent glass over photography."
- "Make a section header: Inter tracked-caps eyebrow in `{colors.ink-tertiary}`, then an Oranienbaum title at 24px, letter-spacing 2px, `{colors.ink}`, centered, with generous whitespace above and below."

### Iteration Guide
1. Serif titles always get positive tracking (1.5px–4px) — never tighten Oranienbaum
2. Keep Inter light (300/400); 500 only for tracked caps
3. The whole palette is grayscale — reach for the gray scale before any color
4. Lavender is a whisper; red means decline/warning and nothing else
5. Pills for buttons, circles for icons, hairlines for structure
6. Photography leads; chrome over media must be translucent glass

---

## 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 Jong & Jeong. Brand names and trademarks belong to their respective owners.