---
version: alpha
name: J Sandrieu
description: Editorial portfolio minimalism — ABC Arizona Flare display serif at billboard scale (173px) with tight negative tracking, warm cream canvas (#f1f0ec) instead of cold white, near-black warm ink, and a calm Inter/Circular body voice. Type-as-art-direction with zero chrome.

colors:
  # Canvas + ink
  background: "#f1f0ec"      # warm cream canvas
  surface: "#fdfefc"         # near-white panel, slightly cool
  surface-warm: "#f1f0ed"    # alt warm surface
  ink: "#1a1a1a"             # warm near-black, headings + body
  ink-strong: "#1d1d1d"      # rgb(29,29,29) primary text runs
  ink-soft: "#3d3c39"        # warm muted secondary text
  ink-muted: "#636363"       # tertiary / captions
  ink-pure: "#000000"        # hairlines, marks

  # Inverse / on-dark
  on-ink: "#ffffff"
  overlay-ink: "#1b1b1b"     # was rgba(27,27,27,0.9) — flattened over cream

  # Accent (restrained — warm ink doubles as the only "accent")
  primary: "#1a1a1a"         # primary action = ink, editorial restraint
  on-primary: "#f1f0ec"

  # Hairlines
  border: "#3d3c39"
  border-soft: "#d9d8d3"     # cream-derived divider

typography:
  display-hero:
    fontFamily: "ABC Arizona Flare, Playfair Display, Georgia, serif"
    fontSize: 173px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.05em
  display-large:
    fontFamily: "ABC Arizona Flare, Playfair Display, Georgia, serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.04em
  heading:
    fontFamily: "ABC Arizona Flare, Playfair Display, Georgia, serif"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.04em
  sub-heading:
    fontFamily: "ABC Arizona Flare, Playfair Display, Georgia, serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.04em
  body:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  body-medium:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  label:
    fontFamily: "Circular Std, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em

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: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"

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

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

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border}"

  footer:
    backgroundColor: "{colors.overlay-ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body}"
    padding: 64px 40px
---

# J Sandrieu Design System

## Overview

J Sandrieu's portfolio is editorial minimalism with the warmth turned up. Where most "clean" designer portfolios reach for cold white and a neutral sans, this site lays its work over a warm cream canvas (`{colors.background}`) — paper, not screen — and lets a single display serif carry the entire personality. The result reads less like a website and more like the cover of a quiet, expensive magazine.

The typographic move is the whole system. ABC Arizona Flare, a contemporary flared serif, runs at genuinely billboard scale (up to 173px) with tight negative tracking (`-0.05em`), so the name and headlines feel like set type rather than UI labels. The flare in the letterforms adds a handmade, literary edge that a geometric sans could never. Body and interface copy retreat into a calm, unobtrusive Inter / Circular Std voice at 18px, deliberately small and quiet so the serif never has to compete.

Color is almost absent by design. The palette is three warm neutrals — cream canvas, warm near-black ink (`{colors.ink}`), and a muted warm gray (`{colors.ink-soft}`) for secondary text. There is no brand accent; the ink itself is the only "color," and it doubles as the primary action color. Chrome is stripped to nothing: no rounded cards, no shadows, no borders unless a hairline is structurally needed. Square corners throughout reinforce the editorial, print-derived feeling.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of cold white — paper, not screen
- ABC Arizona Flare display serif at billboard scale (up to 173px) with tight negative tracking
- Quiet Inter / Circular Std body voice at 18px — never competes with the serif
- Near-zero chrome: square corners, no shadows, hairlines only when structural
- Achromatic warm-neutral palette; ink doubles as the only accent
- Type-as-art-direction: hierarchy comes from scale and tracking, not color or weight

## Colors

### Canvas & Ink
- **Cream Canvas** (`{colors.background}`): The signature warm off-white page background.
- **Warm White** (`{colors.surface}`): Slightly cooler near-white for panels and image mats.
- **Warm Ink** (`{colors.ink}`): Headings and body — warm near-black, never pure black for runs.
- **Strong Ink** (`{colors.ink-strong}`): Primary reading text.
- **Soft Ink** (`{colors.ink-soft}`): Muted warm-gray secondary text.
- **Muted Ink** (`{colors.ink-muted}`): Tertiary text and captions.

### Inverse
- **On Ink** (`{colors.on-ink}`): White text on dark footer / overlay.
- **Overlay Ink** (`{colors.overlay-ink}`): Dark footer surface (flattened from the 90% warm-black overlay).

### Action
- **Primary** (`{colors.primary}`): Action color = ink. Editorial restraint, no separate accent.

### Hairlines
- **Border** (`{colors.border}`): Warm hairline for inputs and outlined buttons.
- **Border Soft** (`{colors.border-soft}`): Cream-derived divider for subtle separation.

## Typography

### Font Family
- **Display**: `ABC Arizona Flare` (flared serif), fallbacks `Playfair Display, Georgia, serif`
- **Body / UI**: `Inter`, fallback `sans-serif`
- **Labels**: `Circular Std` (bold), fallback `Inter, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 173px name / hero — billboard editorial impact |
| `display-large` | 52px major headlines |
| `heading` | 45px section headings |
| `sub-heading` | 35px sub-sections |
| `body` | 18px standard reading text |
| `body-medium` | 16px emphasized UI text |
| `label` | 16px bold Circular Std nav / button labels |
| `caption` | 12px metadata, fine print |

### Principles
- **One serif carries everything**: ABC Arizona Flare owns every headline; hierarchy comes from scale, not new typefaces.
- **Tight tracking at scale**: Display sizes use `-0.04em` to `-0.05em` so large type sets like print, not UI.
- **Quiet body**: 18px Inter at `0em` tracking — calm and unobtrusive beneath the serif.
- **Restraint over weight**: Display runs at weight 400; emphasis is achieved through size and the flare, not bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous editorial rhythm — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` of vertical air.

### Grid & Container
- Centered single-column editorial spine with wide margins
- Hero: oversized serif set large, often left-aligned for an editorial feel
- Work index: full-bleed imagery interleaved with quiet caption blocks
- Hairline dividers (`{colors.border-soft}`) only where structure demands

### Whitespace Philosophy
- **Paper-like calm**: The warm cream canvas plus massive whitespace makes the page feel printed.
- **Type does the work**: Negative space frames oversized serif headlines; no decorative chrome competes.
- **Square and flat**: No rounding, no shadows — depth comes from imagery and scale alone.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, images (editorial square corners) |
| `xs` | 2px | Rare micro-rounding |
| `sm` | 4px | Small functional elements |
| `md` | 8px | Occasional softened container |
| `pill` | 9999px | Reserved for rare tags |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, cream text, square corners, Circular Std bold label.
- **`button-secondary`** — Cream surface, ink text, warm hairline border, square corners.

### Cards
- **`card`** — Warm-white surface, square corners, no shadow, soft cream divider. Imagery does the lifting.

### Navigation
- **`nav-bar`** — Cream background, bold serif/Circular label links, generous padding, no border.

### Inputs
- **`input`** — Warm-white surface, square corners, warm hairline border.

### Footer
- **`footer`** — Dark warm-ink surface with white text — the one inverted moment on the page.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`) — never cold pure white for the page
- Set ABC Arizona Flare large with tight negative tracking (`-0.04em` to `-0.05em`)
- Keep body copy quiet: 18px Inter, `0em` tracking, warm ink
- Keep corners square and surfaces flat — editorial, print-derived
- Let imagery and scale create hierarchy; keep the palette achromatic-warm

### Don't
- Don't introduce a colored brand accent — ink is the accent
- Don't use pure black (`{colors.ink-pure}`) for text runs; use warm `{colors.ink}`
- Don't round cards or buttons by default — square is the identity
- Don't add shadows or heavy chrome
- Don't let body copy compete with the serif — keep it small and calm

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down sharply but keeps tight tracking |
| Tablet | 600–1024px | Wider margins, larger serif |
| Desktop | >1024px | Full billboard-scale hero, generous editorial margins |

### Collapsing Strategy
- Hero serif: 173px → fluidly scales down on mobile, tracking held proportionally
- Work index: side-by-side image/caption → stacked single column
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile
- Footer: multi-column → stacked

### Image Behavior
- Full-bleed or wide-mat imagery; square corners maintained at all sizes
- No border treatment — imagery sits directly on the cream canvas

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream `{colors.background}`
- Heading text: Warm Ink `{colors.ink}`
- Body text: Strong Ink `{colors.ink-strong}` / Soft Ink `{colors.ink-soft}`
- Primary CTA: Ink `{colors.ink}` with cream text
- Divider: `{colors.border-soft}`

### Example Component Prompts
- "Create an editorial hero on a warm cream (`{colors.background}`) background. Headline in ABC Arizona Flare at 173px, weight 400, line-height 0.95, letter-spacing -0.05em, color `{colors.ink}`. Subtitle in Inter 18px weight 400, color `{colors.ink-soft}`."
- "Design a square-cornered card: warm-white (`{colors.surface}`) surface, no shadow, `{colors.border-soft}` hairline divider, 32px padding. Title in ABC Arizona Flare 35px, body in Inter 18px `{colors.ink-strong}`."
- "Build a primary button: ink (`{colors.ink}`) fill, cream (`{colors.on-primary}`) text, square corners, Circular Std bold 16px label, 14px 28px padding."

### Iteration Guide
1. Warm cream canvas first — it sets the entire paper-like mood
2. One serif (ABC Arizona Flare) carries all headlines; scale + tracking are the only hierarchy tools at display sizes
3. Keep body copy small and quiet so the serif dominates
4. Square corners, no shadows — depth lives in imagery and whitespace
5. No colored accent — warm ink is the brand color

---

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