The design system of universum
universum's tokens and Vue component library — no build step, served straight
from this domain and consumed by the platform's applications (today, source-apps).
A single <link> and one import register the
55 components below.
/v1/ is the contract. A breaking API change becomes /v2/, and
/v1/ stays served — no application breaks because of a deploy here.
A compatible fix ships in /v1/ itself.
The scales, not described — copyable
Each sample below is the real token, rendered with its own value. The name in mono is what you copy into your CSS.
Color
White page, blue-gray surface and three identity colors. The brand gradient is never a background — only gradient type, a rail or a border.
Identity
Brand gradient — blue to red
Neutrals — every gray leans blue
Status
Surfaces and borders
Typography
Inter (SF Pro on Apple devices). One family covers everything — no serif, no separate display face.
Size scale
Weights
Tracking
Space
A deliberately crooked scale — 2 to 80px, not snapping to a 4px grid.
Radii
Nothing is fully square; nothing is a squircle blob.
Shadows
Always with marine ink — rgba(43,48,134,…), never neutral black.
The 55, with real data from the universum domain
Organizations, roles, invitations, tickets, sessions and plans — the same kind of data that runs in the real applications.
Form controls
The data-entry building blocks — button, field, select.
Button
<u-button>Five variants, three sizes. accent is the only CTA per screen.
IconButton
<u-icon-button>Icon-only square, always with an accessible label.
Input
<u-input>Label, icon, suffix, hint and error — all optional.
Textarea
<u-textarea>Multiline, same hairline and focus ring as Input.
Select
<u-select>Native, with the Input's metrics.
Checkbox
<u-checkbox>17px, blue fill when checked.
Radio
<u-radio>v-model on the group; each radio carries its own value.
Switch
<u-switch>Immediate effect — the only control where the duo appears switched on.
Field
<u-field>Label + control + hint/error. Wraps any form control.
SearchField
<u-search-field>Glyph + shortcut hint + clear.
SegmentedControl
<u-segmented-control>Two to four mutually exclusive views of the same thing.
Slider
<u-slider>Rail filled by the duo gradient up to the value.
OtpInput
<u-otp-input>Six-digit code — Pulsar's gate before opening a session.
FileDropzone
<u-file-dropzone>The drag-over is the whole feedback: accent border + wash.
Show data
People, status, metadata and tables — the vocabulary of any universum panel.
Avatar
<u-avatar>Initials only — no photos in this system. The gradient is reserved for the agent.
Badge
<u-badge>Ticket, invitation or sync state.
Card
<u-card>The container surface — including the one drawing this very card.
CodeBlock
<u-code-block>Flat mono, no highlighting. The copy button confirms in place.
DataTable
<u-data-table>Gray band on the header, no outer frame. Scrolls sideways without pushing the page.
Kbd
<u-kbd>A single key — universum documents shortcuts everywhere.
KeyValue
<u-key-value>Label on the left, value on the right — the standard detail panel.
Stat
<u-stat>Big number in gradient — the highlight moment, never in a table cell.
StatusDot
<u-status-dot>Status dot, optionally pulsing.
Tag
<u-tag>Static label — micro for a category, chip for a feature row.
Timeline
<u-timeline>What happened on a ticket — and who did it, person or agent.
TreeList
<u-tree-list>Expandable hierarchy — knowledge base folders.
UserCell
<u-user-cell>Avatar + name + secondary line — the person unit in tables and lists.
Talk to whoever is using it
Persistent state, transient confirmation, loading and the focused decision of a dialog.
Alert
<u-alert>Banner pinned to a region — state the person needs to keep seeing.
Dialog
<u-dialog>Focused decision — trapped focus, Esc closes, focus returns to whoever opened it.
This does not remove the history of tickets they already answered.
EmptyState
<u-empty-state>Zero state — icon, title, message and one action to leave it.
Popover
<u-popover>Between Tooltip and Dialog — a quick filter, without leaving the queue.
ProgressBar
<u-progress-bar>Determinate rail — the 3px rail is one of the three shapes of the brand gradient.
Skeleton
<u-skeleton>Placeholder shaped like the content, while the ticket loads.
Spinner
<u-spinner>Indeterminate arc — only for waits above ~400ms.
Orb
<u-orb>Rich loading — 9 thinking states on canvas, in the brand blue. It's the loading vocabulary; the Spinner is the inline minimum.
{{ s }}
Toast
<u-toast>Transient confirmation — anchored to the screen corner in the real application.
Tooltip
<u-tooltip>Instant bubble — explains an icon, never hides essential content.
The brand
Icon, wordmark, gradient type and the eyebrow — the identity devices.
Icon
<u-icon>Lucide via CSS mask (inherits currentColor), or your own glyph via src.
Logo
<u-logo>Symbol + wordmark in curves — "versum" and the core stay red even over navy.
GradientText
<u-gradient-text>Type filled with the brand gradient — a single moment per screen.
Identity in
Kicker
<u-kicker>Uppercase, wide tracking — a typographic device, never emphasis.
What the library enforces
These aren't layout preferences — they live in reference/DESIGN-SYSTEM.md and each component's CSS applies them on its own. Here they appear as rules, not as decoration.
The brand gradient appears in type, on a 3px rail or on a border — never a flat fill, and never twice in the same view.
Only the contracted plan gets a gradient border.
Title, button, table header, navigation. Uppercase is the kicker's typographic device — never emphasis on ordinary text.
Lucide icons only. An icon inherits currentColor and has a consistent size and stroke; an emoji doesn't.
A Lucide icon in place of a pictogram.
White + gray-50. This showcase itself only alternates between the two, section by section.
Never neutral black. All four elevation scales carry rgba(43,48,134,…).
Loss of emphasis is opacity:.55, not gray text — the token keeps the same ink on any background.