Editorial Design System

Type Scale

Left-Border Accent (Signature Pattern)

The most recognizable editorial element. Used for every content section heading across all pages.

3-Column Metrics Grid

Hero-level stats in a tight grid. Large tabular-nums values with micro uppercase labels.

Label + Value Flex Rows

Fixed-width right-aligned uppercase labels with flexible values. Separated by subtle gray-50 borders. Not a table — flexbox.

Status Indicators

Default Size (40px avatar)

The standard player display. Circular headshot, bold name, NFL logo + position meta row. Uses PlayerCell.astro.

Patrick Mahomes

QB

Ja'Marr Chase

WR

Justin Jefferson

WR

Travis Kelce

TE

Christian McCaffrey

RB

Compact Size (32px avatar)

For denser layouts like tables. Same pattern, smaller scale.

Patrick Mahomes

QB

Ja'Marr Chase

WR

Justin Jefferson

WR

DEF Handling (Auto)

Team defenses automatically swap the headshot for the NFL team logo. No special caller logic needed.

Bills, Buffalo

DEF

Editorial Table

Sticky uppercase headers, hover rows, tabular-nums, and color-coded values. Player lockups in the first column.

Player	Pos	Salary	Pts/G	Yrs	Status
Patrick Mahomes QB	QB	$5,082,000	24.3	3	S
Ja'Marr Chase WR	WR	$3,850,000	19.7	2	S
Justin Jefferson WR	WR	$4,100,000	18.1	4	S
Travis Kelce TE	TE	$2,200,000	12.4	1	Q
Christian McCaffrey RB	RB	$3,600,000	0.0	2	IR
Total (5 players)		$18,832,000	14.9

Selection Pattern

Interactive cards/options use left-border accent + subtle gradient to indicate selection.

Text Hierarchy

Brand & Semantic

Surfaces & Borders

Elevation Scale

Layered shadows with blue-tinted color. Each level doubles offset/blur for realistic depth.

Spacing Tokens

Radius Tokens

Primary — cta cta--primary

The standard filled CTA for page-level actions, forms and modals.

Ghost — cta cta--ghost

Outlined, transparent ground, link-coloured ink. The secondary action sitting beside a primary: "Back", "Cancel", "Maybe later".

Arrow link — cta-link

A text link that goes somewhere: "see more", cross-links between pages. The CSS draws the trailing arrow, so the label never types its own › or →.

Hover Convention

Customising — the --cta-* variables

The base rules carry zero specificity, so your own class wins for layout. Colours are custom properties — set them on your class, never background / color directly (the hover rule reads the variables and would replace a hard-coded background). Filled and ghost: --cta-bg, --cta-bg-hover, --cta-ink, --cta-ink-hover, --cta-border, --cta-border-hover, --cta-focus-ring. Arrow link: --cta-link-ink, --cta-link-ink-hover.

Example — the green affirmative CTA ("Submit Bid"), reserved for actions where green signals "go". Not a general-purpose CTA; default to primary.

Player Profile Card

A realistic composition showing how all editorial patterns combine into a cohesive layout.

Patrick Mahomes Age 30

Kansas City · QB · #15

287.4

Total Pts

18.0

Per Game

$5.1M

Salary

Details

College Texas Tech

Draft 2017 Rd 1, Pick 10

Build 6'2" / 225 lbs

Status Starter

Contract

Type Veteran

Term 3 years (2024–2026)

Base $4,200,000

Current $5,082,000

Slide Animations

Entrance animations for modals, panels, sidebars, and floating UI. All use ease-out timing for smooth deceleration and forwards fill-mode to hold the end state.

@keyframes cardEnter {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes panelIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes triggerEnter {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

Motion Guidelines

Empty state

EmptyState.astro (React: states-react.tsx; scripts: buildEmptyStateHTML). Say what is missing, why that is fine or when it fills, and offer the next step. Action labels are verb + object.

Error state

ErrorState.astro. Only for "we could not read it" — never for a well-formed empty answer. Say what failed, that the data is missing rather than zero, and how to recover.

Compact

Inside a card or a table cell, pass compact: no dashed panel (no card within a card), left-aligned with its neighbours.

The Duration Ladder

Loading indicators are chosen by how long the user actually waits, not by page. The full contract lives in docs/claude/loading-standards.md; the shared primitives are src/components/shared/loading/* + src/styles/loading.css, with string builders in src/utils/loading-html.ts and the React hook useLoadingState() driving tier escalation via resolveLoadingTier().

Spinner (tier 2/3)

Accent from var(--league-accent) — skins per league with no code branch. Sizes: compact / default / large.

Button Loading (tier 3)

Add loading-btn + is-loading to a button: spinner replaces the label and the button disables — double-submit prevention comes free. Use loading-btn--on-accent on solid accent fills.

Skeleton (tier 4)

Gray shimmer blocks mirroring the final layout. Brand-neutral by design. Variants: title / text / block / circle; count renders a stacked list.

Thinking Dots (tier 5, AI)

Extracted from the Schefter typing indicator. For AI waits under the branded threshold.

Branded Moment (tier 5, 10s+)

The one tier that carries league character. Narration cycles via aria-label updates; reduced-motion collapses the pulse to a static ring. Fires only above the 10s threshold — never on routine loads.

Rules