Design System

The building blocks
behind the work.

Color, type, and components — the decisions that make interfaces feel consistent, intentional, and alive. These aren't decorative choices. They're the rules the work plays by.

01

Palette

Core tokens used across all Train5D interfaces. Each color has a role — not just an aesthetic.

Brand
#28b8e0
Brand Dark
#1ea8ce
Ink
#1a2e44
Navy
#464659
Muted
#6b7280
Light
#9ca3af
Border
#e5e7eb
Surface
#f8fafc
02

Type Scale

Two families, clear roles. Poppins carries all headings and body. Space Grotesk handles labels, numbers, and UI chrome.

Display
Poppins / 2.4rem / 700
The craft of decisions
Heading
Poppins / 1.6rem / 700
Section heading
Subheading
Poppins / 1rem / 600
Subheading or card title
Body
Poppins / 0.95rem / 400
Body copy that reads at length. Clear, open, with enough line height to breathe across multiple paragraphs without fatigue.
Label
Space Grotesk / 0.65rem / 700
Section label / tag
Wordmark
Just Another Hand / 2.2rem
Manning Stinson
03

Actions

Every button variant and size. Primary is always teal. Secondary and ghost provide hierarchy without competing.

Primary Secondary Ghost Dark
Small Default Large
04

Inputs

Form fields with clear label hierarchy, focus state, and error handling baked in from the start.

We'll never share your email.
Enter a valid email address.
05

Containers

Cards as containers for scannable content. Subtle hover lift keeps interaction clear without being heavy-handed.

Structure
Grid-based layout with consistent spacing tokens throughout.
Color
A focused palette that communicates hierarchy without decoration.
Typography
Three families, each with a clear job. No overlap, no confusion.
06

Status & Labels

Small but precise. Badges carry status meaning — color is always functional, never decorative here.

Active Complete In Progress Error Draft