---
version: alpha
name: "Buck"
description: "Global animation and design studio — pure white canvas, Mabry Pro at featherweight 100 in all-caps, and a deliberately monochrome shell that makes the colorful client work explode off the page"

colors:
  # Surface / canvas
  background: "#ffffff"           # pure white — the clean studio wall
  surface: "#f7f8fa"              # barely-off-white for subtle hover and card backgrounds
  surface-muted: "#f0f2f5"        # light panel fill, input backgrounds

  # Ink / text
  ink: "#000000"                  # primary text — absolute black, no softening
  ink-muted: "#6b7280"            # secondary text, captions, metadata
  on-dark: "#ffffff"              # text on dark/black surfaces

  # Neutral border — from Chakra's gray-200 default
  border: "#e2e8f0"               # hairline dividers, card edges, separator rules

  # State / interaction
  text-hover: "#000000"           # links fade opacity on hover rather than changing color
  # was rgba(0,0,0,0.71) — Google format requires hex; opacity applied via CSS transition
  focus-ring: "#000000"           # solid black focus outline

  # Shadow tint (system is flat — kept for elevation table completeness)
  shadow-soft: "#e2e8f0"          # was rgba(0,0,0,0.05) — near-transparent; approximated

typography:
  display-hero:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 70px
    fontWeight: 100
    lineHeight: 1.0
    letterSpacing: -1px
    fontFeature: "\"kern\""
  display:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 68px
    fontWeight: 100
    lineHeight: 1.0
    letterSpacing: -0.5px
    fontFeature: "\"kern\""
  heading-section:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 42px
    fontWeight: 100
    lineHeight: 1.1
    letterSpacing: -0.5px
    fontFeature: "\"kern\""
  heading-sub:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 29px
    fontWeight: 100
    lineHeight: 1.4
    letterSpacing: 0px
    fontFeature: "\"kern\""
  body-large:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 41px
    fontWeight: 100
    lineHeight: 1.4
    letterSpacing: 0px
    fontFeature: "\"kern\""
  body:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 29px
    fontWeight: 100
    lineHeight: 1.4
    letterSpacing: 0px
    fontFeature: "\"kern\""
  nav-link:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 100
    lineHeight: 1.2
    letterSpacing: 0.5px
    fontFeature: "\"kern\""
  button-ui:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.5px
  caption:
    fontFamily: "Mabry, Mabry Pro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 100
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 8px
  sm: 14px
  md: 21px
  lg: 29px
  xl: 36px
  2xl: 57px
  3xl: 72px
  4xl: 172px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    opacity: "0.71"
    rounded: "{rounded.pill}"
    padding: 10px 24px

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    borderWidth: 1px
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    opacity: "0.71"
    rounded: "{rounded.pill}"
    padding: 10px 24px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    opacity: "0.71"
    transition: "opacity 0.2s ease-in-out"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    opacity: "0.71"
    transition: "opacity 0.2s ease-in-out"

  project-tile:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    overflow: hidden
  project-tile-hover:
    opacity: "0.71"
    transition: "opacity 0.2s ease-in-out"

  input:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    padding: 10px 20px
  input-focus:
    borderColor: "{colors.ink}"
    outlineColor: "{colors.focus-ring}"
    outlineWidth: 2px

  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 14px 29px
---

# Buck Design System

## Overview

Buck's website is a white room. Not antiseptic — a gallery. The `{colors.background}` pure white canvas functions as a negative space from which client work erupts in full color: the LinkedIn Year in Review circular diagram, the Kia AI assistant interface, each thumbnail arriving as a surprise of saturation against the neutral shell. This is a deliberate editorial decision from a studio whose entire value proposition is spectacular visual output. The container must not compete.

The type system makes the same argument. Mabry Pro at `{typography.display-hero}` — weight 100, the thinnest setting the face allows — runs all uppercase, its strokes barely heavier than a ruled line. At 70px with tightly negative tracking, the letterforms feel less like text and more like structural scaffolding. The studio name BUCK, rendered at this weight, looks confident without trying — it does not shout, it states. This is the typographic register of a studio that has nothing to prove. Navigation links inherit the same featherweight treatment, sitting in the header as near-invisible guides. Only the `{typography.button-ui}` weight 600 breaks the pattern, used exclusively where action is required.

The system is flat in every technical sense: no shadows, no gradients, no hover color changes. Interaction is communicated through opacity — a link fades to `opacity: 0.71` on hover at `0.2s ease-in-out`, a quiet breath rather than a color swap. Borders are equally restrained, using `{colors.border}` Chakra's default gray-200 for structural separation without visual insistence. The result is a site that functions more like a presentation deck than a brand statement — a screen on which other brands' work is projected at its best.

**Key Characteristics:**
- Pure white `{colors.background}` canvas — a gallery wall for client work, never competing with project thumbnails
- Mabry Pro at `{typography.display-hero}` weight 100 uppercase — the thinnest the face allows, structural rather than expressive
- Single typeface system: Mabry Pro handles every scale from 70px display to 14px caption; only weight distinguishes hierarchy
- Opacity-only hover states: all interactive elements transition to `~0.71` at `0.2s ease-in-out` rather than changing color
- Binary radius: `{rounded.none}` for project grids and structural surfaces; `{rounded.pill}` for buttons exclusively
- Pure black `{colors.ink}` as the only non-white/grey in the native UI — all color lives in project imagery
- `{colors.border}` (`#e2e8f0`) Chakra default gray-200 as the only border tone — hairline rules with no visual weight
- Weight 600 reserved for `{typography.button-ui}` — the single moment of typographic mass in the system
- Flat elevation system — zero shadows, depth communicated through image contrast and whitespace
- Motion system at 0.2s ease-in-out on links and buttons; 0.75s for larger layout transitions

## Colors

### Primary Canvas & Surface
- **Pure White** (`{colors.background}`): The gallery wall — every project thumbnail, every section, the dominant canvas. No warmth, no tint. The neutrality is deliberate.
- **Barely Off-White** (`{colors.surface}`): Hover states and quiet panel fills — a one-step lift from the canvas with no perceived hue difference.
- **Light Panel** (`{colors.surface-muted}`): Input backgrounds, badge fills, suppressed UI panels.

### Text Hierarchy
- **Absolute Black** (`{colors.ink}`): All text, icons, borders, and the button fill. The only non-neutral color in the UI chrome. Pure, no softening.
- **Mid-Grey** (`{colors.ink-muted}`): Secondary labels, captions, metadata lines. `#6b7280` Tailwind/Chakra's default gray-500 equivalent.
- **White on Dark** (`{colors.on-dark}`): Text inside black button fills.

### Structure & States
- **Border** (`{colors.border}`): `#e2e8f0` — Chakra UI's gray-200, used for hairline separator rules and card edges. Invisible at normal reading distance.
- **Focus Ring** (`{colors.focus-ring}`): Solid black — matches the ink, keeps the UI monochromatic even in keyboard focus states.
- **Hover Text** (`{colors.text-hover}`): Hover changes opacity, not color — links retain `{colors.ink}` value but fade toward `~0.71` opacity.

## Typography

### Font Family
- **Only face**: `Mabry` (self-hosted `mabry-light-pro.woff`) with fallback stack `system-ui, -apple-system, Segoe UI, Roboto, sans-serif`. No secondary typeface. No mono alternative.
- **OpenType Features**: `"kern"` enabled on all display and heading instances. Standard kerning pair rendering throughout.
- *Note: Mabry Pro is a commercial typeface by Colophon Foundry. The closest Google Fonts substitute for weight 100 is **Outfit** (Thin) or **Plus Jakarta Sans** (Thin) — neither matches Mabry's humanist grotesque character precisely.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly.

| Token | Use |
|---|---|
| `display-hero` | Homepage title runs, brand name, section anchors at full uppercase width — 70px weight 100 |
| `display` | Uppercase hero headlines — 68px weight 100, large project title treatments |
| `heading-section` | Section intros, "Work", "About" breakpoints — 42px weight 100 |
| `heading-sub` | Sub-headers, project category labels at reduced scale |
| `body-large` | Lead copy at 41px weight 100 — the scale is unusually large; Mabry's light weight keeps it from feeling heavy |
| `body` | Standard body copy and project description at 29px weight 100 |
| `nav-link` | Navigation items, 18px weight 100 with slight positive tracking |
| `button-ui` | The only weight-600 moment in the system — pill button labels |
| `caption` | Credits, meta, footer addresses — 14px weight 100 |

### Principles
- One face, all roles: Mabry Pro performs every typographic function without switching typefaces.
- Weight 100 is the default mode. Weight 600 is for action only — button labels and nothing else.
- Uppercase transforms are applied on display tokens as a transform, not through all-caps CSS directly — the contextual application is editorial, applied case-by-case on hero sections.
- Negative tracking at display (-1px) tightens the featherweight letterforms into cohesive word-blocks; body copy runs at zero tracking.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: approximately 14px, derived from the dembrandt-measured dominant gap of 14.29px. The scale steps in near-golden ratios rather than a strict 8px grid, matching Buck's custom system.

The site's spacing personality is expansive at macro level and tight at micro level. The `{spacing.4xl}` 172px section gap gives each project group room to register as its own environment, while the `{spacing.sm}` 14px micro-gap handles label-to-image proximity.

### Grid & Container
- Project grid: approximately 2-column at desktop, each tile full-bleed within its column
- Max content width: approximately 1440px at large breakpoints
- Hero text sits left-aligned, filling roughly 50% of the viewport at desktop widths
- Navigation: horizontal strip with logo (the "B" logomark) left, primary links right

### Whitespace Philosophy
- **White space is the loudest design element**: the system deliberately underloads the chrome so the project imagery carries all the visual weight.
- **Large inter-section gaps**: `{spacing.4xl}` at 172px separates major content regions — each section arrives into emptiness.
- **No decorative fills**: the white canvas never gets an illustration, pattern, or texture. Only project work earns surface area.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All canvas sections, project grids, navigation, cards |
| Hover (Level 1) | `opacity: 0.71` transition at 0.2s | All interactive links and project tiles — depth through opacity, not shadow |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus |

**Shadow Philosophy**: Buck's site has no shadows of any kind. The shadow extraction array is empty. Depth is communicated entirely through image luminosity against the white canvas — the thumbnail photographs bring their own depth and tonal range, which an ambient shadow would only compete with. The interaction metaphor matches: hover dims rather than lifts, a cinematic fade-to-dim rather than a physical elevation change.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All project tiles, card containers, the navigation bar, structural surfaces, section dividers |
| `pill` | 9999px | Buttons — the only rounded element in the system |

The radius system is binary with maximum simplicity: everything structural is sharp-cornered (`{rounded.none}`); everything pressable is a full pill (`{rounded.pill}`). No intermediate values were detected anywhere in the system. This binary treatment matches the overall aesthetic: a neutral grid of sharp-edged image tiles broken only by the rounded-pill action elements.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants

- **`button-primary`** — Black `{colors.ink}` fill, white `{colors.on-dark}` text, `{typography.button-ui}` at weight 600, `{rounded.pill}` geometry. Hover: `opacity: 0.71` at `0.2s ease-in-out` — the shade rather than a color shift.
- **`button-secondary`** — Transparent fill, black text, 1px `{colors.ink}` border, pill. Used for secondary actions with the same pill geometry.
- **`button-ghost`** — No fill, no border, `{typography.nav-link}` — text-only links that fade on hover.

### Cards

Project tiles are frameless: no border, no radius, no shadow. The thumbnail image occupies the full grid cell. The project label below uses `{typography.caption}` in `{colors.ink-muted}`. On hover, the entire tile fades to `opacity: 0.71` at `0.2s ease-in-out` — the same interaction vocabulary as every other interactive element.

### Inputs

Search inputs use a pill shape (`{rounded.pill}`) matching the button treatment, with `{colors.surface-muted}` fill and `{colors.border}` outline in rest state. Focus upgrades the border to `{colors.focus-ring}` black with a 2px outline — consistent with the monochrome system.

### Badges / Tags

Category and studio labels use the `badge` component: light `{colors.surface-muted}` fill, `{colors.ink-muted}` text, `{rounded.pill}` shape. Quiet by design — metadata must not compete with the project imagery.

### Navigation

Sticky top bar on `{colors.background}` — the "B" logomark left, primary navigation links right at `{typography.nav-link}` weight 100. No visible border or shadow on the nav strip. All links use the opacity fade-hover (0.71 at 0.2s) rather than underlines or color transitions.

## Do's and Don'ts

### Do
- Keep `{colors.background}` pure white — no cream, no warm tint. The gallery-wall neutrality is the whole point.
- Use Mabry Pro at weight 100 for all display, body, and navigation text — the ultra-light setting is the brand's typographic signature.
- Apply `{rounded.pill}` exclusively to buttons — no other element in the system has a rounded corner.
- Use `opacity: 0.71` at `transition: 0.2s ease-in-out` as the universal hover treatment — never change color on hover in the chrome.
- Reserve weight 600 Mabry for button labels only — the single moment of typographic mass in an otherwise featherweight system.
- Let project thumbnails supply all color — the UI chrome stays in the `{colors.ink}` to `{colors.border}` greyscale range exclusively.
- Apply `{colors.border}` hairline rules for structural dividers — keep the weight invisible at normal reading distance.
- Use uppercase transforms at display scale contextually, not globally — uppercase is an editorial choice for brand moments, not a system rule.

### Don't
- Don't introduce brand accent colors in the UI chrome — there are none. Buck's identity is the work, not a signature hue.
- Don't add shadows or elevation effects — the system is intentionally flat. Depth is expressed through image contrast alone.
- Don't use mid-range border-radius (4–48px) — the system is strictly binary: `{rounded.none}` or `{rounded.pill}`.
- Don't increase Mabry's display weight to 300 or 400 to compensate for perceived lightness — the 100 weight is the voice, not a technical limitation.
- Don't apply color transitions on hover — fading opacity is the interaction language; color-based feedback would introduce a palette that doesn't exist.
- Don't crowd project tiles with card chrome (borders, shadows, radius) — the tiles are borderless windows, not contained objects.
- Don't add a secondary typeface — Mabry Pro handles every typographic role; a serif or mono pairing would fracture the single-face discipline.
- Don't use `{colors.ink-muted}` for primary body copy — it is strictly for captions and metadata. Body text runs `{colors.ink}` pure black.

---

## Responsive Behavior

### Breakpoints
*(No breakpoints surfaced in extraction from the SPA; the following reflect the site's observed behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column project grid; display type drops to ~36px; nav collapses to a hamburger icon |
| Tablet | 640–1023px | Two-column project grid; display headlines at ~50px; horizontal nav begins |
| Desktop | 1024–1279px | Full two-column grid, hero at 68–70px; navigation fully horizontal |
| Large Desktop | ≥1280px | Max container ~1440px; generous 172px section gaps in full effect |

### Touch Targets
- Pill buttons carry sufficient vertical padding (10px) for touch; pill geometry creates wide tap areas
- Project tiles fill full column width — each is a large tap target by default
- Navigation links at 18px with adequate horizontal spacing for finger accuracy

### Collapsing Strategy
- **Navigation**: full horizontal strip collapses to logo + hamburger at mobile; opacity-hover persists on desktop only
- **Project grid**: 2-column → 1-column; tile aspect ratios maintained at full column width
- **Display type**: 70px → ~36–40px on mobile, maintaining weight 100 uppercase; the featherweight at small sizes retains elegance
- **Section spacing**: `{spacing.4xl}` 172px → compressed but generous; the white canvas breathing room does not disappear on mobile

### Image Behavior
- Project thumbnails scale with their grid column, using `object-fit: cover` within fixed-ratio containers
- All imagery carries its own color and tonal complexity — the white canvas does not add any color overlay or treatment
- No border-radius on image containers at any breakpoint — hard-edge framing is maintained throughout

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#000000)
- Secondary text: `{colors.ink-muted}` (#6b7280)
- Border / divider: `{colors.border}` (#e2e8f0)
- Button fill: `{colors.ink}` — black pill
- Focus ring: `{colors.focus-ring}` (#000000)

### Example Component Prompts

- "Build a hero section on pure white `{colors.background}`. Left-aligned. Large headline in Mabry Pro weight 100, uppercase, 70px, `letter-spacing: -1px`, `line-height: 1.0`, color `{colors.ink}`, font-feature-settings: 'kern'. Beneath it a descriptor paragraph at 29px weight 100, color `{colors.ink}`, `line-height: 1.4`. One pill CTA button: `{colors.ink}` fill, white text, `border-radius: 9999px`, `padding: 10px 24px`, Mabry Pro weight 600, `font-size: 18px`. No shadows, no decorative elements — let the whitespace do the framing."

- "Create a project grid card for Buck: no border, no border-radius, no shadow. Full-bleed thumbnail image (the image provides all color). Below the image: project category label in Mabry Pro 14px weight 100 color `{colors.ink-muted}`; project title in Mabry Pro 18px weight 100 color `{colors.ink}`. On hover, the entire tile transitions `opacity` from 1 to 0.71 at `0.2s ease-in-out`. No other hover treatment."

- "Design a navigation bar for Buck: `background: {colors.background}`, no shadow, no border. Left: the 'B' logomark SVG in `{colors.ink}`. Right: navigation links — 'Work', 'About', 'Contact' in Mabry Pro 18px weight 100 `{colors.ink}`, `letter-spacing: 0.5px`. All links hover to `opacity: 0.71` at `0.2s ease-in-out`. `padding: 14px 29px`. Sticky top."

- "Create a primary CTA pill button: `background-color: {colors.ink}; color: {colors.on-dark}; font-family: Mabry, sans-serif; font-size: 18px; font-weight: 600; border-radius: 9999px; padding: 10px 24px; border: none`. On hover: `opacity: 0.71; transition: opacity 0.2s ease-in-out`. No color shift, no scale transform."

- "Build a project category badge: `background: {colors.surface-muted}; color: {colors.ink-muted}; font-family: Mabry, sans-serif; font-size: 14px; font-weight: 100; border-radius: 9999px; padding: 4px 12px`. No border, no shadow. Small and unobtrusive — metadata that does not compete with the work image above it."

- "Design a search input field in Buck style: `background: {colors.surface-muted}; border: 1px solid {colors.border}; border-radius: 9999px; padding: 10px 20px; font-family: Mabry, sans-serif; font-size: 18px; font-weight: 100; color: {colors.ink}; width: 100%`. On focus: `border-color: {colors.ink}; outline: 2px solid {colors.focus-ring}`."

### Iteration Guide

1. Start with pure white `{colors.background}`. Any warmth, any grey tint, any gradient is wrong — the canvas must be absolute neutral.
2. Apply Mabry Pro at weight 100 globally. If text feels too light, resist the temptation to increase weight — it should feel like scaffolding, not signage. Only button labels ever reach weight 600.
3. For hover states, apply `opacity: 0.71; transition: opacity 0.2s ease-in-out` to every interactive element. Never introduce a color change — the system has no hover color vocabulary.
4. Use border-radius only on buttons: `border-radius: 9999px`. Everything else — tiles, containers, nav, sections — stays at `border-radius: 0`.
5. Introduce color only via project imagery. The UI chrome is `{colors.ink}` black, `{colors.border}` light-grey, and `{colors.background}` white — nothing else.
6. Let `{spacing.4xl}` (172px) govern major section spacing. The white between sections is not a mistake; it is the experience.
7. At display scale, uppercase transforms are editorial — apply them intentionally on hero titles and section anchors, not as a global rule on all text.

---

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