Design System v2.0

Living Style Reference

273 tokens across shared, dark, and light layers. One JSON file drives every color, font, and spacing value.

Get Started FreeRead the Docs

Token Architecture

The source of truth is signalwire-tokens.dtcg.json, a W3C Design Tokens Community Group file. Every color, font, spacing value, and component style derives from that file.

Three layers: shared (brand, typography, spacing), dark (surfaces, foreground, borders), and light (same structure, different values). Change a token, rebuild, and every surface updates.

Downloads

signalwire-tokens.dtcg.json

W3C DTCG token file. Single source of truth for all design values.

→ signalwire-system.css

Generated CSS custom properties. Token variables for dark and light themes.

→ signalwire-roles.css

Component role mappings. Maps UI elements to the correct tokens.

→ signalwire-daisyui-theme.css

DaisyUI 5 theme generated from tokens.

→ Logo (white text)

Full logo for dark backgrounds.

→ Logo (black text)

Full logo for light backgrounds.

→ Logo (brackets)

Bracket mark for favicons and compact use.

→

Prefix Map

foreground → fg
--fg-default, --fg-secondary, --fg-muted, --fg-headings
background → bg
--bg-page, --bg-surface, --bg-surface-raised
border → border
--border-default, --border-strong
brand → sw
--sw-blue, --sw-fuchsia, --sw-turquoise, --sw-gold
syntax → tok
--tok-keyword, --tok-string, --tok-function, --tok-comment
typography → type
--type-family-heading, --type-family-body, --type-size-h1

Color Palette

Brand Colors (locked)

Blue
#044EF4
Fuchsia
#F72A72
Purple
#601BE6
Turquoise
#40E0D0
Gold
#FFD700

Dark Surfaces

Page
#0e0e18
Surface
#181a28
Raised
#222436

Dark Foreground

Default
#f0f0f4
Secondary
#e8e8ec
Muted
#a0a0aa
Subtle
#73737e

Light Surfaces

Page
#FAFBFC
Surface
#F3F4F6
Raised
#E8EAF0

Color Discipline: 60-30-10

60% neutral surfaces and headings. 30% secondary text and surface alternation. 10% accent.

Headings are neutral (#f0f0f4 dark, #070c2d light). Typography carries hierarchy through size, weight, and font family.

Fuchsia is the single accent for stats, eyebrows, links, buttons, and tab indicators. Blue is structural (borders, step numbers). Turquoise is semantic positive only (checkmarks). Gold is warnings only.

Color Roles

Fuchsia (the accent, 10%)

  • Stat values and pricing numbers
  • Eyebrows and section labels
  • Links and hover states
  • Primary buttons
  • Active tab indicators
  • Table header lines
  • Hero emphasis words (rare, 1-2 max)

Everything else (neutral)

  • Headings: neutral cool white / deep navy
  • Body text: secondary gray hierarchy
  • Blue: structural borders, step numbers
  • Turquoise: positive checkmarks only
  • Gold: warning callouts only
  • Card titles and bold: weight, not color

Typography

Headings
Instrument Sans, 700 weight, tight letter-spacing (-0.02em hero, -0.01em sections).
Body
Lexend, 400 weight, 1.7 line-height. Designed for readability with expanded character spacing.
Code
JetBrains Mono, 400 weight. Eyebrows, labels, badges, inline code, and code blocks.
Line length
50-75 characters for prose (65ch max-width). 80-120 characters for code.
Emphasis
Hero keywords use the emphasis token. Reserved for 1-2 words that carry the core message. Most headings have no colored words.
Specimens

Typography in use

Hero eyebrowJetBrains Mono · 11px · 0.14em tracking · accent · leading dash
A hero eyebrow
H1 hero titleInstrument Sans · 700 · -0.02em tracking

The headline that pulls you in

Hero subtitleLexend · 400 · 1.6 line-height

The subtitle elaborates on the headline in one or two sentences without repeating it.

Section eyebrowJetBrains Mono · 11px · 0.14em tracking · accent · no dash
A section eyebrow
H2 section titleInstrument Sans · 700 · -0.01em tracking

A section title

H3 feature titleInstrument Sans · 700

A feature title

Body paragraphLexend · 400 · 1.7 line-height · 50-75ch line length

Body copy is set in Lexend at 1rem with a 1.7 line-height. Designed for readability across long-form content. The accent color is reserved for emphasis: specific terms, links, and inline code.

Inline codeJetBrains Mono · accent background tint

Reach for inline_code for short identifiers inside a sentence.

Code blockJetBrains Mono · always dark surface · syntax highlighted
const greet = (name) => `hello, ${name}`;

Callout styles

Use one callout per screen, two max. Each style maps to a specific intent. Don't repurpose colors. The style names below match the style field in the section JSON.

Info callout (style: info) Blue. Useful framing context, a note, an observation. Default choice when the message is informational.
Warning callout (style: warning) Gold. Soft warning. Reader should pause, but nothing's broken. Use sparingly.
Danger callout (style: danger) Fuchsia. Hard warning. The reader should stop and reconsider. Reserve for genuinely high-stakes content.
Success callout (style: success) Green. Positive confirmation. The reader did the right thing or the system is in a good state.

Design Principles

Dark-mode-first

Design for dark, adapt for light. Not an inversion.

Mobile-first responsive

Base styles for phones, min-width queries for desktop.

Touch targets: 48px

Minimum on mobile. No hover-only interactions.

Cards use depth

Raised background + inset highlight + depth shadow. No colored borders. Hover reveals fuchsia glow.

Code blocks: always dark

Terminal-style window with title bar, traffic light dots, and copy button. Dark in both themes.

Callout scarcity

One per screen, two max. Info (blue), warning (gold), danger (fuchsia), success (green).

Code Example

from signalwire_agents import AgentBase

agent = AgentBase(name="receptionist")
agent.prompt_add_section("role",
    body="You are a receptionist. Route calls.")
agent.run()

Background Patterns

sw-bg-dots
Dot grid at 24px intervals. Clean, minimal. Works at any scale.
sw-bg-grid
Line grid at 48px intervals. Blueprint/engineering feel.
sw-bg-noise
SVG fractal noise at 2.5% opacity. Film grain texture.
sw-bg-hex
Hexagon outlines. Infrastructure/network feel.
sw-bg-diagonal
Diagonal lines at 2% opacity. Subtle energy/motion.
sw-bg-orbs
Three gradient orbs in brand blue, fuchsia, purple. Atmospheric depth.
sw-bg-logo
SignalWire bracket mark outlines in brand colors. Three sizes, three positions.
sw-bg-dots-orbs
Dots over gradient orbs. Structure + color depth. Good for hero sections.
sw-bg-grid-orbs
Grid over gradient orbs. Technical feel. Good for architecture pages.
sw-bg-logo
SignalWire bracket marks in blue, fuchsia, purple. Three sizes, outline only. Branded hero and CTA sections.

Using Patterns

Add a pattern class to any container: <div class="sw-bg-dots">. The pattern renders via a ::after pseudo-element so it layers behind content.

In landing page JSON, add "bg": "dots" to any section. The builder injects the class automatically.

Patterns work on sections, cards, hero areas, or full pages. Combine with surface colors for depth.

Single source of truth Every color, font, spacing value, component style, and background pattern on this page comes from one JSON token file. Change a value, regenerate, and every surface updates.

Trusted by 2,700+ companies