Design system

Design system.

The building blocks of the RaceLineApp.ai interface: colour tokens, typography and live components, built from the same tokens as the live site. For the logo and press assets, see the brand kit.

Logo & brand kit
Principles

Dark by default

The interface is an instrument, not a brochure. It runs dark, reads at a glance, and uses colour to carry meaning rather than decorate. The three coaching commands - Brake, Turn, Power - are a locked colour triad used identically in the app, on the Dash Puck LED and in any future HUD.

Two type systems run in parallel and never cross: a consumer-tech voice for marketing, and an instrument-cluster voice for the product UI.

Colour

Tokens

Every colour is a CSS custom property in global.css. State colours are never decorative. Print (CMYK) values live on the brand kit.

Race Blue
#0077CC--blue
Identity and full large headings on dark
Deep Blue
#005FA3--deep-blue
All call-to-action buttons
Speed Cyan
#00C8FF--cyan
Accent, links, active states, headline highlights. On dark only, never on white
Deep Track
#0F1923--track
Page background
Cockpit Dark
#1A2E3D--cockpit
Cards and panels
Surface Dark
#162330--surface
Cards on dark surfaces
Carbon Slate
#2D3E50--slate
Borders and dividers
Grid Grey
#7A9BB5--grey
Muted text and labels
White
#FFFFFF--white
Headlines and body text
Brake
Brake Red
#CC2200--red
Brake cue fills and chips
Brake Alert
#FF6033--brake
Brake cue text where contrast matters
Turn
Warning Amber
#FFB300--amber
Turn-in cue
Power
Power Green
#00CC66--green
Exit cue
Typography

Type

Four faces, all free from Google Fonts. Barlow and Barlow Condensed carry marketing; Rajdhani and Share Tech Mono are reserved for in-app readouts.

Headings
BRAKE LATER.
CARRY SPEED.
Barlow Condensed · 700 / 900 · uppercase, tracked
Body
Short, clear cues through every corner, in the words a race engineer would use from the passenger seat.
Barlow · 300 / 400 / 500
In-app labels
BRAKE  TURN  POWER
Rajdhani · 600 / 700
Telemetry & data
v 142 kph · μ 1.0 · Δ −0.08
Share Tech Mono
Components

Building blocks

The core UI elements, rendered live. Semantic colour is kept separate from the accent and only ever signals state.

Reserve my placeLearn more
Buttons Primary in Deep Blue; ghost for secondary actions.
BrakeTurnPower
Cue chips The locked coaching triad. Never used decoratively.
Turn in
Turn-in · 40 m
Coaching cue card Left colour bar in the triad, the cue in plain English, phase label and distance.
MW
Brake later, carry more speed through the middle.
Voice bubble Initials avatar, never a photo.
BrakeTurnApexPower
Lap-phase strip Colour carries the phase. Colour is information.
Building Confidence
Driver badge Human language, never "Level 1".
Logo

Brand kit

The logo lockups, clear space, print values and download pack live on the brand kit, for press and partner use.

Open the brand kit

We use Google Analytics cookies to understand how people use this site. They're only set if you accept. See our Privacy Policy.