---
version: alpha
name: Plasticity
description: A pitch-black canvas lit by a six-color signal palette (teal base, plus orange/yellow/green/purple/pink), three custom typefaces (fkGrotesk display, Matter sans, auxMono labels), and aggressively negative mono tracking (-0.12em) on uppercase technical labels. Bold, minimal, terminal-adjacent — color as functional signal, never decoration.

colors:
  # Canvas + ink
  background: "#000000"
  surface: "#171717"
  surface-soft: "#212121"
  ink: "#ffffff"
  ink-secondary: "#d6b5b9"

  # Signal palette — the six accents, teal is the base
  primary: "#3fd2fb"      # teal — base accent
  accent-green: "#68ff21"
  accent-pink: "#f365ff"
  accent-purple: "#8001ff"
  accent-orange: "#ff7121"
  accent-yellow: "#ffb801"
  accent-teal-deep: "#096a66"

  # Neutral scale
  gray-900: "#171717"
  gray-800: "#212121"

  # On-color
  on-primary: "#000000"
  on-ink: "#000000"
  on-accent: "#000000"

typography:
  display-hero:
    fontFamily: "fkGrotesk, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "fkGrotesk, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "fkGrotesk, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.84px
  card-title:
    fontFamily: "fkGrotesk, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.66px
  body-large:
    fontFamily: "matter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "matter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "matter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "auxMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.56px
  mono-caption:
    fontFamily: "auxMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.32px
  button-ui:
    fontFamily: "auxMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.56px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.surface-soft}"

  button-accent-green:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

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

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.gray-800}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.surface-soft}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.surface-soft}"

  label-mono:
    textColor: "{colors.primary}"
    typography: "{typography.mono-label}"
---

# Plasticity Design System

## Overview

Plasticity's site is built on a pitch-black canvas (`{colors.background}`) where color does not decorate — it signals. The whole identity hinges on a six-hue accent system declared as CSS variables (`--color-teal`, `--color-orange`, `--color-yellow`, `--color-green`, `--color-purple`, `--color-pink`), with teal (`{colors.primary}`) named explicitly as the base. Against the void of true black, these saturated signals read like indicators on a console: a green confirm, a pink alert, a teal active-state. The result is bold and minimal at once — almost no chrome, but every accent that does appear is electric.

Typography is the second pillar, and it is unusually committed: three custom typefaces, each with a strict role. **fkGrotesk** carries display and headings with tight negative tracking; **Matter** is the humanist sans for reading text; and **auxMono** handles every technical label, button, and eyebrow. The mono labels are the signature move — uppercase, with an extreme `-0.12em` letter-spacing (`tracking-aux`) that compresses the monospaced glyphs into a dense, machine-stamped band. This is what gives the page its terminal-adjacent, engineered voice.

Structurally the system is restrained: a near-flat radius scale (10px base, 2px tight corners), generous black negative space, and surfaces that step up only slightly from the canvas (`{colors.surface}` #171717, `{colors.surface-soft}` #212121) rather than introducing new colors. Borders are low-contrast neutral grays so the accents never have to compete with chrome.

**Key Characteristics:**
- True-black canvas (`{colors.background}`) with pure-white ink — maximum contrast
- Six-color signal palette: teal base (`{colors.primary}`) plus green/pink/purple/orange/yellow
- Three custom typefaces with strict roles: fkGrotesk (display), Matter (body), auxMono (labels)
- Extreme negative mono tracking (`-0.12em`) on uppercase auxMono labels — the brand's stamp
- Negative tracking on fkGrotesk headings (down to ~-2.56px at 64px)
- Minimal radius (2px / 10px), near-flat surfaces stepped subtly off black
- Color as functional signal, never as background wash or decoration

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): The page canvas. True #000000, not softened.
- **Surface** (`{colors.surface}`): Cards and raised panels, one step off black.
- **Surface Soft** (`{colors.surface-soft}`): Secondary panels and borders.
- **White** (`{colors.ink}`): Primary text, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted/desaturated secondary text.

### Signal Palette
- **Teal** (`{colors.primary}`): The base accent — primary CTAs, links, active states.
- **Green** (`{colors.accent-green}`): Confirm / go signal.
- **Pink** (`{colors.accent-pink}`): Highlight / alert signal.
- **Purple** (`{colors.accent-purple}`): Tertiary accent.
- **Orange** (`{colors.accent-orange}`): Warm signal accent.
- **Yellow** (`{colors.accent-yellow}`): Caution / attention accent.
- **Deep Teal** (`{colors.accent-teal-deep}`): Muted teal for low-emphasis fills.

### On-Color
- **On Primary / On Accent** (`{colors.on-primary}`): Black text on the bright accents — the only legible pairing on these saturated fills.

## Typography

### Font Family
- **Display**: `fkGrotesk`, fallback `Arial, sans-serif` — headings and hero.
- **Body**: `Matter`, fallback `Helvetica, Arial, sans-serif` — reading text.
- **Mono**: `auxMono`, fallback `ui-monospace, SFMono-Regular, Menlo, monospace` — labels, buttons, eyebrows.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px fkGrotesk hero, heavy negative tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Lighter sub-sections |
| `card-title` | Card and panel headings |
| `body-large` | Intros, feature descriptions (Matter) |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `mono-label` | Uppercase auxMono labels, eyebrows, nav |
| `mono-caption` | Tiny technical captions |
| `button-ui` | Button text (auxMono uppercase) |

### Principles
- **Mono labels are uppercase and tightly tracked**: auxMono at `-0.12em` is the brand stamp — apply uppercase + the negative tracking together, never one without the other.
- **fkGrotesk compresses at scale**: negative letter-spacing grows with size, peaking around -2.56px at 64px.
- **Matter is the only relaxed register**: body copy in Matter reads at normal-to-slightly-negative tracking — the calm counterweight to the compressed labels and headings.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Roughly an 8px base with a wide jump into generous section gaps (`{spacing.3xl}`–`{spacing.4xl}`).

### Grid & Container
- Centered single-column hero with large top padding
- Feature sections in 2–3 column grids
- Black negative space carries the rhythm — sections separate by spacing, not dividers

### Whitespace Philosophy
- **Void as design**: the black canvas is most of the page; accents and type float in it.
- **Color earns its place**: a hue appears only where it signals something — otherwise the surface stays neutral.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, hard edges |
| `xs` | 2px | Badges, tight chips |
| `sm` | 6px | Inputs, small controls |
| `md` | 10px | Buttons, cards, panels |
| `pill` | 9999px | Status pills, round toggles |

## Components

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

### Buttons
- **`button-primary`** — Teal fill, black text, auxMono uppercase label, 10px radius.
- **`button-secondary`** — Black fill, white text, subtle `{colors.surface-soft}` border.
- **`button-accent-green`** — Green signal button for confirm/primary-go actions.

### Badges & Labels
- **`badge`** — Surface fill, teal mono-caption text, 2px radius.
- **`label-mono`** — Standalone uppercase auxMono eyebrow in teal.

### Cards
- **`card`** — `{colors.surface}` panel one step off black, neutral border, 10px radius.
- **`card-soft`** — `{colors.surface-soft}` for secondary panels.

### Inputs
- **`input`** — Black field, neutral border; focus switches the border to teal (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Black bar with uppercase auxMono links and a low-contrast bottom border.

## Do's and Don'ts

### Do
- Keep the canvas true black (`{colors.background}`) — surfaces step up only slightly
- Use color as a signal: teal=base/active, green=confirm, pink=highlight
- Always pair auxMono labels with UPPERCASE + `-0.12em` tracking
- Use black text on bright accents — never white on teal/green/yellow
- Let black negative space do the separating; avoid heavy dividers

### Don't
- Don't use accents as large background washes — they signal, they don't fill
- Don't mix the three typefaces' roles (no Matter headings, no fkGrotesk labels)
- Don't set auxMono labels in normal tracking or sentence case
- Don't introduce soft grays as "borders" that compete with the accents
- Don't put white text on the bright signal colors — contrast fails

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Black `{colors.background}`
- Primary CTA: Teal `{colors.primary}` with black text `{colors.on-primary}`
- Heading text: White `{colors.ink}`
- Body text: White `{colors.ink}` / muted `{colors.ink-secondary}`
- Signal accents: green `{colors.accent-green}`, pink `{colors.accent-pink}`, purple `{colors.accent-purple}`

### Example Component Prompts
- "Hero on pure black. Headline in fkGrotesk 64px weight 500, letter-spacing -2.56px, white. Eyebrow above it in auxMono 13px UPPERCASE, letter-spacing -1.56px, teal `{colors.primary}`. Body in Matter 20px white."
- "Teal CTA button: `{colors.primary}` fill, black text, auxMono uppercase 13px, 10px radius, 12px 20px padding."
- "Card: `{colors.surface}` panel on black, 1px `{colors.surface-soft}` border, 10px radius, 24px padding. Title in fkGrotesk 22px white, body in Matter 16px."

### Iteration Guide
1. Black canvas first — accents are signals dropped into the void, not fills
2. auxMono labels are ALWAYS uppercase + `-0.12em` tracking
3. Black text on every bright accent; white only on dark surfaces
4. fkGrotesk headings tighten as they grow; Matter stays calm for reading

---

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