---
version: alpha
name: Nate Gagnon
description: Quiet, gallery-grade minimalism on a near-black canvas — a designer's portfolio where a single soft-white ink, restrained grayscale chrome, and one muted accent let the work carry the page. Generous whitespace, hairline borders, and a calm sans-serif define the system.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#111111"
  surface-soft: "#161616"
  ink: "#f5f5f5"
  ink-secondary: "#a3a3a3"
  ink-muted: "#6b6b6b"

  # Accent — used sparingly for links / interactive cues
  primary: "#e8e6e1"
  accent-warm: "#c9a98a"

  # Neutral scale
  gray-900: "#0f0f0f"
  gray-800: "#1a1a1a"
  gray-700: "#242424"
  gray-600: "#3a3a3a"
  gray-500: "#555555"
  gray-400: "#7a7a7a"
  gray-300: "#a3a3a3"

  # Chrome
  border: "#242424"
  border-strong: "#3a3a3a"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px
  mono-caption:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  link-muted:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px
    borderColor: "{colors.border}"
  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
---

# Nate Gagnon Design System

## Overview

Nate Gagnon's portfolio is an exercise in subtraction. The page sits on a near-black canvas (`{colors.background}`) — not pure black, but a soft `#0a0a0a` that keeps the screen from feeling like a void — and lets a single soft-white ink (`{colors.ink}`) carry nearly all of the type. There is no decorative color, no gradient wash, no card chrome competing for attention. The work, the imagery, and the negative space around them do the talking. This is the visual logic of a designer who trusts white space and contrast restraint more than ornament.

The type system is one calm sans-serif (Inter as the close stand-in for the site's neutral grotesque) used across the whole hierarchy, leaning on weight and size rather than family-switching to build rhythm. Headlines use a measured negative tracking (-1.0px to -1.6px) that tightens the largest type just enough to feel intentional and modern without the aggressive compression of an engineering brand. Body copy relaxes to neutral tracking and an open 1.6 line-height, so reading passages breathe against the dark field.

Chrome is reduced to hairlines. Borders are a barely-there `{colors.border}` (`#242424`) — visible enough to define a card edge or a nav underline, quiet enough to disappear at a glance. Surfaces step up from the canvas in tiny increments (`{colors.surface}`, `{colors.surface-soft}`) rather than with shadow, so depth reads as a whisper of lightness, not elevation. The one warm note in the palette (`{colors.accent-warm}`) is held in reserve for the rare interactive or editorial accent.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with soft-white ink (`{colors.ink}`) — calm, gallery contrast, never pure-black harshness
- Single neutral sans-serif across the whole hierarchy; rhythm from weight + size, not family-switching
- Measured negative tracking on display type (-1.0px to -1.6px), neutral tracking on body
- Hairline borders (`{colors.border}`) instead of shadows — depth as a whisper of surface lightness
- Restrained grayscale chrome; one warm accent (`{colors.accent-warm}`) held in reserve
- Generous whitespace and large section rhythm — the work, not the UI, is the subject
- Mono used only for small captions / technical labels

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): Page background. Soft near-black, not pure `#000`.
- **Surface** (`{colors.surface}`): Card and panel fill, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Secondary panels, hover surfaces.
- **Ink** (`{colors.ink}`): Primary text, headings — soft white for low-glare reading.
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Disabled, timestamps, least-emphasis labels.

### Accent
- **Primary** (`{colors.primary}`): Warm off-white used for filled CTAs and emphasis on dark.
- **Accent Warm** (`{colors.accent-warm}`): Rare editorial/interactive warm note.

### Neutral Scale
- **Gray 900–300** (`{colors.gray-900}` → `{colors.gray-300}`): Surface steps, borders, and muted text from darkest to lightest.

### Chrome
- **Border** (`{colors.border}`): Hairline card/divider edges.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons, inputs, emphasized edges.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a neutral grotesque carrying the whole hierarchy.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — captions and technical labels only.

### 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` | 56px hero / name statement |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, project leads |
| `card-title` | Project / card titles |
| `body-large` | Intro paragraphs |
| `body` | Standard reading text |
| `body-small` | Captions, supporting copy |
| `label` | Nav, buttons, small UI labels |
| `mono-caption` | Technical labels, tags, timestamps |

### Principles
- **One family, many roles**: Hierarchy comes from weight (400 read, 500 announce) and size, not from switching typefaces.
- **Tracking scales with size**: -1.6px at hero, -1.0px at section, easing to neutral by body.
- **Open body line-height (1.6)**: Reading copy breathes against the dark canvas.
- **Mono is a spice, not a staple**: Reserved for small captions and labels.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a deliberate jump from `{spacing.3xl}` (64px) to `{spacing.4xl}` (120px) for full-page section breathing room.

### Grid & Container
- Max content width: approximately 1100–1200px, centered with generous margins.
- Hero: single column, large top padding, name/statement leading.
- Work: simple 1–2 column project grid with ample gutters.

### Whitespace Philosophy
- **Negative space as material**: Large vertical gaps between sections; the dark field around content is the composition.
- **No shadow depth**: Separation comes from hairline borders and tiny surface steps, never drop shadows.
- **Calm rhythm**: Consistent, unhurried spacing — nothing crowds the work.

## Components

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

### Buttons
- **`button-primary`** — Warm off-white fill (`{colors.primary}`), dark text, pill radius. The single high-emphasis action.
- **`button-secondary`** — Transparent on canvas with a `{colors.border-strong}` hairline outline.

### Cards
- **`card`** — Surface fill one step above canvas, hairline border, `{rounded.lg}` corners, no shadow.
- **`card-project`** — Lighter project tile with image and title.

### Navigation
- **`nav-bar`** — Minimal top bar, label-sized links, hairline bottom border.

### Tags & Inputs
- **`tag`** — Mono caption on a quiet surface pill with hairline border.
- **`input`** — Surface fill, `{colors.border-strong}` outline, small body text.

## Do's and Don'ts

### Do
- Use the soft near-black `{colors.background}`, never pure `#000`.
- Carry the hierarchy with one sans-serif, varying weight and size.
- Use hairline borders (`{colors.border}`) for separation instead of shadows.
- Keep negative tracking proportional to size; relax to neutral by body.
- Hold the warm accent (`{colors.accent-warm}`) in reserve — let it be rare.

### Don't
- Don't introduce decorative color or gradients into the UI chrome.
- Don't use drop shadows for depth — step the surface lightness instead.
- Don't crowd the work; generous whitespace is the system.
- Don't switch type families to build hierarchy.
- Don't set primary text below `{colors.ink-secondary}` contrast for reading copy.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section spacing |
| Tablet | 600–1024px | 1–2 column work grid begins |
| Desktop | 1024–1200px | Full centered layout, max margins |
| Large | >1200px | Centered with generous side gutters |

### Collapsing Strategy
- Hero: 56px → scales down, maintains proportional negative tracking.
- Work grid: 2-column → single column with full-width tiles.
- Section spacing: 120px → ~64px on mobile.
- Nav: inline labels → compact / minimal toggle.

### Image Behavior
- Project imagery maintains hairline borders and aspect ratio at all sizes.
- Full-bleed media keeps edge-to-edge treatment on mobile.

---

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