Design

RailAI Design System

Tokens, typography, colors and components that power every surface of the RailAI platform.

Colors

Color palette

All colors use OKLCH for perceptual uniformity across light and dark themes.

Accent
var(--accent)
Primary actions, links and emphasis
L: oklch(0.52 0.15 256)
D: oklch(0.66 0.13 256)
Lime
var(--lime)
Positive signals, growth, success
L: oklch(0.52 0.12 155)
D: oklch(0.76 0.12 155)
Amber
var(--amber)
Warnings, medium scores, caution
L: oklch(0.6 0.1 75)
D: oklch(0.79 0.11 80)
Rose
var(--rose)
Errors, negative signals, alerts
L: oklch(0.55 0.16 24)
D: oklch(0.67 0.14 22)
Ink 1
var(--ink-1)
Primary text
L: oklch(0.27 0.028 258)
D: oklch(0.96 0.005 256)
Ink 2
var(--ink-2)
Secondary text
L: oklch(0.46 0.025 258)
D: oklch(0.73 0.012 256)
Ink 3
var(--ink-3)
Tertiary text, placeholders
L: oklch(0.62 0.016 258)
D: oklch(0.56 0.014 256)
Background 0
var(--bg-0)
Page background
L: oklch(0.975 0.004 250)
D: oklch(0.19 0.012 256)
Background 1
var(--bg-1)
Card background
L: oklch(1 0 0)
D: oklch(0.225 0.013 256)
Background 2
var(--bg-2)
Hover, inputs, secondary surfaces
L: oklch(0.965 0.005 250)
D: oklch(0.27 0.014 256)
Typography

Type scale

Three typefaces for three purposes: display, UI and data.

Space Groteskvar(--display)
Display & headings
Predict. Connect. Distribute.
Manropevar(--ui)
Body & UI
The quick brown fox jumps over the lazy dog.
JetBrains Monovar(--mono)
Code, data & labels
viralScore: 88 | engagementScore: 92
Components

Component showcase

Buttons
Chips
DefaultAccentLimeAmberRose
Cards
Default card

Standard .card class with border and background.

Lift card

Add .lift for hover elevation effect.

Accent border

Accent border for highlighted state.

KPI Tile
Network Reach
48.2M
Viral Score
73
Revenue
$284K