---
title: "DNA Capital design system"
variant: extended
source: https://dnacapital.com/
captured_at: 2026-10-12
theme: dark
industry: health
generator: Design DNA (https://four.wiralomi.com/style/dnacapital-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# DNA Capital · Design System

> A quiet, editorial canvas for healthcare investment

**Theme:** dark · **Industry:** health · **Source:** https://dnacapital.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

DNA Capital pairs a deep charcoal canvas with refined serif headings and restrained blue light effects. Spacious layouts, subtle motion, and concise copy frame its healthcare investment story.

## North star

Keep the charcoal canvas dominant and let typography, generous negative space, and restrained blue light carry the story.

## Overview

The page is built on a near-uniform charcoal canvas, with a nearly black footer as its only clear contrasting band. White is reserved for prominent text, navigation, links, and fine outlines; muted blue-gray carries most supporting copy. Blue and cyan appear sparingly as gradient accents and illuminated details, not as broad interface fills. Graphik provides the lightweight sans-serif voice for body copy, labels, and navigation, while Darius lends a distinctive editorial serif to investment-stage headings. The layout favors oversized breathing room, narrow text groupings, and long section intervals over cards or dense grids. Abstract, softly glowing particle forms and a muted healthcare video create atmosphere without competing with content. Hairline borders, minimal framing, and almost no visible elevation keep the experience flat, cinematic, and considered.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Charcoal | `#1f1f26` | `--color-midnight-charcoal` | brand | Dominant page canvas across the hero and main content sections. |
| Mist Blue | `#c0c9df` | `--color-mist-blue` | semantic | Primary muted color for supporting copy on the dark canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | High-contrast text, navigation links, footer details, and thin outlines. |
| Signal Indigo | `#1954ec` | `--color-signal-indigo` | accent | Deep blue endpoint in gradient highlights and subtle decorative effects. |
| Obsidian | `#070708` | `--color-obsidian` | surface | Distinct near-black footer band. |
| Electric Cyan | `#00ccff` | `--color-electric-cyan` | accent | Bright opening hue in the gradient accent; keep to decorative highlights. |
| Pulse Blue | `#0c92f6` | `--color-pulse-blue` | accent | Intermediate blue in the gradient accent and luminous details. |
| Stone Gray | `#8f8f93` | `--color-stone-gray` | semantic | Occasional subdued secondary text, especially in low-emphasis details. |

### Semantic aliases

`--color-canvas` → `#1f1f26` (Midnight Charcoal) · `--color-surface` → `#070708` (Obsidian) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#c0c9df` (Mist Blue) · `--color-text-subtle` → `#8f8f93` (Stone Gray) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#1954ec` (Signal Indigo) · `--color-accent-2` → `#00ccff` (Electric Cyan) · `--color-accent-3` → `#0c92f6` (Pulse Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1f1f26` | 16.38:1 | AAA |
| `#ffffff` | `#070708` | 20.14:1 | AAA |
| `#c0c9df` | `#1f1f26` | 9.87:1 | AAA |
| `#c0c9df` | `#070708` | 12.14:1 | AAA |
| `#c0c9df` | `#ffffff` | 1.66:1 | fail |
| `#8f8f93` | `#1f1f26` | 5.08:1 | AA |
| `#8f8f93` | `#070708` | 6.25:1 | AA |
| `#8f8f93` | `#ffffff` | 3.22:1 | AA-large |
| `#1954ec` | `#1f1f26` | 2.75:1 | fail |
| `#1954ec` | `#070708` | 3.38:1 | AA-large |

### Gradients

- `linear-gradient(135deg, rgb(0, 204, 255) 0px, rgb(12, 146, 246) 43%, rgb(25, 84, 236) 75%, rgb(25, 84, 236))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 300, 200, 400, 500 | Body copy, navigation, links, captions, and small uppercase labels. | Inter |
| Darius | `--font-display` | webfont | 300 | Editorial serif headings, including investment-stage labels. | Cormorant Garamond |

- **Graphik:** Use light weights for body and captions; navigation and links are uppercase with pronounced tracking.
- **Darius:** Light-weight serif with an elegant, understated contrast against the sans-serif system.

### Type scale — Custom (ratio ≈ 1.803, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58.5px | 300 | 0.9 | 0 | — | Graphik | Large, light sans-serif display messaging in the hero. |
| h1 | 45px | 300 | 1.13 | -0.02em | — | Darius | Editorial serif headline for major content sections. |
| body | 18px | 300 | 1.6 | 0 | — | Graphik | Light-weight explanatory paragraphs and supporting copy. |
| caption | 15.5px | 200 | 1.4 | 0.01em | — | Graphik | Small, airy supporting notes and secondary descriptions. |
| link | 12.5px | 500 | 1 | 0.2em | uppercase | Graphik | Compact uppercase navigation and section links. |
| eyebrow | 9px | 300 | 1.5 | 0.18em | uppercase | Graphik | Tiny, widely tracked uppercase section labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 8, 20, 23, 25, 27, 32, 33, 35, 51, 59, 63, 72, 93, 99, 126 px.
- Section rhythm 264px · element gap — · card padding — · max content width —.

Use a spacious, editorial composition with content grouped into a narrow reading measure against a full-width charcoal canvas. Sections are predominantly left-aligned, with occasional two-column arrangements pairing serif labels and supporting copy. Keep large empty intervals between major content beats; the measured section rhythm is especially generous. Avoid card-heavy grids and use open space to distinguish statistics, investment stages, video, and company-support content. The footer switches to a near-black full-width band.

## Shape & elevation

- Radius: link `4px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.39, 0.575, 0.565, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows and very little card framing. Separate content through whitespace and tonal contrast rather than raised surfaces. Fine white outlines appear in small navigational details, while the footer is distinguished by its darker fill. Keep decorative light effects visually behind the content.

## Imagery

Use abstract, dark-toned particle or light-field visuals as atmospheric hero media, with blue-violet illumination kept subdued. Include healthcare video as a restrained documentary-style moment, shown within the broad dark page rather than a decorative card. Keep imagery sparse and let it dissolve into the charcoal surroundings; bright gradient accents are decorative, not a substitute for content imagery.

## Components

### Compact navigation

Sparse navigation uses uppercase Graphik links in white, with a minimal menu control and fine outlined geometric detail.

### Hero display

Large, lightweight display messaging sits over a dark, atmospheric visual field with ample surrounding negative space.

### Investment-stage rows

Serif stage labels pair with short sans-serif descriptions in an open two-column arrangement.

### Statistics

Prominent numeric proof points are isolated on the charcoal canvas, with restrained blue or white circular light accents.

### Section links

Small uppercase Graphik links use white text and subtle blue decorative emphasis rather than filled button treatments.

### Footer

A near-black full-width band contains the brand mark, site links, and compact legal information.

### Measured component styles

- **Primary button** (“MENU CLOSE”): transparent background · text #000000 · radius 0px · padding 0px · 400 13.3333px Arial
- **Link** (“COMPANIES”): transparent background · text #ffffff · radius 4px · padding 22.5px 25.2px 19.8px 25.2px · 500 12.6px Graphik · uppercase
- **Navigation item** (“MENU CLOSE”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14.4px Graphik

## Do

- Keep the charcoal canvas dominant.
- Use white selectively for high-contrast text and outlines.
- Set supporting copy in muted blue-gray.
- Use serif headings as an editorial counterpoint to Graphik.
- Preserve generous negative space between content groups.
- Keep cyan-to-blue effects subtle and decorative.

## Don't

- Do not introduce bright, broad color panels.
- Do not pack content into dense card grids.
- Do not use heavy shadows or raised surfaces.
- Do not let abstract visuals overpower the copy.
- Do not use bold, overly dense typography.
- Do not style every link as a filled button.

## Agent prompt

Build a new page in DNA Capital’s quiet editorial style. Use Midnight Charcoal (#1f1f26) as the dominant canvas and Obsidian (#070708) for a distinct footer band. Set primary text in Gallery White (#ffffff), supporting copy in Mist Blue (#c0c9df), and occasional low-emphasis details in Stone Gray (#8f8f93). Pair lightweight Graphik-like sans-serif copy and uppercase tracked links with elegant Darius-like serif headings. Keep layouts open, mostly left-aligned, and spacious, using paired columns where useful rather than cards. Add restrained abstract lighting or gradient details using Electric Cyan (#00ccff), Pulse Blue (#0c92f6), and Signal Indigo (#1954ec). Keep imagery atmospheric, surfaces flat, outlines fine, and content legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-split | Long charcoal content section with statistics and investment-stage label-and-copy pairs. | Investment stage overview, Company link | Open two-column rows, Serif stage labels, Isolated statistics |
| 2 | video | Full-bleed media moment within the continuous dark canvas, followed by supporting content. | Experience-led storytelling | Muted healthcare video, Dark cinematic treatment |
| 3 | feature-split | Single-column section with a prominent heading and supporting copy and list content. | Partnership explanation, Approach link | Left-aligned serif headline, Open copy layout |
| 4 | footer | Compact full-width near-black band with brand mark, navigation, and legal links. | Global navigation, Legal information | Near-black surface, Compact link groups, White brand details |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dnacapital-com