RavenMCP · Design System

The system behind every prompt

The tokens, type, motion, and voice that define RavenMCP — generated from the live site :root and the canonical brand profile. Every text/surface pairing below is scored for WCAG AA in your browser, live.

brand: ravenmcpdark · neon-on-glassAA: scoring…
01

Color

Dark grey base — never pure black. Neon blue is the single primary; the rest are accents, not a rainbow.
Surfaces
Accents
Text on surfaces — live WCAG AA
Text tokenOn surfaceSampleRatioAA

Raw token pairings. Red = avoid this combination — muted text on the lightest --bg-overlay dips below AA, so keep secondary/tertiary text on base/surface/raised. The live site composites these correctly and ships 0 real AA failures.

02

Typography

Inter for product UI; monospace carries the technical tone in eyebrows, tool names, and code.
--font-body
Inter
The quick brown fox jumps over the lazy dog. 0123456789
--font-mono
SF Mono
claude mcp add raven 0123456789
03

Spacing

A 4 / 8 px rhythm. Whitespace is a signal, not leftover.
04

Radius

Soft, consistent corners; full-round for pills and chips.
05

Motion

One spring easing, three durations. Click a card to replay.
06

Voice & Tone

Bold but clear. Lead with the noun or verb that matters; never trade clarity for cleverness.

Do

  • Front-load meaning. "Fifty-five tools, organized by job."
  • Be specific. "Render a live URL at every viewport" beats "powerful auditing."
  • Speak to "you," the developer driving the agent.
  • Punchy is fine. "No Figma file. No designer."

Don't

  • No clever-over-clear. Not "The full flight across all realms."
  • No mythology in functional labels. Keep "realms / banner" to the story section.
  • No drifting terms. Groupings are "layers" — not disciplines / realms / acts.
  • No "the user." Say "you."
BoldClearTechnicalPreciseConfident — no hype
07

Guardrails

Constraints from the brand profile that every surface must honor.
contrastBody text ≥ 4.5:1, large ≥ 3:1. Never sacrifice contrast for a neon-on-dark gradient.
one primary focusExactly one high-contrast primary CTA (a real verb — Install / Get started). Everything else is ghost/secondary.
consistent termsOne word per concept. Groupings are layers. Keep counts current — 56 tools, 9 layers.
tap targetsEvery interactive target ≥ 44px.
limit the paletteFive supporting accents are accents, not a rainbow.
logo restraintThe brand shows through type, color, and voice without leaning on the mark.