---
title: "Signal design system"
variant: extended
source: https://signal.org/
captured_at: 2026-10-12
theme: light
industry: nonprofit
generator: Design DNA (https://four.wiralomi.com/style/signal-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Signal · Design System

> Privacy-forward design, made clear and human.

**Theme:** light · **Industry:** nonprofit · **Source:** https://signal.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Signal pairs a bright, uncluttered canvas with confident blue accents and approachable product imagery. A spacious hero leads into clear feature explanations, expressive illustrations, and a compact dark footer.

## North star

Use generous white space and clear, human product storytelling, with Signal blue reserved for meaningful interaction.

## Overview

The page builds its identity around a white canvas and a large periwinkle-blue hero band, giving the product a friendly, open feel without diluting the privacy message. Near-black headings establish strong hierarchy; muted charcoal supports readable body copy, while Signal blue is reserved for interactive emphasis such as CTA text and outlined donation controls. Inter supplies a compact, modern sans-serif voice, with heavy display headings and regular-weight supporting text. The layout moves between centered introductions and two-column feature sections, then gathers benefits into a soft-gray card grid. Product screenshots and illustrations sit prominently beside concise copy: imagery feels expressive and human, but remains contained in rounded media panels. Generous whitespace separates the major content bands, while the dark plum footer creates a clear visual endpoint. Keep decorative color variation inside illustrations rather than expanding the site palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white cards, and the clean breathing space around feature content. |
| Signal Ink | `#1b1b1b` | `--color-signal-ink` | neutral | Primary headings, navigation labels, and high-contrast body emphasis. |
| Signal Blue | `#2c6bed` | `--color-signal-blue` | accent | CTA text, outlined donation button, and interactive blue accents. |
| Quiet Line | `#e9e9e9` | `--color-quiet-line` | semantic | Fine dividers and muted footer or navigation details, not a prominent section fill. |
| Soft Fog | `#f6f6f6` | `--color-soft-fog` | surface | Pale gray band behind the multi-card feature grid. |
| Slate Copy | `#404654` | `--color-slate-copy` | neutral | Supporting paragraphs and secondary explanatory text. |
| Open Periwinkle | `#9dbbf8` | `--color-open-periwinkle` | brand | Large hero background band, creating the page’s signature welcoming color field. |
| Calm Teal | `#a5cad5` | `--color-calm-teal` | surface | Feature media panels and illustration backdrops; a supporting surface, not a primary brand field. |
| Plum Footer | `#3c3744` | `--color-plum-footer` | surface | Full-width footer background, visually closing the otherwise light page. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Soft Fog) · `--color-surface-2` → `#9dbbf8` (Open Periwinkle) · `--color-surface-3` → `#a5cad5` (Calm Teal) · `--color-surface-4` → `#3c3744` (Plum Footer) · `--color-text` → `#1b1b1b` (Signal Ink) · `--color-text-muted` → `#404654` (Slate Copy) · `--color-text-subtle` → `#e9e9e9` (Quiet Line) · `--color-border` → `#e9e9e9` (Quiet Line) · `--color-accent` → `#9dbbf8` (Open Periwinkle) · `--color-accent-2` → `#2c6bed` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b1b1b` | `#ffffff` | 17.22:1 | AAA |
| `#1b1b1b` | `#f6f6f6` | 15.94:1 | AAA |
| `#1b1b1b` | `#9dbbf8` | 8.94:1 | AAA |
| `#1b1b1b` | `#a5cad5` | 9.85:1 | AAA |
| `#404654` | `#ffffff` | 9.45:1 | AAA |
| `#404654` | `#f6f6f6` | 8.74:1 | AAA |
| `#404654` | `#9dbbf8` | 4.9:1 | AA |
| `#404654` | `#a5cad5` | 5.4:1 | AA |
| `#e9e9e9` | `#ffffff` | 1.21:1 | fail |
| `#e9e9e9` | `#f6f6f6` | 1.12:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 800, 600 | Display and section headings, body copy, and navigation. | Inter |
| BlinkMacSystemFont | `--font-blinkmacsystemfont` | system | 600 | Prominent CTA button labels. | Inter |

- **Inter:** Use measured regular, semibold, and extra-bold weights; headings are bold and compact, with no tracked-out or uppercase treatment.
- **BlinkMacSystemFont:** Use a semibold system-sans appearance for button labels; preserve normal case and avoid decorative tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 800 | 1.07 | 0 | — | Inter | Oversized hero headline, notably “Speak Freely.” |
| h1 | 40px | 800 | 1.1 | 0 | — | Inter | Primary section headlines and major content statements. |
| h2 | 28px | 800 | 1.14 | 0 | — | Inter | Feature titles and secondary section headings. |
| h3 | 20px | 400 | 1.4 | 0 | — | Inter | Smaller feature or explanatory headings. |
| body | 16px | 400 | 1.38 | 0 | — | Inter | Paragraphs explaining privacy, messaging, and nonprofit support. |
| button | 20px | 600 | 1.4 | 0 | — | BlinkMacSystemFont | Prominent CTA labels such as “Get Signal.” |
| nav | 16px | 400 | 1.5 | 0 | — | Inter | Header navigation links and language selector. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 18, 24, 30, 32, 48 px.
- Section rhythm 48px · element gap 12px · card padding 30px · max content width 1344px.

The measured content uses a wide page frame, with a two-column hero and feature splits that balance concise copy against product media. The opening hero aligns text to the left and lets oversized phone imagery occupy the opposite side. Centered section introductions lead into alternating feature content, while the benefits sit in a two-column card grid. Major bands are separated by generous vertical breathing room; the overall density is comfortable rather than compressed. Keep the desktop composition balanced and let columns stack cleanly on smaller screens.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `16px` · xs `8px` · sm `16px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`
- Shadow `sm` (button): `rgba(51, 51, 51, 0.05) 0px 1.25px 2.5px 0px, rgba(51, 51, 51, 0.05) 0px 2.5px 5px 0px`
- Motion: standard transition `0.294s ease` on interactive elements.

The page is mostly flat: color bands and whitespace do the structural work. Feature cards use soft, restrained shadows rather than heavy outlines, with rounded corners on cards and media. Keep layering intentional, especially where the hero phones overlap the blue band and the following white section.

## Imagery

Use authentic app screenshots on tilted phone mockups for the hero, with clear interface detail and dark device frames. Supporting feature sections mix friendly illustrations and human product imagery, contained in rounded panels with calm, solid backdrops. Keep artwork colorful where needed, but treat those illustration colors as content rather than extending the core palette.

## Components

### Top navigation

White horizontal header with the Signal mark at left and compact text links, donation link, globe, and language control aligned at right.

### Hero CTA

White rounded button with Signal-blue label and semibold system-sans text, positioned below the hero introduction.

### Hero product media

Overlapping, angled phone mockups sit against the periwinkle hero field and extend toward the next section.

### Feature split

Pair a bold, left-aligned title and concise supporting copy with a large rounded product or illustration panel.

### Benefits card grid

Four white feature cards arranged in two columns within a pale-gray section band, combining centered artwork, title, and brief copy.

### Donation button

White-background outlined control with a two-pixel Signal-blue border, rounded corners, and blue semibold label.

### Footer

Full-width plum band with small, muted legal copy and grouped link columns.

### Measured component styles

- **Primary button** (“Get Signal”): background #ffffff · text #2c6bed · radius 8px · padding 0px 20px · 600 20px BlinkMacSystemFont · shadow rgba(51, 51, 51, 0.05) 0px 1.25px 2.5px 0px, rgba(51, 51, 51, 0.05) 0px 2.5px 5p
- **Secondary button** (“Donate to Signal”): transparent background · text #2c6bed · border 2px solid #2c6bed · radius 8px · padding 9px 19px · 600 20px BlinkMacSystemFont · shadow rgba(51, 51, 51, 0.05) 0px 1.25px 2.5px 0px, rgba(51, 51, 51, 0.05) 0px 2.5px 5p
- **Card** (“Say Anything Share text, voice messages,”): background #ffffff · text #404654 · radius 16px · padding 30px · 400 16px Inter · shadow rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px
- **Navigation item** (“Get Signal”): transparent background · text #1b1b1b · radius 0px · padding 8px 12px · 400 16px Inter

## Do

- Keep the main canvas white and uncluttered.
- Use periwinkle as a broad hero surface, not a tiny accent.
- Reserve Signal blue for actionable controls and emphasis.
- Pair concise copy with clear product imagery.
- Use strong, near-black headings with readable supporting text.
- Separate content bands with generous whitespace.

## Don't

- Do not introduce gradients into the core page surfaces.
- Do not make every section blue or teal.
- Do not use heavy shadows as the main layout device.
- Do not crowd feature copy against its imagery.
- Do not use decorative all-caps or widely tracked headings.
- Do not mistake illustration colors for additional brand colors.

## Agent prompt

Build a new Signal-style page with a clean white canvas (#ffffff), near-black headings (#1b1b1b), and muted supporting copy (#404654). Use Open Periwinkle (#9dbbf8) for a prominent hero band and Signal Blue (#2c6bed) for meaningful interactive emphasis, not decoration. Set type in Inter, with bold, compact headlines and comfortable regular body copy. Create a broad two-column hero with concise text, a white CTA, and expressive app imagery; continue with alternating feature splits and a soft-gray (#f6f6f6) benefits-card section. Use Calm Teal (#a5cad5) only as a supporting media backdrop and Plum Footer (#3c3744) for the final footer band. Favor spacious alignment, rounded media and cards, and restrained shadows. Keep illustration colors within their artwork and ensure the layout adapts cleanly to narrow screens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero beneath the header; left-aligned copy and CTA beside overlapping phone mockups. | single primary CTA, product-first introduction | periwinkle background band, bold headline, white CTA |
| 2 | feature-split | Centered section introduction followed by a two-column feature: copy at left, large media panel at right. | benefit-led explanation, centered section introduction | white canvas, bold feature title, rounded media panel |
| 3 | feature-grid | Pale-gray section band with a two-column, two-row grid of white feature cards. | scannable benefit summaries, consistent card browsing | white rounded cards, centered artwork, short captions |
| 4 | feature-split | Left-aligned copy beside a large rounded illustration panel. | privacy reassurance, supporting explanation | white background, near-black heading, illustration on color field |
| 5 | feature-split | Large illustration at left and copy with an outlined donation CTA at right. | nonprofit trust message, donation pathway | rounded illustration panel, outlined blue CTA, white background |
| 6 | footer | Full-width dark band with legal text and several compact link columns. | grouped site navigation, legal and trademark disclosure | plum background, small muted text, multiple link lists |

## Source CSS custom properties (selected)

```css
--bulma-control-radius: 0.375rem;
--bulma-control-radius-small: 0.25rem;
--bulma-control-border-width: 1px;
--bulma-control-focus-shadow-l: 50%;
--bulma-hover-background-l-delta: -5%;
--bulma-active-background-l-delta: -10%;
--bulma-hover-border-l-delta: -10%;
--bulma-active-border-l-delta: -20%;
--bulma-hover-color-l-delta: -5%;
--bulma-active-color-l-delta: -10%;
--bulma-hover-shadow-a-delta: -0.05;
--bulma-active-shadow-a-delta: -0.1;
--bulma-background-l: 96%;
--bulma-border-weak-l: 93%;
--bulma-border-l: 86%;
--bulma-text-weak-l: 48%;
--bulma-text-strong-l: 21%;
--bulma-text-title-l: 14%;
--bulma-family-primary: Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
--bulma-family-secondary: Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
--bulma-block-spacing: 1.5rem;
--bulma-duration: 294ms;
--bulma-radius-small: 0.25rem;
--bulma-radius: 0.375rem;
--bulma-radius-medium: 0.5em;
--bulma-radius-large: 0.75rem;
--bulma-radius-rounded: 9999px;
--bulma-arrow-color: hsl(233deg,100%,63%);
--bulma-loading-color: hsl(221,14%,86%);
--bulma-burger-border-radius: 0.5em;
--bulma-burger-gap: 5px;
--bulma-text-base: hsla(221deg,14%,29%,1);
--bulma-text-rgb: 63.597,70.1539,84.303;
--bulma-text-h: 221deg;
--bulma-text-s: 14%;
--bulma-text-l: 29%;
--bulma-text-00-l: 0%;
--bulma-text-05-l: 4%;
--bulma-text-10-l: 9%;
--bulma-text-15-l: 14%;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/signal-org