---
version: alpha
name: Grid9
description: Minimal dark studio portfolio — near-black canvas, off-white ink, a single restrained accent, monospaced technical labels over a clean geometric sans, generous whitespace and grid-driven layout.

colors:
  # Canvas + ink
  background: "#0c0c0c"
  surface: "#161616"
  surface-soft: "#1e1e1e"
  ink: "#f2f2f2"
  ink-secondary: "#a3a3a3"
  ink-muted: "#6e6e6e"

  # Accent
  primary: "#e8ff52"
  on-primary: "#0c0c0c"
  accent-soft: "#2a2e1a"

  # Neutral scale
  gray-900: "#0c0c0c"
  gray-800: "#161616"
  gray-700: "#262626"
  gray-500: "#6e6e6e"
  gray-300: "#a3a3a3"
  gray-100: "#e5e5e5"

  # Borders + lines
  border: "#262626"
  border-soft: "#1e1e1e"
  divider: "#333333"

  # On-color
  on-ink: "#0c0c0c"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2.16px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1.44px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.96px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.52px
  mono-caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    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}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.divider}"

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

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

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

  tag-mono:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 0px
---

# Grid9 Design System

## Overview

Grid9 is a digital studio whose own site behaves like one of its case studies — a dark, gallery-grade portfolio where the work is the only color and the chrome stays out of the way. The canvas is a deep near-black (`{colors.background}`), text reads in a soft off-white (`{colors.ink}`) rather than pure white, and contrast is managed through value, not hue. The result feels like a studio reel: quiet, confident, built around the grid the name advertises.

Typography carries the identity. A geometric sans (Space Grotesk as the closest Google match to the studio's tightly-set display face) handles headlines with restrained negative tracking, giving the big type a precise, engineered feel without the aggression of a tech brand. Underneath it runs a monospaced voice (Space Mono) reserved for labels, section indices, project metadata, and the small technical captions that frame the work — the classic studio move of numbering everything and letting the mono font signal "this is craft, not marketing."

Color discipline is the whole game. The palette is functionally monochrome — a ramp from near-black surfaces through grays to off-white ink — with a single high-energy accent (`{colors.primary}`, an electric lime-yellow) used sparingly for primary actions and live focus states. The accent never decorates; it points. Everything else is spacing, line, and grid: thin `{colors.border}` hairlines, generous vertical rhythm, and large empty intervals that let each project breathe.

**Key Characteristics:**
- Deep near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — value contrast, not color contrast
- A single electric accent (`{colors.primary}`) reserved for primary actions and focus — never decorative
- Geometric display sans with restrained negative tracking for headlines
- Monospaced labels/indices/metadata (`{typography.mono-label}`) as the studio "craft" voice
- Thin hairline borders (`{colors.border}`) instead of fills to separate surfaces
- Grid-driven layout with generous whitespace between sections
- Subtle surface elevation (`{colors.surface}` over `{colors.background}`) for cards

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Page canvas, deep near-black.
- **Surface** (`{colors.surface}`): Cards, raised panels — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Inner panels, hover fills.
- **Ink** (`{colors.ink}`): Primary text and headings — off-white, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, mono indices, disabled text.

### Accent
- **Primary** (`{colors.primary}`): The single electric lime accent — primary CTAs, focus rings, live highlights.
- **On Primary** (`{colors.on-primary}`): Dark text on the accent fill.
- **Accent Soft** (`{colors.accent-soft}`): Muted accent tint for subtle backgrounds.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest canvas.
- **Gray 800** (`{colors.gray-800}`): Surface fills.
- **Gray 700** (`{colors.gray-700}`): Borders, dividers.
- **Gray 500** (`{colors.gray-500}`): Muted text.
- **Gray 300** (`{colors.gray-300}`): Secondary text.
- **Gray 100** (`{colors.gray-100}`): Brightest neutral, rare highlights.

### Borders & Lines
- **Border** (`{colors.border}`): Hairline separators around cards and nav.
- **Border Soft** (`{colors.border-soft}`): Lighter internal dividers.
- **Divider** (`{colors.divider}`): Slightly brighter hover/active border.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks `Arial, sans-serif` — geometric display sans, closest Google match to the studio's tightly-tracked face.
- **Monospace**: `Space Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — labels, indices, metadata.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px hero statement — studio headline |
| `section-heading` | Section titles |
| `sub-heading` | Lighter sub-sections, intro copy |
| `card-title` | Project / card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `mono-label` | Uppercase-style technical labels, section indices |
| `mono-caption` | Tiny metadata captions |
| `button-ui` | Buttons, links |

### Principles
- **Two voices, strict roles**: geometric sans announces, mono annotates. Never blur them.
- **Restrained negative tracking**: display sizes pull tracking in (-2.16px at 72px) for a precise feel; body sits at normal tracking for readability on dark.
- **Mono as identity**: numbered indices and metadata in `{typography.mono-label}` give the studio its technical, grid-built signature.
- **Weight economy**: 400 for reading, 500 for display and interactive — no heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale stretches at the top (`{spacing.3xl}`–`{spacing.4xl}`) to create the gallery intervals between sections.

### Grid & Container
- Max content width: approximately 1280px
- Hero: large single-column statement with deep top padding
- Project sections: grid-driven, 2–3 columns collapsing to one
- Hairline `{colors.border}` rules separate major sections rather than color blocks

### Whitespace Philosophy
- **Gallery intervals**: large vertical gaps (`{spacing.3xl}`+) let each project stand alone.
- **Line over fill**: separation comes from thin borders and space, not background color shifts.
- **Grid discipline**: everything aligns to the column grid the studio name promises.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas only | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, nav, panels |
| Raised (Level 2) | `{colors.surface}` fill + hairline | Project cards, content panels |
| Focus | `2px solid {colors.primary}` | Keyboard focus on interactive elements |

**Depth Philosophy**: This is a flat, border-led system. Elevation is signaled by a one-step lighter surface (`{colors.surface}` over `{colors.background}`) plus a thin border — no drop shadows. The accent appears only at focus and on primary actions, so the eye tracks color to the one thing that matters.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Mono labels, grid rules, sharp edges |
| `xs` | 4px | Small chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Cards |
| `lg` | 16px | Project cards, image containers |
| `pill` | 9999px | Buttons, badges |

## Components

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

### Buttons
- **`button-primary`** — Electric accent fill, dark text, pill radius. The one place color leads.
- **`button-secondary`** — Transparent on canvas with a hairline `{colors.border}`, pill radius.

### Badges & Tags
- **`badge`** — Surface fill, mono caption, hairline border, pill radius.
- **`tag-mono`** — Borderless mono label in muted ink — the studio's index/metadata tag.

### Cards
- **`card`** — Surface fill over canvas with a hairline border, 12px radius.
- **`card-project`** — Larger 16px radius, zero padding so imagery runs edge-to-edge.

### Inputs
- **`input`** — Canvas fill, hairline border, accent border on focus.

### Navigation
- **`nav-bar`** — Canvas background, mono labels, bottom hairline border.

## Do's and Don'ts

### Do
- Keep the canvas deep near-black (`{colors.background}`) and ink off-white (`{colors.ink}`)
- Use the accent (`{colors.primary}`) only for primary actions and focus
- Separate surfaces with hairline borders, not drop shadows
- Reserve the mono family for labels, indices, and metadata
- Let sections breathe with `{spacing.3xl}`+ vertical gaps
- Use restrained negative tracking on display type only

### Don't
- Don't use pure white text — off-white keeps the dark canvas comfortable
- Don't spread the accent across decoration — it points, it doesn't fill
- Don't add drop shadows — this is a flat, border-led system
- Don't mix the sans and mono roles
- Don't tighten tracking on body text
- Don't introduce a second accent hue

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced padding |
| Tablet | 600–1024px | 2-column project grids |
| Desktop | 1024–1280px | Full grid layout |
| Large Desktop | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 72px → scales down, keeps proportional negative tracking
- Navigation: mono links → compact menu
- Project grid: 3-column → 2-column → single column
- Section spacing: 96px+ → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: deep near-black `{colors.background}`
- Heading / body text: off-white `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (CTA / focus): electric lime `{colors.primary}`
- Borders: hairline `{colors.border}`

### Example Component Prompts
- "Create a hero on `{colors.background}`. Headline 72px Space Grotesk weight 500, line-height 1.02, letter-spacing -2.16px, color `{colors.ink}`. Eyebrow in `{typography.mono-label}` color `{colors.ink-muted}`. Primary pill button: `{colors.primary}` fill, `{colors.on-primary}` text."
- "Design a project card: `{colors.surface}` fill, 1px `{colors.border}`, 16px radius, image edge-to-edge. Title 24px Space Grotesk weight 500. Mono index label top-left in `{colors.ink-muted}`."
- "Build a nav bar: `{colors.background}`, mono 13px labels in `{colors.ink}`, bottom hairline `{colors.border}`."

### Iteration Guide
1. Color contrast is value-based — ramp from `{colors.background}` to `{colors.ink}`, accent only where action lives
2. Borders separate surfaces, never shadows
3. Two type voices: sans announces, mono annotates
4. Negative tracking on display only; body stays neutral
5. Generous vertical gaps are part of the brand — don't compress the grid

---

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