Scoreboard facts.
A little personality.
The patterns behind your league headquarters. Try the controls, switch themes, and see how an answer becomes a receipt.
The answer gets the spotlight.
One hero per screen on a phone, one per column on a wide screen. Everything else supports it. Put the result first, then its evidence, inputs, and limits.
- Truth over polish
- Missing data is a labeled gap. Exact history and modeled outcomes have different labels.
- Flat, with hairlines
- Structure comes from 1px rules, quiet fills, and space. No gradients, glows, decorative shadows, or colored edge stripes.
- Coral means something
- The primary action, your team, a selected choice. One or two fills per screen.
- Same league, any screen
- You, Trade, The League, The Historian. Phones use a bottom tab bar, tablets an icon rail, and wide screens a sectioned sidebar.
The palette, in both themes.
Switch Appearance in the footer to try the current theme. These specimens use the same semantic roles as the product. Select a token to copy its name.
The product uses unprefixed tokens. Public pages bridge the older --os-* names to the same roles. Coral fill always carries navy #1B2D4F text.
Let the numbers line up.
Your week, with the evidence right beside it.
104.3 94.1 57%Page titles: 40px, 32px on phones. Section titles: 24px. Body: 16px. Secondary: 14px. Captions: 12px. Hero numbers: 64 to 120px. Eyebrows: mono 11px, uppercase, tracking .12em. Underline emphasis with coral.
Space to read. Room to act.
- Spacing
- 4, 8, 12, 16, 24, 32, 48px. Panel padding 16px on phones, 24px on wide screens. Page gutters 16px and 32px.
- Shape
- 6px chips, 10px controls and rows, 16px cards, 22px stages and sheets. Pills for tags.
- Line icons
- 24-unit grid, 1.8px stroke, round caps and joins. Show at 16 to 20px, with words. Emoji belong to people and league content.
- Tables
- Hairline rows. Mono numbers, aligned right. A tinted row for you. A labeled, dashed playoff line.
- Wide workspaces
- Main decision in the center, supporting choices and evidence alongside it. Narrow screens follow the same reading order.
A few controls. Clear choices.
Demo controls. Try a button.
Sample field. Nothing is saved.
Primary: coral fill, navy text. Secondary: ghost with a hairline. Destructive: error text with a hairline. One-way actions need explicit review and, when appropriate, typed confirmation. Forms keep their labels and retain drafts after a failed save.
Missing is never zero.
Loading, empty, unavailable, paused, and failed are different situations. Each names what happened and the next useful step.
Loading your week
Reading the league's recorded results.
- Points pending
- Stats land Wednesday. Showing projections.
- No lineup
- Lineups appear after the first roster sync.
- Not priced
- Show why the trade cannot be priced. Never NaN or an invented zero.
- Offline
- Offline copy. Scores are from your last saved pack.
The league, in three artifacts.
These are design specimens with made-up sample data. They show the same hierarchy as the product.
Up 10.2.
2 still to play. 3 for them.
57% to win · Sample pre-week model
Set before Week 7 kickoff. It does not move during games.
The week hero
Now, Next, Season, Forever. One score leads. The opponent, players left, and model context follow. Freshness is stated in words.
$ ask who leaves the most points on the bench?
> reading recorded player games
Exact query, no AI
The answer comes with its coverage and evidence.
The history console
A question becomes a readable query, then an answer. If the history cannot answer it, say why and offer a question it can answer. No predictions or estimates.
Replayed, with receipts.
Actual: 7-7
Replayed: 8-6
A modeled result.
The recorded season is the fact.
Sample league · offseason.org
The shareable receipt
The only cream surface. A headline, supporting rows, evidence label, and league footer. A recipient should understand it before opening the product.
Motion earns its place.
Plays once. Reduced motion shows the final state immediately.
Count up when data arrives. Grow a bar, draw a race, reveal a record, print a terminal line. No looping decoration. The sport-morph logo is for launch, sign-in handoff, and real full-page waits longer than 300ms.
Fast: .15s. Base: .28s. Slow: .6s. The logo morph is 220ms with a 640ms sport hold and 480ms counter hold. Reduced motion resolves data reveals immediately; the loader uses a still mark with a slow opacity pulse.
One chart. One question.
You hold the 2nd seed.
Your team started 4th and reached 2nd in Week 4.
Title the chart with its conclusion. Your team is coral and heavier; other teams use neutral hairlines. A second data series may use aqua. Highlight a team on hover or tap, and supply a text summary.
- Bars and meters
- Start at zero. State what the full scale means, such as 57% to win or 10 of 12 teams declared.
- Thresholds
- Label the dashed hairline: playoff cut, even trade, or declared keepers.
- Missing values
- A gap with a label. Projections, models, and kickoff estimates are marked.
Everyone gets the answer.
Text meets WCAG AA contrast. Color is paired with words or symbols. Every chart has a one-sentence alternative. Every action works from the keyboard with visible focus.
Web targets are at least 40px, native targets 44pt. Mobile inputs are at least 16px. Dialogs return focus when closed. Large text wraps instead of clipping. Check light and dark, phone, tablet, wide screens, and reduced motion.
Say what the evidence says.
Group-chat energy, scoreboard facts. Product names stay exact: You, Trade, The League, The Historian, Trade Machine, Mock Draft, Keeper Advisor, What-If Machine, Record Book, The Almanac, The Gazette, The Wire, The Charter. Navigation uses Commish.
Sentence case. No em dashes or en dashes in prose. No dated promises, invented numbers, or AI claims. Keep team and manager names readable and consistent with the person's display preference.