> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rffl.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System

> Visual system specification for the RFFL Knowledge Base.

The RFFL Knowledge Base visual system is a working standard for a member-facing league reference. It should be compact, readable, and predictable for repeated lookup across rules, seasons, scorebooks, KORM, finance, and source-status pages.

This page is the source of truth for visual and editorial language decisions. Token edits below update the local docs shell immediately, so the sidebar, page canvas, search, and component previews can be judged together. Those browser edits are preview state; committed defaults still live in `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

<div className="rffl-ds-workbench" data-rffl-design-system="">
  <section className="rffl-ds-hero" aria-label="Design system status">
    <div>
      <p className="rffl-ds-kicker">RFFL Visual System</p>
      <h2>Archive Night</h2>
      <p className="rffl-ds-lede">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.</p>
    </div>

    <div className="rffl-ds-hero-actions">
      <span className="rffl-ds-live-pill">Live site preview on</span>
      <button type="button" className="rffl-ds-button rffl-ds-button-secondary" data-rffl-ds-reset="">Reset tokens</button>
    </div>
  </section>

  <section className="rffl-ds-shell-map" aria-label="Live shell token map">
    <div>
      <span>Page canvas</span>
      <span className="rffl-ds-shell-value" data-rffl-token-readout="page">#211F28</span>
    </div>

    <div>
      <span>Sidebar surface</span>
      <span className="rffl-ds-shell-value" data-rffl-token-readout="sidebar">#2A2832</span>
    </div>

    <div>
      <span>Panel surface</span>
      <span className="rffl-ds-shell-value" data-rffl-token-readout="panel">#3D3A46</span>
    </div>

    <div>
      <span>Accent system</span>
      <span className="rffl-ds-shell-value"><span data-rffl-token-readout="accent">#B04E78</span> / <span data-rffl-token-readout="data">#62929E</span></span>
    </div>
  </section>

  <section className="rffl-ds-workbench-grid" aria-label="Design token controls and shell preview">
    <div className="rffl-ds-panel rffl-ds-token-panel">
      <div className="rffl-ds-panel-head">
        <div>
          <p className="rffl-ds-kicker">Foundations</p>
          <h3>Design Tokens</h3>
        </div>

        <p>Each token has a visible role. Use surface tokens to separate layout layers; use accents only for state and data.</p>
      </div>

      <div className="rffl-ds-token-stack">
        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="page" />

            <span>
              <span className="rffl-ds-strong">Page background</span>
              <span className="rffl-ds-small">Root canvas behind content</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Page background color" type="color" data-rffl-token-control="page" defaultValue="#211F28" />

            <input aria-label="Page background hex" type="text" data-rffl-token-hex="page" defaultValue="#211F28" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="sidebar" />

            <span>
              <span className="rffl-ds-strong">Sidebar surface</span>
              <span className="rffl-ds-small">Navigation layer, distinct from page</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Sidebar surface color" type="color" data-rffl-token-control="sidebar" defaultValue="#2A2832" />

            <input aria-label="Sidebar surface hex" type="text" data-rffl-token-hex="sidebar" defaultValue="#2A2832" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="panel" />

            <span>
              <span className="rffl-ds-strong">Panel surface</span>
              <span className="rffl-ds-small">Cards, tables, controls</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Panel surface color" type="color" data-rffl-token-control="panel" defaultValue="#3D3A46" />

            <input aria-label="Panel surface hex" type="text" data-rffl-token-hex="panel" defaultValue="#3D3A46" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="raised" />

            <span>
              <span className="rffl-ds-strong">Raised surface</span>
              <span className="rffl-ds-small">Inputs, selected rows, toolbars</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Raised surface color" type="color" data-rffl-token-control="raised" defaultValue="#464151" />

            <input aria-label="Raised surface hex" type="text" data-rffl-token-hex="raised" defaultValue="#464151" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="border" />

            <span>
              <span className="rffl-ds-strong">Border and rules</span>
              <span className="rffl-ds-small">Dividers, table rules, focus rings</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Border color" type="color" data-rffl-token-control="border" defaultValue="#546A7B" />

            <input aria-label="Border hex" type="text" data-rffl-token-hex="border" defaultValue="#546A7B" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="text" />

            <span>
              <span className="rffl-ds-strong">Reading text</span>
              <span className="rffl-ds-small">Long-form copy and table values</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Reading text color" type="color" data-rffl-token-control="text" defaultValue="#C6C5B9" />

            <input aria-label="Reading text hex" type="text" data-rffl-token-hex="text" defaultValue="#C6C5B9" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="strongText" />

            <span>
              <span className="rffl-ds-strong">Strong text</span>
              <span className="rffl-ds-small">Headings, scores, active labels</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Strong text color" type="color" data-rffl-token-control="strongText" defaultValue="#E8E6DC" />

            <input aria-label="Strong text hex" type="text" data-rffl-token-hex="strongText" defaultValue="#E8E6DC" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="mutedText" />

            <span>
              <span className="rffl-ds-strong">Muted text</span>
              <span className="rffl-ds-small">Metadata and secondary navigation</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Muted text color" type="color" data-rffl-token-control="mutedText" defaultValue="#AFA8B7" />

            <input aria-label="Muted text hex" type="text" data-rffl-token-hex="mutedText" defaultValue="#AFA8B7" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="accent" />

            <span>
              <span className="rffl-ds-strong">Rosewood accent</span>
              <span className="rffl-ds-small">Selection, warning, current state</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Rosewood accent color" type="color" data-rffl-token-control="accent" defaultValue="#B04E78" />

            <input aria-label="Rosewood accent hex" type="text" data-rffl-token-hex="accent" defaultValue="#B04E78" />
          </span>
        </label>

        <label className="rffl-ds-token-field">
          <span className="rffl-ds-token-meta">
            <span className="rffl-ds-token-swatch" data-rffl-token-swatch="data" />

            <span>
              <span className="rffl-ds-strong">Data accent</span>
              <span className="rffl-ds-small">Deltas, projections, validation</span>
            </span>
          </span>

          <span className="rffl-ds-token-inputs">
            <input aria-label="Data accent color" type="color" data-rffl-token-control="data" defaultValue="#62929E" />

            <input aria-label="Data accent hex" type="text" data-rffl-token-hex="data" defaultValue="#62929E" />
          </span>
        </label>
      </div>
    </div>

    <div className="rffl-ds-panel rffl-ds-shell-preview" aria-label="Docs shell preview">
      <div className="rffl-ds-preview-topbar">
        <span className="rffl-ds-strong">RFFL Knowledge Base</span>
        <span className="rffl-ds-preview-search">Search...</span>
      </div>

      <div className="rffl-ds-preview-layout">
        <div className="rffl-ds-preview-sidebar">
          <p>Seasons</p>
          <a>Season Results Hub</a>
          <a className="is-active">2024 Scorebook</a>
          <a>Regular Season</a>
          <a>Boxscore Detail</a>
          <p>Settings</p>
          <a>Appearance</a>
          <a>Design System</a>
        </div>

        <div className="rffl-ds-preview-content">
          <p className="rffl-ds-section-label">Docs shell preview</p>
          <h3>2024 Regular Season</h3>
          <p>The active visual language must support long source pages, scorebook tables, owner histories, and future detailed boxscores.</p>

          <div className="rffl-ds-preview-callout">
            <span className="rffl-ds-strong">Source boundary</span>
            <span>Validated records are separated from missing ESPN-era detail.</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section className="rffl-ds-panel rffl-ds-scorebook-specimen" aria-label="Boxscore detail preview">
    <div className="rffl-ds-panel-head">
      <div>
        <p className="rffl-ds-kicker">Component Specimen</p>
        <h3>Boxscore Detail Preview</h3>
      </div>

      <span className="rffl-ds-badge rffl-ds-badge-valid">Bracket validated</span>
    </div>

    <div className="rffl-ds-score-summary">
      <div>
        <span>PCX</span>
        <span className="rffl-ds-strong">118.68</span>
      </div>

      <div>
        <span>GFM</span>
        <span className="rffl-ds-strong">117.02</span>
      </div>

      <div>
        <span>Margin</span>
        <span className="rffl-ds-data-value">+1.66</span>
      </div>
    </div>

    <div className="rffl-ds-stat-grid">
      <div>
        <span>Projected PF</span>
        <span className="rffl-ds-strong">114.20</span>
      </div>

      <div>
        <span>Actual PF</span>
        <span className="rffl-ds-strong">118.68</span>
      </div>

      <div>
        <span>Delta</span>
        <span className="rffl-ds-data-value">+4.48</span>
      </div>

      <div>
        <span>Source state</span>
        <span className="rffl-ds-strong">validated</span>
      </div>
    </div>

    <div className="rffl-ds-table-preview" role="table" aria-label="Boxscore detail preview">
      <div role="row">
        <span className="rffl-ds-table-head" role="columnheader">Slot</span>
        <span className="rffl-ds-table-head" role="columnheader">Starter</span>
        <span className="rffl-ds-table-head" role="columnheader">Proj</span>
        <span className="rffl-ds-table-head" role="columnheader">Actual</span>
        <span className="rffl-ds-table-head" role="columnheader">State</span>
      </div>

      <div role="row">
        <span role="cell">QB</span>
        <span role="cell">Starter row</span>
        <span role="cell">19.8</span>
        <span role="cell">24.6</span>
        <span role="cell"><span className="rffl-ds-badge rffl-ds-badge-valid">final</span></span>
      </div>

      <div role="row">
        <span role="cell">RB</span>
        <span role="cell">Starter row</span>
        <span role="cell">14.3</span>
        <span role="cell">8.1</span>
        <span role="cell"><span className="rffl-ds-badge rffl-ds-badge-neutral">reviewed</span></span>
      </div>

      <div role="row">
        <span role="cell">FLEX</span>
        <span role="cell">Missing source row</span>
        <span role="cell">not ready</span>
        <span role="cell">not ready</span>
        <span role="cell"><span className="rffl-ds-badge rffl-ds-badge-boundary">source gap</span></span>
      </div>
    </div>
  </section>

  <section className="rffl-ds-foundations" aria-label="Foundation token cards">
    <div className="rffl-ds-color-card" data-rffl-color-card="page">
      <span>Canvas</span>
      <span className="rffl-ds-strong">Page background</span>
      <code data-rffl-token-readout="page">#211F28</code>
    </div>

    <div className="rffl-ds-color-card" data-rffl-color-card="sidebar">
      <span>Navigation</span>
      <span className="rffl-ds-strong">Sidebar surface</span>
      <code data-rffl-token-readout="sidebar">#2A2832</code>
    </div>

    <div className="rffl-ds-color-card" data-rffl-color-card="panel">
      <span>Content</span>
      <span className="rffl-ds-strong">Panel surface</span>
      <code data-rffl-token-readout="panel">#3D3A46</code>
    </div>

    <div className="rffl-ds-color-card" data-rffl-color-card="accent">
      <span>State</span>
      <span className="rffl-ds-strong">Rosewood accent</span>
      <code data-rffl-token-readout="accent">#B04E78</code>
    </div>

    <div className="rffl-ds-color-card" data-rffl-color-card="data">
      <span>Data</span>
      <span className="rffl-ds-strong">Pacific Cyan</span>
      <code data-rffl-token-readout="data">#62929E</code>
    </div>
  </section>

  <section className="rffl-ds-output-grid" aria-label="Token output and contrast checks">
    <div className="rffl-ds-panel">
      <div className="rffl-ds-panel-head">
        <div>
          <p className="rffl-ds-kicker">Implementation</p>
          <h3>Live Token Output</h3>
        </div>
      </div>

      <pre className="rffl-ds-token-output" data-rffl-token-output="" />
    </div>

    <div className="rffl-ds-panel">
      <div className="rffl-ds-panel-head">
        <div>
          <p className="rffl-ds-kicker">Accessibility</p>
          <h3>Contrast Checks</h3>
        </div>
      </div>

      <div className="rffl-ds-contrast-output" data-rffl-contrast-output="" />
    </div>
  </section>
</div>

## 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.