DNA Capital is a midnight observatory for healthcare capital: a near-black canvas hosts a serif display voice that whispers at weight 300, a geometric sans for everything utilitarian, and a single electric blue that draws arcs and traces particle constellations. The page is overwhelmingly achromatic — white type and hairline borders float on #070708 — with blue appearing as small functional punctuation, never as decoration. Vertical rhythm is generous (59px section gaps, 23–32px element breathing room), and the layout pairs a left-aligned editorial column with a persistent right-side particle field that bleeds between sections. The signature typographic tension: a high-contrast serif (Darius) at 45–72px against a narrow geometric sans (Graphik) at 13–18px creates a Vogue-meets-quantum-lab feel that most financial sites cannot reach.
#1954ecAccent stroke on circle indicators, gradient terminus, decorative line art — the only chromatic voice in the UI, reserved for the data-circle motifs and the particle field's deepest point; 135° gradient sweeping from cyan through electric blue to deep cobalt — wraps the right-side particle visualization and ties the cosmic backdrop to the accent color
#070708Page canvas, footer ground — near-black rather than #000 gives the cosmic field a slight warmth and lets white type feel luminous rather than harsh
#ffffffPrimary text, hairline dividers, section borders, icon strokes — the sole foreground color across the system
#8f8f93Muted body copy, secondary descriptions — sits between the white headlines and the dark canvas to create a three-tier reading hierarchy
#000000SVG fill on iconography and button borders — true black for graphic elements that need maximum weight against the warm #070708 ground
72px · 300 · 1.13 · 0px trackingThe quick brown fox jumps
59px · 300 · 0.9The quick brown fox jumps
54px · 300 · 1.34The quick brown fox jumps
52px · 300 · 1.13 · 0px trackingThe quick brown fox jumps
45px · 300 · 1.13 · 0px trackingThe quick brown fox jumps
18px · 300 · 1.4 · -0.36px trackingThe quick brown fox jumps
15px · 200 · 1.4The quick brown fox jumps
14px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Body text, UI labels, navigation, badges, small captions, the 59px display variant. Light weights (200–300) are the default; 400–500 reserved for emphasis and numeric data. Tabular figures enabled via 'tnum' — critical for stat readouts like '17' and '30M+'.
Hero and section headlines only — a high-contrast didone-influenced serif used at whisper weight to create editorial gravity. The pairing against Graphik's geometric neutrality is the site's defining typographic move: the serif carries brand voice, the sans carries information. Single weight (300) forces restraint — no bold, no italic.
Button text fallback only — appears where Graphik is not loaded
0px4px0px0px1px8px9px20px23px25px27px32px39px54px59px63px99px119px171px238px264px297pxLogo 'DNA CAPITAL' in Graphik 10px weight 400 with 0.4000em letter-spacing, white, top-left, paired with a small geometric mark. 'MENU' label in same micro-tracking style top-right, followed by a diamond/rhombus stroke icon. No background, no border — floats directly on the dark canvas.
Darius 300 at 52–72px, white, left-aligned, line-height 1.13. The single instance of the serif on the page. Key words can carry the Electric Cobalt accent — 'healthtech' is colored in the hero. Generous left margin; right side is reserved for the particle visual.
Graphik 300–400 at 14–15px, Steel Gray (#8f8f93), line-height 1.5, max-width ~480px. Sits below headlines as a quiet secondary voice. No bullet styling, no border.
A partially-drawn circle (SVG stroke) in Electric Cobalt (#1954ec), stroke-width 1px, ~180px diameter. Center holds a Graphik 300 numeral at ~52px white. Below the circle, a Graphik 10px caption in Steel Gray with 0.2000em tracking, max-width ~140px. The arc length encodes progress/percentage.
Graphik 10px 'SCROLL TO EXPLORE' in white with 0.4000em letter-spacing, uppercase, followed by a thin vertical line (1px white, ~60px tall) extending downward. Positioned bottom-left, signals continuation.
A single 1px white hairline at low opacity, spanning the content width. No visual ornamentation — the spacing itself does the work.
Darius 300 at 45px, white, line-height 1.13. Two-line stack: 'Early / Stage' or 'Late / Stage' — line break after the first word is intentional. Right column carries the matching Graphik body description.
Abyss Black (#070708) ground, white text, 54px bottom padding. Minimal: small Graphik labels, no card surface, no border above — the canvas extends seamlessly.
Graphik 400 at 13px, white, no underline by default, 4px border-radius on the clickable area. Padding 20px vertical, 25px horizontal. No background fill.
Graphik 400 at 13px white text, 1px white border, no fill, 8px vertical margin. Square corners (0px radius). Used for non-primary actions where the filled alternative is absent — restraint is the brand.
#070708Primary page background across all sections — the warm near-black that makes the particle field and white type read correctly
#1954ecRight-side decorative layer that bleeds across sections; not a true surface but a visual depth marker using the cobalt gradient
The design has no box-shadows or elevation. Depth is achieved through the cosmic particle field on the right side of every section and through generous vertical spacing. Components sit flat on the canvas — they do not lift. If a layered effect is needed, it comes from a 1px white hairline border, not from a shadow.
Full-bleed dark sections with no max-width container — content sits on the canvas with generous left margin (~80–120px) and runs edge-to-edge. Every section uses a two-column structure: left column holds the serif headline or stat indicator, right column holds the particle field plus optional supporting text. No card grids, no pricing tables, no feature matrices. Vertical rhythm is 59px between sections, 23–32px between elements. Navigation is two corner elements (logo top-left, menu top-right) with no bar or background. The hero is a full-viewport dark screen with a single serif headline and the particle field anchored to the right edge. Section transitions are seamless — the particle field continues across section boundaries rather than being clipped.
No photography or illustration in the traditional sense. The sole visual element is a procedural particle/dot-field on the right side of every section — thousands of small luminous dots arranged in a sweeping wave pattern that transitions from cyan at the top to electric cobalt at the bottom. The field is abstract, not representational; it evokes a cosmic stream or DNA helix data visualization. The dots are dense and form a curved volume, not a flat texture. There are no product screenshots, no lifestyle photography, no human figures. The left two-thirds of the canvas is always empty space for text.
**Quick Color Reference** - text: #ffffff - background: #070708 - border: #ffffff (1px hairline) - muted text: #8f8f93 - accent: #1954ec - primary action: no distinct CTA color **Example Component Prompts** 1. **Hero Headline**: Dark canvas (#070708). Darius weight 300, 72px, #ffffff, line-height 1.13, left-aligned at 80px left margin. The word 'healthtech' set in #1954ec as the single accent. Right side reserved for the particle field gradient. 2. **Circle Stat Indicator**: 180px diameter SVG circle, stroke #1954ec, stroke-width 1px, 270° arc starting at top. Center: Graphik 300, 52px, #ffffff numeral '17'. Below circle: Graphik 10px, #8f8f93, letter-spacing 2px, uppercase caption. 3. **Section Divider**: Single 1px hairline, #ffffff at 20% opacity, spanning content width with 59px vertical margin above and below. 4. **Stage Label Block**: Left column — Darius 300, 45px, #ffffff, stacked 'Early' / 'Stage' with line break, line-height 1.13. Right column — Graphik 400, 14px, #8f8f93, line-height 1.5, max-width 480px. 5. **Scroll Prompt**: Graphik 10px, #ffffff, letter-spacing 4px, uppercase 'SCROLL TO EXPLORE'. Below text: 1px white vertical line, 60px tall, 2px left margin offset.
Same dark-canvas editorial approach with serif display headlines and a single restrained accent — both treat the homepage as a brand statement rather than a product catalog
Climate-finance firm that uses Darius-weight serif headlines on near-black backgrounds with particle/atmospheric visual backdrops — the whisper-weight serif + dark canvas pairing is nearly identical
Dark-mode VC site with generous whitespace, two-column text+visual sections, and a single vivid accent (their red) used sparingly for emphasis rather than buttons
Dark editorial VC layout with serif display type, micro-tracked uppercase labels, and a right-side visual element that bleeds across sections
Use the design exports or connect Musterlab to your AI.
