SignalBreak Design System

Comprehensive design tokens and component patterns for the SignalBreak portal

Color Palette

All colors support both light and dark modes via the data-theme attribute

Brand Colors

Brand Primary

--color-brand-primary

Brand Secondary

--color-brand-secondary

Brand Accent

--color-brand-accent

Status Colors

Critical

--color-status-critical

High

--color-status-high

Medium

--color-status-medium

Low

--color-status-low

Info

--color-status-info

Neutral

--color-status-neutral

Surface Colors

Primary

--color-surface-primary

Secondary

--color-surface-secondary

Tertiary

--color-surface-tertiary

Border Colors

Subtle

--color-border-subtle

Default

--color-border-default

Text Colors

Primary

--color-text-primary

Secondary

--color-text-secondary

Tertiary

--color-text-tertiary

Inverse

--color-text-inverse

Typography

Type scale based on 1.25 ratio (Major Third) for harmonious progression

Type Scale

Display XLRevenue Growth Exceeds Forecast by 12%

--text-display-xlSize: Loading...

Display LGRisk Dashboard Overview

--text-display-lgSize: Loading...

Display MDSection Header Example

--text-display-mdSize: Loading...

Heading LGCard Title Example

--text-heading-lgSize: Loading...

Heading MDSubsection Header

--text-heading-mdSize: Loading...

Body LGPrimary content text goes here

--text-body-lgSize: Loading...

Body MDSecondary content text

--text-body-mdSize: Loading...

Body SMCaption or metadata text

--text-body-smSize: Loading...

Data1,234.56

--text-dataSize: Loading...

Font Families

DisplayThe quick brown fox jumps over the lazy dog

--font-displayInter Display, Georgia, serif

BodyThe quick brown fox jumps over the lazy dog

--font-bodyInter, system-ui, sans-serif

DataThe quick brown fox jumps over the lazy dog

--font-dataJetBrains Mono, monospace

Font Weights

Normal (400) - The quick brown fox jumps over the lazy dog

Medium (500) - The quick brown fox jumps over the lazy dog

Semibold (600) - The quick brown fox jumps over the lazy dog

Spacing

4px base unit spacing scale for consistent layout rhythm

Spacing Scale

Space 1

--space-1

4px

Space 2

--space-2

8px

Space 3

--space-3

12px

Space 4

--space-4

16px

Space 6

--space-6

24px

Space 8

--space-8

32px

Space 12

--space-12

48px

Space 16

--space-16

64px

Usage Examples

Padding

p-1 (4px padding)

p-4 (16px padding)

p-8 (32px padding)

Gap (Grid/Flex)

gap-2 (8px)

gap-4 (16px)

gap-8 (32px)

Motion

Purposeful animations with respect for reduced motion preferences

Transition Durations

Fast

--motion-fast

150ms

Normal

--motion-normal

250ms

Slow

--motion-slow

400ms

Easing Functions

Ease In

--easing-ease-in

Ease Out

--easing-ease-out

Ease In Out

--easing-ease-in-out

Common Use Cases

Hover States

Loading State

Card Interaction

Interactive Card

Hover to see transition

Expand/Collapse

This content animates smoothly when expanded or collapsed using the normal transition duration (250ms) with ease-in-out timing.

Accessibility Note

All motion respects the prefers-reduced-motion media query. When users have reduced motion enabled in their system preferences, all transition durations are set to 0ms to prevent motion sickness or discomfort.