Design canon

SF26 Live pattern system

Ticker-derived shell language, enforced across surfaces.

This is the production contract for SF26 Live surfaces. General SF26 remains navy + signal red; COR/Nights of Unity remain NAD blue + NAD red; College Bowl/youth remains youth green + youth yellow. Bebas Neue leads, DM Sans supports.

Primary · var(--navy) Accent · var(--gold) (signal red) Display · Bebas Neue Interface · DM Sans

Source Derived from the NAD ticker

Every surface in the SF26 Live family must implement this contract. Contributors and AI coding agents should treat this page as normative implementation guidance, not inspiration.

Legacy reference (superseded) sf26-live-patterns-v2.html

Preserved for historical context. This page is the current canonical reference.

System contract and enforcement model

Contract scope

LayerStatusDefinitionRule

Canonical tokens Required Global base primitives in :root Must be used for all base color, text, line, and elevation decisions.

Surface-family tokens Required by context General SF26, COR/Nights of Unity, College Bowl/youth families Must never be cross-mixed in the same authored surface.

Utility tokens Reusable Radius, shadows, spacing, structural effects Used for structure and rhythm; never used to introduce new color identity.

Runtime-injected tokens Scoped Dynamic values injected from data at component root Allowed only for documented dynamic channels (team, cue, phase, intensity).

Compliance requirement: if a visual decision cannot be mapped to a canonical, family, utility, or approved runtime token, it is not production-eligible.

NAD official palette

The four NAD event colors map to specific programming families. SF26 Live uses them as surface identities — not interchangeably.

NAD Blue

#12285C · --nad-blue

COR Sessions · Nights of Unity · Stage surface

NAD Red

#B00020 · --nad-red

COR Sessions · Nights of Unity · Signal accent

Youth Green

#2F6A3A · --youth-green

College Bowl · Youth programming

Youth Yellow

#F9D949 · --youth-yellow

College Bowl · Youth programming

College Bowl surface — youth palette

College Bowl · SF26

Championship Match

Continental Ballroom 3-4 · Round 2 live

Round 2 · Q11 of 18 3 teams competing Finals bracket

COR Business Session

Session 3 · Floor open for motions

NAD Blue · #12285C NAD Red · #B00020

Official session in progress Motion period open

COR and Nights of Unity surfaces use NAD blue as the stage and red as the signal accent — the inverse of the general site which uses navy + signal red.

SF26 Live surface tokens

Palette

Navy

--navy

Navy 2

--navy-2

Navy 3

--navy-3

Navy 4

--navy-4

Signal Red

--gold

Signal Red Hi

--gold-hi

Signal Red Soft

--gold-soft

Off-white

--off

Dim

--dim

Line

--line

Text

--text

Signal Red Line

--gold-line

Youth / College Bowl surface tokens

Youth Green

--youth-green

Youth Green Hi

--youth-green-hi

Youth Green Soft

--youth-green-soft

Youth Green Line

--youth-green-line

Youth Yellow

--youth-yellow

Youth Yellow Soft

--youth-yellow-soft

COR / Nights of Unity surface tokens

NAD Blue

--nad-blue

NAD Red

--nad-red

Utility tokens

Radius

--radius 18px

Shadow

--shadow 0 26px 70px rgba(0,0,0,0.32)

Typography

Type system

Display voice

SF26 LIVE · COLLEGE BOWL · NAD

Bebas Neue · 3.6 rem · tracking 0.05 em · line-height 1

Header / rail

Broadcast control rail · category reveal · lower third · signage

Bebas Neue · 2.1 rem · tracking 0.08 em · line-height 1.1

Body / interface

DM Sans carries metadata, status, question text, operator support copy, and audience-facing explanation. Bebas leads with authority. DM Sans clarifies with discipline.

DM Sans · 1.12 rem · line-height 1.55 · color var(--off)

Label / kicker

Live Conference Signal · Now · Next · Official Focus

DM Sans · 0.72 rem · weight 800 · tracking 0.18 em · uppercase · color var(--gold-hi)

Shell primitives

Top shell rail

SF26 LIVE

Overview

Schedule

After Dark

Ops

Live · Ballroom A

Notification bell

Official focus Registration open Official public site messaging is now live.

Now Gap / between sessions Awaiting the next scheduled block handoff.

Next Opening ceremony prep Ballroom A call starts at 8:30 AM.

Buttons

Primary action Secondary action Ghost link ghost-link available but not yet used in production

Nav pills

Active Default Ops surface

Live ribbon

Status ribbon

Official notice Conference in session June 30 – July 5, 2026 · Hilton San Francisco

Now Opening Ceremony Ballroom A · 9:00 AM

Next College Bowl Round 1 Ballroom B · 11:30 AM

Week of June 30 – July 5 Hilton San Francisco Union Square

Score and status surfaces

Broadcast score strip

Round

Gallaudet University

RIT

RIT/NTID

CSUN

Cal State Northridge

Challenge Window Open

Timer bar

0:34

Time remaining

0:06

Urgent

Marquee states

Category reveal

Lower thirds

Broadcast lower third

SF26

Stephanie Hakulin

NAD President · 58th Biennial Conference Keynote

NOW

College Bowl · Round 1

Ballroom B · 11:30 AM – 1:00 PM

Signage tiles

Venue signage grid

Now · Ballroom A

Opening Ceremony

9:00 AM – 11:00 AM · General Session

Next · Ballroom B

College Bowl Round 1

11:30 AM – 1:00 PM · Competition

Wayfinding

Registration

Lobby Level · Hilton San Francisco Union Square

Ticker relationship

NAD history ticker

NAD Conference History · 58 Biennial Gatherings

1970

Minneapolis, MN

Robert O. Lankenau

1988

Deaf President Now

Marquee institutional moment

2026

San Francisco, CA

SF26 highlight state

Panels and cards

Module panel

Standard content panel

Used for schedule, feed items, and structured content throughout the site. Panel class provides the border, radius, backdrop, and shadow in one declaration.

Primary Secondary

Ops strip

Now / Next pair

Now Opening Ceremony Ballroom A · 9:00 AM

Next College Bowl R1 Ballroom B · 11:30 AM

Dynamic tokens

Some surfaces inject CSS custom properties at runtime via inline style attributes. These are not defined in :root — they exist only within their component scope.

Runtime token injection

TokenSurfaceSourceUsage

--team College Bowl live team.col (data) Team accent color in scoreboard cards

--cue-accent Broadcast control cue.accent (data) Accent for broadcast cue strips

--phase After Dark phase.color (data) Phase surface color (nighttime ops)

--amp After Dark phase.intensity (data) Amplitude for height calculations

--phase-intensity After Dark phase.intensity% (data) Phase intensity as percentage

Pattern: style=--token:${value} on the component root element. Children read the token with var(--token).

Production surface inventory

Active surfaces in the system beyond the primitives shown above. Each uses the shared token set but has its own component class namespace.

Broadcast surfaces

Broadcast output /broadcast/output Countdown, welcome, lower thirds, promotions, announcements, history, scoring cards. Uses inline-styled broadcast card system.

Broadcast control /ops/broadcast Cue management with --cue-accent dynamic tokens. Operator-facing control rail for live broadcast.

College Bowl surfaces

CoBo live display /ops/cobo-live Full scoreboard with team cards, phase management, question display. Uses cobo-* class namespace (60+ classes) and --team dynamic token.

CoBo scoring controller /ops/cobo-scoring Operator scoring interface for live College Bowl matches.

Display surfaces

Venue signage /ops/signage Uses signage-display-* classes (distinct from the signage-tile demos above). Brand bar + grid layout for venue screens.

NAD history ticker /ops/ticker Animated timeline of 58 biennial conferences. Uses ticker-display-* class namespace.

Opening loop /ops/opening-loop Ceremony presentation surface with scene-based rendering.

Retro loop /ops/retro-loop Vintage terminal aesthetic — bulletin panels, scene boards, retro window components. Uses retro-* class namespace.

After Dark /after-dark Phase-driven nighttime ops surface. Uses --phase, --amp, --phase-intensity dynamic tokens for theming.

Implementation rules (strict)

Allowed component families

Shell primitives: top shell rail, context bar, nav pills, primary/secondary actions.
Live information: live ribbon, score strips, timer/status strips, ticker.
Marquee broadcast: category reveal, answer reveal, lower thirds.
Venue surfaces: signage tiles and display grids.
Structured content: panels/cards for schedule, now/next, and operator modules.

New components must inherit one of these families and naming namespaces before entering production.

Typography hierarchy contract

Bebas Neue is reserved for ceremonial or structural emphasis: page/surface titles, score headers, reveal headlines, lower-third primary lines.
DM Sans is required for explanatory language: schedules, metadata, captions, support copy, controls, and accessibility-facing text.
Do not set long-form paragraphs in Bebas Neue.
Do not demote critical metadata into low-contrast decorative treatments.

Motion, signal energy, and restraint

Motion exists to indicate state, timing, progression, and official transitions — never as decoration.
Sheen, glow, urgency bands, and high-signal accents are allowed only for marquee moments (answer reveal, countdown urgency, critical live calls).
Shell rails, default cards, metadata strips, and standard signage must remain visually quiet.
At-rest states should dominate runtime so marquee states retain ceremonial impact.

Prohibited behaviors

No ad hoc color invention outside tokenized palettes.
No random gradients unless explicitly defined by the active surface family.
No youth palette use inside COR/Nights of Unity or general SF26 surfaces.
No decorative animation that interferes with captioning, legibility, timing comprehension, or broadcast clarity.
No generic SaaS card styling (flat white cards, unbranded shadows, consumer-dashboard motifs) that weakens SF26 broadcast identity.

Component status

Lifecycle states

StatusDefinitionExamplesRule

Canonical Stable, reviewed, cross-surface primitives. Shell rail, live ribbon, score strips, lower thirds, signage tiles, ticker relationship. Default selection for production builds.

Experimental Intentional prototypes under active evaluation. New motion variants or alternative reveal treatments. Must be isolated, tagged, and hidden from primary production routes by default.

Deprecated Legacy pattern retained for compatibility only. Legacy standalone pages and superseded visual variants. No new usage; migrate at touch time.

Production-only Operator/broadcast elements coupled to live workflows. Ops controls, playout-specific cue surfaces, fixed-resolution display modes. Not for public marketing pages or generic site content.

Responsive strategy

Breakpoints

BreakpointBehavior

> 1000px Full multi-column layouts. All grids at max columns. Score strip and signage in single row.

≤ 1000px Two-column grids collapse to single column. NAD palette goes 2-up. Swatch grid goes 3-up. Shell rail stacks vertically. Score strip wraps. Status box hidden.

≤ 640px Swatch grid goes 2-up. Maximum density reduction for mobile.

Broadcast and display surfaces (signage, ticker, CoBo live) are designed for fixed-resolution screens and do not use responsive breakpoints.