Aa
Zalando Sans
Headings at 900 italic. Body at 400.
// Design system
Every token. One page.
The native Bricks foundation behind this site: palette, type, spacing, theme style and classes. Every sample below reads the live token, so change it in the Style Manager and this page follows.
// 01 Colour
Fourteen colours. No more.
Palette Morningstar. Each colour is a CSS variable named for its role. Cyan marks the one primary action per view, and whatever is live, selected or focused.
Accent
--primary
The one primary action. Focus ring, selection.
--primary-bright
Kickers, links, hover.
--primary-press
Pressed state.
--on-primary
Text on primary.
Surface
--surface
Page background, header.
--surface-sunken
Sunken bands, footer, form fields.
--surface-card
Cards.
--surface-raised
Default buttons.
Ink
--ink
Headings, figures.
--ink-body
Body copy.
--ink-muted
Secondary copy, labels.
--ink-faint
Faintest ink. Large text and non-text only (3.8:1 on --surface). Same hex as --border.
Line and state
--border
Rules and frames. Same hex as --ink-faint.
--danger
Destructive actions, errors.
// 02 Type
Three families. One scale.
Google Fonts, loaded by Bricks from the family names in use. Nothing else is loaded.
Families
Aa
Orbitron
Buttons and navigation. 700, uppercase.
Aa
Space Mono
Kickers, eyebrows, labels, figures, codes.
Scale
Style Manager › Typography. Fluid t-shirt scale, 16 to 20px base, ratio 1.2 to 1.333, between 360 and 1280px viewports. The two smallest steps are set by hand: --text-s 15 to 16px, --text-xs 12 to 13px. Nothing goes below 12px. Resize the window to watch it move.
--text-4xl
Contract 7743-C
--text-3xl
Contract 7743-C
--text-2xl
Contract 7743-C
--text-xl
Contract 7743-C
--text-l
Contract 7743-C
--text-m
Contract 7743-C
--text-s
Contract 7743-C
--text-xs
Contract 7743-C
Headings
Theme style Morningstar root. Zalando Sans 900 italic in --ink. Headlines keep their full stop.
H1
H2
Sector clear.
H3
Convoy formed.
H4
Escort on station.
H5
Cargo secured.
H6
Jump plotted.
Text styles
.kicker
// Fleet operations
.eyebrow
Escort
.lead
Escort, salvage and logistics in contested space, run like a contractor.
Body
Our pilots fly the route as briefed. Deviations are logged, costed and reported. No questions, just coordinates.
Link
Read the spacing scale next.
.stat-value / .stat-label
98.2%
Cargo delivered intact
.wordmark
Morningstar Dynamics.
.legal
© 2026 Morningstar Dynamics. Unaffiliated.
// 03 Spacing
Eight steps. All fluid.
Style Manager › Spacing. Every step is set by hand and scales fluidly between 360 and 1280px viewports. Each square is its token on both sides.
--space-3xl
--space-2xl
--space-xl
--space-l
--space-m
--space-s
--space-xs
--space-2xs
// 04 Components
Built from the tokens.
Hover a button to see the engine-glow sweep. Tab through them to see the focus ring. Select any text to see the selection colour.
Buttons · theme style
The Bricks Button element. Styles primary, default, light and danger. Sizes sm, md and lg.
Card · .cards .card
Escort
Armed transit.
Framed top and bottom only. --surface-card, 1.5px --border, 16px radius.
Salvage
Recovery, not scrap.
Flat at rest. No outline, no coloured shadow.
Logistics
On time, on station.
Padding --space-l. Three columns from 768px.
Stats · .stats .stat
142
Hulls under contract
98.2%
Cargo delivered intact
7743-C
Latest contract
// 05 Theme style
The rest of the rules.
Theme style Morningstar root, applied to the entire website, plus Bricks breakpoints.
Root size
Container
Section padding
Content margin
Radius
Borders
Control height
Focus
Selection
Button hover
Links
Form fields
Motion
Colour scheme
Breakpoints
// 06 Classes
Reuse before you add.
Global classes in Style Manager › Classes. The sg- classes exist only for this page.
Layout
Type
Actions
Chrome
This page