What is Signal's primary brand color?

Signal declares its meta theme-color as #e3e8fe — a pale lavender-blue that paints the 'No ads. No trackers. No kidding.' band and the 'Free for Everyone' footer-adjacent band. The brighter signal-blue lives in two tones: #2c6bed (the lighter cobalt) and #2942ff (the darker cobalt), each appearing 4 times in the captured page as text and border on the 'Get Signal' CTA and inline link words. The system does not bind one saturated hex to a single voltage; instead, the pastel theme-color carries band fills, and the cobalt sits scarce on text-level accents. Signal's identity in the messaging app uses the same cobalt as the chat-bubble fill, but the marketing surface treats it as a link tone, not as a CTA ground.

What typeface does Signal use, and what should I use as a substitute?

Signal runs Inter as the primary typeface across every tier. The CSS declaration is the bare 'Inter, sans-serif' fallback chain. Display tops at 60px / weight 800 (the hero h1 'Speak Freely'), 40px / 800 on section h2s ('Why use Signal?'), and 28px / 800 on card titles ('Say Anything', 'Make Privacy Stick'). Body sits at 16px or 20px / weight 400; the 'Share Without Insecurity' card title runs 16px / 600 as the semibold middle. Inter is itself the open-source target — no substitute is needed. The substitute question runs in reverse here: many of the other licensed-display systems in this directory will recommend Inter, and Signal demonstrates the unmodified Inter at weight 800 carrying display work without any custom font.

Why does Signal use four different pastel grounds on the feature cards?

The 'Why use Signal?' grid pairs each privacy theme with its own pastel ground rather than holding a single brand voltage. Lavender (#e3e8fe), sky-blue (#9dbbf8), and mint-teal (#a5cad5) populate the four card backgrounds and the lower-page bands. The chromatic strategy is one-color-per-theme — each card carries a stylized chat-bubble illustration tinted to match its ground, and the comparison grid reads as a survey of privacy ideas rather than as a single brand statement. The system signals trust through chromatic variety rather than through brand voltage; the cobalt-blue of the chat-bubble wordmark stays at link-level, never doubling as a card fill.

What is Signal's corner-radius philosophy?

The captured page uses two radii: 16px (frequency 7) on cards, panel bands, and the phone-mockup frame, and 8px (frequency 2) on the 'Get Signal' CTA and inline tags. There is no 4px tier, no 12px middle, no pill — the system is binary at exactly 8px and 16px. The contrast is subtle: the 8px CTA reads as taut and tappable, while the 16px card reads as a soft container. The phone-mockup hero frame uses a 32px+ radius to approximate the actual device chamfer; this is a one-off pixel match, not a system value.

Can I use this DESIGN.md to build my own privacy-product marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Signal's specific moves: Inter at weight 800 across every display tier, pastel card grounds replacing a single brand voltage, cobalt-blue scarcity reserved for the primary CTA and link text, lavender-blue (#e3e8fe) as the declared meta theme color repeating across bands, and the binary 8/16px radius scale. The tokens resolve cleanly; every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move that depends on the message: weight 800 only works when the brand voice is unequivocal. For products with softer positioning, drop to weight 600 — Signal's bold-weight commitment is calibrated to its 'no ads, no trackers, no kidding' tone.

Signal Design System

Signal's marketing site pairs a pale lavender-blue theme-color and a brighter signal-blue with Inter at weight 800 for every display tier.

About Signal DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source signal.org

Communication & Messaging

Signal's marketing site is built around four chat-bubble illustrations and one trust message. The above-fold hero pairs a "Speak Freely" headline at Inter 60px / weight 800 with a phone mockup showing a cobalt-blue Signal conversation thread — a contact list, a chat with read receipts, a voice-message wave. Below the fold, a 4-card "Why use Signal?" grid (Say Anything / Speak Freely / Make Privacy Stick / Get Together with Groups) presents each privacy theme on its own pastel ground — mint green, sky blue, lavender, sky blue — with the chat-bubble illustration as the visual anchor inside each card. The lower bands ("No ads. No trackers. No kidding." on lavender, "Free for Everyone" on lavender-blue) close the page on a single repeated chromatic ground that doubles as the brand's declared meta theme color.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens — a pure white canvas, a near-black ink (#1b1b1b appearing 138 times as text and border), two structural neutrals (#e9e9e9 hairline at 106 occurrences, #404654 slate at 24 occurrences for the dark footer band), a cobalt link tone (#2942ff and #2c6bed, 8 combined occurrences for "Get Signal" CTAs and link text), and three pastel card grounds (lavender #e3e8fe from the declared meta theme, sky #9dbbf8, mint-teal #a5cad5). 8 typography tokens running Inter at weights 400 / 600 / 800 — no semibold ladder, no editorial-thin tier, no monospace voice. A binary 8/16px radius scale and 17 components covering the cobalt CTA, the pastel-ground feature card, the hairline-bordered grid card, the phone-mockup hero frame, and the footer-band split.

Feed this file to an AI coding tool and it reproduces Signal's specific moves: Inter at weight 800 across every display tier instead of weight 500-600, pastel card grounds rather than a single brand voltage, cobalt-blue scarcity (8 occurrences total) reserved for the primary CTA and link text, lavender-blue theme color (#e3e8fe) repeating across multiple bands, and a hairline-only depth tier with no shadow. The one move worth borrowing for any non-profit or trust-driven product: the willingness to commit to weight 800. Signal's brand voice is unequivocal — "say anything", "speak freely", "no ads, no trackers, no kidding" — and the typographic weight matches the message. Most editorial-leaning brands would soften the display to weight 500; Signal stays at 800 because the message is not subtle.

What makes it distinct

Bold-weight displayInter 60px / weight 800 on the 'Speak Freely' hero, 40px / 800 on 'Why use Signal?', 28px / 800 on card titles; the brand sits at fintech-grade weight rather than the editorial-thin treatment its non-profit peers favor
Pastel card groundsfour 'Why use Signal?' tiles each render on their own ground (mint, sky, lavender, sky-blue), turning the comparison grid into a chromatic survey of privacy themes
Lavender theme-color#e3e8fe declared as the page meta theme color and used as the 'No ads. No trackers.' card ground; the warmest pastel in the system
Signal blue scarcity#2c6bed and #2942ff together appear 8 total times on the captured page, reserved for the 'Get Signal' CTA and inline link text
Hairline-only depth#e9e9e9 carries 106 occurrences as the 1px border on every card, with no shadow tier; depth comes from pastel grounds, not from elevation

Live at signal.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

signal.org

Explore Signal

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Signal design system FAQ

Common questions about Signal's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Signal — official site

Signal's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.