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
The RFFL Knowledge Base should feel like a quiet, source-backed league archive: structured, readable, restrained, and easy to scan.
Style Commitments
| Area | Standard |
|---|
| Product type | Static knowledge base, not a marketing site or standalone app |
| Tone | Commissioner archive, operational reference, historical record |
| Density | Compact enough for repeated lookup, with enough spacing for tables |
| Color | Warm neutral base, red accent used only for active state and emphasis |
| Motion | Minimal; no decorative animation required for docs pages |
Core Tokens
| Token | Light value | Dark value | Use |
|---|
| Paper | #fbfaf7 | #161312 | page canvas |
| Ink | #211f1d | #f4ede7 | primary text |
| Muted | #66615b | #a9a19a | secondary text |
| Surface | #f2eee8 | #211b1a | panels and table heads |
| Line | #d9d2c8 | #3a302f | borders and dividers |
| Accent | #b91c1c | #ef4444 | active state, selected links, focus |
Type Scale
| Element | Size | Rule |
|---|
| Page title | Mintlify default | Do not override globally |
| Section title | Mintlify default | Do not scale with viewport width |
| Dense panel title | 15-16px | Use only inside settings and utility panels |
| Body | Mintlify default | Do not override globally |
| Metadata | 12-13px | Uppercase only for short labels |
Component Rules
| Component | Standard |
|---|
| Settings panels | 8px radius, one-level panels only |
| Buttons | Mintlify defaults for docs pages; 30-34px compact controls inside utility settings |
| Color fields | swatch + hex input; avoid oversized pills |
| Sidebar | Live theme may recolor it, but must not resize it |
| Table of contents | Live theme may recolor it, but must not alter typography |
| Appearance controls | Changes apply immediately through live CSS tokens |
Drift To Avoid
| Drift | What it looks like | Correction |
|---|
| App chrome takeover | A settings page resizes navbar, sidebar, or table-of-contents typography | Limit live theme changes to color, border, and surface tokens |
| Giant utility UI | Large titles, huge pills, oversized rows | Use compact utility sizing |
| One-note red theme | Everything becomes red or red-tinted | Use red only for state and emphasis |
| Low-contrast dark mode | Muted nav and content become hard to read | Test dark mode on the docs shell and settings page |
| Nested-card clutter | Cards inside cards with heavy shadows | Use one panel layer and simple row dividers |
| Viewport-scaled typography | Headings become oversized on wide screens | Use fixed type roles, not viewport-based font sizes |
QA Checklist
Before calling visual work ready:
| Check | Required result |
|---|
| Build verification | npm run verify passes |
| Appearance page | controls load, apply live color changes, switch modes, reset, and show no console errors |
| Representative docs page | sidebar, content, and table of contents keep Mintlify proportions |
| Dark mode | no giant type, no low-contrast navigation, no clipped content |
| Mobile drawer | navigation remains readable and compact |
| Horizontal overflow | none at desktop or mobile widths |
Design Authority
docs.json owns information architecture. Mintlify owns the global documentation shell. style.css may define live color tokens and scoped component styling, but it should not globally rewrite shell typography, spacing, or navigation structure.