---
version: alpha
name: C23 Studio
description: Dark studio brutalism — near-black canvas with high-contrast off-white ink, an acidic lime-green accent reserved for emphasis, oversized tightly-tracked display type, and minimal flat chrome where borders are hairline neutrals and corners stay nearly square.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f0"
  ink-secondary: "#a3a3a0"
  ink-muted: "#6b6b68"

  # Accent — used sparingly for emphasis / CTA
  primary: "#c6f432"
  primary-hover: "#d4ff52"
  accent-soft: "#26301a"

  # Neutral scale
  neutral-900: "#0a0a0a"
  neutral-800: "#141414"
  neutral-700: "#262626"
  neutral-600: "#404040"
  neutral-400: "#808080"
  neutral-200: "#d4d4d0"

  # Lines + borders
  border: "#262626"
  border-strong: "#404040"

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

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -3.2px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.92px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  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
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.2px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.2px
  caption:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px

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

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

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

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

  mono-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
---

# C23 Studio Design System

## Overview

C23 Studio presents as a creative practice that treats its own website like a piece of work, not a brochure. The system runs on a near-black canvas (`{colors.background}`) carrying an off-white, slightly warm ink (`{colors.ink}`) — high contrast without the clinical harshness of pure black on pure white. The result reads as a darkroom or a gallery after hours: confident, quiet, and built for showing work rather than competing with it.

The type does the talking. Display headlines run very large with aggressive negative tracking (`{typography.display-hero}` at 80px, -3.2px), compressing words into dense, architectural blocks. Space Grotesk gives the system a geometric-but-quirky character — engineered enough to feel intentional, idiosyncratic enough to feel handmade. A monospace voice (Space Mono) carries small uppercase labels, indices, and metadata, lending the studio-catalogue feel where projects are numbered and tagged.

Color restraint is the discipline. The palette is almost entirely achromatic — a graded run of neutrals from `{colors.background}` up to `{colors.ink}` — with a single acidic lime-green accent (`{colors.primary}`) held in reserve. That green never decorates; it marks the one thing that matters in a given view: the primary action, an active state, a status tag. Because it appears so rarely, it lands hard every time.

Chrome stays flat and structural. Borders are hairline neutrals (`{colors.border}`), corners stay nearly square (`{rounded.md}` and below for most surfaces; pills only on actions and tags), and there are no heavy shadows or glossy gradients. Depth comes from value steps between surface layers (`{colors.surface}` → `{colors.surface-soft}`), not from elevation effects.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`) — high contrast, not clinical
- Oversized display type with extreme negative tracking (-3.2px at 80px)
- Space Grotesk as the geometric-quirky workhorse; Space Mono for uppercase labels and indices
- A single acidic lime accent (`{colors.primary}`) reserved strictly for emphasis and actions
- Flat, structural chrome — hairline neutral borders, no heavy shadows
- Depth via layered neutral surfaces, not elevation
- Pill radius only on buttons and tags; everything else near-square

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background, the studio's default field.
- **Surface** (`{colors.surface}`): Cards and raised blocks, one value step up.
- **Surface Soft** (`{colors.surface-soft}`): Feature panels, the highest neutral surface.
- **Ink** (`{colors.ink}`): Primary text and headings — warm off-white, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions, mono labels.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled text, the quietest tier.

### Accent
- **Acid Lime** (`{colors.primary}`): The single emphasis color — primary CTAs, active states, status tags.
- **Acid Lime Hover** (`{colors.primary-hover}`): Brighter on hover/focus.
- **Accent Soft** (`{colors.accent-soft}`): Deep olive tint behind lime text in badges.

### Neutral Scale
- **Neutral 900** (`{colors.neutral-900}`): Canvas, deepest value.
- **Neutral 800** (`{colors.neutral-800}`): Surface.
- **Neutral 700** (`{colors.neutral-700}`): Borders, dividers.
- **Neutral 600** (`{colors.neutral-600}`): Strong borders, input outlines.
- **Neutral 400** (`{colors.neutral-400}`): Muted icons, tertiary marks.
- **Neutral 200** (`{colors.neutral-200}`): Near-white for rare bright neutral text.

### Lines & On-Color
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Interactive outlines, secondary buttons.
- **On Primary** (`{colors.on-primary}`): Canvas-black text on lime fills — the accent is bright, so text goes dark.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks: `Arial, sans-serif`
- **Monospace**: `Space Mono`, with fallbacks: `ui-monospace, Menlo, monospace`

### 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` | 80px hero — maximum impact, compressed tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large statements |
| `card-title` | Project/feature card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, secondary copy |
| `button-ui` | Buttons, nav links |
| `label-mono` | Uppercase mono labels, project indices, metadata |
| `caption` | Fine print, tags |

### Principles
- **Display compression**: Headlines run large with heavy negative tracking that relaxes as size drops to zero at body sizes.
- **Mono as index voice**: Space Mono in tracked uppercase numbers and labels projects, dates, and categories — the studio-catalogue device.
- **Restrained weights**: 400 (read), 500 (UI/titles), 600 (display). No 700 — weight comes from size and tracking, not boldness.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) that drive generous gallery-like vertical rhythm between sections.

### Grid & Container
- Max content width ~1280px, often with asymmetric or off-grid placements for editorial tension
- Hero: large left-aligned display block with mono label above
- Work sections: 2-column project grids with indexed mono captions
- Hairline `{colors.border}` rules separate major sections

### Whitespace Philosophy
- **Gallery negative space**: Large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) let work breathe.
- **Compressed type, open space**: Tight headline tracking is counterbalanced by surrounding emptiness.
- **Quiet chrome**: Structure reads through value and line, never decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, canvas background | Page field, text blocks |
| Surface (Level 1) | `{colors.surface}` fill + `{colors.border}` hairline | Standard cards |
| Feature (Level 2) | `{colors.surface-soft}` fill + `{colors.border}` | Feature panels |
| Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Elevation is expressed as value, not shadow. Each surface step is a measured neutral lift; lime appears only on focus and action.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, rules |
| `xs` | 2px | Inline tags, tiny chips |
| `sm` | 4px | Inputs, small containers |
| `md` | 8px | Cards, list items |
| `lg` | 12px | Feature panels |
| `pill` | 9999px | Buttons, status tags |

## Components

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

### Buttons
- **`button-primary`** — Acid lime fill, canvas-black text, pill. The single loud element on a view.
- **`button-secondary`** — Transparent on canvas with a strong neutral border, pill.

### Pills & Badges
- **`badge`** — Deep olive tint with lime mono text, tracked uppercase, pill.

### Cards
- **`card`** — Surface fill, hairline border, near-square corners.
- **`card-feature`** — Higher surface, larger padding, slightly rounder.

### Inputs
- **`input`** — Surface fill, strong-border outline; focus switches the border to lime.

### Navigation
- **`nav-bar`** — Canvas background, hairline bottom border, mono/sans link mix.

## Do's and Don'ts

### Do
- Keep the palette achromatic and let lime appear rarely
- Use canvas-black text on lime fills — never light text on the bright accent
- Run display type large with heavy negative tracking
- Use Space Mono uppercase for indices, labels, and metadata
- Express depth through neutral surface steps, not shadows
- Reserve pills for actions and tags; keep other corners near-square

### Don't
- Don't scatter the lime accent decoratively — it marks one thing per view
- Don't put light text on the lime fill (low contrast)
- Don't introduce heavy drop shadows or gradients
- Don't add a second saturated accent color
- Don't use positive tracking on display headlines
- Don't round cards heavily — the system stays structural

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales down, tracking eases |
| Tablet | 600–1024px | 2-column grids begin, padding expands |
| Desktop | 1024–1280px | Full asymmetric layout |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero display 80px → ~44px on mobile, tracking eased proportionally
- Project grids 2-column → single column with mono index above each
- Navigation collapses to a menu toggle
- Section spacing 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}`
- Heading text: `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Accent / CTA: `{colors.primary}` (text on it: `{colors.on-primary}`)
- Border: `{colors.border}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Hero on `{colors.background}`. Mono label above (12px Space Mono uppercase, `{colors.ink-secondary}`, letter-spacing 1.2px). Headline 80px Space Grotesk weight 600, line-height 0.98, letter-spacing -3.2px, `{colors.ink}`. One lime pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text)."
- "Project card: `{colors.surface}` fill, 1px `{colors.border}`, 8px radius, 24px padding. Title 22px Space Grotesk weight 500, `{colors.ink}`. Mono index caption `{colors.ink-secondary}`."
- "Status badge: `{colors.accent-soft}` background, `{colors.primary}` text, Space Mono 12px uppercase, pill, 4px 12px padding."

---

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