Signal Design System

3-layer token architecture: --p-* primitives → --mn-* semantic → --mn-component-* component tokens. Toggle dark/light/system in the top right.

Layer 1 — Primitive Tokens

Raw values. Named by what they ARE. Prefixed with --p-*. Never used directly in components.

Colors

--p-green-400#34D399

--p-green-600#145C47

--p-green-800#0A2E23

--p-green-950#040E0B

--p-red-500#EF4444

--p-red-600#DC2626

--p-blue-400rgb(96,165,250)

--p-amber-500#F59E0B

--p-gray-950#09090B

--p-gray-900#111113

--p-gray-800#18181B

Layer 2 — Semantic Tokens

Contextual meaning. Named by what they MEAN. Prefixed with --mn-*. These change per theme — toggle dark/light above to see values adapt.

Surfaces

--mn-bgPage background

--mn-bg-hoverHover overlay

--mn-cardCard background

--mn-card-elevatedElevated cards

Text

--mn-textPrimary text

--mn-text-secondaryBody text

--mn-text-mutedCaptions, meta

--mn-text-dimDecorative

Borders

--mn-borderDefault border

--mn-border-subtleSubtle lines

--mn-border-hoverHover border

Hero

--mn-hero-bgHero background

--mn-hero-bg-lightGradient end

--mn-hero-accentHero highlight

--mn-hero-accent-bgHero accent bg

--mn-hero-accent-borderHero accent border

Accent

--mn-accentLabels, highlights

--mn-accent-hoverHover state

--mn-accent-bgBackground

--mn-accent-borderBorder

Info

--mn-infoInfo color

--mn-info-bgBackground

--mn-info-borderBorder

Warning

--mn-warningWarning color

--mn-warning-bgBackground

--mn-warning-borderBorder

Layer 3 — Component Tokens

Specific usage. Named by WHERE they're used. Prefixed with --mn-component-*.

TokenValueUsage

--mn-button-radiusvar(--mn-radius-md)Button border radius

--mn-button-font-size14pxButton font size

--mn-badge-radiusvar(--mn-radius-sm)Badge border radius

--mn-badge-font-size11pxBadge font size

--mn-card-radiusvar(--mn-radius-lg)Card border radius

--mn-card-paddingvar(--mn-space-6)Card padding

--mn-card-padding-lgvar(--mn-space-8)Featured card padding

--mn-section-paddingvar(--mn-space-24)Section vertical padding

--mn-section-header-marginvar(--mn-space-12)Header bottom margin

--mn-dash-row-height50pxDashboard row height

Spacing

4px base grid. All spacing through --mn-space-* tokens.

--mn-space-1

4px

--mn-space-2

8px

--mn-space-3

12px

--mn-space-4

16px

--mn-space-5

20px

--mn-space-6

24px

--mn-space-8

32px

--mn-space-10

40px

--mn-space-12

48px

--mn-space-16

64px

--mn-space-24

96px

Motion

All animations use token durations. Honors prefers-reduced-motion — durations go to 0ms.

TokenValueUsage

--mn-duration-fast150msHover, focus states

--mn-duration-normal250msTransitions, toggles

--mn-duration-slow500msPage transitions, reveals

--mn-easecubic-bezier(0.4, 0, 0.2, 1)Default easing

Border Radius

--mn-radius-sm4pxBadges, pills, tags

--mn-radius-md6pxButtons

--mn-radius-lg8pxCards, containers

Typography

Headings & UI: Geist / SF Pro (--mn-font-body). Labels & code: JetBrains Mono (--mn-font-mono).

Hero headlineSF Pro / Geist · clamp(40px,6vw,72px) / 700

Section headlineSF Pro / Geist · clamp(28px,4vw,48px) / 700

Card titleSF Pro / Geist · 18px / 600

Body textSF Pro / Geist · 16px / 400

Small body / ButtonSF Pro / Geist · 14px / 500

Section labelJetBrains Mono · 12px / 500

Nav logo / Footer logoJetBrains Mono · 18px / 700

Badge / MetaJetBrains Mono · 11px / 400

Buttons

Built with class-variance-authority. Each variant has 3 sizes (sm, md, lg) and hover/focus states.

Primary — accent bg, for main CTAs

hover: accent-hover

Secondary — transparent bg, border, for secondary actions

hover: bg-hover · border-hover

Outline — dark bg, subtle border, for hero/dark contexts

hover: card bg

Props: variant (primary | secondary | outline) · size (sm | md | lg)Tokens: --mn-button-radius · --mn-button-font-size

Badges

Built with CVA. Variants: green, red, blue, orange, processing.

HealthyAlertRunningWarningFixing...

Card (Compound Component)

<Card> + <Card.Header> + <Card.Body>

Feature001

Card Title

Card description text using semantic tokens for color and spacing.

Section Label (Pill)

Label Text

Icons

LogoIcon

CheckIcon

Shared Components

ComponentPropsDescription

<SectionWrapper />children, className?, id?, as?Wraps every section with container + vertical lines. Polymorphic.

<SectionHeader />label, icon, headline, desc?Section pill label + headline + optional description

<Badge />variant, size?, childrenCVA status badges (green, red, blue, orange, processing)

<Button />variant, size?, childrenCVA button (ghost, hero, accent) with size variants

<Card />children, className?Compound: Card, Card.Header, Card.Body

<Spinner />colorAnimated loading dot inside badges

<LogoIcon />—Signal logo SVG (nav + footer)

<CheckIcon />—Checkmark SVG (section headers)