Valkyre Design System · v1.0

Design tokens & components

Nordic steel meets modern SaaS. Dark, precise, and calm — a security operations console, not a hacker cliché. The canonical spec lives in STYLE-GUIDE.md; this page renders it live.

Color

Gold conveys valor and decisiveness. Aurora teal conveys live signal and verification. Team colors are semantic, never decorative.

Neutrals — night steel

Night--vds-night · #070b12

Surface--vds-surface · #0d141f

Surface raised--vds-surface-raised · #121b29

Text--vds-text · #edf1f7

Text muted--vds-text-muted · #8fa0b5

Text faint--vds-text-faint · #5c6b80

Brand accents

Gold--vds-gold · #e3b458

Gold deep--vds-gold-deep · #b8893a

Aurora--vds-aurora · #37d3b4

Team semantics

Red team--vds-red-team · #f0596d

Blue team--vds-blue-team · #58a6ff

Purple team--vds-purple-team · #a78bfa

Typography

System font stacks — zero external requests. Fluid scale clamped between 360px and 1280px viewports. Mono is reserved for eyebrows, tags, terminal panels, and numerals.

--vds-fs-hero · clamp(2.375rem → 4.25rem) · 700 · -0.015em

Speed of modern threats

--vds-fs-2xl · clamp(1.75rem → 2.625rem) · 700

Section heading

--vds-fs-lg · clamp(1.125rem → 1.375rem) · lede

Lede paragraph — supporting the heading with context.

--vds-fs-base · 1.0625rem · body · line-height 1.65

Body copy. Confident, precise, operations-literate. No fear-mongering, no hacker clichés.

--vds-fs-xs · 0.8125rem · mono eyebrow · 0.14em trackingManaged Security Operations

Components

Buttons

Primary action Ghost action

Team cards

Offense

Red card

3px top border in the team color; otherwise standard card chrome.

Defense

Blue card

Raised surface, hairline border, 16px radius, subtle long shadow.

The Loop

Purple card

Team colors are semantic — never decoration.

Terminal panel

PANEL · EXAMPLE

$ status
✓ ok state      key value
▲ warn state    threshold approached
✗ critical      requires human approval

Loop banner

Discover→Validate→Improve→Measure

Principle + checklist

Principle item

2px gold left border, no card chrome. For value statements.

Checklist item with CSS-drawn aurora checkmark