---
version: alpha
name: Obys Experiment
description: Experimental black-canvas playground — oversized editorial display type set in a high-contrast grotesque, a warm cream ink reading on near-black, and a single electric accent reserved for interaction. Tight negative tracking on giant headlines, generous gutters, and a playful kinetic sensibility.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f4f0e8"
  ink-secondary: "#a8a39a"
  ink-muted: "#6d6a64"

  # Accent — electric, reserved for interaction/highlight
  primary: "#ff4d2e"
  accent-glow: "#ff7a5c"

  # Borders / hairlines on the dark canvas
  border: "#2a2a2a"
  border-strong: "#3a3a3a"

  # Inverse (rare light blocks)
  inverse-bg: "#f4f0e8"
  inverse-ink: "#0a0a0a"

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

  # Neutral scale (warm-leaning)
  gray-100: "#e6e2d9"
  gray-300: "#a8a39a"
  gray-500: "#6d6a64"
  gray-700: "#3a3a3a"
  gray-900: "#141414"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -4px
  display-large:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -3px
  section-heading:
    fontFamily: "Anton, Oswald, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -2px
  serif-display:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1px
  card-title:
    fontFamily: "Space Grotesk, Inter, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.8px
  body-large:
    fontFamily: "Space Grotesk, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Inter, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Inter, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.4px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 1.2px
  caption:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1px

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: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.accent-glow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

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

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

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

  badge-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Obys Experiment Design System

## Overview

Obys Experiment is the agency's playground — a black-canvas microsite where typography is the entire interface and motion does the talking. Where a corporate product site whispers, this one shouts: near-black ground (`{colors.background}`), a warm cream ink (`{colors.ink}`) that reads like ink on dark paper, and a single electric accent (`{colors.primary}`) held in reserve for the moments that matter. Nothing here is decorative-by-default; the restraint of the palette is what lets the scale of the type land.

The defining move is editorial display type at architectural sizes. Headlines run to 120px in a tall, condensed grotesque (Anton/Oswald lineage) with aggressive negative tracking (`-4px` at hero scale), so words stack into solid typographic blocks. A serif display voice (Playfair Display) is available for contrast set-pieces, while the working text and UI run in Space Grotesk — geometric, slightly quirky, modern. Monospace (Space Mono) carries the labels, indices, and timestamps that give the site its lab-notebook, "experiment" feel.

The layout philosophy is generous and asymmetric: wide gutters, big vertical jumps between sections (`{spacing.3xl}`–`{spacing.4xl}`), content that breaks the grid on purpose. Chrome is built from hairline borders (`{colors.border}`) rather than fills — cards are dark surfaces lifted a notch off the canvas (`{colors.surface}`), separated by 1px lines, never heavy shadows. The accent appears as a fill on the primary CTA, an underline on a hovered link, a small status badge — a spark, not a wash.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with warm cream ink (`{colors.ink}`) — high contrast, paper-on-dark warmth
- Oversized condensed display type (up to 120px) with extreme negative tracking (`-4px`)
- Single electric accent (`{colors.primary}`) reserved for interaction, CTAs, and highlights
- Mixed type voices: condensed grotesque display, Playfair serif set-pieces, Space Grotesk UI, Space Mono labels
- Hairline borders over fills for all chrome — depth from 1px lines, not shadows
- Pill CTAs and tags; monospace uppercase tracked labels for indices and metadata
- Generous asymmetric whitespace; sections separated by space and hairlines

## Colors

### Canvas & Ink
- **Black Canvas** (`{colors.background}`): The page ground. Near-black, not pure, to keep the warmth.
- **Surface** (`{colors.surface}`): Cards and raised blocks, one notch off the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature blocks, nested panels.
- **Cream Ink** (`{colors.ink}`): Primary text and headings — warm off-white, reads like ink on dark paper.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Disabled, faint metadata.

### Accent
- **Electric Red-Orange** (`{colors.primary}`): The single accent — primary CTA fill, hovered link underline, status badge. Never a background wash.
- **Accent Glow** (`{colors.accent-glow}`): Hover/active state of the accent.

### Borders
- **Hairline** (`{colors.border}`): Default 1px separators and card outlines.
- **Border Strong** (`{colors.border-strong}`): Inputs, ghost buttons, emphasized edges.

### Inverse
- **Inverse Background** (`{colors.inverse-bg}`): Rare cream light blocks for contrast sections.
- **Inverse Ink** (`{colors.inverse-ink}`): Black text on those light blocks.

### Neutral Scale (warm)
- **Gray 100** (`{colors.gray-100}`) → **Gray 900** (`{colors.gray-900}`): Warm-leaning neutral ramp for text tiers and surfaces.

## Typography

### Font Family
- **Display**: `Anton` / `Oswald` lineage — tall, condensed grotesque for hero and section headings.
- **Serif Display**: `Playfair Display` — high-contrast serif for editorial set-pieces.
- **Text / UI**: `Space Grotesk` — geometric modern sans for body and interface.
- **Mono**: `Space Mono` — labels, indices, timestamps, the "lab notebook" voice.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 120px condensed hero — architectural impact |
| `display-large` | 80px secondary display |
| `section-heading` | 56px section titles |
| `serif-display` | Playfair editorial set-pieces |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, links |
| `label-mono` | Tracked uppercase mono labels |
| `caption` | Indices, timestamps, metadata |

### Principles
- **Scale is the statement**: Display type runs huge with tight negative tracking; the rest of the palette stays quiet so the size lands.
- **Voice mixing on purpose**: Condensed grotesque for impact, Playfair for editorial contrast, Space Grotesk for working text, Space Mono for the experiment-log labels.
- **Tracked mono labels**: Uppercase Space Mono with positive letter-spacing (`1–1.2px`) marks sections, indices, and metadata.
- **Tracking scales with size**: `-4px` at 120px relaxes to `0px` in body.

## Layout

### Spacing System
Base rhythm is 8px, but the scale jumps hard at the top (`{spacing.3xl}` 96px → `{spacing.4xl}` 160px) to create the gallery-sized gaps between sections.

### Grid & Container
- Wide max content width with generous side gutters
- Asymmetric, grid-breaking compositions; type allowed to bleed and overlap
- Sections separated by `{spacing.3xl}`–`{spacing.4xl}` vertical space and hairline rules

### Whitespace Philosophy
- **Negative space as drama**: Giant gaps frame the oversized type.
- **Hairlines, not boxes**: Structure comes from 1px `{colors.border}` rules, not filled panels or shadows.
- **Motion-aware spacing**: Layout leaves room for kinetic reveals, custom-cursor interactions, and hover scale.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, on canvas | Display type, page ground |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, tags |
| Raised (Level 2) | `{colors.surface}` + `1px {colors.border}` | Project cards |
| Feature (Level 3) | `{colors.surface-soft}` + `1px {colors.border-strong}` | Highlighted blocks |
| Focus | `2px solid {colors.primary}` | Keyboard focus on interactive elements |

**Depth Philosophy**: This is a flat, line-driven system. Elevation reads through subtle surface-value steps and hairline borders, not drop shadows. The accent (`{colors.primary}`) is the only thing that ever "glows."

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, hard editorial edges |
| `xs` | 2px | Inline chips |
| `sm` | 4px | Small controls |
| `md` | 8px | Inputs, small cards |
| `lg` | 16px | Cards, feature blocks |
| `pill` | 9999px | CTAs, tags, badges |

## Components

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

### Buttons
- **`button-primary`** — Electric accent fill, black text, full pill, comfortable padding. The default CTA.
- **`button-ghost`** — Transparent on canvas, cream text, `{colors.border-strong}` outline; border brightens to `{colors.ink}` on hover.

### Tags & Badges
- **`tag`** — Dark surface, mono label text, hairline border, pill. Used for project categories and indices.
- **`badge-accent`** — Accent fill with tiny mono caption for status / "new" markers.

### Cards
- **`card`** — `{colors.surface}` block with a `{colors.border}` hairline, 16px radius.
- **`card-feature`** — Softer surface, stronger border, more padding for highlighted work.

### Inputs
- **`input`** — Canvas-dark field with `{colors.border-strong}` edge; focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Black header, mono tracked labels, hairline bottom border.

## Do's and Don'ts

### Do
- Use oversized condensed display type with tight negative tracking for headlines
- Keep the canvas near-black and the ink warm cream — contrast with warmth
- Reserve `{colors.primary}` for interaction, CTAs, and small highlights only
- Build structure from hairline borders, not shadows or heavy fills
- Use tracked uppercase Space Mono for labels, indices, and metadata
- Lean into asymmetry and generous negative space

### Don't
- Don't flood large areas with the accent — it's a spark, not a wash
- Don't use heavy drop shadows for depth — use surface steps and hairlines
- Don't set cream ink below `{colors.ink-muted}` contrast for reading text
- Don't add positive tracking to the condensed display type
- Don't tighten the section spacing into a dense grid — the gaps are the design
- Don't make the accent the page background

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column; hero display drops to ~56–64px, tracking relaxes |
| Tablet | 600–1024px | Two-column work grids, reduced gutters |
| Desktop | 1024–1440px | Full asymmetric layout, max display scale |
| Large | >1440px | Centered with wide margins, generous gutters |

### Touch Targets
- Pill CTAs use 16px vertical padding for comfortable taps
- Tags and mono labels keep adequate spacing on mobile
- Custom-cursor interactions fall back to standard tap states on touch

### Collapsing Strategy
- Hero: 120px → ~56px, maintains negative tracking proportionally
- Navigation: tracked mono links → menu toggle
- Work grid: multi-column → single column with full-bleed media
- Section spacing: 160px → ~64px on mobile

### Image Behavior
- Full-bleed media with `{rounded.none}` hard edges on hero/work
- Cards keep `{rounded.lg}` corners and hairline borders at all sizes
- Kinetic reveals simplify to fades on reduced-motion / mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Black `{colors.background}`
- Heading / body text: Cream `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent / CTA: Electric `{colors.primary}`
- Border (hairline): `1px solid {colors.border}`
- Focus ring: `2px solid {colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 120px Anton/Oswald, line-height 0.92, letter-spacing -4px, color `{colors.ink}`. Below it a mono eyebrow in Space Mono 12px uppercase tracked 1.2px, color `{colors.ink-secondary}`. Pill CTA in `{colors.primary}` with black text."
- "Design a project card: `{colors.surface}` background, 1px solid `{colors.border}`, 16px radius, 32px padding. Title at 28px Space Grotesk weight 500, letter-spacing -0.8px. Mono category tag with pill shape and hairline border."
- "Build a ghost button: transparent on canvas, cream text `{colors.ink}`, 1px `{colors.border-strong}` outline, full pill, 16px 32px padding; border brightens to `{colors.ink}` on hover."

### Iteration Guide
1. Start dark — `{colors.background}` canvas, `{colors.ink}` cream text — then let one accent do the work.
2. Push display type bigger than feels comfortable; tighten tracking as it grows.
3. Structure with hairlines (`{colors.border}`), never shadows.
4. Use Space Mono uppercase tracked labels to mark sections and indices.
5. Keep the section gaps huge — negative space is the brand.
6. The accent appears as fills on CTAs/badges and underlines on hover — nowhere else.

---

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