Transmodal ยท Design system v1

Preview manifest

Reviewable cards for the visual system. Each card mounts the production colors_and_type.css tokens directly so what you see is what gets shipped.

Color

Primary palette

Brand scale: navy, brand blue, cyan, lime accent. Token names, hex values, and contrast pairs.

Color

Light theme

Semantic neutrals and state tokens applied to surfaces, cards, and text in the default theme.

Color

Dark theme

Operations canvas โ€” navy surfaces, brand-blue structure, lime CTA. The dispatch view.

Type

Typography specimens

DM Sans bound from fonts/. Display, headings, body, caption, and monospace numerals.

Spacing

Spacing scale

8-pt base. From 4px chip padding to 128px deck margins, shown to scale.

Spacing

Radius tokens

Four corner radii from 4px chip to 20px hero panel.

Spacing

Elevation

Three-step shadow ladder: resting, hover, floating.

Components

Buttons

Primary (lime), Secondary (navy), Ghost, Destructive โ€” with hover, focus, and disabled states.

Components

Inputs & pills

Form controls and status pills for shipment, customs, and dispatch states.

Brand

Brand assets

Real wordmark files from assets/ + build/, plus the institutional photo.