---
version: alpha
name: Good Secrets
description: Playful studio minimalism — oversized Spoof display type (124px–200px) at 0.8em line-height on a pure-black canvas, electric lime as the signal color, a confetti palette of magenta/blue/teal/coral accents, square 0px corners, and Tay Kari serif as a wink of warmth.

colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0e0e0e"
  surface-light: "#efefef"
  ink: "#ffffff"
  ink-dark: "#000000"

  # Brand signal
  primary: "#d3ed6b"        # electric lime — the brand's voice
  on-primary: "#000000"

  # Confetti accents
  accent-blue: "#6464ff"
  accent-magenta: "#db53e2"
  accent-teal: "#58ba98"
  accent-coral: "#f1584b"

  # Neutral scale
  gray-100: "#efefef"
  gray-500: "#9a9a9a"
  gray-800: "#1a1a1a"
  ink-secondary: "#b3b3b3"

typography:
  display-mega:
    fontFamily: "Spoof Medium, Arial, sans-serif"
    fontSize: 200px
    fontWeight: 500
    lineHeight: 0.8
    letterSpacing: -0.2px
  display-hero:
    fontFamily: "Spoof Medium, Arial, sans-serif"
    fontSize: 124px
    fontWeight: 500
    lineHeight: 0.8
    letterSpacing: -0.2px
  display-large:
    fontFamily: "Spoof Medium, Arial, sans-serif"
    fontSize: 90px
    fontWeight: 500
    lineHeight: 0.8
    letterSpacing: 0px
  heading:
    fontFamily: "Spoof Medium, Arial, sans-serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0px
  sub-heading:
    fontFamily: "Spoof Regular, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  accent-serif:
    fontFamily: "Tay Kari Regular, Georgia, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 24px 40px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.gray-800}"

  card-feature:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.heading}"
    rounded: "{rounded.none}"
    padding: 40px

  tag:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.gray-800}"
---

# Good Secrets Design System

## Overview

Good Secrets is a small animation and design studio, and its site behaves like a title card for one — loud, confident, and built to move. The canvas is pure black (`{colors.background}`) and the dominant gesture is scale: display headlines run from 90px up to a full 200px (`{typography.display-mega}`), set in the custom Spoof typeface at a crushed 0.8em line-height so words stack into solid blocks of type. This is minimalism in palette but maximalism in presence — the restraint is in the structure, not the volume.

Electric lime (`{colors.primary}`, `#d3ed6b`) is the brand's signal color and it does the heavy lifting: it lights up CTAs, fills feature panels, and reads as near-fluorescent against the black ground. Around it orbits a small confetti palette — periwinkle blue (`{colors.accent-blue}`), magenta (`{colors.accent-magenta}`), teal (`{colors.accent-teal}`), and coral (`{colors.accent-coral}`) — that the studio deploys playfully across project tiles and animated moments rather than as fixed UI roles. The accents are personality, not hierarchy.

Typography is a three-voice system. Spoof (Medium for display, Regular for sub-heads) is the loud geometric sans that carries the brand. Tay Kari (`{typography.accent-serif}`) is a softer serif used sparingly as a wink — a moment of warmth and craft inside the bold grid. Inter handles all the readable body copy, captions, and UI text. The contrast between Spoof's billboard scale and Inter's quiet 16–18px body is the whole rhythm of the page.

Corners are universally square (`{rounded.none}`, 0px) — no soft radii anywhere on chrome, which keeps the layout feeling editorial and poster-like. Pill shapes appear only on small tags. There are no drop shadows or glassmorphism; depth comes entirely from the black/lime contrast and the sheer size of the type.

**Key Characteristics:**
- Pure-black canvas (`{colors.background}`) with white ink and electric lime as the singular signal color
- Oversized Spoof display type — 124px to 200px at a crushed 0.8em line-height
- Tay Kari serif used sparingly as a warm, playful counterpoint to the bold sans
- Inter for all readable body and UI text
- Confetti accent palette (blue/magenta/teal/coral) deployed playfully, not as fixed roles
- Square 0px corners on all chrome — poster/editorial feel, no soft radii
- Flat, shadow-free depth: contrast and scale do the work

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): The page canvas — pure black, gallery-dark.
- **Near-Black Surface** (`{colors.surface}`): Slightly lifted panels and cards.
- **Light Surface** (`{colors.surface-light}`): Inverted light blocks and tags.
- **White** (`{colors.ink}`): Primary text on the black canvas.

### Brand Signal
- **Electric Lime** (`{colors.primary}`): The brand voice — CTAs, feature panels, highlights. Reads near-fluorescent on black.
- **On Lime** (`{colors.on-primary}`): Black text on lime fills for maximum contrast.

### Confetti Accents
- **Periwinkle Blue** (`{colors.accent-blue}`): Playful project/animation accent.
- **Magenta** (`{colors.accent-magenta}`): Playful project/animation accent.
- **Teal** (`{colors.accent-teal}`): Playful project/animation accent.
- **Coral** (`{colors.accent-coral}`): Playful project/animation accent.

### Neutral Scale
- **Gray 100** (`{colors.gray-100}`): Light surface, inverted blocks.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted body text on black.
- **Gray 500** (`{colors.gray-500}`): Tertiary/disabled text.
- **Gray 800** (`{colors.gray-800}`): Subtle dividers and card edges on black.

## Typography

### Font Family
- **Display / Brand**: `Spoof Medium` and `Spoof Regular`, fallbacks: `Arial, sans-serif`
- **Accent Serif**: `Tay Kari Regular`, fallbacks: `Georgia, serif`
- **Body / UI**: `Inter`, fallbacks: `Arial, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-mega` | 200px hero — full-bleed billboard type |
| `display-hero` | 124px primary headlines |
| `display-large` | 90px section openers |
| `heading` | Section titles |
| `sub-heading` | Spoof Regular sub-headings |
| `accent-serif` | Tay Kari serif moments — the playful wink |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | UI text, buttons, nav |
| `caption` | Tags, metadata |

### Principles
- **Scale as identity**: Display type runs huge (124px–200px) at a crushed 0.8em line-height so words stack into solid blocks.
- **Three voices, strict roles**: Spoof (loud display), Tay Kari (serif wink), Inter (quiet body). Never blur the roles.
- **Serif sparingly**: Tay Kari is a seasoning, not a workhorse — single phrases, never paragraphs.
- **Body stays calm**: Inter at 16–18px keeps reading copy grounded against the oversized display.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling generously to `{spacing.4xl}` (160px) for the wide-open vertical rhythm between full-bleed sections.

### Grid & Container
- Full-bleed, edge-to-edge sections — type and tiles often run to the viewport edges
- Project work presented as large tiles, frequently filled with a single accent color
- Generous vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections

### Whitespace Philosophy
- **Black emptiness**: The dark canvas IS the space; oversized type floats in it.
- **Contrast over chrome**: Separation comes from color blocks and scale, not borders or shadows.
- **Square structure**: 0px corners keep everything reading like a printed poster.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All chrome — buttons, cards, inputs, tiles |
| `sm` | 4px | Rare small containers |
| `md` | 8px | Rare medium containers |
| `pill` | 9999px | Small tags only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric lime fill, black text, square corners. The signal CTA. Inverts to white-on-black on hover.
- **`button-ghost`** — Transparent on black with a white 1px edge.

### Cards
- **`card`** — Near-black surface, white text, square corners, subtle gray-800 edge.
- **`card-feature`** — Lime-filled feature panel with black heading type — the loud project highlight.

### Tags
- **`tag`** — Light pill on dark, black text, the one place a radius appears.

### Inputs
- **`input`** — Near-black surface, white text, square corners, gray-800 edge.

### Navigation
- **`nav-bar`** — Black bar, white links, minimal "scroll / featured / get in touch" wayfinding.

## Do's and Don'ts

### Do
- Go big with Spoof display type (124px–200px) at 0.8em line-height
- Use electric lime (`{colors.primary}`) as the single signal color — CTAs and feature panels
- Keep all chrome square (`{rounded.none}`) — pills only for tiny tags
- Use Tay Kari serif sparingly, as a warm accent
- Keep body copy calm in Inter at 16–18px
- Let the confetti accents play across project tiles, not UI roles

### Don't
- Don't round button or card corners — square is the identity
- Don't set body copy in Spoof — Inter carries reading text
- Don't overuse Tay Kari serif — it's a wink, not a workhorse
- Don't add drop shadows or glass — depth comes from contrast and scale
- Don't dilute the lime by assigning fixed UI roles to the confetti accents
- Don't shrink the hero type — scale is the whole point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <810px | Display type scales down hard, single column |
| Tablet | 810–1199px | 2-up tiles, reduced display sizes |
| Desktop | 1200–1799px | Full layout, max display scale |
| Large Desktop | >1800px | Centered, generous margins |

### Collapsing Strategy
- Hero: 200px/124px display scales down fluidly while keeping the 0.8em line-height
- Project tiles: full-width grid → stacked single column
- Nav: inline wayfinding → compact
- Section spacing: 160px → tighter 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 Good Secrets. Brand names and trademarks belong to their respective owners.