---
version: alpha
name: Ossa
description: Editorial wine-estate minimalism — a warm off-white paper canvas, deep ink-brown text, and a single earthen clay accent. Large serif display headlines set in tight measured columns, generous gallery whitespace, and understated hairline-bordered ghost buttons that let landscape photography carry the page.
colors:
  # Canvas + ink
  background: "#f4f0e8"
  surface: "#faf7f1"
  surface-soft: "#ece6da"
  ink: "#2b251e"
  ink-secondary: "#5a5046"
  ink-muted: "#8a7f70"

  # Earthen accent — clay/terracotta from the Tasmanian soil palette
  primary: "#9c5a3c"
  primary-hover: "#7e4730"
  accent-sage: "#6b6f5a"

  # Lines + neutrals
  border: "#d8cfbf"
  border-strong: "#bdb09a"

  # On-color
  on-primary: "#faf7f1"
  on-ink: "#f4f0e8"

  # Selection / overlay
  selection: "#e3dccb"
  overlay-backdrop: "#2b251e"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.5px
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.25px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2.4px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.75
    letterSpacing: 0.2px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0.2px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.2px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.8px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 31px
    borderColor: "{colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 31px
    borderColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 6px 12px

  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
---

# Ossa Design System

## Overview

Ossa is a Tasmanian wine estate whose website behaves like a printed lookbook — the design recedes so the landscape photography can speak. The canvas is never pure white; it is a warm, paper-toned off-white (`{colors.background}`) that reads like uncoated stock, grounding the brand in soil and craft rather than tech. Text is a deep ink-brown (`{colors.ink}`) rather than black, softening the contrast into something closer to letterpress than screen.

The typographic voice is the brand. Large serif display headlines (Cormorant Garamond, a high-contrast Garalde) are set at generous sizes with tight leading and near-neutral tracking, evoking the editorial confidence of a wine label or a fine-press masthead. Against this, a light-weight geometric sans (Jost) carries body copy, eyebrows, and UI labels in widely-tracked uppercase — the quiet, technical counterpoint that keeps the page from feeling nostalgic.

Color is almost entirely restrained to the paper-and-ink pairing. A single earthen clay accent (`{colors.primary}`) — pulled from terracotta soil and barrel tones — appears sparingly on eyebrow labels and hover states, never as decoration. A muted sage (`{colors.accent-sage}`) is the only other chromatic note, reserved for the rare botanical or vineyard reference.

Structurally, the page is built on gallery whitespace and hairline rules. There are no rounded corners, no shadows, and no fills competing with the imagery — buttons are square ghost outlines, cards are bordered or simply floated on the canvas, and section breaks are pure negative space. Restraint is the entire aesthetic.

**Key Characteristics:**
- Warm paper off-white canvas (`{colors.background}`) — never pure white
- Deep ink-brown text (`{colors.ink}`) instead of black — letterpress softness
- Cormorant Garamond serif display at large sizes, tight leading
- Jost light geometric sans for body + widely-tracked uppercase UI labels
- A single earthen clay accent (`{colors.primary}`) used sparingly
- Sharp 0px corners on everything — no rounding, no shadows
- Ghost outline buttons in uppercase tracked sans
- Gallery whitespace and hairline rules carry all structure

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas. Reads like uncoated stock.
- **Surface** (`{colors.surface}`): Slightly lighter warm tone for cards and inputs.
- **Surface Soft** (`{colors.surface-soft}`): Muted band for subtle section separation and badges.
- **Ink** (`{colors.ink}`): Primary text and dark CTAs — a deep warm brown, not black.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, disabled text.

### Accent
- **Clay** (`{colors.primary}`): Earthen terracotta accent — eyebrow labels, hover states, sparse emphasis.
- **Clay Hover** (`{colors.primary-hover}`): Darker clay for pressed/hover.
- **Sage** (`{colors.accent-sage}`): Muted botanical green for rare vineyard references.

### Lines & On-Color
- **Border** (`{colors.border}`): Hairline rules, card outlines, dividers.
- **Border Strong** (`{colors.border-strong}`): Input outlines, emphasized rules.
- **On Primary** (`{colors.on-primary}`): Text over clay fill.
- **On Ink** (`{colors.on-ink}`): Paper-toned text over ink fill.

## Typography

### Font Family
- **Display / Serif**: `Cormorant Garamond`, fallbacks `Georgia, serif` — high-contrast Garalde for all headings.
- **Text / Sans**: `Jost`, fallbacks `Helvetica Neue, Arial, sans-serif` — light geometric grotesque for body, eyebrows, and UI.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero statement |
| `display` | 48px major section openers |
| `section-heading` | 36px section titles |
| `card-title` | 24px product / card headings |
| `eyebrow` | 12px tracked uppercase clay labels |
| `body-large` | 19px lead / intro paragraphs |
| `body` | 16px standard reading text |
| `body-small` | 14px captions, fine print |
| `button-ui` | 13px tracked uppercase button + nav labels |
| `caption` | 12px metadata, badges |

### Principles
- **Serif announces, sans informs**: Cormorant carries every headline; Jost carries everything functional.
- **Light by default**: Body copy is weight 300 — airy and editorial, never bold.
- **Tracked uppercase for UI**: Eyebrows, buttons, and nav use wide letter-spacing (1.8px–2.4px) in uppercase — the only "loud" typographic move.
- **Tight serif leading**: Display headlines sit at 1.08–1.2 line-height for a printed, composed feel.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base rhythm is 8px, scaling generously to `{spacing.4xl}` (160px) for between-section gallery gaps.

### Grid & Container
- Max content width ~1280px, with text columns constrained narrower (~640px) for readability.
- Hero: full-bleed landscape image with overlaid or stacked serif statement.
- Sections: single wide column or simple 2-up image/text splits.
- Generous top and bottom padding — sections breathe.

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical space (`{spacing.3xl}`–`{spacing.4xl}`) lets photography dominate.
- **Hairlines over fills**: Separation comes from `{colors.border}` rules and negative space, never colored bands.
- **No depth**: Zero shadows. The page is flat, like a printed spread.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, images — the default |
| `xs` | 2px | Rare micro-elements |
| `sm` | 4px | Small functional containers |
| `md` | 6px | Reserved |
| `pill` | 9999px | Reserved (rarely used) |

Sharp corners everywhere. Roundness would break the printed, archival character.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Ink fill, paper text, square. Hovers to clay accent.
- **`button-ghost`** — Transparent paper with a 1px ink outline, uppercase tracked label. Inverts to solid ink on hover. The signature CTA.

### Cards
- **`card`** — Warm surface with a hairline `{colors.border}` outline, square, generous padding.
- **`card-product`** — Minimal product container; serif title over image, no chrome.

### Inputs
- **`input`** — Surface fill, `{colors.border-strong}` underline-weight outline, square. Focus darkens border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — Paper background, ink uppercase tracked links, no border. Logo centered or left, sparse menu.

### Labels
- **`eyebrow-label`** — Clay (`{colors.primary}`), 12px tracked uppercase — the small editorial kicker above headings.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`), never pure white.
- Use ink-brown (`{colors.ink}`) for text, not black.
- Set headlines in Cormorant serif; keep everything functional in Jost.
- Use tracked uppercase for eyebrows, buttons, and nav.
- Let photography and whitespace carry the page.
- Keep all corners at 0px.

### Don't
- Don't add shadows or rounded corners.
- Don't use the clay accent (`{colors.primary}`) as a background fill or decoration.
- Don't bold body copy — light (300) is the resting weight.
- Don't introduce a second serif or a bright competing color.
- Don't crowd sections — whitespace is the design.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales to ~40px, stacked nav |
| Tablet | 600–1024px | 2-up splits begin, padding expands |
| Desktop | 1024–1280px | Full layout, max content width |
| Large | >1280px | Centered with generous side margins |

### Collapsing Strategy
- Hero serif: 64px → ~40px on mobile, tracking preserved.
- Nav: horizontal tracked links → hamburger.
- 2-up image/text splits → stacked single column.
- Section spacing: 160px → ~64px on mobile.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent: Clay `{colors.primary}` (eyebrows + hover only)
- Borders: `{colors.border}`

### Example Component Prompts
- "Hero on warm paper `{colors.background}`. Eyebrow in clay `{colors.primary}`, 12px Jost uppercase, 2.4px tracking. Headline in Cormorant Garamond 64px weight 400, line-height 1.08, ink `{colors.ink}`. Ghost button below: transparent, 1px ink outline, 13px Jost uppercase 1.8px tracking, 16px 32px padding, 0px radius."
- "Product card: warm surface `{colors.surface}`, no shadow, square corners. Serif title 24px Cormorant. Body 16px Jost weight 300 in `{colors.ink-secondary}`."
- "Newsletter input: surface fill, 1px `{colors.border-strong}` outline, square, 14px 16px padding; focus darkens border to `{colors.ink}`."

### Iteration Guide
1. Off-white paper canvas + ink-brown text is the foundation — never pure white/black.
2. Serif for headlines, light sans for everything else.
3. Tracked uppercase is the only "loud" typographic move.
4. Zero radius, zero shadow — flat and printed.
5. Clay accent is a seasoning, never a fill.

---

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