Living
Systems— a specimen sheet for data exchange.
Data is alive. It moves, mutates, and expires. Helix is the connective tissue between the systems that produce it and the systems that consume it — and the brand should feel exactly that alive.
The double strand. Every visual decision here is an expression of two things meeting: producer and consumer, paper and ink, structure and signal.
We retain the warm paper-and-ink ancestry of Helix v1, but trade ornament for instrument. Less showroom, more laboratory bench.
If it doesn't serve the exchange, it shouldn't exist. Restraint is the house style; the loudest thing on any page is the live data.
The mark, the voice, the law.
Helix is a marketplace for living data. The brand reads as serious as a lab notebook and as warm as paper — never sterile, never showy. Every artifact should feel measured, labelled, and inevitable.
We write the way an instrument reads — exact, calm, and uninterested in flattering itself.
Specific. Plain-spoken. Quietly confident. Operators, not orators.
Performatively edgy. Hype-laden. Vague. Allergic to numbers.
Paper, ink, and one living signal.
The palette is intentionally restrained. Warm parchment carries the page. Deep ink does the structural work. A single saturated chartreuse — Signal — is reserved for things that are alive right now: a stream, a fresh upload, an active subscription. Never two competing signals in one view.
— Card primary
— Buttons, marks
— Max 1 per view
— Producer count
F1ECE0
F6F2E8
E4DDCB
CFC6B0
5E6B77
28323D
0C1721
Paper carries the page. Ink does the structural and typographic work. Signal is reserved for the one live element on screen. Pulse is the smallest visible thing — a count, a dot, a warning.
Three voices, strict hierarchy.
Instrument Serif speaks for the brand — display only, never below 28px, often italic for moments of warmth. Geist runs the interface. Geist Mono labels everything: identifiers, states, metrics. The three never share a role.
Use: headlines, big numerals, editorial moments. Never UI. Never < 28px.
Use: every paragraph, button, label, form. The workhorse.
Use: eyebrows, identifiers, code, table cells with values, captions, status.
producer_id = "telecom-carrier-04f1" dataset = "call_detail_records.v3" freshness = 02h 14m // within SLA records = 3,287,401 checksum = "sha256:9ac4…2f81" // every value is a fact. every label is monospace.
| Step | Size / Line | Tracking | Specimen |
|---|---|---|---|
| D · DISPLAY | 96 / 88 | −0.04em | Living systems |
| H1 | 56 / 104 | −0.025em | A marketplace for data |
| H2 | 36 / 112 | −0.02em | Subscriptions, freshness |
| H3 | 22 / 128 | −0.01em | Producers maintain control |
| BODY | 15 / 155 | 0 | Helix carries encrypted datasets between systems. |
| CAPTION | 11 / 160 | +0.14em | Last upload · 02h 14m · sha256:9ac4… |
A bench, not a stage.
Helix lays out on a 12-column field with a four-point spacing base. Corners are rarely rounded — when they are, only by 2px. Elevation is restrained: we use rules and bone-deep dividers instead of shadows wherever possible.
Most UI uses 0 or 2px. Pill is reserved for status dots and tags.
Prefer borders & bone-deep dividers. Reach for elevation only when a surface must genuinely hover.
The strand as structure.
Helix's only proprietary mark is the double strand. It is mathematically generated — two phase-offset sinusoids with rungs connecting them — and rendered programmatically wherever it appears. Treat it as a data visualization of connection, not a logo.
All icons are 1.25px stroke on a 24px grid. No filled shapes. No corner radii. Endpoints are square. They live alongside type, never inside buttons.
The working set.
Everything below is final. Buttons have four expressions and one size system. Fields use a hairline border and a chartreuse focus halo. Tables are dignified — monospace values, ink-rule heads, generous row height. We avoid component sprawl.
Four variants. Two sizes. Never with icons inside. Capitalise the first word only; nothing all-caps.
Press ⌘ K to open the catalog. Use P to publish, S to subscribe.
// DATA_PUBLISHED webhook payload { "event_type": "dataset_updated", "producer_id": "telecom-carrier-04f1", "dataset_id": "call_detail_records", "dataset_name": "call_detail_records", "s3_bucket": "dme-producer-04f1", "s3_key": "datasets/call_detail_records/2026-06-16.ndjson.gz", "size_bytes": 1048576, "timestamp": "2026-06-16T14:02:38Z", "subscriber_id": "consumer-07", "subscription_id": "sub_8c14…" }
How the system breathes.
Three artifacts assembled from the tokens and components above — a marketing hero, a marketplace catalog tile, and a producer dashboard fragment. Nothing here is bespoke; everything composes from §02 – §06. All figures are illustrative sample data.
Call Detail Records v3
3.2M de-identified US/Canada call-detail records refreshed every 2h with carrier and line type.
Carrier Lookup v1.4
Carrier and line-type lookups across North America. Hourly refresh, REST + bulk.
Portability Events
Number portability events as they happen. Event stream with daily snapshot archive.
Set in Instrument Serif (display) and Geist (UI / mono). Drafted on a 4-point grid. The strand is generated programmatically; no two helices in this document are identical.
v3.0 · Living Systems · 2026.06.16 — Current.
v1.x · Antique Helix · 2024 — Deprecated.
Helix Design Studio · Distrito Federal, MX.
Tokens live in tokens.css. Components in components.css. The strand renderer in helix-render.js — pass [data-helix] attributes to mount.