DNA Capital

以克制编辑感呈现医疗投资A quiet, editorial canvas for healthcare investment

深色主题健康医疗healthcare investment firm homepage极简编辑式排版深色宽松留白衬线大标题原网页 dnacapital.com ↗ · 2026-10-12 采集 · 1440×900 桌面端

DNA Capital以深炭灰底色、精致衬线标题和克制的蓝色光效，呈现沉静的品牌气质。宽松版式、细微动效与简洁文案共同讲述其医疗健康投资理念。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

品牌色

强调色

表层色

中性色

功能色

页面底色 · Midnight Charcoal表层 · Obsidian表层 2 · Gallery White主文字 · Gallery White次要文字 · Mist Blue弱文字 · Stone Gray描边 · Gallery White强调 · Signal Indigo强调 2 · Electric Cyan强调 3 · Pulse Blue

文字	背景	对比度	WCAG
#ffffff Gallery White	#1f1f26 Midnight Charcoal	16.38:1	AAA
#ffffff Gallery White	#070708 Obsidian	20.14:1	AAA
#c0c9df Mist Blue	#1f1f26 Midnight Charcoal	9.87:1	AAA
#c0c9df Mist Blue	#070708 Obsidian	12.14:1	AAA
#c0c9df Mist Blue	#ffffff Gallery White	1.66:1	不达标
#8f8f93 Stone Gray	#1f1f26 Midnight Charcoal	5.08:1	AA

字体

字号阶梯：Custom（比例约 1.803，正文 18px）。示例用免费替代字体渲染，数值为实测。

Aa 设计

Graphik

网络字体 · 字重 300 / 200 / 400 / 500 · 占比 87%

免费替代：Inter

Body copy, navigation, links, captions, and small uppercase labels.

Aa 设计

Darius

网络字体 · 字重 300 · 占比 13%

免费替代：Cormorant Garamond

Editorial serif headings, including investment-stage labels.

角色	示例	字号	字重	行高	字距
特大标题 Large, light sans-serif display messaging in the hero.	DNA Capital	58.5px	300	0.9	0
一级标题 Editorial serif headline for major content sections.	DNA Capital	45px	300	1.13	-0.02em
正文 Light-weight explanatory paragraphs and supporting copy.	The quick brown fox 敏捷的狐狸	18px	300	1.6	0
辅助文字 Small, airy supporting notes and secondary descriptions.	The quick brown fox 敏捷的狐狸	15.5px	200	1.4	0.01em
链接 Compact uppercase navigation and section links.	The quick brown fox 敏捷的狐狸	12.5px	500	1	0.2em
眉题 Tiny, widely tracked uppercase section labels.	The quick brown fox 敏捷的狐狸	9px	300	1.5	0.18em

间距与布局

基准单位 2px · 密度：宽松

264px版块间距

—元素间距

—卡片内边距

—内容最大宽度

1px

8px

20px

23px

25px

27px

32px

33px

35px

51px

59px

63px

72px

93px

99px

126px

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.

圆角与层次

链接 · 4px

没有测到阴影：页面是扁平的，层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

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.

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.

页面版块

共 4 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

图文交替投资理念

Long charcoal content section with statistics and investment-stage label-and-copy pairs.

视频医疗经验

Full-bleed media moment within the continuous dark canvas, followed by supporting content.

图文交替合作赋能

Single-column section with a prominent heading and supporting copy and list content.

页脚页脚导航

Compact full-width near-black band with brand mark, navigation, and legal links.

该做与不该做

✓ 该做

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.

✕ 不该做

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.

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Capital

capital.xyz

以产品为主角的克制金融美学

深色金融科技

DNCO

dnco.com

以大胆黑白视觉呈现多元场所品牌

浅色设计机构

July Fund

july.fund

以沉静编辑感呈现远大愿景

深色金融科技

BlueYard Capital

blueyard.com

静谧底色，醒目品牌标识

浅色金融科技

DDNA

d-d-n-a.com

在静谧沉浸中呈现有意义的珠宝

浅色时尚服饰

Aker

akercompanies.com

以克制视角投资城市社区

浅色地产家居

下载

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

AI 辅助生成：数值为实测，命名与说明为模型解读 · 把文件放进项目根目录，告诉 AI「按 DESIGN.md 实现」