A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
2radius steps
8pxspacing base
Threema, in one page
Threema's iOS app is a privacy-first messenger, and its entire visual language is engineered around one promise: you can communicate without revealing who you are. There is no phone number, no email, no Google or Apple sign-in — your identity is an anonymous, randomly-generated 8-character Threema ID (e.g. ECHOX9P2). Because the product's value is trust and confidentiality rather than reach or feed-scrolling, the UI is deliberately calm, utilitarian, and Swiss-engineered. It looks like a serious tool, not a social toy: a clean white canvas (#FFFFFF), a single confident green (#088A29) for every action, generous spacing, and almost no decoration. The aesthetic says "encrypted, audited, made in Switzerland" — closer to a banking or password-manager app than to a consumer chat app.
The one piece of UI that carries Threema's whole identity is the trust-level indicator — three small dots that sit next to every contact and conversation. Red (Level 1) means an unknown contact whose ID has not been verified. Orange (Level 2) means the contact was matched from your address book via a server-side hash (the ID is linked to a known phone/email, but you have not personally checked it). Green (Level 3) means you scanned the person's QR code face-to-face and the cryptographic key fingerprint matched — the only fully-trusted state. These three dots appear in the conversation list, the chat navigation bar, the contact detail screen, and the verify screen. Learning to "get someone to green" is the core ritual of the product, and the dots are the single most recognizable Threema visual.
The other signature surface is the QR / verify screen: a large QR code encoding your Threema ID + public key fingerprint, your ID in a monospaced string, and a scanner that, on a successful in-person match, animates the contact up to three green dots. Identity and verification — not feeds, not stories, not reactions — are the product's emotional center, and the design spends its richest moments here.
Color is restrained to the extreme. Threema Green is the only brand color; it is the send button, the outgoing message bubble, the primary CTA, links, switches, and the active tab tint. There is no secondary accent. Status is communicated through the trust palette (red / orange / green) and through standard system semantics (a destructive red for delete/block). Outgoing bubbles are a soft green tint; incoming bubbles are a neutral gray. Everything else is white, near-black text, and hairline dividers. The result is a screen where the eye is never pulled anywhere except the content and the trust state.
Typography is Apple's SF Pro — Threema does not ship a custom typeface; it leans entirely on the iOS system font and Dynamic Type. The hierarchy is conventional iOS: large titles for top-level screens, semibold for names and section headers, regular for message body, and a monospaced treatment specifically for the Threema ID and key fingerprint (so the random character string is unambiguous and easy to read aloud during verification). The type system is invisible by design — the brand is the green and the trust dots, not the letterforms.
Key Characteristics:
- Pure white canvas (
#FFFFFF) light / dark charcoal (#121212) dark — calm, utilitarian, Swiss - Single brand color: Threema Green (
#088A29) — send, CTA, links, active tab, switches - Trust-level dots (red
#E5453A/ orange#EF8B2C/ green#15A33A) — the signature element, on every contact - Threema ID — anonymous 8-char identity, shown in monospace; no phone number or email
- QR verify flow — scan in person to reach Level 3 (three green dots)
- Outgoing bubble = soft green tint; incoming bubble = neutral gray; tails on the speaker side
- SF Pro system font + Dynamic Type — no custom typeface
- Minimal chrome: a 4-5 tab bottom bar (Chats / Contacts / Calls / My ID / Settings), system nav bar
- End-to-end encryption messaging surfaced everywhere: lock glyphs, "verified" labels, key-fingerprint strings
- Destructive actions in system red; success/verified states in trust green
Do's and don'ts
Do
- Use pure white (
#FFFFFF) as the light canvas and dark charcoal (#121212) for dark — calm and utilitarian - Use Threema Green (
#088A29) as the *only* brand color; brighten to#1FA53Con dark - Render the trust-level indicator as three dots, colored by level (red / orange / green), on every contact
- Always pair the trust dots with a text label and VoiceOver string — never color alone
- Show the Threema ID and key fingerprint in monospace (SF Mono) so characters are unambiguous
- Make the QR verify flow the emotional center — large QR, in-person scanner, green-dot upgrade animation
- Tint outgoing bubbles a soft green; keep incoming bubbles neutral gray
- Use SF Pro + Dynamic Type — respect the user's text-size setting globally
- Reserve red for both destructive actions and Trust Level 1 (untrusted) — same hue, consistent meaning
- Keep chrome minimal: translucent bars, hairline dividers, no decorative shadows
- Surface "end-to-end encrypted" affordances (lock glyphs, verified labels) where trust matters
Don't
- Don't introduce a secondary brand color — Threema has exactly one accent (the green)
- Don't communicate trust state by color alone — always add the label (accessibility + clarity)
- Don't render the Threema ID in a proportional font — it must be monospaced for verification
- Don't ask for a phone number or email as identity — the Threema ID *is* the identity
- Don't ship a custom typeface — Threema uses the system font; respect Dynamic Type
- Don't use heavy drop shadows or glossy gradients — this is a security tool, keep it flat
- Don't bury the trust dots behind a tap — they belong inline on every contact and conversation
- Don't use green for anything that isn't a Threema action or the Trust Level 3 state
- Don't animate aggressively — motion is quiet, 120-300ms ease-out
- Don't auto-upgrade a contact to green — Level 3 requires an explicit in-person QR scan
- Don't use pure black (
#000000) for body text —#111113near-black is correct
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Threema design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Threema Green: #088a29
- Threema Green Pressed: #066b20
- Threema Green Bright: #1fa53c
- Canvas White: #ffffff
- Surface Gray: #f4f4f6
- Surface Pressed: #e8e8eb
- Divider: #e2e2e5
- Incoming Bubble: #ebebed
- Outgoing Bubble: #d6f0dc
- Dark Canvas: #121212
Type:
- families: SF Pro, SF Mono, Monospace, SF Pro Display
- scale: 10, 12, 14, 15, 16, 18, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 10, 16
Spacing: 8, 10, 12, 14
Rules:
- Use pure white (`#FFFFFF`) as the light canvas and dark charcoal (`#121212`) for dark — calm and utilitarian
- Use Threema Green (`#088A29`) as the *only* brand color; brighten to `#1FA53C` on dark
- Render the trust-level indicator as three dots, colored by level (red / orange / green), on every contact
- Always pair the trust dots with a text label and VoiceOver string — never color alone
- Show the Threema ID and key fingerprint in monospace (SF Mono) so characters are unambiguous
- Make the QR verify flow the emotional center — large QR, in-person scanner, green-dot upgrade animation
Avoid:
- Don't introduce a secondary brand color — Threema has exactly one accent (the green)
- Don't communicate trust state by color alone — always add the label (accessibility + clarity)
- Don't render the Threema ID in a proportional font — it must be monospaced for verification
- Don't ask for a phone number or email as identity — the Threema ID *is* the identity
- Don't ship a custom typeface — Threema uses the system font; respect Dynamic Type
- Don't use heavy drop shadows or glossy gradients — this is a security tool, keep it flat
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Threema Green (
#088A29): The single brand color — send button, primary CTA fill, links, switches, active tab tint, selection. - Threema Green Pressed (
#066B20): Pressed/active state for primary buttons. - Threema Green Bright (
#1FA53C): Dark-mode variant of the brand green — used for tint, links, and active tab on the dark canvas where#088A29is too dim.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas — conversation list, chat background, settings. - Surface Gray (
#F4F4F6): Grouped table section background, search field, settings cells. - Surface Pressed (
#E8E8EB): Pressed/selected list rows. - Divider (
#E2E2E5): Hairline separators between list rows and sections. - Incoming Bubble (
#EBEBED): Received message bubble fill. - Outgoing Bubble (
#D6F0DC): Sent message bubble fill — a soft green tint of the brand.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#121212): Primary dark canvas. - Dark Surface 1 (
#1C1C1E): Grouped section background, nav bar, settings cells. - Dark Surface 2 (
#262628): Incoming bubble, search field, pressed rows. - Dark Divider (
#2C2C2E): Hairline separators on dark. - Outgoing Bubble (Dark) (
#0C5E22): Sent bubble on dark — a deep green.
Text
- Text Primary Light (
#111113): Names, message body, titles — near-black, not pure black. - Text Secondary Light (
#6B6B70): Timestamps, subtitles, metadata, placeholder. - Text Tertiary Light (
#A6A6AB): Disabled, very low-emphasis labels. - Text Primary Dark (
#ECECEC): Primary text on dark canvas. - Text Secondary Dark (
#9A9A9F): Secondary text on dark canvas.
Trust Level Palette (the signature roles)
| Role | Color | Meaning |
|---|---|---|
| Trust Level 1 (Red) | #E5453A | Unknown contact — ID not verified, no shared key |
| Trust Level 2 (Orange) | #EF8B2C | Matched from address book — server-linked, not personally checked |
| Trust Level 3 (Green) | #15A33A | Fully verified — QR code scanned in person, fingerprint matched |
| Trust Track (empty) | #D2D2D7 light / #3A3A3E dark | Inactive dot slot in some compact indicators |
Semantic
- Error / Destructive Red (
#E5453A): Delete chat, block contact, failed send, revoke. (Shares hue with Trust Level 1 — destructive and untrusted both read as red.) - Success / Verified Green (
#15A33A): Verification success, "Verified" badge, delivered+read confirmation accents. - Warning Orange (
#EF8B2C): "Not verified" caution banners, downgrade warnings. - Link (
#088A29light /#1FA53Cdark): Inline links, "Add via ID", profile links. - Read Receipt Check (
#3A3A3Elight /#6FD68Cdark accent): Double-check delivery/read glyph in the bubble meta row.
Type scaleRead the full spec
Font Family
- Primary:
SF Pro(Apple system font) — Threema ships no custom typeface; it uses the iOS system font with Dynamic Type throughout. SF Pro Text for body sizes, SF Pro Display for large titles. - Monospace:
SF Mono— used specifically for the Threema ID, public-key fingerprint, and any cryptographic string, so random characters are unambiguous and easy to read aloud during in-person verification. - Fallback Stack (non-Apple / web mirror):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Not user-switchable: The face is always the system font; only Dynamic Type size scales.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | SF Pro Display | 32pt | 800 | 1.15 | -0.4pt | Top-level screen header ("Chats", "Contacts") |
| Screen Title | SF Pro Display | 26pt | 700 | 1.2 | -0.3pt | "Verify Contact", "My ID" detail screens |
| Section Header | SF Pro Text | 22pt | 700 | 1.25 | -0.2pt | "Your Threema ID", grouped header |
| Nav Title / Name | SF Pro Text | 18pt | 600 | 1.3 | -0.1pt | Contact name in chat nav bar, list title |
| Message Body | SF Pro Text | 16pt | 400 | 1.35 | 0pt | Chat bubble text — the most-read style |
| List Title | SF Pro Text | 15pt | 500 | 1.3 | 0pt | Conversation list primary line |
| Secondary / Subtitle | SF Pro Text | 14pt | 400 | 1.35 | 0pt | Last-message preview, trust caption, metadata |
| Threema ID / Fingerprint | SF Mono | 14pt | 600 | 1.4 | 1pt | Anonymous ID + key fingerprint — monospaced |
| Caption / Timestamp | SF Pro Text | 12pt | 500 | 1.2 | 0pt | Bubble timestamp, day separators |
| Button | SF Pro Text | 16pt | 600 | 1.0 | 0pt | Primary / secondary buttons |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Badge / Unread Count | SF Pro Text | 12pt | 700 | 1.0 | 0pt | Unread count pill |
Principles
- System font, always: Threema never overrides SF Pro — respect Dynamic Type and the user's preferred text size globally.
- Monospace is for identity strings only: The Threema ID and key fingerprint use SF Mono so characters never get confused (0/O, 1/l) when read aloud during verification; nothing else is monospaced.
- Weight concentrated at 400 / 500 / 600 / 700 / 800: Regular body, medium for list rows, semibold for names and buttons, bold for titles and trust labels.
- Hierarchy via weight + position, not color: Color is reserved for the green and the trust dots. Text hierarchy comes from size and weight only.
- Dynamic Type first-class: Titles, names, message body, captions all scale. Tab labels, trust-dot indicators, and the monospaced ID string stay fixed (layout-sensitive).
Components and layoutRead the full spec
Buttons
Primary Button (Scan QR / Save / Send Verification)
- Shape: Rounded rectangle, 10pt corner radius
- Background:
#088A29(Threema Green) /#1FA53C(dark mode) - Text:
#FFFFFF - Padding: 14pt vertical, 28pt horizontal
- Font: SF Pro Text 16pt weight 600
- Pressed: background
#066B20+ scale 0.98 + light haptic - Disabled: background
#088A29at 35% opacity, text at 60%
Secondary / Outline Button (Share My ID / Cancel)
- Background: transparent
- Text:
#088A29light /#1FA53Cdark - Border: 1.5pt
#088A29/#1FA53C - Padding: 12pt vertical, 22pt horizontal
- Corner radius: 10pt
- Font: SF Pro Text 15pt weight 600
- Pressed: background
#088A29at 8% opacity
Pill Button (New Chat / Filter)
- Background:
#F4F4F6light /#262628dark - Text:
#111113light /#ECECECdark - Border: 1pt
#E2E2E5/#2C2C2E - Padding: 10pt vertical, 18pt horizontal
- Corner radius: 999pt (full pill)
- Font: SF Pro Text 14pt weight 500
Text Button (Add via Threema ID / Forgot)
- Font: SF Pro Text 15pt weight 600
- Color:
#088A29light /#1FA53Cdark - No underline, no background
- Pressed: color
#066B20+ 0.6 opacity
Send Button (composer)
- Circular, 36pt diameter
- Background:
#088A29/#1FA53C - Glyph: paper-plane (SF Symbol
paperplane.fill) 17pt white - Disabled (empty field): background
#D2D2D7/#3A3A3E
Trust-Level Indicator (the core atom)
The signature Threema component. A horizontal row of three dots that encodes contact verification.
- Dot size: 7pt in compact contexts (list row, nav subtitle), 10pt in detail/verify screens, 14pt on the contact-detail hero
- Spacing: 3-4pt between dots
- Colors: all three dots share the level color — Level 1 = three
#E5453Ared, Level 2 = three#EF8B2Corange, Level 3 = three#15A33Agreen - Placement: leading the contact name in lists, in the chat nav subtitle ("Verified · ECHOX9P2"), and as a large badge on the contact-detail screen
- Accompanying label: a 14pt secondary-color caption ("Unknown" / "Server-matched" / "Verified") sits beside or below the dots
- State change: when verification succeeds, the dots crossfade from red/orange to green over 200ms with a soft success haptic
- Accessibility: never communicated by color alone — always paired with the text label and a VoiceOver string ("Trust level: verified")
Threema ID Chip / Field
- Monospaced string (SF Mono 14pt w600), letter-spacing 1pt
- Background:
#F4F4F6light /#262628dark, 8pt corner radius, 8pt × 12pt padding (when shown as a chip) - Often paired with a copy icon (SF Symbol
doc.on.doc) and a share action - The ID is always 8 characters, uppercase alphanumeric, randomly assigned
QR Verify Card
- Large QR code: white quiet-zone card, 12pt corner radius, QR modules rendered in
#088A29on white (or pure black on white for max scanner compatibility — Threema uses brand green in-app, black for export) - Below: the Threema ID in SF Mono, plus the public-key fingerprint
- Scanner view: full-bleed camera with a centered rounded-square reticle (
#FFFFFF2.5pt stroke) and a green corner-pulse animation - Success: reticle flashes
#15A33A, contact animates to three green dots, success haptic
Message Bubbles
Incoming Bubble
- Background:
#EBEBEDlight /#262628dark - Text:
#111113/#ECECEC, SF Pro Text 16pt w400 - Corner radius: 16pt with a 4pt tail corner on the bottom-leading side
- Max width: ~78% of screen
- Meta row: timestamp 12pt
#6B6B70/#9A9A9F, trailing-aligned
Outgoing Bubble
- Background:
#D6F0DC(soft green tint) light /#0C5E22(deep green) dark - Text:
#0B3D17/#EAFBEF, SF Pro Text 16pt w400 - Corner radius: 16pt with a 4pt tail corner on the bottom-trailing side
- Meta row: timestamp + delivery state — single check (sent), double check (delivered), double check tinted (
#15A33A/#6FD68C) when read
Navigation
Chat Navigation Bar
- Height: 54pt + safe area
- Leading: back chevron in brand green (
#1FA53Con dark) + circular 34pt contact avatar - Center-leading: contact name (18pt w600) with a subtitle row = trust dots + Threema ID ("Verified · ECHOX9P2")
- Trailing: call glyph (SF Symbol
phone) in brand green; tap opens encrypted call - Background: blurred canvas (
rgba(18,18,18,0.96)dark), 0.5pt bottom divider
Bottom Tab Bar
- Height: 68pt incl. home indicator
- Tabs: Chats, Contacts, Calls, My ID, Settings (some builds: 4 tabs without Calls)
- Icon size: 22pt
- Active color:
#088A29/#1FA53C(filled glyph); inactive:#818185 - Labels: SF Pro Text 10pt w500, always shown
- Background: blurred (
saturate(180%) blur(20px)), 0.5pt top divider - Unread badge: red
#E5453Apill with white 12pt w700 count on the Chats tab
Input Fields
Composer
- Height: 56pt
- Leading:
+attach glyph (24pt, brand green) - Center: rounded text field —
#F4F4F6/#262628, 19pt corner radius (pill), 16pt horizontal padding, placeholder "Message" in secondary color - Trailing: circular green send button (see Buttons)
Search Field
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Trust dots 7pt; bubbles cap 80%; compact nav |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in nav bar |
| iPhone 15/16 Pro Max | 430pt | Bubbles cap 76%; larger QR card; bigger avatars |
| iPad (portrait) | 768pt | Split view: conversation list (~340pt) + chat detail |
| iPad (landscape) | 1024pt+ | Persistent 3-column option (list + chat + contact info) |
Dynamic Type
- Large titles, names, message body, captions: full scale
- Tab labels, trust-dot indicators, the monospaced Threema ID string: FIXED (layout-sensitive)
- Bubbles grow vertically with text size; max width stays a screen-width percentage
Orientation
- All screens support rotation
- iPad uses split-view: primary list + secondary conversation; QR scanner remains full-screen modal
- Scanner locks to portrait on iPhone for reliable QR acquisition
Touch Targets
- Trust-dot row: full row tappable (opens contact detail), 44pt min hit
- Tab bar icons: 22pt glyph, 49pt hit
- List row: 64pt tall, full-row tap
- Send button: 36pt visual, 44pt hit
- Composer attach
+: 24pt glyph, 44pt hit - QR scanner reticle: full camera area is the scan target
Safe Area Handling
- Top: nav bar respects safe area and Dynamic Island
- Bottom: tab bar and composer respect the home indicator
- Keyboard: chat scrolls above keyboard; composer pins to keyboard top
- Sides: 16pt content inset
- Scanner: full-bleed including safe areas, with controls inset to safe area
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-threema {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #111113;
--heading-color: #111113;
--link-color: #077723;
--link-hover-color: #044715;
--border-color: #d4d4d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(17,17,19,0.06);
--card-hover-shadow: 0 6px 18px rgba(17,17,19,0.12);
--header-bg: #111113;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #646466;
--button-bg: #066b20;
--button-text-color: #ffffff;
--button-hover-bg: #033b12;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #111113;
--button-secondary-hover-bg: #e2e2e3;
--button-secondary-border: 1px solid #d4d4d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #111113;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- coffee meets bagel 75.6%
- overcast 74.3%
- life360 74.2%
- clubhouse 73.9%
- apple tv 73.7%
Where this came from
- Source document
ios/design-md/messaging/threema/DESIGN.md· 26.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.