---
version: alpha
name: Kit Studio
description: Editorial monospace minimalism — bracketed nav labels ([work], [studio], [contact]) as the signature move, near-black ink on warm off-white paper, a mono typeface carrying the whole interface, generous gallery whitespace, and portfolio-first imagery with sharp (near-zero) radii.

colors:
  # Canvas + ink
  background: "#f4f3ef"
  surface: "#ffffff"
  surface-soft: "#ebeae5"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#5c5c58"
  ink-muted: "#8a8a85"

  # Accent — restrained, used for links/markers
  primary: "#1a1a1a"
  accent: "#3b3bff"

  # Neutral scale
  gray-900: "#111111"
  gray-600: "#5c5c58"
  gray-400: "#8a8a85"
  gray-200: "#d6d5cf"
  gray-100: "#e6e5df"

  # On-color
  on-primary: "#f4f3ef"
  on-ink: "#f4f3ef"

  # Lines + hairlines
  border: "#d6d5cf"
  hairline: "#cbcac3"

typography:
  display-hero:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-label:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  mono-label:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  # Bracketed text nav link — the signature
  nav-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 4px 8px

  # Primary action — dark fill
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  # Secondary action — hairline outline
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    borderColor: "{colors.ink}"

  # View-project marker
  link-marker:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 0px 0px

  # Project / case-study card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Quiet info card
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.hairline}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border}"

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

  # Badge / tag
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    borderColor: "{colors.hairline}"
---

# Kit Studio Design System

## Overview

Kit Studio's site is an editorial monospace portfolio — a design that reads like a well-set technical document rather than a marketing page. The canvas is a warm off-white paper (`{colors.background}`), not pure white, which softens the screen and gives the work a printed, archival quality. Near-black ink (`{colors.ink}`) carries the type, and the entire interface is rendered in a single monospaced typeface, so headings, navigation, captions, and body copy all share one mechanical, evenly-spaced rhythm.

The signature move is the bracketed navigation label: links are written as `[work]`, `[studio]`, `[contact]`, `[VIEW PROJECT]`. The square brackets are pure typography — no buttons, no chrome — turning plain text into interface markers. This is a deliberately low-ornament system where the monospace grid and the brackets do all the structural work that borders and fills do elsewhere.

Layout is portfolio-first: large responsive project imagery dominates, separated by generous gallery whitespace. Radii are effectively zero — corners stay sharp to keep the document-like, no-nonsense feel. Color is held in reserve; the palette is almost entirely achromatic warm grays, with a single electric accent (`{colors.accent}`) available for the rare interactive highlight.

**Key Characteristics:**
- One monospace typeface (`Space Mono` family) across the entire interface — no sans/serif split
- Bracketed text labels (`[work]`, `[VIEW PROJECT]`) as the navigation and call-to-action language
- Warm off-white paper canvas (`{colors.background}`), not pure white — printed, archival feel
- Near-zero border radius — sharp, document-like corners
- Hairline rules instead of heavy borders or fills
- Achromatic warm-gray palette with a single restrained electric accent
- Portfolio-first: oversized responsive imagery, generous gallery whitespace

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, nav labels. Near-black, slightly soft.
- **Paper** (`{colors.background}`): Warm off-white page canvas — the defining surface.
- **Surface White** (`{colors.surface}`): Pure white used behind project imagery and cards.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, metadata, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Disabled states, fine print.

### Accent
- **Studio Black** (`{colors.primary}`): Dark fill for primary actions.
- **Electric** (`{colors.accent}`): Rare interactive highlight / link hover.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary ink.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted text, placeholders.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Soft surface tint.

### Lines
- **Border** (`{colors.border}`): Card and input outlines.
- **Hairline** (`{colors.hairline}`): Thin rules between sections and nav.

## Typography

### Font Family
- **Primary**: `Space Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Single-typeface system**: every text element — display, heading, body, caption, nav — is set in the same monospace. Hierarchy comes from size and weight (400 vs 700), never from a typeface switch.

### 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 statement |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, project names |
| `card-title` | Project card titles (weight 700) |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | UI text, button labels |
| `nav-label` | Bracketed nav links |
| `caption` | Metadata, fine print |
| `mono-label` | Uppercase markers like `[VIEW PROJECT]` |

### Principles
- **One voice**: a single monospace renders the whole site, giving every element a mechanical, evenly-spaced cadence.
- **Two weights**: 400 for nearly everything, 700 for emphasis (card titles, markers).
- **Slight negative tracking on display**: large monospace headings tighten to -1.5px so the wide mono letterforms read as a unit.
- **Brackets as syntax**: square brackets wrap interactive labels — the closest thing to a button the system has.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous steps — large jumps from `{spacing.xl}` (40px) to `{spacing.2xl}` (64px) to `{spacing.4xl}` (160px) — drive the gallery whitespace.

### Grid & Container
- Max content width: roughly 1280px
- Portfolio grid: large image blocks, often full-width or 2-up
- Hairline rules separate the nav and major sections

### Whitespace Philosophy
- **Gallery emptiness**: oversized vertical spacing lets each project breathe.
- **Imagery leads**: text is sparse and supporting; the work is the content.
- **Hairlines over fills**: separation comes from thin `{colors.hairline}` rules, not background blocks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — sharp document corners, cards, buttons, inputs |
| `micro` | 2px | Tiny incidental elements |
| `xs` | 3px | Small chips |
| `sm` | 4px | Soft info cards |
| `md` | 6px | Maximum rounding (rare) |
| `pill` | 9999px | Reserved |

## Components

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

### Navigation
- **`nav-bar`** — Paper background, hairline bottom rule, bracketed mono labels.
- **`nav-label`** — `[work]` style text link, no chrome.

### Buttons / Markers
- **`button-primary`** — Ink fill, paper text, zero radius.
- **`button-secondary`** — Paper background, 1px ink outline, zero radius.
- **`link-marker`** — Bare uppercase mono marker like `[VIEW PROJECT]`.

### Cards
- **`card`** — White surface behind project imagery, sharp corners, hairline border.
- **`card-soft`** — Quiet warm-gray info card with slight rounding.

### Inputs
- **`input`** — White surface, hairline border, zero radius, mono text.

## Do's and Don'ts

### Do
- Render the entire interface in one monospace typeface
- Wrap interactive labels in square brackets (`[work]`, `[VIEW PROJECT]`)
- Use the warm off-white paper canvas (`{colors.background}`), not pure white, for the page
- Keep corners sharp — zero radius is the default
- Use hairline rules for separation, not fills
- Let imagery and whitespace carry the layout

### Don't
- Don't introduce a sans-serif or serif alongside the mono
- Don't add heavy borders, shadows, or rounded buttons
- Don't use pure white as the page background
- Don't decorate with the electric accent — keep it to rare interactive highlights
- Don't crowd the work; preserve the gallery whitespace

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked imagery, hamburger nav |
| Tablet | 600–1024px | 1–2 column project grid |
| Desktop | >1024px | Full portfolio grid, max ~1280px |

### Collapsing Strategy
- Hero: 56px → scales down, mono tracking maintained
- Nav: bracketed links → compact stack / toggle
- Project grid: 2-up → single column
- Imagery: serves mobile-optimized variants (avif/webp pairs)
- Section spacing: 96px+ → 48px 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 Kit Studio. Brand names and trademarks belong to their respective owners.