The Onion

---
version: alpha
name: "The Onion Editorial"
description: "Typography baseline relies on tablet-gothic-semi-condensed for primary article card headline, story titles in sidebar."
colors:
  light-gray-surface: "#f3f3f3"
  mint-tint: "#94d1b4"
  page-white: "#ffffff"
  brand-green: "#006b3a"
  deep-navy: "#0a112d"
  editorial-black: "#000000"
  muted-gray: "#676767"
  divider-gray: "#e6e6e6"
typography:
  article-headline:
    fontFamily: "tablet-gothic-semi-condensed"
    fontSize: "21px"
    fontWeight: "600"
    lineHeight: "23.1px"
  section-label-nav:
    fontFamily: "tablet-gothic-semi-condensed"
    fontSize: "15.5px"
    fontWeight: "700"
    lineHeight: "23.25px"
  body-copy:
    fontFamily: "utopia-std-caption"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  deck-subhead:
    fontFamily: "tablet-gothic-semi-condensed"
    fontSize: "19.75px"
    fontWeight: "400"
    lineHeight: "29.63px"
  hero-headline:
    fontFamily: "rocky-compressed"
    fontSize: "35.5px"
    fontWeight: "400"
    lineHeight: "39.05px"
  condensed-label:
    fontFamily: "rocky-condensed"
    fontSize: "21px"
    fontWeight: "400"
    lineHeight: "23.11px"
  ui-label-small:
    fontFamily: "tablet-gothic-semi-condensed"
    fontSize: "10px"
    fontWeight: "700"
    lineHeight: "15px"
  ui-body:
    fontFamily: "Open Sans"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  pill: "9999px"
  full: "1000px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "56px"
---

## Overview

Typography baseline relies on tablet-gothic-semi-condensed for primary article card headline, story titles in sidebar.

This system uses a 8px base grid with scale values 4, 8, 12, 16, 24, 32, 48, 56.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-text** maps to `brand-green`: Role "text" is grounded by usage context "Section labels, trending badge background, CTA buttons, links, logo accent, nav highlights".
- **surface-background** maps to `page-white`: Role "background" is grounded by usage context "Page background, card surfaces, input backgrounds, modal backgrounds".
- **border-border** maps to `divider-gray`: Role "border" is grounded by usage context "Article card bottom borders, section dividers, hairline separators".
- **content-text** maps to `muted-gray`: Role "text" is grounded by usage context "Secondary text, bylines, metadata, timestamps".

### Text Scale
- **Brand Green** (#006b3a): Section labels, trending badge background, CTA buttons, links, logo accent, nav highlights. Role: text. {authored: rgb(0, 107, 58), space: rgb}
- **Deep Navy** (#0a112d): Alternate dark text in header and footer contexts. Role: text. {authored: rgb(10, 17, 45), space: rgb}
- **Editorial Black** (#000000): Primary body text, headlines, nav links, borders, logo wordmark. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.15}
- **Muted Gray** (#676767): Secondary text, bylines, metadata, timestamps. Role: text. {authored: rgb(103, 103, 103), space: rgb}

### Interactive
- **Divider Gray** (#e6e6e6): Article card bottom borders, section dividers, hairline separators. Role: border. {authored: rgb(230, 230, 230), space: rgb}

### Surface & Shadows
- **Light Gray Surface** (#f3f3f3): Alternate section backgrounds, subtle surface fills. Role: background. {authored: rgb(243, 243, 243), space: rgb}
- **Mint Tint** (#94d1b4): Secondary brand accent, subtle highlights. Role: background. {authored: rgb(148, 209, 180), space: rgb}
- **Page White** (#ffffff): Page background, card surfaces, input backgrounds, modal backgrounds. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.15}

## Typography

Typography uses tablet-gothic-semi-condensed, utopia-std-caption, rocky-compressed, rocky-condensed, Open Sans across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes tablet-gothic-semi-condensed and utopia-std-caption and rocky-compressed and rocky-condensed and Open Sans for visual contrast. Weight range spans semi-bold, bold, regular. Sizes range from 10px to 35.5px.

### Font Roles
- **Headline Font**: tablet-gothic-semi-condensed
- **Body Font**: tablet-gothic-semi-condensed

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary article card headline, story titles in sidebar | tablet-gothic-semi-condensed | 21px | 600 | 23.1px | normal | tablet-gothic-semi-condensed, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Navigation items, section category labels, trending tags | tablet-gothic-semi-condensed | 15.5px | 700 | 23.25px | normal | tablet-gothic-semi-condensed, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Article body text, consent dialog copy, paragraph content | utopia-std-caption | 16px | 400 | 24px | normal | utopia-std-caption, Georgia, Times, Times New Roman, serif | Extracted token |
| Article deck text, secondary headlines | tablet-gothic-semi-condensed | 19.75px | 400 | 29.63px | normal | tablet-gothic-semi-condensed, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Large feature story headlines, hero display text | rocky-compressed | 35.5px | 400 | 39.05px | normal | rocky-compressed, Georgia, Times, Times New Roman, serif | Extracted token |
| Ticker/newswire labels, compact headline variants | rocky-condensed | 21px | 400 | 23.11px | normal | rocky-condensed, Georgia, Times, Times New Roman, serif | Extracted token |
| Micro labels, badges, category chips | tablet-gothic-semi-condensed | 10px | 700 | 15px | normal | tablet-gothic-semi-condensed, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Consent dialogs, cookie banners, third-party UI elements | Open Sans | 16px | 400 | normal | normal | Open Sans; features: "kern" | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

### Responsive Strategy
- **mobile (480-1199.98px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 640px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1024-999999px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1601px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| xs | 4px | 4 | Extracted spacing token |
| sm | 8px | 8 | Extracted spacing token |
| md | 12px | 12 | Extracted spacing token |
| base | 16px | 16 | Extracted spacing token |
| lg | 24px | 24 | Extracted spacing token |
| xl | 32px | 32 | Extracted spacing token |
| 2xl | 48px | 48 | Extracted spacing token |
| 3xl | 56px | 56 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| card-subtle | 1 | 0px 1px 4px 0px rgba(18, 25, 97, 0.08) |
| card-lift | 1 | 0px 4px 8px 0px rgba(0, 0, 0, 0.16) |
| overlay-glow | 1 | 0px 0px 8px 0px rgba(0, 0, 0, 0.37) |
| modal-backdrop | 1 | 0px 0px 20px 0px rgba(0, 0, 0, 0.4) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(0, 0, 0) ; rgb(255, 255, 255) ; rgb(0, 107, 58) |
| Light | outline-width | 3px ; 0px ; 1px |
| Light | outline-offset | 0px ; 1px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -263.839, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| none | 0px | 0 | Hairline corner |
| sm | 4px | 4 | Subtle corner |
| md | 8px | 8 | Control corner |
| lg | 16px | 16 | Card corner |
| full | 1000px | 1000 | Large surface corner |
| pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| none | 0 | px |
| sm | 4px | px |
| md | 8px | px |
| lg | 16px | px |
| pill | 9999px | px |
| full | 1000px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 479px | screen and (max-width: 479px) |
| Mobile | <= 480px | screen and (max-width: 480px) |
| Mobile | <= 575.98px | (max-width: 575.98px) |
| Mobile | <= 599px | screen and (max-width: 599px) |
| Mobile | <= 599.98px | (max-width: 599.98px) |
| Mobile | <= 600px | (max-width: 600px) |
| Mobile | <= 640px | (max-width: 640px) |
| Mobile | <= 641px | only screen and (max-width: 641px) |
| Mobile | <= 719.98px | (max-width: 719.98px) |
| Mobile | <= 720px | (max-width: 720px) |
| Breakpoint 11 | <= 767.98px | (max-width: 767.98px) |
| Breakpoint 12 | <= 991.98px | (max-width: 991.98px) |
| Breakpoint 13 | <= 1079px | screen and (max-width: 1079px) |
| Breakpoint 14 | <= 1199.98px | (max-width: 1199.98px) |
| Mobile | >= 480px | screen and (min-width: 480px) |
| Mobile | 481-1079px | screen and (min-width: 481px) and (max-width: 1079px) |
| Mobile | >= 481px | screen and (min-width: 481px) |
| Mobile | >= 576px | (min-width: 576px) |
| Mobile | 600-1079px | screen and (max-width: 1079px) and (min-width: 600px) |
| Mobile | 600-1079.98px | (min-width: 600px) and (max-width: 1079.98px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.