---
version: alpha
name: Driftime
description: Editorial impact-studio warmth — a cream paper canvas with deep ink navy text, a single warm amber accent, oversized serif display headlines paired with a clean grotesque body, generous whitespace and soft-radius cards that frame case-study imagery like a printed annual report.
colors:
  # Canvas + ink
  background: "#f6f3ec"
  surface: "#ffffff"
  surface-soft: "#efece3"
  ink: "#16213a"
  ink-secondary: "#4a5468"
  ink-muted: "#7a8295"

  # Accent — warm amber
  primary: "#e2a23b"
  primary-hover: "#c98930"
  accent-soft: "#f3e3c4"

  # Supporting brand tones
  navy-deep: "#0e1729"
  sage: "#7d8c6a"
  clay: "#c4633f"

  # Lines + neutrals
  border: "#ddd7c9"
  border-strong: "#c5beac"

  # On-color
  on-primary: "#16213a"
  on-ink: "#f6f3ec"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -1.6px
  display:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1.0px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.xl}"
    padding: 36px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Driftime Design System

## Overview

Driftime is a creative studio that helps mission-driven organizations turn insight into impact, and its website reads like a beautifully printed annual report rather than a typical agency site. The canvas is a warm cream paper tone (`{colors.background}`) rather than stark white, which immediately signals editorial warmth and human craft over cold corporate tech. Against that paper, deep ink navy text (`{colors.ink}`) carries the reading load with the calm authority of a serious publication.

The defining move is the typographic pairing: oversized serif display headlines set in a high-contrast literary serif (Fraunces) against a clean, neutral grotesque (Inter) for body and UI. Headlines run large and tightly tracked, giving the page a confident, magazine-cover gravity, while the sans-serif body keeps long-form case studies and service copy comfortable and legible. The serif carries personality; the sans carries clarity.

Color is used sparingly and with intent. A single warm amber accent (`{colors.primary}`) does the bright work — pull-quotes, highlights, small flourishes — while the heavy lifting of calls to action sits on the ink navy. Supporting earth tones (sage green, clay terracotta) appear only inside case-study imagery and project context, never as UI chrome. The result is a palette that feels organic and grounded, fitting a studio working on environmental and social impact.

Layout leans on generous whitespace, soft-radius cards, and full-bleed photography that frames client work like plates in a book. Borders are quiet hairlines in a warm taupe (`{colors.border}`), pills are fully rounded, and the overall rhythm is unhurried — confident enough to let the work and the words breathe.

**Key Characteristics:**
- Warm cream paper canvas (`{colors.background}`) instead of pure white — editorial, human warmth
- High-contrast serif display (Fraunces) paired with neutral grotesque body (Inter)
- Large, tightly-tracked serif headlines with magazine-cover gravity
- Single warm amber accent (`{colors.primary}`) used sparingly for highlights
- Earth-tone supporting palette (sage, clay) reserved for imagery, not chrome
- Deep ink navy (`{colors.ink}`) for both text and primary CTAs
- Generous whitespace and soft-radius cards framing case-study photography
- Quiet warm-taupe hairline borders; fully-rounded pill buttons and badges

## Colors

### Primary
- **Ink Navy** (`{colors.ink}`): Primary text, headings, dark CTA fills. Deep and warm, not pure black.
- **Cream Paper** (`{colors.background}`): Page canvas. Warm off-white that sets the editorial tone.
- **White** (`{colors.surface}`): Card and panel surfaces that lift off the paper canvas.

### Accent
- **Amber** (`{colors.primary}`): The single brand highlight — pull-quotes, accents, small CTAs.
- **Accent Soft** (`{colors.accent-soft}`): Tinted amber background for badges and highlight chips.

### Supporting (imagery only)
- **Navy Deep** (`{colors.navy-deep}`): Darkest navy for hover states and deep panels.
- **Sage** (`{colors.sage}`): Earth-green tone appearing in project imagery.
- **Clay** (`{colors.clay}`): Terracotta tone appearing in project imagery.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary body text, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, muted labels.

### Lines & Neutrals
- **Border** (`{colors.border}`): Quiet warm-taupe hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Heavier outline for inputs and secondary buttons.
- **Surface Soft** (`{colors.surface-soft}`): Subtle warm panel tint for feature blocks.

### On-Color
- **On Primary** (`{colors.on-primary}`): Ink navy text on the amber accent fill.
- **On Ink** (`{colors.on-ink}`): Cream text on dark navy fills.

## Typography

### Font Family
- **Display / Headings**: `Fraunces`, with fallbacks `Georgia, serif` — a high-contrast literary serif with optical sizing for editorial gravity.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — a neutral grotesque for clarity in long-form copy and interface text.

### 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` | 64px serif hero — book-cover impact |
| `display` | Large serif section openers |
| `section-heading` | Standard section titles |
| `card-title` | Case-study and feature card headings |
| `eyebrow` | Uppercase tracked labels above headings |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Dense UI text, secondary copy |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, image captions |

### Principles
- **Serif for voice, sans for clarity**: Fraunces carries the brand's editorial personality in headlines; Inter handles everything functional.
- **Tight display tracking**: Serif headlines run with mild negative letter-spacing (-1.6px at 64px) for a composed, printed feel.
- **Uppercase eyebrows**: Small Inter labels with +1.5px tracking introduce sections, a classic editorial device.
- **Restrained weights**: Fraunces at 500 (medium), Inter at 400/500/600 — no heavy blacks; the gravity comes from scale, not weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is generous, with large jumps (`{spacing.2xl}`–`{spacing.4xl}`) between major sections to give the page an unhurried, gallery-like cadence.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: single-column with an oversized serif headline and generous top padding
- Case studies: alternating image/text rows and 2-column feature grids
- Full-bleed photography breaks the container for visual impact

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical padding between sections lets the work and copy stand alone.
- **Paper warmth**: The cream canvas plus white card surfaces create gentle, low-contrast depth instead of hard shadow.
- **Image as plate**: Case-study photography is framed like plates in a printed report, with soft radius and quiet borders.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inline chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | List items, small cards |
| `lg` | 20px | Standard cards |
| `xl` | 32px | Feature panels, large imagery frames |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Ink navy fill, cream text, full pill. The default CTA.
- **`button-accent`** — Amber fill, navy text, full pill. Used for emphasis moments.
- **`button-secondary`** — Cream surface with a warm-taupe outline. Quiet secondary action.

### Badges
- **`badge`** — Soft amber background, ink text, full pill, uppercase tracked label.

### Cards
- **`card`** — White surface lifting off the paper canvas, soft `{rounded.lg}`, quiet border.
- **`card-feature`** — Warm tinted panel, larger `{rounded.xl}`, serif card title for case studies.

### Inputs
- **`input`** — White surface, warm-taupe border. Focus shifts the border to amber (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Cream sticky header. Inter 15px links, ink text, quiet bottom hairline.

## Do's and Don'ts

### Do
- Use the cream paper canvas (`{colors.background}`), not pure white — the warmth is the brand
- Pair Fraunces serif display with Inter sans body
- Let headline gravity come from scale and the serif, not heavy weights
- Use the amber accent (`{colors.primary}`) sparingly, for highlights and emphasis
- Keep earth tones (sage, clay) inside imagery, never in UI chrome
- Frame case-study photography with soft radius and quiet borders
- Use uppercase tracked eyebrows above section headings

### Don't
- Don't introduce a stark white background — it breaks the paper warmth
- Don't use heavy black serif weights — 500 is the display weight
- Don't let the amber accent dominate; it's a highlight, not a field color
- Don't use sage or clay as button or chrome colors
- Don't add hard, high-contrast drop shadows — depth is soft and paper-like
- Don't replace the serif headlines with a sans — the serif carries the voice

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, stacked image/text rows |
| Tablet | 600–1024px | 2-column feature grids begin, expanded padding |
| Desktop | 1024–1200px | Full layout, alternating case-study rows |
| Large Desktop | >1200px | Centered container, generous side margins, full-bleed imagery |

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav links at 15px with adequate spacing
- Badges use 6px vertical padding for tap comfort

### Collapsing Strategy
- Hero: serif display 64px → scales down, maintains tight tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature grids: 2-column → single column
- Case-study rows: side-by-side image/text → stacked
- Section spacing: 96px+ → ~56px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page canvas: Cream Paper `{colors.background}`
- Heading text: Ink Navy `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Ink Navy `{colors.ink}` fill, cream text
- Accent / highlight: Amber `{colors.primary}`
- Borders: warm-taupe `{colors.border}`

### Example Component Prompts
- "Create a hero on a cream `{colors.background}` canvas. Headline in Fraunces 64px weight 500, line-height 1.04, letter-spacing -1.6px, color `{colors.ink}`. Above it an uppercase Inter eyebrow at 13px, +1.5px tracking, `{colors.ink-muted}`. Lead paragraph in Inter 20px `{colors.ink-secondary}`. Pill CTA in ink navy with cream text."
- "Design a case-study card: white `{colors.surface}` background, 20px radius, quiet `{colors.border}` outline, 28px padding. Title in Fraunces 24px weight 500 `{colors.ink}`, body in Inter 17px `{colors.ink-secondary}`."
- "Build an amber badge: `{colors.accent-soft}` background, `{colors.ink}` text, full pill, uppercase Inter 13px weight 600 with +1.5px tracking."
- "Create navigation: cream sticky header, Inter 15px weight 500 ink links, quiet bottom hairline `{colors.border}`, ink-navy pill CTA right-aligned."

### Iteration Guide
1. Start from the cream paper canvas — white surfaces lift off it for cards
2. Serif (Fraunces) for headlines, sans (Inter) for everything else
3. Headline weight stays at 500; gravity comes from size and tracking
4. Amber is a highlight accent only — never a large field color
5. Earth tones live in photography, not in UI chrome
6. Depth is soft and paper-like; avoid hard shadows

---

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