What font does Signal use?
Signal’s website uses Inter for headings and body text. Inter is free on Google Fonts.
| Font | Used for | Weights | Free to use? |
|---|---|---|---|
| Inter | Body | 400, 600, 800 | Yes, Google Fonts |
| the system interface fontCSS name: BlinkMacSystemFont | Interface | 600 | Yes, a system font |
Signal colour palette
Signal’s home page is light (#9DBBF8 background, #1B1B1B text) and uses #FFFFFF for its main actions. Its palette: #FFFFFF, #F6F6F6, #9DBBF8, #A5CAD5, #3C3744, #1B1B1B.
Type scale
Each size the page sets text in, with its weight and line height. Signal’s largest type is 60px at weight 800.
| Style | Size | Weight | Line height | Font |
|---|---|---|---|---|
| Display Large | 60px | 800 | 64px | Inter |
| Display Small | 40px | 800 | 44px | Inter |
| Headline | 28px | 800 | 32px | Inter |
| Title | 20px | 400 | 28px | Inter |
| Body | 16px | 400 | 22px | Inter |
Spacing and shape
Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px, 120px.
Corner radii: 8px, 16px, pill. 3 shadow levels measured.
What makes Signal look like Signal
Mostly neutral: 86% of the page is #FFFFFF and #F6F6F6 and other neutrals; #9DBBF8 (7.2%) and #A5CAD5 (6.4%) fill whole sections.
#2C6BED is an accent: 0.1% of the page, used for text and lines only. Don't fill large areas with it.
The largest type (60px Inter) is bold (800).
Open: text covers 8% of the page. Sections sit about 96px apart.
Signal DESIGN.md for Claude Code, Cursor and Lovable
A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Signal’s design never does.
Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Signal’s product, so use your own name, words and images.
As CSS variables
The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Signal’s name, logo, words and images are theirs.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");
:root {
--color-background: #9DBBF8; /* Background */
--color-text: #1B1B1B; /* Text */
--color-text-muted: #404654; /* Text muted */
--color-border: #EBEAEB; /* Border */
--color-action: #FFFFFF; /* Action */
--color-on-action: #2C6BED; /* On action */
--color-positive: #A5CAD5; /* Positive */
--color-f6f6f6: #F6F6F6; /* 12.7% of the page, as fills */
--color-3c3744: #3C3744; /* 3.1% of the page, as fills */
--font-body: "Inter", sans-serif; /* Inter */
--font-interface: "BlinkMacSystemFont", sans-serif; /* BlinkMacSystemFont */
--type-display-large: 60px; /* Display Large, weight 800 */
--type-display-large-leading: 64px;
--type-display-small: 40px; /* Display Small, weight 800 */
--type-display-small-leading: 44px;
--type-headline: 28px; /* Headline, weight 800 */
--type-headline-leading: 32px;
--type-title: 20px; /* Title, weight 400 */
--type-title-leading: 28px;
--type-body: 16px; /* Body, weight 400 */
--type-body-leading: 22px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-30: 120px;
--radius-md: 8px;
--radius-xl: 16px;
--radius-full: 9999px;
}How this was measured
PikSpec’s scanner read the signal.org home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.
Signal is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Signal.
Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc
Questions
What font does Signal use?
Signal’s website uses Inter for headings and body text. Inter is free on Google Fonts.
What are Signal’s brand colors?
Signal’s home page is light (#9DBBF8 background, #1B1B1B text) and uses #FFFFFF for its main actions. Its palette: #FFFFFF, #F6F6F6, #9DBBF8, #A5CAD5, #3C3744, #1B1B1B.
Is there a DESIGN.md for Signal?
Yes: download it from this page (/design-systems/signal-org/DESIGN.md). It is measured from signal.org with PikSpec, with licensed fonts replaced by free matches, and works with Claude Code, Cursor, Codex, Lovable and v0.
How can I build a website in Signal’s style?
Use the values on this page as design tokens, swap any licensed font for its free match, and use your own name, words and images. PikSpec’s Build with AI turns a capture like this into a prompt and starter project for Lovable, Claude, v0, Cursor or Claude Code.
Is this Signal’s official design system?
No. It is measured from the rendered signal.org home page on 15 October 2026 and is not affiliated with or endorsed by Signal. Names and roles are inferred; the values are what the page displayed.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.