---
version: alpha
name: Savoir Faire
description: Editorial studio minimalism — near-black ink on warm off-white paper, a single electric "volt" yellow-green accent, oversized grotesque headlines with tight tracking, and interactive cursor-driven playfulness over a near-borderless, grid-quiet canvas.
colors:
  # Canvas + ink
  background: "#f4f3ee"
  surface: "#ffffff"
  surface-soft: "#eceae3"
  ink: "#0a0a0a"
  ink-pure: "#000000"
  ink-secondary: "#525252"
  ink-muted: "#8a8a85"

  # Volt accent — the single brand color
  primary: "#d6f84c"
  primary-deep: "#b6df1f"
  on-primary: "#0a0a0a"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-700: "#363636"
  gray-500: "#525252"
  gray-400: "#8a8a85"
  gray-200: "#d6d4cc"
  gray-100: "#e6e4dd"

  # Interactive
  link: "#0a0a0a"
  focus-ring: "#b6df1f"
  border-subtle: "#d6d4cc"

  # On-color
  on-ink: "#f4f3ee"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1px

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

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

components:
  # Primary volt CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Dark inverse CTA
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Ghost / outline button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Mono tag / label pill
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Project card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-subtle}"

  # Featured / image card (borderless, image-led)
  card-featured:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px

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

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 20px 32px

  # Mono eyebrow label
  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"
---

# Savoir Faire Design System

## Overview

Savoir Faire is a New York product studio, and its site reads like the work of people who design and build for a living: confident, editorial, and quietly experimental. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical pure white, giving the page the feel of a printed magazine spread instead of a SaaS dashboard. Near-black ink (`{colors.ink}`) carries almost all the type, and a single electric "volt" yellow-green (`{colors.primary}`) does all the accenting — one color, used with discipline, so it always reads as intentional.

The typographic identity is the loudest move. Oversized condensed grotesque headlines (`{typography.display-hero}` at 96px) anchor each section like cover type, set tight with negative tracking so the words feel packed and physical. Underneath them, a humanist geometric sans (Space Grotesk family) handles section headings and body copy, and a monospace (Space Mono family) handles eyebrows, captions, and metadata — the "studio voice" that labels work with the matter-of-factness of a contact sheet. The tagline "Knowing by doing" sets the tone: craft stated plainly, never decorated.

What makes the site distinctive is its playfulness layered over restraint. The live site leans into interactive, cursor-driven moments — clickable stars, custom cursors, rotate-your-phone prompts, animated trackers — but the underlying chrome stays disciplined: borderless image cards, generous whitespace, near-zero shadow, and a grid that breathes. The volt accent appears as the reward color on primary actions and highlights, against an otherwise achromatic warm-neutral system.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white — editorial, not clinical
- A single "volt" yellow-green accent (`{colors.primary}`) used sparingly as the reward color
- Oversized condensed grotesque display type (96px) with tight negative tracking
- Monospace (`{typography.label-mono}`) for eyebrows, captions, and studio metadata
- Borderless, image-led project cards with generous whitespace
- Near-zero shadow — depth comes from spacing and the paper tone, not elevation
- Pill-shaped buttons in volt, ink, or ghost variants
- Interactive, cursor-driven playfulness over a quiet structural grid

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Primary text, headlines, dark CTAs. Near-black with a hair of warmth.
- **Paper** (`{colors.background}`): Page canvas — warm off-white, the editorial base.
- **White** (`{colors.surface}`): Card surfaces that need to lift off the paper.

### Accent
- **Volt** (`{colors.primary}`): The single brand color. Primary CTA fills, highlights, interactive accents.
- **Volt Deep** (`{colors.primary-deep}`): Hover/active state of the volt accent; also the focus ring.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headlines, primary text.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.ink-secondary}`): Body secondary, captions.
- **Gray 400** (`{colors.ink-muted}`): Eyebrows, muted metadata, placeholders.
- **Gray 200** (`{colors.gray-200}`): Subtle borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Faint hairlines, soft fills.

### Surface
- **Surface Soft** (`{colors.surface-soft}`): Tinted card/badge fill a step off the paper tone.
- **Border Subtle** (`{colors.border-subtle}`): The default hairline border where a border is used at all.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque), fallbacks `Oswald, Arial Narrow, sans-serif`
- **Primary**: `Space Grotesk`, fallbacks `Helvetica Neue, Arial, sans-serif`
- **Monospace**: `Space Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### 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` | 96px condensed cover headline |
| `display` | 64px secondary display |
| `section-heading` | Section titles, Space Grotesk |
| `sub-heading` | Sub-sections |
| `card-title` | Project/feature card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, links |
| `label-mono` | Eyebrows, nav, studio metadata |
| `caption` | Tiny mono captions, tags |

### Principles
- **Two voices, clear roles**: Condensed grotesque shouts (display), geometric sans speaks (body), monospace annotates (labels). Never blur the three.
- **Compression at scale**: Display type runs tight (-1.5px to -2px tracking) and short line-height (0.95) so headlines read as packed objects.
- **Mono as studio voice**: Uppercase-leaning monospace with loose tracking labels work the way a studio labels a print — matter-of-fact, never decorative.
- **Restraint on weight**: Space Grotesk lives at 400 (read) and 500 (announce); the display face supplies all the visual heft, so no heavy body weights are needed.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with an editorial jump to `{spacing.4xl}` (120px) for the large vertical breaks between sections.

### Grid & Container
- Max content width: approximately 1280px with generous side margins
- Hero: oversized display headline, near-edge-to-edge
- Work grid: 2-column borderless image cards on desktop, single column on mobile
- Wide gutters; the grid is felt through whitespace, not lines

### Whitespace Philosophy
- **Paper, not panel**: The warm off-white tone makes empty space feel intentional and printed rather than blank.
- **Big vertical breaks**: Sections separate by `{spacing.4xl}` (120px+) of air, not dividers.
- **Image-led**: Project imagery carries the layout; chrome recedes to near-invisibility.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, paper tone | Page background, text blocks, image cards |
| Hairline (Level 1) | `1px solid {colors.border-subtle}` | Optional card outline, inputs |
| Soft Lift (Level 2) | White surface on paper, no border | Cards that need to read as "above" the paper |

**Shadow Philosophy**: Savoir Faire largely refuses shadow. Depth is created by the contrast between white surfaces and the warm paper canvas, and by spacing — not by elevation. When separation is needed, a surface tone shift (`{colors.surface}` vs `{colors.background}`) does the job a shadow would elsewhere.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed image cards, dividers |
| `xs` | 4px | Tight inline elements |
| `sm` | 8px | Inputs, small containers |
| `md` | 12px | Standard containers |
| `lg` | 20px | Project cards, featured image cards |
| `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`** — Volt fill, ink text, full pill. The reward action.
- **`button-dark`** — Ink fill, paper text, full pill. Inverse CTA.
- **`button-ghost`** — Paper surface, 1px ink border, full pill. Secondary action.

### Pills & Badges
- **`badge`** — Soft surface fill, secondary ink text, monospace caption, full pill.

### Cards
- **`card`** — White surface on paper, 20px radius, optional hairline border.
- **`card-featured`** — Borderless, image-led, zero padding — image carries the card.

### Inputs
- **`input`** — White surface, subtle hairline border. Focus swaps the border to volt-deep (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — Paper background, monospace labels, ink text. Often paired with a volt or dark CTA at right.

### Distinctive Components
- **Mono eyebrow** (`{components.eyebrow}`): Muted monospace label above section headings — the studio annotation voice.
- **Interactive accents**: Clickable stars, custom cursors, and motion trackers that use volt as the highlight color over the quiet grid.

## Do's and Don'ts

### Do
- Use the warm paper tone (`{colors.background}`) as the canvas, not pure white
- Reserve volt (`{colors.primary}`) for the single most important action or highlight
- Set display headlines tight and condensed with negative tracking
- Use monospace for eyebrows, captions, and studio metadata
- Keep cards borderless and image-led where possible
- Create depth with spacing and surface tone, not shadow

### Don't
- Don't introduce a second accent color — volt stands alone
- Don't use volt as a large background fill or decorative wash — it's the reward color
- Don't put shadows on cards — let the paper/white contrast do the work
- Don't set body copy in the condensed display face — that's for headlines only
- Don't tighten body or mono tracking — keep it open and legible
- Don't replace pill buttons with sharp rectangles — the pill is the studio's button shape

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales to ~48px, vertical-only orientation prompt |
| Tablet | 600–1024px | 2-column work grid begins, padding expands |
| Desktop | 1024–1280px | Full layout, oversized display headlines |
| Large Desktop | >1280px | Centered max-width, generous margins |

### Touch Targets
- Pill buttons use 14px×28px padding for comfortable tap targets
- Nav and mono labels keep adequate spacing despite small size
- Interactive accents (stars/cursor) degrade gracefully to taps on touch

### Collapsing Strategy
- Hero: 96px display → ~48px on mobile, tracking scales proportionally
- Work grid: 2-column → single column
- Navigation: inline mono links → menu toggle
- Section spacing: 120px → ~64px on mobile
- Custom cursor effects disable on touch; orientation prompt appears in landscape

### Image Behavior
- Project images remain borderless and full-bleed within their cards at all sizes
- Image-led cards maintain aspect ratio and lead the layout on every breakpoint

---

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