Design system
The trainrs.ai design system
One coherent, ownable system — built to feel premium and convert, and deliberately distinct from generic AI aesthetics (no purple gradients, no default sans).
Logo
Concept: a graduation cap over three stacked layers — learning, built up week by week — in a warm orange gradient. The wordmark is lowercase, with .ai in brand orange.
Usage
✓ Keep clear space equal to the mark height. ✓ Use the white lockup on ink/photography.
✗ Don't recolour the mark, stretch it, or place the ink lockup on dark backgrounds.
Assets: /logo.svg, /favicon.svg, component <Logo />
Colour
Ink
Primary text, dark surfaces
Brand (orange)
Primary CTA, energy, emphasis — the logo
Accent (teal)
Structure, links, ticks
Wow (amber)
Wow-moment highlights only
Mist
Section backgrounds
Line
Borders, dividers
Typography
Display: Space Grotesk · Body: IBM Plex Sans.
Components
Buttons
Pills & badges
The wow component
Used across the homepage reel, week pages and the learner portal to flag the transformational moment.
Appears wherever a week's wow is referenced
Voice & tone
Direct
Say the useful thing first. Lead with the outcome, not the preamble.
Practical
Build, don't lecture. Concrete examples over abstractions.
Honest
No hype, no fake metrics. Diligence and guardrails, always.