---
version: alpha
name: Kokopako
description: Playful creative-studio energy — an off-black canvas lit by an electric lime accent and warm cream, oversized grotesque display type with tight tracking, generous rounded chrome, and tactile hover-driven delight built for craft and interactive storytelling.
colors:
  # Canvas + ink
  background: "#0e0e0e"
  surface: "#1a1a1a"
  surface-soft: "#222222"
  surface-cream: "#f4efe6"
  ink: "#f4efe6"
  ink-secondary: "#a8a39a"
  ink-muted: "#6f6b63"
  ink-on-cream: "#0e0e0e"

  # Accent — electric lime, the studio signature
  primary: "#c8ff3d"
  accent-warm: "#ff6b4a"
  accent-violet: "#8b6cff"

  # On-color
  on-primary: "#0e0e0e"
  on-accent: "#ffffff"

  # Lines + states
  border: "#2c2c2c"
  border-soft: "#1f1f1f"
  primary-hover: "#d6ff6b"
  surface-hover: "#262626"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  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
  caption:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.4px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px

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

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.sub-heading}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.sub-heading}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.sub-heading}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    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-cream:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink-on-cream}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
---

# Kokopako Design System

## Overview

Kokopako is a creative development studio, and its site behaves like a portfolio piece in its own right — an off-black stage (`{colors.background}`) where a single electric-lime accent (`{colors.primary}`) does almost all the talking. The palette is deliberately lean: a near-black canvas, a warm cream (`{colors.surface-cream}`) for inverted moments, and the lime that snaps against both. The result reads as confident and playful rather than loud, the visual equivalent of a studio that says it works "with a strong focus on craft and innovation."

Typography carries the brand's personality. Oversized condensed display type (Anton standing in for a tight grotesque) compresses headlines into billboard blocks with sub-1.0 line-height, while Space Grotesk handles every readable surface with its slightly quirky, engineered character. Small monospace labels (`{typography.label-mono}`) add a technical, behind-the-scenes voice that fits a studio proud of how things are built.

The chrome is rounded and generous — pill buttons, soft 24px card corners, comfortable padding — so the interface feels approachable and tactile even on a dark canvas. Delight lives in the interaction layer: hover-revealed easter eggs, animated work toggles, and a scroll indicator all signal a studio that treats motion and micro-interaction as primary material, not garnish.

What keeps it coherent is restraint with the accent. The lime never coats large surfaces; it marks the one thing that matters in a viewport — a CTA, an active state, a highlighted word — and lets the off-black and cream carry the structure.

**Key Characteristics:**
- Off-black canvas (`{colors.background}`) with warm cream ink (`{colors.ink}`) — soft, not harsh white-on-black
- Electric-lime signature accent (`{colors.primary}`) used sparingly for CTAs, active states, highlights
- Oversized condensed display type (Anton) at sub-1.0 line-height for billboard headlines
- Space Grotesk for all reading text — engineered, slightly playful grotesque
- Monospace micro-labels for a technical, behind-the-build voice
- Generously rounded chrome: pill buttons, 24px cards
- Cream inverted surfaces (`{colors.surface-cream}`) as a high-contrast counterpoint
- Delight in the interaction layer — hover easter eggs, animated toggles, scroll cues

## Colors

### Canvas & Ink
- **Off Black** (`{colors.background}`): Primary page canvas — soft black, not pure.
- **Surface** (`{colors.surface}`): Cards, panels, raised blocks on the dark canvas.
- **Cream** (`{colors.surface-cream}`): Inverted high-contrast surfaces and feature blocks.
- **Cream Ink** (`{colors.ink}`): Primary text on dark — warm off-white for reduced glare.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Disabled, metadata, fine print.

### Accent
- **Electric Lime** (`{colors.primary}`): The studio signature — CTAs, active states, highlighted words.
- **Warm Coral** (`{colors.accent-warm}`): Secondary playful accent for variety/illustration.
- **Violet** (`{colors.accent-violet}`): Tertiary accent for occasional contrast.

### Lines & States
- **Border** (`{colors.border}`): Card outlines, dividers on dark.
- **Border Soft** (`{colors.border-soft}`): Faint section separators.
- **Primary Hover** (`{colors.primary-hover}`): Lightened lime on CTA hover.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque stand-in), fallbacks `Arial Narrow, sans-serif`
- **Primary**: `Space Grotesk`, fallbacks `Arial, sans-serif`
- **Monospace**: `Space Mono`, fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The full scale lives in the `typography:` block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 88px billboard headline, sub-1.0 line-height |
| `display` | Section display headlines |
| `heading` | Project / section titles |
| `sub-heading` | Card titles, button labels |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `caption` | Metadata, small UI |
| `label-mono` | Uppercase technical micro-labels |

### Principles
- **Condensed display as identity**: headlines compress into billboard blocks at sub-1.0 line-height.
- **Grotesk for warmth**: Space Grotesk's quirks keep reading surfaces from feeling sterile on black.
- **Mono as the build voice**: tracked uppercase monospace labels signal a studio that cares about craft.

## Layout

### Spacing System
8px-based scale (`spacing:` block above) with big jumps at the top end (`{spacing.3xl}`–`{spacing.4xl}`) to create gallery-like breathing room between portfolio sections.

### Grid & Container
- Wide content area with full-bleed display headlines
- Project work presented as a togglable list / grid
- Generous vertical rhythm between sections

### Whitespace Philosophy
- Dark negative space carries the design — the lime accent and cream blocks punctuate it
- Oversized type counterbalanced by ample surrounding space
- Section separation via spacing and faint `{colors.border-soft}` lines, not heavy chrome

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media |
| `sm` | 8px | Small chips, inline elements |
| `md` | 16px | Inputs, small cards |
| `lg` | 24px | Cards, feature blocks |
| `xl` | 40px | Large panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Electric-lime fill, off-black text, full pill. The signature CTA.
- **`button-secondary`** — Dark surface, cream text, bordered pill.

### Badges
- **`badge`** — Dark surface, lime text, monospace label, pill.

### Cards
- **`card`** — Surface on dark, 24px radius, bordered.
- **`card-cream`** — Inverted cream surface with off-black text for high-contrast features.

### Inputs
- **`input`** — Dark surface, lime focus border.

### Navigation
- **`nav-bar`** — Off-black bar, monospace-flavored labels, faint bottom border.

## Do's and Don'ts

### Do
- Keep the lime accent rare — one accented element per viewport
- Use cream surfaces for high-contrast inversions, not as a second body background
- Set display headlines at sub-1.0 line-height for the billboard effect
- Let dark negative space do the structural work
- Use monospace only for short technical labels

### Don't
- Don't coat large surfaces in `{colors.primary}` — it loses its punch
- Don't use pure white on the dark canvas — cream ink is intentional
- Don't add positive tracking to condensed display type
- Don't introduce a third large surface color beyond off-black and cream
- Don't square off the pill buttons — the rounded chrome is part of the playful tone

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales down sharply |
| Tablet | 600–1024px | 2-column work grid emerges |
| Desktop | >1024px | Full layout, oversized hero type |

### Collapsing Strategy
- Hero: 88px display → scales down while holding tight line-height
- Work list: grid → single column
- Navigation: inline links → toggle menu
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Touch Targets
- Pill buttons keep 14px vertical padding for comfortable tapping
- Nav and toggle controls sized for thumb reach

---

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