Helix Brand

Primary mark

Icon

The double-helix glyph. Three variants: full color (default), white (reverse), and black (light surfaces).

Color

Default. Use on dark or neutral surfaces.

SVG PNG · 1024 PNG · 2048

White

For dark photographic backgrounds where the gradient lacks contrast.

SVG PNG · 1024 PNG · 2048

Black

For light surfaces: print, light UI, monochrome.

SVG PNG · 1024 PNG · 2048

Primary mark

Wordmark

Mark + the Iceland wordmark, locked at logo 0.75× wordmark height with gap 0 and letter-spacing 0em. Use this lockup wherever Helix appears alongside other brands.

Color · dark bg

Mark + Iceland wordmark, gradient on dark. Default for product/marketing.

SVG PNG · 1024 PNG · 2048

Color · light bg

Same lockup tuned for light surfaces.

SVG PNG · 1024 PNG · 2048

White

Reverse, monochrome white on dark/photographic.

SVG PNG · 1024 PNG · 2048

Black

Monochrome black on light.

SVG PNG · 1024 PNG · 2048

Web & app icons

Technical icon exports, shown honestly. Every icon at or below 96×96 renders at its actual pixel size and is never enlarged, so the preview shows the real rendering quality at the size that matters. All files source from the canonical public/brand/favicon and public/brand/app-icons directories.

Web (favicon)

Favicon SVG

Scalable vector · SVG

Modern browser tabs. Scales to any DPI.

SVG ICO · 16/32/48

Favicon 16

16 × 16 · PNG

PNG fallback for older browser tabs.

PNG

Favicon 32

32 × 32 · PNG

Standard-DPI browser tab icon.

PNG

Favicon 48

48 × 48 · PNG

Windows taskbar and high-DPI tab use.

PNG

Favicon 64

64 × 64 · PNG

High-DPI browser tab icon.

PNG

Favicon 96

96 × 96 · PNG

High-DPI tab and desktop shortcut icon.

PNG

App icons

Apple touch icon

180 × 180 · PNG

iOS home screen and Safari pinned tab.

PNG

Android 192

192 × 192 · PNG

Android home screen and PWA launcher.

PNG

Android 512

512 × 512 · PNG

PWA splash and high-resolution launcher.

PNG

Colour

Charcoal primary + Helix-mark emerald accent on a near-pure-white canvas for marketing surfaces. Portal stays on the dark canvas for operators. Click any swatch to copy its hex.

Brand

Marketing surfaces (light)

Portal surfaces (dark)

Pills

Semantic pill families with paired background, text, and border tokens. Use only these five for pill-style status chips and category tags across the portal.

Family	Preview	Background	Text	Border	Semantic
Purple	community	bg-purple-100 #F3E8FF	text-purple-700 #7E22CE	border-purple-200 #E9D5FF	Community, audit surface accents, connections status highlights.
Blue	in review	bg-blue-100 #DBEAFE	text-blue-700 #1D4ED8	border-blue-200 #BFDBFE	In-review / neutral-status accents, docs sample callouts, activity run cards.
Pink	connected	bg-pink-100 #FCE7F3	text-pink-700 #BE185D	border-pink-200 #FBCFE8	Connected / paired status chip, schedule accent.
Teal	active	bg-teal-100 #CCFBF1	text-teal-700 #0F766E	border-teal-200 #99F6E4	Reserved semantic slot. Currently underused; use for cool-neutral status.
Yellow	attention	bg-yellow-100 #FEF9C3	text-yellow-700 #A16207	border-yellow-200 #FEF08A	Reserved semantic slot for cautions / needs-attention that are NOT full warnings (amber already carries warning weight).

Grade ramp

Semantic A-to-F coloring on audit + scorecard surfaces. Conventional green-to-red so a prospect reads good vs bad at a glance.

A

#10B981

tw emerald-500

B

#84CC16

tw lime-500

C

#F59E0B

tw amber-500

D

#F97316

tw orange-500

F

#E11D48

tw rose-600

Hero heading gradient

Reserved for hero titles and top-of-page section headers ONLY. Charcoal at the ends, emerald through the middle so the sentence hands off from the serious brand primary to the mark color and back. Do not use on body copy, buttons, chips, or subheadings.

Example

Be cited by the AI models your buyers ask.

CSS

background: linear-gradient(
  90deg,
  #18181b,  /* charcoal */
  #3f3f46,  /* charcoal soft */
  #10b981,  /* Helix emerald */
  #059669,  /* emerald deep */
  #18181b   /* charcoal */
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Marketing-light theme only. On the dark portal canvas the gradient inverts to a lighter charcoal so it stays legible; portal hero headings should prefer solid white anyway. Not animated by default; the earlier text-shimmer animation was retired 2026-07-02.

See the palette exploration (5 directions we considered)

Typography

Two families do all the work: Iceland sets the wordmark, Geist runs everything else, and Geist Mono handles code and labels. The type scale lives on /design.

Display / wordmark

Helix

Iceland · Regular 400

Used only for the wordmark lockup. Never for body or UI.

Body & UI

The quick brown fox

jumps over the lazy dog · 0123456789

Geist · 400 / 500 / 600 / 700

Default for every heading, body, and UI role.

Code & labels

helix_entities

#10B981 · run_id 0123456789

Geist Mono · 400 / 500

Code, hex values, run IDs, and mono labels.

Usage

The locked rules for putting Helix in the wild.

✓ Do

Prefer SVG. Use the SVG files everywhere they render. PNG only for environments that cannot consume vector.
Respect clearspace. Leave at least one mark-glyph height of clear space around the wordmark on every side.
Use the locked lockup. Iceland all-caps · logo 0.75× wordmark height · gap 0 · letter-spacing 0em. Don’t re-typeset.
Match contrast. Color variant on neutral or branded backgrounds; mono variants on photography or print.

✗ Don't

Don’t recolor the gradient. The emerald → lime gradient is fixed. Use the mono Black or White marks if you need a single color.
Don’t stretch or skew. Scale the asset uniformly. No rotation, drop shadow, outline, or warp.
Don’t reset the typeface. Iceland is the wordmark. Don’t pair the mark with another typeface and call it Helix.
Don’t crop the mark. The double-helix curves are the mark. Don’t use a partial silhouette.

Helix brand assets

Icon

Wordmark

Web & app icons

Colour

Be cited by the AI models your buyers ask.

Typography

Usage

Questions about brand use?