Skip to content
Library

DNA. Midnight observatory through a particle lens.

  • Finance
  • Dark theme
  • 5 colors
  • 3 typefaces

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.

Screenshot of DNA
Captured from dnacapital.com on October 11, 2026

DNA design system

DNA

Brand1

  • Accent 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

Neutrals4

  • SVG fill on iconography and button borders — true black for graphic elements that need maximum weight against the warm #070708 ground

  • Page canvas, footer ground — near-black rather than #000 gives the cosmic field a slight warmth and lets white type feel luminous rather than harsh

  • Muted body copy, secondary descriptions — sits between the white headlines and the dark canvas to create a three-tier reading hierarchy

  • Primary text, hairline dividers, section borders, icon strokes — the sole foreground color across the system

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure White on Carbon

21.00 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.