Every component on the site — tokens, primitives, patterns.
A living reference. If a component isn't shown here, it shouldn't be on the site. If it's shown here, it's safe to use.
Typography scale.
Source Serif 4 for display and headlines. DM Sans for UI and body text. JetBrains Mono reserved for data, dates, codes, numerals in data context.
Confident, warm, quietly authoritative.
A well-set reference document.
Section heading.
Sub-section heading.
Italic serif lede — the single pull-out paragraph that introduces a page.
The quick brown fox jumps over the lazy dog. 0123456789. Prose lives here. Body text is DM Sans at 17px, 1.65 line-height, capped at a 700px measure.
Clay palette.
The earthy accent. Use 500–600 for primary, 50–100 for soft backgrounds.
- 50--clay-50
- 100--clay-100
- 200--clay-200
- 300--clay-300
- 400--clay-400
- 500--clay-500
- 600--clay-600
- 700--clay-700
- 800--clay-800
- 900--clay-900
Sage palette.
Reserved for deep integrations, verified status, paid research slots. Never UI chrome.
- 50--sage-50
- 100--sage-100
- 200--sage-200
- 300--sage-300
- 400--sage-400
- 500--sage-500
- 600--sage-600
- 700--sage-700
- 800--sage-800
- 900--sage-900
Sand palette.
The warm neutral foundation. Backgrounds, borders, body text.
- 50--sand-50
- 100--sand-100
- 200--sand-200
- 300--sand-300
- 400--sand-400
- 500--sand-500
- 600--sand-600
- 700--sand-700
- 800--sand-800
- 900--sand-900
Semantic tokens.
Signal colours — use via the semantic var, not the raw hex, so meaning travels with the token.
- verified--color-verified
- vendor-claimed--color-ai-updated
- stale / unverified--color-stale
- declared (friend)--color-declared
- depth · deep--depth-deep
- depth · medium--depth-medium
- depth · shallow--depth-shallow
Links and buttons.
Dark primary, sand-bordered ghost, underlined text link. No filled clay buttons — clay is the accent, not the action.
Inline link treatments.
Prose underlined links use clay-600. Arrow suffix for navigation intents →. Tag/pill hover shifts background, not text colour.
Pick a pill by meaning, not appearance.
Six pill types. Each signals a different data class. Don't mix.
Inline tag (spec-level).
Rank chips.
Three visual tiers. Tier 1: rlegaltech500 rank — sand, neutral authority. Tier 2: market signal rank (hype / churn / login density). Tier 3: top-of-workflow — amber/gold, earned distinction.
Movement indicator.
Only renders when BOTH the current rank and the previous rank exist. Never fabricate.
Provenance dots.
Friend of the wiki.
Small declared-purple dot next to the vendor name. Never a large badge on directory rows — the dot is the only visible marker. Hover tooltip says "Friend of the wiki — signed transparency pledge."
Data meta row.
Rule divider.
Callout (pull-quote).
A ranking that can be gamed isn't a ranking — it's a leaderboard for whoever shouts loudest.
Aside (inline note).
Accordion section (vendor page).
Overview
Accordion sections use the native <details>/<summary> pattern
for keyboard and screen-reader support. On the vendor page, an inline
script persists which sections are open per vendor in localStorage.
Integrations
Open one, see how the marker rotates.
Dates by context.
Editorial dates in prose; ISO in data tables; ranges for events; relative only when the countdown is the point.
- Editorial March 2026 prose context
- ISO 2026-03-25 data tables
- Range Mar 23–26, 2026 events
- Relative 20 days countdowns only
- No sidebars. Single-column or two-column symmetric only.
- Body text ≤ 700px measure.
.page--wide(920px) is for tables and data pages only. - Cards used sparingly. Default separator is a rule line + whitespace.
- Mono = data. Never prose, never buttons, never decorative.
- Three typefaces, three jobs. Source Serif 4, DM Sans, JetBrains Mono.
- It should feel like a well-set reference book, not a SaaS dashboard.
When a new component or token is added, update this page. When one is removed from the site, remove it here. The style guide is the ground truth.