The visual and verbal system for Productive BTC, unlocked.
The strategic core. Every visual and verbal decision in this document traces back to these statements.
A single continuous form combining three ideas — gyroscopic stability, a clean slash unlocking value, and the helm itself. Drawn as one path to read as one gesture.
The concentric outer arcs — stability through motion. Self-balancing under any orientation, the protocol holds steady regardless of market conditions.
The diagonal cut from upper-right to lower-left. The act of unlocking — a clean cut through the static, value released, capital freed.
The interior negative space resolving into a helm form. User-held control — the steering wheel of the system, taken by the user, not the protocol.
Clearspace is set by the smallest constructional square (X) — equal to one quarter of the mark's width. Always maintain at least 1X of clear space on every side.
For horizontal lockups with the wordmark, the cap-height of "H" serves as the X-unit reference and the separation between symbol and wordmark.
Minimum size
24px for symbol mark (digital)
96px for horizontal lockup (digital)
10mm for symbol (print)
Use the mark in solid neutral (Paper or Black) on a clean surface.
Use Helm Lime when the mark needs to act as a primary highlight on dark surfaces.
Don't place the mark on busy gradients or photographs without a contained, solid frame.
Never stretch, skew, or alter proportions. Scale uniformly only.
Mirrored directly from src/index.css. Dark theme is the default; light theme inherits via the .light class. Every value below is the source of truth.
Values are stored as HSL triplets and consumed via hsl(var(--token)). Pasted verbatim from src/index.css.
| Token | Dark (default) | Light (.light) | Role |
|---|---|---|---|
| --background | 240 15% 6% | 0 0% 100% | Page background |
| --foreground | 0 0% 97% | 240 6% 10% | Body text on background |
| --card | 240 6% 10% | 0 0% 100% | Card surface |
| --card-foreground | 0 0% 97% | 240 10% 4% | Text on card |
| --popover | 240 15% 6% | 0 0% 100% | Popover surface |
| --primary | 66 100% 83% | 43 55% 58% | Primary accent (lime ↔ brass) |
| --primary-foreground | 240 15% 6% | 0 0% 0% | Text on primary |
| --button-primary | 0 0% 100% | 240 10% 4% | Primary CTA fill (note: inverted from --primary) |
| --button-primary-foreground | 0 0% 0% | 0 0% 100% | Text on primary CTA |
| --secondary | 240 4% 22% | 240 5% 96% | Secondary surface |
| --muted | 240 4% 22% | 0 0% 96% | Muted surface (e.g. input bg) |
| --muted-foreground | 0 0% 60% | 240 4% 46% | Captions, metadata |
| --accent | 253 81% 23% | 247 100% 76% | Accent surface (indigo ↔ lavender) |
| --accent-foreground | 247 100% 76% | 253 81% 23% | Text on accent surface |
| --destructive | 0 76% 62% | 0 72% 51% | Error, destructive action |
| --border | 0 0% 100% / 0.16 | 240 6% 90% | Default border |
| --input | 0 0% 100% / 0.16 | 240 6% 90% | Input field border |
| --ring | 66 100% 83% | 240 6% 10% | Focus ring |
| --success | 142 76% 36% | 142 76% 36% | Positive state |
| --warning | 38 92% 50% | 38 92% 50% | Caution state |
| --info | 217 91% 60% | 217 91% 60% | Informational state |
| --radius | 0.375rem (6px) | Base border radius | |
Three families, in use across the production codebase. Serif for display heft, sans for utility, mono for data.
Applied automatically to h1 and h2 via base styles. Editorial weight, mechanical slab. The serif's structural character makes large numerals feel deliberate rather than decorative.
Aktiv Grotesk handles every utilitarian load — UI labels, paragraph text, captions, form fields. Its neutral geometric forms read cleanly at small sizes on screen, where the protocol lives.
Default for body. Extended variant (Aktiv Grotesk Ex) is reserved for headings inside cards and tabular labels where width creates emphasis.
Reserved for: addresses, hashes, code, raw numeric values without display formatting, timestamps, tags. The visible mechanics beneath the surface.
Tokens from --font-size-{xs..4xl} in index.css.
No stock photography. No 3D BTC coins. The visual language is diagrammatic, geometric, and engineering-derived.
Use technical drawings, blueprints, exploded views — not photographs of money.
Squares, circles, lines. No organic forms, no soft gradients, no illustrative flourishes.
Charts, ledgers, sequences. Numbers and structure as primary visual material.
The system in motion. How Helm shows up on social, in the product, and in documentation.
Activated by adding .light to a parent element. Brass takes the place of Lime; Lavender takes the place of Deep Indigo. Same system, inverted weights.
Same brand, same proposition — rendered for documentation, marketing surfaces, and contexts where the dark theme would feel out of place.
How each dark-mode token shifts under .light. Note that --primary and --accent swap entirely — not just brighten.
| Token | Dark | → | Light |
|---|---|---|---|
| --background | #0D0D11 | → | #FFFFFF |
| --foreground | #F7F7F7 | → | #17171B |
| --primary | #F6FFA8 (Lime) | → | #CEAD58 (Brass) |
| --button-primary | #FFFFFF | → | #0A0A0F |
| --accent | #1F0B6A (Deep Indigo) | → | #9284FF (Lavender) |
| --accent-foreground | #9284FF (Lavender) | → | #1F0B6A (Deep Indigo) |
| --card | #17171B | → | #FFFFFF |
| --secondary | #35353A | → | #F4F4F5 |
| --border | rgba(255,255,255,0.16) | → | #E2E2E5 |
| --ring | #F6FFA8 (Lime) | → | #17171B (Ink) |