Design system preview
Use the sidebar to jump between sections. This page shows MissionOS tokens, component styles, and layout patterns.
Click Copy to copy token + hex.
MissionOS Navy
BLAZE ORANGE
IVORY
JET BLACK
WHITE
LIGHT BLUE
DARK TEAL
BLACK
Brand alias
Inter, with readable sizing and consistent hierarchy. Uses existing text tokens (--header-text, --header-muted).
font-family: 'Inter', ...
Body (16px): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link in body text.
Helper text: concise guidance and secondary information.
code
- Strong emphasis for key values.
- Italic for subtle emphasis.
- Consistent spacing between items.
Use paragraphs for longer guidance. Keep lines short where possible, and prefer clear sentence structure.
“A short quote / callout can highlight an important rule or caution.”
// Code block\nconst token = "--mos-blaze-orange";\nconst value = "#FD5902";| Metric | Value |
|---|---|
| Open tasks | 12 |
| Overdue items | 3 |
| Approvals | 7 |
.ds-tooltip-wrap + .ds-info-btn (or .btn-info) + .ds-tooltip with role="tooltip" and aria-describedby. Hover or keyboard focus shows the tip. Add .ds-tooltip-wrap--tip-bottom to point downward.
.ds-card)Nested cards use the same padding tokens as .main-card. Use .ds-card--compact or .ds-card--flush when needed.
Padding: --space-field × --space-block.
Use .ds-tabs, .ds-tablist, .ds-tab, .ds-tabpanels, .ds-tabpanel. Toggle .is-active and aria-selected on the tab; show the matching panel.
.ds-select-search uses the same dropdown arrow as select.select (10×6px, #6a6f83). Native select uses appearance: none plus the shared SVG.
Inputs, textarea, selects, stacks, fieldset, and .form-actions. Default text/select use --input-min-width / --input-max-width.
.input--fluid allows full width of the parent (still respects min width).
.radio-stack).opt (checkboxes)Example two-column admin form using .text-input, .select, .btn-secondary, and .form-actions. See the full page in users.html.