W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Signal
Signal is the end-to-end-encrypted messaging, voice-, and video-call service built by Signal Messenger LLC under the non-profit Signal Technology Foundation. Signal is the reference implementation of the Signal Protocol — the cryptographic backbone also licensed by WhatsApp, Google Messages, and Meta Messenger — and the brand voice is principled, technical, and earnest: "say 'hello' to privacy." Visually, Signal is anchored on Signal Blue (#3A76F0), the saturated brand blue used on the speech-bubble mark, primary CTAs, and the outgoing-message bubble. Signal is dual-mode by canonical identity: the desktop and mobile clients render the blue accent on a near- white canvas (light) or a deep near-black canvas #1B1E20 (dark), with the blue serving as the consistent primary across both surfaces. The Signal client further uses a small per-thread "color of conversation" spectrum to tint individual chats.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/signal/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/signal/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Signal
Signal is the end-to-end-encrypted messaging, voice-, and video-call service built by Signal Messenger LLC under the non-profit Signal Technology Foundation. Signal is the reference implementation of the Signal Protocol — the cryptographic backbone also licensed by WhatsApp, Google Messages, and Meta Messenger — and the brand voice is principled, technical, and earnest: "say 'hello' to privacy." Visually, Signal is anchored on Signal Blue (#3A76F0), the saturated brand blue used on the speech-bubble mark, primary CTAs, and the outgoing-message bubble. Signal is dual-mode by canonical identity: the desktop and mobile clients render the blue accent on a near- white canvas (light) or a deep near-black canvas #1B1E20 (dark), with the blue serving as the consistent primary across both surfaces. The Signal client further uses a small per-thread "color of conversation" spectrum to tint individual chats.
Tags: signal, messaging, privacy, blue, communications, encryption, open-source, non-profit
Atoms
Palette
Signal · [email protected] · Proprietary — All Rights Reserved
Signal's brand palette is anchored on Signal Blue (#3A76F0) — the saturated brand blue documented in the simple-icons brand database (citing signal.org) and used as the signature accent on the Signal paper-plane / speech-bubble mark, primary CTAs, and the outgoing- message bubble of the desktop and mobile clients. The supporting palette is the published chat-bubble swatch set captured from the deployed signal.org marketing surface — a "color of conversation" spectrum (#2C8948 green, #6A2D8E purple, #C7354C crimson, #FFC107 amber, #BA481E rust, #1A77C0 navy-blue, #7C25B1 violet) that the Signal client uses to color individual chat threads — plus a quiet neutral scale ranging from white (#FFFFFF) to a near-black canvas (#1B1E20) used on the dark-mode chat surface.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Proxima Nova ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
body |
Proxima Nova ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
signal-blue |
Signal Blue | #3A76F0 |
signal-blue-deep |
Signal Blue Deep | #2563EB |
signal-blue-action |
Signal Blue Action | #1A77C0 |
signal-bubble-blue |
Signal Bubble Blue | #1A77C0 |
signal-bubble-green |
Signal Bubble Green | #2C8948 |
signal-bubble-green-light |
Signal Bubble Green Light | #43955C |
signal-bubble-purple |
Signal Bubble Purple | #6A2D8E |
signal-bubble-violet |
Signal Bubble Violet | #7C25B1 |
signal-bubble-crimson |
Signal Bubble Crimson | #C7354C |
signal-bubble-rust |
Signal Bubble Rust | #BA481E |
signal-bubble-amber |
Signal Bubble Amber | #FFC107 |
signal-success |
Signal Success | #287B41 |
signal-error |
Signal Error | #C01D36 |
signal-warning |
Signal Warning | #E57200 |
signal-white |
Signal White | #FFFFFF |
signal-surface-light |
Signal Surface Light | #F4F5F5 |
signal-border-light |
Signal Border Light | #E0E2E3 |
signal-text-on-light |
Signal Text on Light | #1B1E20 |
signal-text-secondary-light |
Signal Text Secondary Light | #5B646C |
signal-canvas-dark |
Signal Canvas Dark | #1B1E20 |
signal-surface-dark |
Signal Surface Dark | #2D3236 |
signal-surface-dark-elevated |
Signal Surface Dark Elevated | #303A49 |
signal-text-on-dark |
Signal Text on Dark | #FFFFFF |
signal-text-secondary-dark |
Signal Text Secondary Dark | #A7AFBC |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
signal-white |
#FFFFFF |
surface |
signal-surface-light |
#F4F5F5 |
surface-elevated |
signal-white |
#FFFFFF |
text-primary |
signal-text-on-light |
#1B1E20 |
text-secondary |
signal-text-secondary-light |
#5B646C |
text-tertiary |
signal-text-secondary-light |
#5B646C |
primary |
signal-blue |
#3A76F0 |
primary-hover |
signal-blue-deep |
#2563EB |
accent |
signal-blue |
#3A76F0 |
accent-hover |
signal-blue-action |
#1A77C0 |
warning |
signal-warning |
#E57200 |
warning-hover |
signal-bubble-rust |
#BA481E |
error |
signal-error |
#C01D36 |
success |
signal-success |
#287B41 |
border |
signal-border-light |
#E0E2E3 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
signal-canvas-dark |
#1B1E20 |
surface |
signal-surface-dark |
#2D3236 |
surface-elevated |
signal-surface-dark-elevated |
#303A49 |
text-primary |
signal-text-on-dark |
#FFFFFF |
text-secondary |
signal-text-secondary-dark |
#A7AFBC |
text-tertiary |
signal-text-secondary-dark |
#A7AFBC |
primary |
signal-blue |
#3A76F0 |
primary-hover |
signal-blue-deep |
#2563EB |
accent |
signal-blue |
#3A76F0 |
accent-hover |
signal-blue-action |
#1A77C0 |
warning |
signal-bubble-amber |
#FFC107 |
warning-hover |
signal-warning |
#E57200 |
error |
signal-bubble-crimson |
#C7354C |
success |
signal-bubble-green |
#2C8948 |
border |
signal-surface-dark-elevated |
#303A49 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
signal-blue |
#3A76F0 |
on-identity |
signal-white |
#FFFFFF |
background |
signal-white |
#FFFFFF |
surface |
signal-surface-light |
#F4F5F5 |
surface-elevated |
signal-white |
#FFFFFF |
text-primary |
signal-text-on-light |
#1B1E20 |
text-secondary |
signal-text-secondary-light |
#5B646C |
primary |
signal-blue |
#3A76F0 |
primary-hover |
signal-blue-deep |
#2563EB |
accent |
signal-blue |
#3A76F0 |
accent-hover |
signal-blue-action |
#1A77C0 |
mark |
signal-blue |
#3A76F0 |
success |
signal-success |
#287B41 |
warning |
signal-warning |
#E57200 |
error |
signal-error |
#C01D36 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: signal-blue, signal-white
- forbidden: signal-bubble-purple, signal-bubble-violet, signal-bubble-crimson, signal-bubble-rust, signal-bubble-amber, signal-bubble-green
The Signal Brand Trademark Guidelines (signal.org/brand) prohibit altering the Signal mark via rotation, stretching, outlining, or "effects" — which includes recoloring. The speech-bubble mark renders in Signal Blue (#3A76F0) on light surfaces and reverses to white on the dark canvas. The per-thread "color of conversation" swatches are reserved for product-internal chat-bubble tinting and must not be used to recolor the mark itself.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, outlined, drop-shadow, gradient-fill, on-busy-photo, combined-with-other-logo, wordmark-modified, smaller-than-26px
The Signal Brand Trademark Guidelines explicitly enumerate these prohibitions: "Don't alter logos via rotation, stretching, outlining, or effects," "Don't modify the Signal wordmark typography," "Don't combine Signal assets with other logos implying partnership," and "never show the glyph smaller than 26×26 pixels." Encoding them as a forbidden-treatment rule lets consumers reject impermissible placements at validation time.
numericRange → logo.minWidth
- min:
26 - unit:
px
The Signal Brand Trademark Guidelines specify a hard floor — "never show the glyph smaller than 26×26 pixels" — to preserve mark legibility at small render sizes. Encoding the floor here lets layout validators reject undersized placements of the speech-bubble glyph.
numericRatio → logo.clearSpace
- min:
0.5
The Signal Brand Trademark Guidelines specify a clear-space requirement of "at least half (0.5x) the size of the logo around it." The 0.5× ratio is the floor; consumers may enforce stricter values per their layout system but must not reduce the clear-space allotment below this threshold.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Signal Text on Light (#1B1E20) on the white canvas reads at roughly 17:1, and Text on Dark (#FFFFFF) on Canvas Dark (#1B1E20) reads at roughly 17:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on Signal-skinned surfaces.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, domain-name, social-media-handle
The Signal Brand Trademark Guidelines specifically prohibit use of the Signal trademarks "in social media account names or profiles," "in domain names," in unlicensed merchandise, or combined with other logos "implying partnership without permission." Encoding these as forbidden contexts lets consumers reject impermissible placements.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Signal's accessibility-conscious posture and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on Signal-skinned surfaces.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 600, 700
Proxima Nova ships in Thin (100) through Black (900), but Signal's marketing display and product UI sit in the Regular (400), Semibold (600), and Bold (700) band on the deployed signal.org marketing surface. Lighter or heavier cuts drift from the brand's earnest, principled voice.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: signal-white, signal-canvas-dark, signal-text-on-light, signal-surface-light
- doesNotPairWith: signal-bubble-purple, signal-bubble-crimson, signal-bubble-amber
Signal Blue reads cleanest against white, the deep near- black dark canvas, or the very-dark text tone. Pairing the primary blue adjacent to a thread-tint purple, crimson, or amber (which are reserved for per-conversation chat-bubble coloring) breaks the calibrated primary-vs-secondary hierarchy and visually competes with the brand mark.
Provenance
- Source: https://signal.org/brand
- License:
Proprietary — All Rights Reserved - Attribution: Signal and the Signal logo are trademarks of Signal Messenger, LLC. The Signal Brand Trademark Guidelines published at signal.org/brand enumerate the use restrictions encoded in the rules below — including the 0.5× clear-space requirement, the 26×26 minimum glyph size, prohibition on stretching/rotating/ outlining the mark, no domain-name use, no merchandise without permission, and the trademark-as-adjective grammar rule. The signature Signal Blue (#3A76F0) is documented in the simple- icons brand database (citing signal.org) and corroborated via the deployed signal.org marketing-site stylesheet.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://signal.org/ on 2026-05-18; the published signal.org/brand page is policy- and asset-link only (no hex codes in the visible content), so the supporting palette was captured from the deployed marketing-site stylesheet. Signal's marketing site uses Proxima Nova (sans) and roca (display serif); the mobile clients use platform system fonts (SF Pro on iOS, Roboto on Android). This atom references Proxima Nova@1 for the sans roles consistent with the marketing surface, with Inter@1 carrying nothing here — Proxima Nova is the open-source-licensed face surfaced by signal.org. The Signal brand policy expressly forbids combining the marks with other logos to imply partnership, modifying the wordmark, or monetising brand assets on merchandise — so
assets: []is the correct posture for this catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Signal
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Signal
A clear hierarchy in Signal's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Signal
[email protected]font · heading
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ signal-blue #3A76F0 accent-hover
→ signal-blue-action #1A77C0 background
→ signal-white #FFFFFF error
→ signal-error #C01D36 identity
→ signal-blue #3A76F0 mark
→ signal-blue #3A76F0 on-identity
→ signal-white #FFFFFF primary
→ signal-blue #3A76F0 primary-hover
→ signal-blue-deep #2563EB success
→ signal-success #287B41 surface
→ signal-surface-light #F4F5F5 surface-elevated
→ signal-white #FFFFFF text-primary
→ signal-text-on-light #1B1E20 text-secondary
→ signal-text-secondary-light #5B646C warning
→ signal-warning #E57200 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Proxima Nova prose
→ body Proxima Nova wordmark
→ heading Proxima Nova Palette mode mappings (from signal)
Light mode (15 roles)
accent
→ signal-blue accent-hover
→ signal-blue-action background
→ signal-white border
→ signal-border-light error
→ signal-error primary
→ signal-blue primary-hover
→ signal-blue-deep success
→ signal-success surface
→ signal-surface-light surface-elevated
→ signal-white text-primary
→ signal-text-on-light text-secondary
→ signal-text-secondary-light text-tertiary
→ signal-text-secondary-light warning
→ signal-warning warning-hover
→ signal-bubble-rust Dark mode (15 roles)
accent
→ signal-blue accent-hover
→ signal-blue-action background
→ signal-canvas-dark border
→ signal-surface-dark-elevated error
→ signal-bubble-crimson primary
→ signal-blue primary-hover
→ signal-blue-deep success
→ signal-bubble-green surface
→ signal-surface-dark surface-elevated
→ signal-surface-dark-elevated text-primary
→ signal-text-on-dark text-secondary
→ signal-text-secondary-dark text-tertiary
→ signal-text-secondary-dark warning
→ signal-bubble-amber warning-hover
→ signal-warning Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark allowed signal-blue, signal-white forbidden signal-bubble-purple, signal-bubble-violet, signal-bubble-crimson, signal-bubble-rust, signal-bubble-amber, signal-bubble-green The Signal Brand Trademark Guidelines (signal.org/brand) prohibit altering the Signal mark via rotation, stretching, outlining, or "effects" — which includes recoloring. The speech-bubble mark renders in Signal Blue (#3A76F0) on light surfaces and reverses to white on the dark canvas. The per-thread "color of conversation" swatches are reserved for product-internal chat-bubble tinting and must not be used to recolor the mark itself.
forbiddenTreatment logo treatments stretched, rotated, recolored, outlined, drop-shadow, gradient-fill, on-busy-photo, combined-with-other-logo, wordmark-modified, smaller-than-26px The Signal Brand Trademark Guidelines explicitly enumerate these prohibitions: "Don't alter logos via rotation, stretching, outlining, or effects," "Don't modify the Signal wordmark typography," "Don't combine Signal assets with other logos implying partnership," and "never show the glyph smaller than 26×26 pixels." Encoding them as a forbidden-treatment rule lets consumers reject impermissible placements at validation time.
numericRange logo.minWidth min 26 unit px The Signal Brand Trademark Guidelines specify a hard floor — "never show the glyph smaller than 26×26 pixels" — to preserve mark legibility at small render sizes. Encoding the floor here lets layout validators reject undersized placements of the speech-bubble glyph.
numericRatio logo.clearSpace min 0.5 The Signal Brand Trademark Guidelines specify a clear-space requirement of "at least half (0.5x) the size of the logo around it." The 0.5× ratio is the floor; consumers may enforce stricter values per their layout system but must not reduce the clear-space allotment below this threshold.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Signal Text on Light (#1B1E20) on the white canvas reads at roughly 17:1, and Text on Dark (#FFFFFF) on Canvas Dark (#1B1E20) reads at roughly 17:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on Signal-skinned surfaces.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, domain-name, social-media-handle The Signal Brand Trademark Guidelines specifically prohibit use of the Signal trademarks "in social media account names or profiles," "in domain names," in unlicensed merchandise, or combined with other logos "implying partnership without permission." Encoding these as forbidden contexts lets consumers reject impermissible placements.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Signal's accessibility-conscious posture and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on Signal-skinned surfaces.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 600, 700 Proxima Nova ships in Thin (100) through Black (900), but Signal's marketing display and product UI sit in the Regular (400), Semibold (600), and Bold (700) band on the deployed signal.org marketing surface. Lighter or heavier cuts drift from the brand's earnest, principled voice.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith signal-white, signal-canvas-dark, signal-text-on-light, signal-surface-light doesNotPairWith signal-bubble-purple, signal-bubble-crimson, signal-bubble-amber Signal Blue reads cleanest against white, the deep near- black dark canvas, or the very-dark text tone. Pairing the primary blue adjacent to a thread-tint purple, crimson, or amber (which are reserved for per-conversation chat-bubble coloring) breaks the calibrated primary-vs-secondary hierarchy and visually competes with the brand mark.
Provenance
- Source
- https://signal.org/brand
- License
Proprietary — All Rights Reserved- Attribution
- Signal and the Signal logo are trademarks of Signal Messenger, LLC. The Signal Brand Trademark Guidelines published at signal.org/brand enumerate the use restrictions encoded in the rules below — including the 0.5× clear-space requirement, the 26×26 minimum glyph size, prohibition on stretching/rotating/ outlining the mark, no domain-name use, no merchandise without permission, and the trademark-as-adjective grammar rule. The signature Signal Blue (#3A76F0) is documented in the simple- icons brand database (citing signal.org) and corroborated via the deployed signal.org marketing-site stylesheet.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://signal.org/ on 2026-05-18; the published signal.org/brand page is policy- and asset-link only (no hex codes in the visible content), so the supporting palette was captured from the deployed marketing-site stylesheet. Signal's marketing site uses Proxima Nova (sans) and roca (display serif); the mobile clients use platform system fonts (SF Pro on iOS, Roboto on Android). This atom references Proxima Nova@1 for the sans roles consistent with the marketing surface, with Inter@1 carrying nothing here — Proxima Nova is the open-source-licensed face surfaced by signal.org. The Signal brand policy expressly forbids combining the marks with other logos to imply partnership, modifying the wordmark, or monetising brand assets on merchandise — so `assets: []` is the correct posture for this catalog.