Brand Guidelines

Design Rules

What to do, what not to do, and why. These rules keep the design system coherent across every surface.

Get Started FreeRead the Docs

Philosophy

The design system is deliberately restrained. High-contrast text on neutral backgrounds. Brand colors appear sparingly so that when they do appear, they signal something important.

Headings are neutral. Fuchsia draws the eye to stats, eyebrows, links, buttons, and the rare emphasis word in a hero headline. Scarcity makes it powerful. Every other color has a constrained role.

The core principle: if everything is colorful, nothing stands out. Colors earn their place by being rare.

Color Discipline

Do

  • Use fuchsia for interactive and hierarchy elements
  • Use blue for structural borders and step numbers
  • Use neutral headings (white dark, navy light)
  • Let typography carry emphasis before reaching for color
  • Use turquoise only for positive checkmarks
  • Use gold only for warnings

Don't

  • Use turquoise as a general accent color
  • Cycle through all four brand colors on UI elements
  • Put gold or turquoise on text that needs to be read
  • Use more than one accent color in a single component
  • Color headings (they are neutral, not accented)
  • Use colored top borders on cards

Color Roles

Fuchsia (accent)
Stats, eyebrows, links, primary buttons, tab indicators, table header lines, testimonial quote marks, FAQ markers, pricing numbers, and rare hero emphasis words. The 10% that guides the eye.
Blue (structural)
Accent bar edges, step number circles. Structural rhythm, not interactive.
Turquoise (semantic)
Positive checkmarks in comparison and pricing lists. Never as a UI accent or text color.
Gold (warning)
Warning callouts only. Never decorative.

Typography Rules

Do

  • Use Instrument Sans for headings and titles
  • Use Lexend for body text and descriptions
  • Use JetBrains Mono for code, labels, eyebrows
  • Keep prose line length under 65ch
  • Use heading size and weight for hierarchy

Don't

  • Mix heading and body fonts in the same element
  • Use Outfit (deprecated, replaced by Lexend)
  • Set prose wider than 65 characters per line
  • Use color alone for heading hierarchy
  • Apply emphasis color to more than 2 words per heading

Token Architecture

signalwire-tokens.dtcg.json
Single source of truth. W3C DTCG format. 273 tokens across shared, dark, and light layers.
signalwire-system.css
Generated CSS custom properties. Token variables scoped to :root, [data-theme="dark"], and [data-theme="light"].
signalwire-roles.css
Component role mappings. --role-* properties that resolve to system tokens. Font shorthands.
landing.css
Component styles for the landing page generator. All values via var() references to system tokens.
build_design.py
The ONE CSS generator. Reads DTCG, produces system CSS and roles CSS. Everything else consumes its output.

Component Rules

Do

  • Cards: raised background + inset highlight + depth shadow
  • Cards: fuchsia glow on hover only (interactive feedback)
  • Code blocks: always dark in both themes (terminal window)
  • Callouts: max 2 per page
  • Touch targets: 48px minimum on mobile
  • Hero emphasis: 1-2 words max, the words you must read

Don't

  • Colored top borders on cards (dated pattern)
  • Hard colored borders on any component
  • Code blocks with light backgrounds
  • More than 2 callouts per screen
  • Hover-only interactions (no mobile equivalent)
  • Hero emphasis on every heading (most have no colored words)

Backgrounds

Dark mode uses three surface levels: page (#0e0e18), surface (#181a28), and raised (#222436). All have a cool blue undertone.

Light mode uses three surface levels: page (#FAFBFC), surface (#F3F4F6), and raised (#E8EAF0). All have a cool gray tone, not warm cream.

Cards sit on the raised level when inside a surface-colored section. The depth comes from shadow, not background contrast alone.

A noise texture overlay (SVG fractal noise at 1.5% opacity) adds subtle grain to all surfaces.

One pipeline, one output The DTCG file is the source of truth. build_design.py generates the CSS. Everything (styleguide, rules, landing pages, doc-format) consumes the same generated CSS. Never duplicate the generator. Never hardcode colors.

When the System Doesn't Have a Component

The design system covers standard UI components. Charts, data visualizations, threshold scales, and competitive comparisons are not templated. When you need something the system does not define, follow the patterns below. Every pattern uses only the existing token palette. Never invent new colors.

The universal rule: use neutrals as the base, fuchsia for exactly one thing (the element that matters most), never assign brand colors to external entities, never invent colors outside the palette. When in doubt, make it gray.

Data Visualization and Charts

Do

  • SignalWire data = fuchsia (the accent, it pops)
  • Competitor data = neutral grays (gray-300, gray-400, gray-500)
  • Axis labels and legends in fg-muted (#a0a0aa)
  • Grid lines in border-default (rgba(255,255,255,0.12))
  • One color stands out, everything else recedes

Don't

  • Assign brand blue to a competitor's bar or column
  • Assign brand purple to a competitor's data
  • Use a blue-to-fuchsia gradient as a data identity
  • Use traffic light colors (green/yellow/orange/red)
  • Create rainbow charts with all brand colors

Severity Scales and Highlighted Stats

Do

  • Multi-level scales: opacity steps on one brand color
  • Highlight one stat: fuchsia glow shadow or fuchsia value text
  • Highlight one stat: raised surface (depth difference)
  • Positive/negative scale: turquoise (low opacity) to fuchsia
  • Labels carry meaning, color intensity reinforces it

Don't

  • Traffic light colors (green, yellow, orange, red)
  • Colored top borders on highlighted cards
  • Colored backgrounds on entire cards
  • Fuchsia outlines on all four sides
  • Different brand colors on each level of a scale

Competitive Comparisons and Tables

Do

  • SignalWire column: raised surface + subtle fuchsia left border
  • Winning metric: fuchsia text on the value
  • Competitor columns: default surface, neutral text
  • Table header accent: fuchsia bottom border (2px)
  • Row hover: bg-surface-raised, no color

Don't

  • Colored column backgrounds per competitor
  • Colored column headers per competitor
  • Brand colors assigned to competitor names
  • Turquoise checkmarks for 'better number' (only for feature presence)
  • Alternating brand colors across columns

Consistency through constraint.

Fewer colors, fewer fonts, fewer patterns. What remains is intentional.

Get Started FreeRead the Docs