Rasha Capital
Design System
Two faces of one family. Seven colours. An 8-point rhythm. Two page models. The discipline is the brand.
Source of truth: src/styles/global.css ·
Full spec: /DESIGN.md
01 — Principles
- 01 Restraint over decoration — default to nothing; every mark earns its place.
- 02 One family, two faces — IBM Plex mono for identity, sans for prose; one signal colour.
- 03 The grid is invisible but absolute — 8-point rhythm, centred reading column.
- 04 Honest by default — plain, technical copy; disclosure, not pitch.
- 05 Tokens, not values — a value used twice is a token.
- 06 Accessible is non-negotiable — WCAG AA contrast, reduced-motion respected.
02 — Colour
The entire palette. Every new colour is a tax on coherence — seven is the cap.
#0202CC · bg-rasha-blue
Primary brand surface — hero, About, theme-color.
#0A0A0A · text-ink
Primary text on light surfaces.
#F0F0F0 · text-paper
Text & panels on blue. The one off-white.
#E5E5E5 · bg-mist
Light page background. Calm, not pure white.
#8E94AC · text-dot
Slate blue-grey — the linefield at rest, tied to the blue.
#BB4430 · text-signal
Terracotta — alerts & fraud warnings only. Never decorative.
#FFA400 · text-highlight
Marigold — the one warm accent. Fill/emphasis on light; the dev glow.
On light surfaces links strengthen toward rasha-blue; on the blue surface they fade from paper. Never a hue-shift to an accent. Terracotta is reserved for the fraud disclosure and errors; marigold is the one warm accent — a fill like this, never text on light. Neither goes on the blue.
03 — Typography
The IBM Plex superfamily — mono for identity & numbers, sans for prose. Two weights per face: mono 400/700, sans 400/600.
Rasha Capital
Display / H1 · Mono · 400
About
Section / H2 · Mono · 400
Mathematical research and high-performance computing.
Body · Sans · 400
© 2026 Rasha Capital
Label / meta · Mono · 700
04 — Spacing & grid
Base unit 8px. Every margin, pad, and gap is a multiple. Text lives in a centred column capped at 40rem; pages carry a generous outer frame.
05 — Components
Link & back-link
Underlined link (hover to brighten)
Footer (this page uses it below)
The two page models
Light / signal — front door (Home)
Dark / document — About, legal, careers
06 — Motion
- Linefield (homepage): a grid of short segments follows a slow flow field while drifting centres deepen their weight; the cursor turns them into rings. Reduced-motion renders a static frame.
- Cursor glow (dev-only): a soft yellow trail, gated to
import.meta.env.DEV. An Easter egg, not the production language.
New motion must opt out via prefers-reduced-motion,
be eased not linear, and carry meaning — never movement for its own sake.
07 — Voice & tone
DO
"We are a proprietary trading firm focused on mathematical research and high-performance computing."
DON'T
"Unlock next-gen alpha with our cutting-edge, industry-leading AI trading platform."
Plain, technical, literal. Standard English, audited for grammar. Dates absolute. The About page is a legal disclosure, not a pitch.
08 — Gaps & roadmap
Open items only — none blocking, all cheap to close. Resolved ones are
struck through in /DESIGN.md §12.
- MISSING rasha.capital remains unpublished until DNS and a .com redirect are configured.
- PRINT Brand blue #0202CC is out of CMYK gamut → lock a Pantone + CMYK build before any card or poster.
- PRINT No logo / mark system → define a wordmark lockup, monogram, clear-space & reversed variants as vector.