# The Play Company styleguide

The rules for building anything that carries the Play Company brand: marketing pages, public tools, internal sites. Written for the agents and people doing the building.

- **Stylesheet:** `https://brand.playcompany.com/v1/play.css`
- **This file:** `https://brand.playcompany.com/STYLEGUIDE.md` (or `../brand/STYLEGUIDE.md` from a sibling repo)
- **The why behind it:** [Design Language](../documentation/Brand/Design%20Language.md), the art direction brief in the documentation repo. This file is the *how*.

---

## Read this first (for agents)

1. **Link the stylesheet; never copy it.** Every site loads `play.css` from brand.playcompany.com. Do not copy its fonts, logo files or token values into your repo.
   ```html
   <link rel="preload" href="https://brand.playcompany.com/v1/fonts/Player-ExpandedBlack.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="https://brand.playcompany.com/v1/play.css">
   ```
2. **Use tokens, never raw values.** Colors, font families, radii, durations and easings always come from a `--p-*` variable. If you type a hex code, a font name or a `cubic-bezier` into a site's CSS, stop.
3. **Build from the atoms.** The `.p-*` classes below are the shared vocabulary. Page structure is yours: each destination builds its own, measured with the [layout tokens](#layout) and following the shared [patterns](#patterns).
4. **Don't invent brand.** If you need something that isn't here (a new color, a new component, an icon set), build the smallest local version using existing tokens, and tell the person you're working with that it should be proposed for brand. Don't quietly add new colors or fonts to a site.
5. **Local preview.** Fonts only load over http(s). Run `npx serve .` (or any local server) instead of opening the HTML file directly, or text will fall back to Arial.

---

## Where this system shows up

The atoms are shared; the layouts are not. Expect each destination to look like a different room in the same building.

| Destination | Shape | What leans hardest |
|---|---|---|
| **playcompany.com** (flagship) | A row of full-height black panels inside a frame, scrolling sideways on desktop and stacking on phones. One product per panel: video or key art, then headline, lead and CTA at the bottom left. | `.p-headline`, `.p-btn--cta`, key art, motion at `--p-dur-4` |
| **Event pages** (playcompany.com/tournaments/…, e.g. Tip-Off Series) | One centered reading column (`--p-width-read`) under a floating nav. Hero block, key art, then sections of steps, a schedule and callout cards. | `.p-headline`, `.p-heading`, `.p-meta`, `.p-btn--cta`, `.p-badge`, `.p-card--rows` |
| **tournaments.playcompany.com** | A single vertical list of cards (`--p-width-list`), grouped by day. Scannable, quick. | `.p-display`, `.p-card`, `.p-num`, `.p-title`, `.p-label`, `.p-tag`, `.p-trim` |
| **PlayOS email** (SendGrid) | One 600px column, left-aligned, system fonts. Headline, image, container cards, one blue button. | The [email translation](#email) of the same tokens |
| **Documentation / Playbook** (internal, future custom build) | Sidebar, search, long-form reading. | `.p-root` body text, `--p-surface-1` for the sidebar, `.p-tabs`, `.p-divider`, restrained color |

The more a page is for *reading*, the less it glows. The more it is for *feeling* (flagship, launches, results), the more it earns the display type, glow and motion.

---

## Principles, in brief

- **Black is the stage.** Pages start on `--p-black`. No mid-gray backgrounds.
- **Light is earned.** Glow and color go on the one thing that matters on the screen: the leader, the prize, the active CTA. If two things glow, neither does.
- **High contrast, high stakes.** Bold type, big numbers, obvious hierarchy. Readable from across the room in under a second.
- **Motion has weight.** Things land with a settle. Broadcast moves (reveals, wipes, count-ups), not floaty app transitions.

---

## Color

| Token | Value | Use |
|---|---|---|
| `--p-black` | `#000000` | Page background. Always. |
| `--p-surface-1` | `#0E0F11` | Faint lift: a sidebar, a band behind a section. *Proposed.* |
| `--p-surface-2` | `#181A1D` | Cards. |
| `--p-surface-3` | `#22252A` | A hovered or selected card. *Proposed.* |
| `--p-ink` | `#E6F1FF` | Default text, icons, the logo. |
| `--p-white` | `#FFFFFF` | Emphasis and active states only (active tab, the number that matters). |
| `--p-ink-2` | ink at 70% | Secondary text: metadata, descriptions, labels. (`#A1A9B3` when flattened onto black, as in email.) |
| `--p-ink-3` | ink at 35% | Tertiary text, disabled, inactive tabs. |
| `--p-ink-4` | ink at 20% | Neutral tag, soft-button and number-badge fill. |
| `--p-line` | ink at 14% | Dividers. |
| `--p-line-soft` | ink at 8% | Hairlines, card top-edge highlight. |
| `--p-blue` / `--p-blue-hover` | `#1264CF` / `#1A74E8` | The primary action. PlayPass. |
| `--p-red` | `#FF3B3B` | Alerts, losses, eliminations, live. *Proposed.* |
| `--p-thermal-1…6`, `--p-thermal` | purple → red → orange → yellow → green → cyan | Key art and big-moment graphics only. *Proposed.* |

Rules:

- Secondary text is **ink at lower opacity**, never a separate gray. That keeps it the same cool hue on any surface.
- **One accent per screen region.** Blue means "do this". Don't use it for decoration, links in body text, or headings.
- **Thermal is an image color, not a UI color.** Never on text, buttons, borders or ordinary backgrounds. Never as a generic gradient overlay. It should always read as competitive heat.
- No green for money or wins. Green reads as casino felt and sportsbooks.

---

## Typography

Four families, one weight each.

| Token | Family | Use |
|---|---|---|
| `--p-font-expanded` | Player Expanded (Black) | Display headlines, prize amounts, ranks, big numerals. |
| `--p-font-condensed` | Player Condensed (Bold) | Titles, uppercase labels, dates, the `$` in prize amounts. |
| `--p-font-body` | Nuber Next (Bold) | Everything people read: paragraphs, metadata, tags. |
| `--p-font-mono` | Azeret Mono (Medium) | Small uppercase system text: button labels. |

Rules:

- **Each family has one weight.** Don't set `font-weight` expecting a lighter or heavier cut; there isn't one. Hierarchy comes from family, size, case and color.
- **Player and Nuber Next both have a 0.70em cap height** (`--p-cap`), and their digits are cap height. Use this for spacing math.
- **Measure spacing optically.** Gaps run from baseline to the next cap top, not from font padding. Put `.p-trim` on text with `line-height: 1` and the box shrinks to the letters.
- **Numerals are display elements.** Prize amounts, ranks, countdowns and counts use `.p-num` (Player Expanded), oversized. A $100 payout should feel like a scoreboard.
- **Case.** Sentence case for body and most headlines. Uppercase only for category labels (`PRIZE POOL`, `ESSENTIAL BENEFITS`), tier names (`CASUAL`), tags and button text. Uppercase always gets letter-spacing (`--p-track-label` or `--p-track-mono`).
- **Headlines stay short.** `.p-display` looks best at 12ch or less per line; set `max-width: 12ch` on long ones.
- **No other fonts.** In particular, never Inter or a system UI stack as the primary face.

Size scale (`--p-size-*`): `2xs` 10 · `xs` 12 · `sm` 14 · `md` 15 · `base` 16 · `lg` 18 · `xl` 20 · `heading` 22→24 · `2xl` 30 · `3xl` 36 · `headline` 28→36 · `display` 36→72 fluid · `hero` 48→144 fluid (*proposed*).

### The type ramp

Every touchpoint uses the same roles. Pick by role, not by size.

| Role | Class | Face | Size | Where it ships |
|---|---|---|---|---|
| Hero | `--p-size-hero` | Player Expanded | 48→144 | Flagship moments (*proposed*) |
| Display | `.p-display` | Player Expanded | 36→72 | Page title on a list page ("Upcoming tournaments") |
| Headline | `.p-headline` | Player Expanded | 28→36 | Flagship panel titles ("PlayOS"), event page title ("Tip-Off Series"), email H1 |
| Subhead | `.p-heading` at 20px | Player Condensed | 20 | The line under a headline ("$100K in total prizes…") |
| Section heading | `.p-heading` | Player Condensed | 22→24 | Section titles on a reading page ("Schedule", "How to Enter") |
| Card title | `.p-title` | Player Condensed | 30 (20 on phones) | Tournament cards |
| Callout title | `.p-heading` at 18px | Player Condensed | 18 | Title inside a callout card ("Earn your way in.") |
| Lead | `.p-lead` | Nuber Next | 18 | The sentence under a headline |
| Body | `.p-root` | Nuber Next | 16 | Paragraphs, step text, table cells |
| Meta | `.p-meta` | Azeret Mono | 12, uppercase | Dates and facts under a title (`OCT 21 – NOV 21 · 1V1`), table column headers |
| Label | `.p-label` | Player Condensed | 15, uppercase | Category labels next to numbers (`PRIZE POOL`) |
| Button / system | `.p-btn`, `.p-mono` | Azeret Mono | 10–12, uppercase | Buttons, the footer sign-off |
| Legal | `.p-muted` at `--p-size-xs` | Nuber Next | 12 | Disclaimers. Never smaller than 10px. |

### Color and emphasis in text

- **Brighten, don't decorate.** Emphasis inside `--p-ink-2` text is a word set in `--p-ink` (e.g. product names in a paragraph, the dates in a meta line). No italics, no colored text, no underlines except on links.
- **Intro, then quieter.** On a reading page, the first paragraph after the key art is `--p-ink`; the paragraphs after it are `--p-ink-2`. In a step or row, the title is `--p-ink` and its description is `--p-ink-2`.
- **Money that matters stays bright.** In a table, prize amounts are `--p-ink` while dates and counts are `--p-ink-2`.
- **Product names are mixed case, even in display type.** "PlayOS", "PlayCard", "Tip-Off Series". The tagline "IT PAYS TO PLAY®" is the exception: set in uppercase as a brand line.
- Section headings and card titles use Title Case ("Road to the Final", "How to Enter"). Body, leads and display headlines use sentence case.

---

## Space, radius, light

- **Space** is a 4px grid: `--p-space-1` (4) through `--p-space-9` (96). Card padding and section rhythm are `--p-space-5` (24). Cards in a group sit `--p-space-2` (8) apart.
- **Radius:** `xs` 4 (focus ring, CTA buttons) · `sm` 8 (notices) · `md` 12 (number badges, inputs, icon tiles) · `lg` 16 (cards, key art, framed panels) · `pill` (small buttons, tags, the floating nav).
- **Surfaces separate with light, not lines.** No borders around cards, no drop shadows. Use `--p-edge` (a 1px top highlight) or a glow token. Borders are fine for dashed notices and dividers.
- **Glow** (`--p-glow-ink`, `--p-glow-blue`, `--p-glow-red`): one per screen region, on the thing that matters.

---

## Layout

Page structure belongs to each destination, but every destination measures with the same tokens. These are the numbers the shipped pages use.

### Widths and gutters

| Token | Value | Use |
|---|---|---|
| `--p-width-read` | 656px | A single reading column: event pages, articles, help. |
| `--p-width-list` | 856px | A list of cards that needs room for a number on the right (tournaments). |
| (email) | 600px frame, 552px content | Fixed by email clients; see [Email](#email). |
| `--p-gutter` | 16→24px | Side padding on any page. Content never touches the screen edge. |
| `--p-frame` | 8→16px | The gap between the screen edge and a framed black stage, and between panels (*proposed*). |
| `--p-nav-h` | 64px | Height of the floating nav bar. Put `calc(var(--p-nav-h) + var(--p-space-7))` of top padding under it. |

### Vertical rhythm

Built from the space scale. Measured optically (cap top to baseline), so use `.p-trim` on display text.

| Between | Space |
|---|---|
| Headline → subhead or lead | `--p-space-3` (12) |
| Subhead → meta line | `--p-space-3` (12) |
| Copy → buttons | `--p-space-5` (24) |
| Buttons → key art, key art → body | `--p-space-6` (32) |
| Paragraph → paragraph | `--p-space-3` (12) |
| Section → section (above a `.p-heading`) | `--p-space-7` (48) |
| Section heading → its body | `--p-space-2` (8) |
| Body → the card or list it introduces | `--p-space-6` (32) |
| Card → card in a group | `--p-space-2` (8) |
| Row → row inside a `.p-card--rows` | `--p-space-4` (16) above and below, divided by `--p-line` |
| Button → button side by side | `--p-space-3` (12) |

### Structural patterns

- **Black stage in a frame.** The flagship and event pages sit on a black panel with `--p-radius-lg` corners, inset `--p-frame` from the screen edge. The frame color is `--p-surface-2`. (The live pages aren't consistent about this yet: the homepage uses surface-2 at 16px, the Tip-Off page ink at 4px. Use surface-2.) A plain utility page like tournaments skips the frame and runs straight on `--p-black`.
- **Nav.** The P mark on the left, linked to playcompany.com. One small pill `.p-btn` on the right, usually "Get the app". Nothing else unless the site really has sections. On reading pages the nav floats: a `--p-nav-h` pill bar, `--p-space-4` from the top and sides, as wide as the content column plus its padding, with `backdrop-filter: blur()` over a near-transparent fill.
- **Left-aligned.** Copy, headlines and buttons align left, on the web and in email. Center only the logo in email, and short copy over a full-bleed video on a phone.
- **Panel copy sits bottom-left.** On a flagship panel the headline, lead and CTA stack in the bottom-left corner, `--p-space-7` in from the panel edge (`--p-space-4` on phones), over imagery that fades to black at the bottom.
- **One column on phones.** Side-scrolling panels stack vertically, two-column rows stack, and display sizes step down through their `clamp()`.
- **Key art is a rounded rectangle.** Images inside a column take the full column width with `--p-radius-lg` corners. Full-bleed imagery only happens inside a flagship panel.

---

## Motion

| Token | Value | Use |
|---|---|---|
| `--p-dur-1` | 150ms | Hover, press |
| `--p-dur-2` | 250ms | Small state changes |
| `--p-dur-3` | 450ms | Entrances |
| `--p-dur-4` | 800ms | Big reveals, count-ups, wipes |
| `--p-ease-out` | expo-out | Anything arriving or landing (the default) |
| `--p-ease-in-out` | | Things moving between two places, wipes |
| `--p-ease-in` | | Exits |

Rules:

- **No bounce, no spring overshoot, no float.** Things accelerate and settle.
- **Numbers animate in** where they're the focus: count up prize amounts, tick countdowns. Static big numbers feel dead. (This takes JavaScript; there's no shared helper yet.)
- **Always respect `prefers-reduced-motion`.** Every animated atom in `play.css` already does. Do the same for anything you add.
- Don't animate every list item on every page. Entrances are for the first view of a page, not for scrolling.

---

## Atoms

All classes are opt-in and single-class specificity, so any site can override them. Nothing in `play.css` styles bare elements.

### Root
Put `.p-root` on `<html>` or `<body>` to adopt black background, ink text, Nuber Next, font smoothing and the brand focus ring.
```html
<body class="p-root">
```

### Type roles
See [the type ramp](#the-type-ramp) for when to use each.
```html
<h1 class="p-display">Upcoming tournaments</h1>
<h1 class="p-headline">Tip-Off Series</h1>
<h2 class="p-heading">Road to the Final</h2>
<p class="p-meta">Oct 21 – Nov 21, 2026 · 1v1</p>
<h2 class="p-title">Friday Night 2K</h2>
<span class="p-label">Prize pool</span>
<p class="p-lead">Skill-based tournaments with real cash prize pools.</p>
<span class="p-muted">8:00 PM PT</span>
```

### Numerals
```html
<span class="p-num"><span class="p-cur">$</span>2,500</span>
```

### Button
There are two shapes, and both ship today:

- **Pill** (`.p-btn`, 32px): small actions in the nav and inside cards.
- **CTA** (`.p-btn--cta`, 48px, 4px corners): the main call to action on a page or panel. This is what the flagship, event pages and emails use.

`.p-btn--soft` makes either one secondary. `.p-btn--lg` is a larger pill. `.p-btn--lit` adds glow to the one CTA that matters. Key CTAs carry the arrow; secondary buttons don't. Labels are short verbs in normal case in the HTML ("Get the app", "View schedule"); CSS sets the uppercase.

Over video or photography, the flagship sets the CTA fill to translucent blue with a backdrop blur so the art shows through. Do that locally, and only over imagery.
```html
<a class="p-btn p-btn--cta" href="…">Get the app
  <svg class="p-arrow" viewBox="0 0 8 8" aria-hidden="true"><path d="M0.8 4H7.2M4 7.2L7.2 4L4 0.8" fill="none" stroke="currentColor" stroke-linecap="square"/></svg>
</a>
<a class="p-btn p-btn--cta p-btn--soft" href="#schedule">View schedule</a>
```

### Tag
```html
<span class="p-tag">NBA 2K</span>
<span class="p-tag p-tag--blue">PlayPass</span>
<span class="p-tag p-tag--red"><i class="p-live"></i>Live</span>
```

### Card
```html
<article class="p-card">…</article>
<article class="p-card p-card--lit">…</article>          <!-- top-edge highlight -->
<a class="p-card p-card--interactive" href="…">…</a>     <!-- whole card is a link -->
<ol class="p-card p-card--rows">…</ol>                   <!-- a list of rows: steps, schedule, receipt -->
```

### Badge
A numbered tile for steps. 40px square, `--p-radius-md`, `--p-ink-4` fill.
```html
<span class="p-badge">1</span>
```

### Tabs
Active is brighter with a thin underline, never a colored pill.
```html
<nav class="p-tabs">
  <a class="p-tab" aria-current="page" href="…">All</a>
  <a class="p-tab" href="…">NBA 2K</a>
</nav>
```

### Everything else
- `.p-notice`: dashed inline aside (sample data, heads-up).
- `.p-divider`: 1px line; use on `<hr>`.
- `.p-skeleton`: loading block in card shape; set its height.
- `.p-rise`: entrance animation; stagger with `style="--p-delay: 60ms"`.
- `.p-trim`: optical text trim (see Typography).
- `.p-sr-only`: visually hidden, still read by screen readers.
- `.p-logo`: sizing for the inline logo mark.

---

## Patterns

Shared arrangements of atoms that already ship on more than one touchpoint. The markup is the contract; the few lines of flex/grid that place things are written locally.

### Hero block (reading pages)
Headline, subhead, meta line, buttons, then key art. Spacing from [Vertical rhythm](#vertical-rhythm).
```html
<h1 class="p-headline p-trim">Tip-Off Series</h1>
<p class="p-heading" style="font-size:var(--p-size-xl)">$100K in total prizes. Eight online qualifiers.</p>
<p class="p-meta"><span style="color:var(--p-ink)">Oct 21 – Nov 21, 2026</span> · 1v1 · Registration opens <span style="color:var(--p-ink)">Oct 5</span></p>
<div><!-- flex, gap: var(--p-space-3) -->
  <a class="p-btn p-btn--cta" href="…">Get the app <svg class="p-arrow" …/></a>
  <a class="p-btn p-btn--cta p-btn--soft" href="#schedule">View schedule</a>
</div>
<img src="…" alt="…"><!-- width 100%, border-radius: var(--p-radius-lg) -->
```

### Numbered steps
For any process (how to enter, setup, road to the final). Each row: badge, `--p-space-4` gap, then a title in `--p-ink` and a description in `--p-ink-2`. Rows split by `--p-line`. Put them loose in the column or inside a `.p-card--rows`. In email the action button sits right-aligned on each row.
```html
<ol class="steps"><!-- list-style none; each li: flex, gap 16px, align-items start, padding 16px 0 -->
  <li><span class="p-badge">1</span><div><strong>Download PlayOS</strong><p class="p-muted">Get PlayOS from the App Store.</p></div></li>
  <li><span class="p-badge">2</span><div><strong>Create your account</strong><p class="p-muted">Sign up and verify your identity.</p></div></li>
</ol>
```

### Schedule table and key–value rows
A `.p-card--rows` holding a grid. Column headers are `.p-meta`. Cells are body text: names and money in `--p-ink`, dates and counts in `--p-ink-2`. Rows split by `--p-line`. A two-column version (label left in `.p-meta`, value right in `--p-ink`) is the receipt pattern in transactional email.

### Callout card
A `.p-card` with a short title (`.p-heading` at 18px, or bold Nuber Next 16 in email) and one or two lines of `--p-ink-2` body. Use for asides ("Miss a qualifier?") and for an action (text left, CTA right, both vertically centered). Prefer a callout over a loose paragraph for anything the reader might skim past.

### Day-grouped list (tournaments)
A date block on the left (month and weekday in `.p-label` size 12, the day number in Player Condensed ~30) and that day's cards on the right. Cards: `.p-title` and a meta row on the left, the prize `.p-num` with `.p-label` under it on the right.

### Sign-off and footer
Every touchpoint ends the same way: legal text in small `--p-ink-2`, then "It Pays to Play®" set in `.p-mono` uppercase. In email, the support line ("Questions? Contact Support") comes first. On the flagship, the last panel also sets "THE PLAY COMPANY" in Player Expanded uppercase as a closing wordmark (an interim treatment until a real wordmark exists).

### Co-branded lockup
When a page belongs to a partner or game (the 2K Tip-Off Series), put the P mark first and the partner mark beside it, the same height, about `--p-space-3` apart. The P mark always stays left. Partner colors stay inside the partner mark and their key art; the UI stays ours.

---

## Email

PlayOS emails follow this system, translated for email clients. The full build guide is `../sendgrid/EMAIL_DESIGN.md`. The translation:

- **No web fonts.** The system sans stands in for all three brand faces, and `ui-monospace` stands in for Azeret Mono. Hierarchy comes from size and color, like on the web.
- **Flattened colors** (no rgba in email): ink-2 → `#A1A9B3`, ink-4 → `#2E3033`, line → `#202224`. Black, surface-2, ink, white, blue and red keep their hex values.
- **Same shapes:** cards are surface-2 with 16px corners and 24px padding; the CTA is blue, 4px corners, mono uppercase with an arrow; number badges are 40px with 12px corners.
- **Same rules:** black background, one blue thing (the primary CTA), left-aligned, no borders or shadows, no thermal in UI, sign off with "It Pays to Play®".

When you add a token or pattern here that email will need, add its email value to EMAIL_DESIGN.md too.

---

## Logo

Files in `https://brand.playcompany.com/v1/logo/`:

| File | Use |
|---|---|
| `p-mark.svg` | The P mark in ink. Default, on black. |
| `p-mark-white.svg` | Pure white, for photography or thermal art. |
| `p-mark-black.svg` | Black, for the rare light surface (print, partner decks). |
| `favicon.svg` | The mark on a black rounded square. |

- In HTML, prefer inlining the SVG with `fill="currentColor"` and class `.p-logo`, so it follows text color. Use `<img>` for the files when inlining isn't practical.
- Always link the mark to playcompany.com on public sites.
- Keep clear space of at least half the mark's height on every side. Minimum height is 20px.
- Don't recolor it with accents, add effects, stretch it, or put it on busy imagery without contrast.

---

## Voice, where it meets design

- **Short, declarative, confident.** "Daily tournaments. Real cash prizes." "It pays to play."
- **Skill language only.** Entry fee, prize pool, payout, winnings, compete, register. **Never** bet, wager, pot, stake, odds, gamble, jackpot, "house".
- **Name things consistently:** PlayOS (the app/platform), PlayPass (premium tier), PlayCard, PlayStore. NBA 2K and Madden NFL, spelled exactly so.
- Buttons are verbs: "Get the app", "Register", "View all". Use the arrow on the ones that move someone forward.

---

## Accessibility

- Body text is `--p-ink` or `--p-ink-2` on black or `--p-surface-2`. Don't set readable text in `--p-ink-3`; it's for disabled and decorative text only.
- Every interactive element gets a visible focus state. `.p-root` provides one; don't remove it.
- Respect `prefers-reduced-motion` (see Motion).
- Uppercase labels are styled uppercase with CSS; write them in normal case in the HTML so screen readers don't spell them out.
- Decorative SVGs get `aria-hidden="true"`. The logo gets `role="img"` and `aria-label="The Play Company"`.

---

## What we are not

- A casino, sportsbook or DFS app: no green felt, chips, gold coins, slot-machine motion.
- A mass-market mobile game: no unbranded AI art, no cartoon bubbles.
- A generic SaaS product: no purple-on-white gradients, no Inter, no pastel illustrations, no light mode by default.

---

## Status

**Settled (in production):** black, ink and its opacities, surface-2, blue, all four fonts, the type ramp up to `display` (including `headline`, `heading` and `meta`), card, rows card, both button shapes, tag, badge, numerals, optical trim, `--p-radius-md`, the layout widths, gutter and nav height, and the patterns above.

**Proposed (in play.css, not yet proven in a shipped design):** `--p-surface-1`, `--p-surface-3`, `--p-red`, the thermal values, `--p-size-hero`, `--p-frame`, the glow tokens, tabs, live dot. Use them, but mention it when you do; their values may still change.

**Not defined yet. Don't invent these; flag them:**
- Wordmark / full lockup
- Icon set (direction: geometric, chunky, monoline; filled glyphs in rounded squares for feature lists)
- Form inputs, selects, toggles
- Podium / leaderboard pattern
- Bracket view
- Tier accent colors (Casual, Competitive…)
- Light-surface rules
- A shared count-up / number animation helper