docs.json, style.css, and rffl-design-system.js.
RFFL Editorial Voice
Version: 2026-05-15 The RFFL Knowledge Base is the league’s memory, organized for people who actually use it. It is not a marketing site, a generic fantasy football blog, or an agent instruction manual. It is the place RFFL members go when they need to understand what happened, what the rule says, who won, what changed, what a team code means, how KORM works, how money was structured, or why a decision was made. The site should feel like a clean league reference built from years of real competition, rules, arguments, payouts, draft stories, side games, and records. It should respect the history without making the experience feel dusty or overly formal. It should be easy to scan, easy to compare, and easy to trust. The voice is direct, league-specific, and useful. It should sound like someone who knows the league explaining the record clearly to another member. Use RFFL terminology naturally: Alpha Bowl, Beta Bowl, KORM, FAAB, team codes, divisions, rulings, payouts, scorebooks, drafts, trades, rosters, lineups, and season results. The language should feel familiar to the league, not imported from a generic sports site. Every page should help a member do something. Confirm a result. Check a payout. Understand a rule. Compare seasons. Resolve a team alias. Follow a ruling. Revisit a draft story. Look up a KORM finish. Understand what a record does and does not cover. When exact details are known, keep them exact. Scores, weeks, team codes, dollar amounts, placements, rule names, and season labels are part of the value of the site. Precision should feel practical, not performative. When a record is incomplete, say so clearly and keep moving. Uncertainty should help the reader understand the page, not take over the page. The site should make gaps visible without making gaps the personality. Lore has room for more character, because the league has character. Rules, finance, rulings, and results should stay cleaner and more direct. The whole system should still feel like one RFFL knowledge base, with different levels of warmth depending on the page type. The design should support repeat use. This is a lookup tool, a comparison surface, and a league memory system. Dense tables, scorebooks, timelines, registries, and decision records should feel organized and readable. The interface should help members move quickly across rules, seasons, scorebooks, drafts, trades, waivers, rosters, lineups, finance, KORM, lore, governance, rulings, inquiries, teams, and registries. The story is simple: RFFL has decades of real league history. docs.rffl.dev turns that history into a clear, useful reference for the people who lived it and still need to use it.Live Site Workbench
RFFL Visual System
Archive Night
Use this workbench to tune the real docs shell and the future scorebook UI at the same time. Changes apply instantly in this browser and persist locally until reset.
Live site preview on
Page canvas#211F28
Sidebar surface#2A2832
Panel surface#3D3A46
Accent system#B04E78 / #62929E
Foundations
Design Tokens
Each token has a visible role. Use surface tokens to separate layout layers; use accents only for state and data.
Docs shell preview
2024 Regular Season
The active visual language must support long source pages, scorebook tables, owner histories, and future detailed boxscores.
Source boundaryValidated records are separated from missing ESPN-era detail.
Component Specimen
Boxscore Detail Preview
PCX118.68
GFM117.02
Margin+1.66
Projected PF114.20
Actual PF118.68
Delta+4.48
Source statevalidated
SlotStarterProjActualState
QBStarter row19.824.6final
RBStarter row14.38.1reviewed
FLEXMissing source rownot readynot readysource gap
CanvasPage background
#211F28NavigationSidebar surface
#2A2832ContentPanel surface
#3D3A46StateRosewood accent
#B04E78DataPacific Cyan
#62929EImplementation
Live Token Output
Accessibility
Contrast Checks
Foundations
| Token | Current default | Role | Promotion target |
|---|---|---|---|
| Page background | #211F28 | Root canvas for dark mode | docs.json background.color.dark |
| Sidebar surface | #2A2832 | Navigation surface distinct from the page | style.css shell layer |
| Panel surface | #3D3A46 | Scorebook modules, cards, controls | style.css component layer |
| Raised surface | #464151 | Inputs, selected states, table hover | style.css component layer |
| Border and rules | #546A7B | Dividers, table rules, focus boundaries | style.css component layer |
| Reading text | #C6C5B9 | Long-form copy and table values | Mintlify default unless promoted |
| Strong text | #E8E6DC | Headings, key scores, active labels | Mintlify default unless promoted |
| Rosewood accent | #B04E78 | Current state, warnings, primary emphasis | docs.json colors.primary |
| Data accent | #62929E | Deltas, projections, validation | docs.json colors.dark |
Component Specimens
| Component | Standard |
|---|---|
| Sidebar | Must be visibly separate from page background, but still quiet. Use a close surface step, not a saturated color. |
| Active nav item | Use Rosewood as shape first: left rail, background tint, or underline. Avoid Rosewood-only small text. |
| Search | Use raised surface, one-pixel border, compact height, and restrained placeholder text. |
| Scorecard | Use panel surface, large tabular score values, and a single validation badge. |
| Boxscore table | Use fixed columns, tabular numbers, restrained row dividers, and badges only for source state. |
| Data emphasis | Use Pacific Cyan for deltas, projections, and validated states. Do not color every number. |
| Source-boundary badge | Use Rosewood for warnings and missing data, paired with text. |
Type And Density
| Role | Standard |
|---|---|
| Page title | Mintlify default. Do not override globally. |
| Section title | Mintlify default. Keep headings compact inside tools and panels. |
| Dense panel title | 15-18px, depending on hierarchy. |
| Metadata | 11-13px, uppercase only for short labels. |
| Numbers | Tabular figures for standings, PF, PA, records, and money. |
| Tables | Dense but not cramped. Prefer horizontal scroll over broken wrapping for scorebook detail. |
Drift To Avoid
| Drift | What it looks like | Correction |
|---|---|---|
| Debug panel UI | Controls dominate the page and labels disappear | Use structured token rows with visible role, hex, and swatch |
| One-note rosewood theme | Every active element becomes pink | Use Rosewood for state and warnings only |
| Low-contrast nav | Sidebar and page collapse into one layer | Keep sidebar one surface step away from canvas |
| Table decoration | Boxscore rows become color-coded noise | Reserve color for source state, deltas, and validation |
| Fake save behavior | Users can edit tokens but cannot tell what happened | Apply preview immediately and show implementation output |
| Viewport-scaled typography | Headings become oversized on wide screens | Use fixed type roles, not viewport-based font sizes |
Design Authority
docs.json owns the Mintlify theme, public palette defaults, and canonical URL. style.css owns table readability, approved shell surface adjustments, and this design-system workbench. rffl-design-system.js owns live token preview, local browser persistence, contrast checks, and implementation output.
There is no hidden in-page commit button because Mintlify pages cannot write back to repo files from the browser. When a token set is approved, promote it into the files listed above.