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

# Atlantic · Design System

> A dark canvas for ideas at the edge of the known.

**Theme:** dark · **Industry:** fintech · **Source:** https://atlantic.vc/ · **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._

Atlantic’s homepage pairs a near-black canvas with sharp blue accents and oversized editorial typography. A spacious, story-led sequence introduces the firm, its portfolio, founder testimonials, approach, news, and contact details.

## North star

Let a near-black, spacious editorial canvas carry oversized pale headlines, with vivid blue reserved for meaningful emphasis and abstract detail.

## Overview

The page is built on a near-black canvas, with subtle charcoal section surfaces preserving contrast without dividing the experience into bright panels. Pale blue-white text carries navigation, headings, and links; saturated blue marks selected words, small graphic details, and atmospheric artwork. Orange appears only as a small prize CTA in the screenshot, not as a core measured palette color. Monument provides the large, clean, light-weight editorial headlines, while Mono sets compact uppercase labels, navigation, and supporting metadata with conspicuous tracking. Layout shifts between open headline-led bands and structured grids: company marks, founder portraits, approach statements, and three-column updates. Generous vertical gaps make the long page feel deliberate rather than dense. Photography is used for founders and news, while abstract blue particle imagery and line motifs create a distinctive visual frame. Borders are restrained hairlines; cards stay mostly flat, with subtle charcoal surfaces and minimal corner rounding.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Abyss Black | `#000000` | `--color-abyss-black` | brand | Dominant page canvas and navigation background; also anchors most section bands and the hero artwork. |
| Glacier Text | `#d8eaff` | `--color-glacier-text` | brand | Primary text for headlines, navigation, links, and footer content against dark backgrounds. |
| Coal Panel | `#0d0d0f` | `--color-coal-panel` | surface | Dark charcoal surface for the extended investment-approach section and its content panel. |
| Graphite Slate | `#2b2f33` | `--color-graphite-slate` | surface | Secondary dark surface and border tone for subdued interface details and section framing. |
| Iron Hairline | `#565657` | `--color-iron-hairline` | neutral | Muted outlines and fine separators, particularly around links and section elements. |
| Midnight Blue | `#061230` | `--color-midnight-blue` | semantic | Deep blue component of the hero’s atmospheric gradient, not a general-purpose surface. |
| Clouded Steel | `#727b87` | `--color-clouded-steel` | neutral | Muted supporting copy on dark surfaces, including explanatory text. |
| Slate Caption | `#6c7580` | `--color-slate-caption` | neutral | Secondary footer and supporting text; keep it subordinate to primary text. |
| Ash Label | `#565e66` | `--color-ash-label` | neutral | Occasional subdued text tone for lower-priority labels and details. |
| Night Border | `#232529` | `--color-night-border` | surface | Very dark supporting tone appearing around footer and secondary interface details. |
| Basalt Note | `#41474d` | `--color-basalt-note` | neutral | Infrequent muted text detail; use only for low-emphasis supporting information. |
| Signal Blue | `#1f58f2` | `--color-signal-blue` | accent | Selective emphasis in headline words, small interface markers, links, and abstract blue artwork. |

### Semantic aliases

`--color-canvas` → `#000000` (Abyss Black) · `--color-surface` → `#0d0d0f` (Coal Panel) · `--color-surface-2` → `#2b2f33` (Graphite Slate) · `--color-text` → `#d8eaff` (Glacier Text) · `--color-text-muted` → `#727b87` (Clouded Steel) · `--color-text-subtle` → `#6c7580` (Slate Caption) · `--color-border` → `#565657` (Iron Hairline) · `--color-accent` → `#1f58f2` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#d8eaff` | `#000000` | 17.13:1 | AAA |
| `#d8eaff` | `#0d0d0f` | 15.84:1 | AAA |
| `#d8eaff` | `#2b2f33` | 11:1 | AAA |
| `#727b87` | `#000000` | 4.9:1 | AA |
| `#727b87` | `#0d0d0f` | 4.53:1 | AA |
| `#727b87` | `#2b2f33` | 3.15:1 | AA-large |
| `#6c7580` | `#000000` | 4.49:1 | AA-large |
| `#6c7580` | `#0d0d0f` | 4.15:1 | AA-large |
| `#6c7580` | `#2b2f33` | 2.89:1 | fail |
| `#1f58f2` | `#000000` | 3.74:1 | AA-large |

### Gradients

- `linear-gradient(rgba(31, 88, 242, 0.2) 0px, rgba(31, 88, 242, 0.2) 100%)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0) 60%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Monument | `--font-display` | webfont | 400 | Display and editorial headlines, plus selected link and button text. | Space Grotesk |
| Mono | `--font-mono` | webfont | 400 | Navigation, eyebrows, body labels, captions, and code-like metadata. | IBM Plex Mono |

- **Monument:** Measured at regular weight; headlines use tight negative tracking, while selected interface text remains compact.
- **Mono:** Regular-weight uppercase is common; body, eyebrow, and caption roles use conspicuously wide tracking.

### Type scale — Custom (ratio ≈ 1.9, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1 | -0.03em | — | Monument | Oversized hero or section display headlines. |
| h1 | 64px | 400 | 1.06 | -0.03em | — | Monument | Primary large editorial headings and statement-led sections. |
| h2 | 24px | 400 | 1.24 | -0.03em | — | Monument | Secondary section headings and supporting editorial titles. |
| body | 14px | 400 | 1 | 0.16em | uppercase | Mono | Uppercase, tracked copy and compact supporting text. |
| caption | 10px | 400 | 1 | 0.16em | uppercase | Mono | Small uppercase metadata, dates, and image captions. |
| nav | 12px | 400 | 1.5 | 0 | uppercase | Mono | Compact uppercase primary navigation labels. |
| eyebrow | 14px | 400 | 1 | 0.16em | uppercase | Mono | Tracked uppercase section labels above headings. |
| code | 14px | 400 | 1 | 0.16em | uppercase | Mono | Technical-looking uppercase labels and metadata. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 30, 32, 50, 100, 150 px.
- Section rhythm 50px · element gap 32px · card padding — · max content width 1340px.

The measured content max width is 1340px, with a spacious density and a section gap of 50px. Sections alternate between full-width, open black canvases and contained multi-column compositions: a four-column portfolio area, testimonial cards, a three-column approach section, and a three-column news feed. Large headings and short labels anchor otherwise sparse layouts. Use flexible columns and generous vertical separation to retain the long-scroll pacing; keep alignment deliberate, with text often starting at the left and selected headline compositions stretching across the page.

## Shape & elevation

- Radius: nav `4px` · link `4px` · xs `4px` · sm `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The page reads as mostly flat, without measured shadows. Separate content through black-to-charcoal surface changes, delicate gray hairlines, and spacing rather than stacked card effects. The approach area is a subtly distinct dark panel; small corner rounding is present on selected navigation and link elements, not as a broad card language.

## Imagery

The hero uses full-bleed abstract blue particle imagery against black, creating a science-forward atmosphere rather than a literal product scene. Founder testimonials use portrait photography, while news cards use event and editorial images. Small blue starburst and line motifs recur as graphic accents. Keep image treatments dark, high-contrast, and integrated into the canvas; avoid adding decorative imagery where content is already strong.

## Components

### Primary navigation

Compact uppercase Mono labels in pale blue-white sit directly on the dark canvas; keep the navigation visually light and unobtrusive.

### Prize CTA

A compact top-right science prize control is visually distinct in the screenshot; its orange appearance is an isolated screenshot detail, not a measured brand palette color.

### Portfolio grid

Company marks sit in a four-column content area with restrained divisions, giving the logos room to read against black.

### Founder testimonials

Portrait-led quotes use a carousel-like presentation with founder attribution and compact supporting labels.

### Approach panel

A charcoal section combines a large statement with stacked investment principles and a small outbound link.

### News cards

A three-column content feed pairs editorial images with compact uppercase category and date metadata, then linked headlines.

### Footer contact

A spacious two-column contact area combines a large heading, contact and social links, address, and legal navigation.

### Measured component styles

- **Primary button**: transparent background · text #d8eaff · radius 0px · padding 0px 4px · 400 10px Monument
- **Link** (“AI & COMPUTE Building the next generatio”): transparent background · text #d8eaff · radius 0px · padding 0px · 400 10px Monument
- **Navigation item** (“APPROACH”): transparent background · text #d8eaff · radius 0px · padding 0px · 400 12px Mono · uppercase

## Do

- Use #000000 as the primary canvas.
- Set headlines in Monument or a close geometric sans.
- Use Mono for uppercase navigation and metadata.
- Reserve #1f58f2 for selective emphasis and graphic accents.
- Build section changes with spacing and subtle dark surfaces.
- Give portraits and editorial images room to breathe.

## Don't

- Do not brighten the overall page with large light panels.
- Do not use blue as a full-page background.
- Do not make every text element uppercase.
- Do not add heavy shadows or layered card effects.
- Do not crowd sections with dense copy or tight spacing.
- Do not treat incidental orange artwork as a measured brand color.

## Agent prompt

Build a new page in Atlantic’s visual style: use #000000 Abyss Black as the dominant canvas, #d8eaff Glacier Text for primary typography, and #1f58f2 Signal Blue sparingly for emphasis, small markers, and abstract graphic details. Use #0d0d0f Coal Panel for an occasional subdued section surface. Pair a Monument-like geometric sans for large, light editorial headlines with an IBM Plex Mono-like face for compact uppercase navigation, eyebrows, and metadata. Keep layouts spacious and modular, shifting between open statement sections and carefully aligned grids. Use restrained hairlines, minimal rounding, and no heavy shadows. Introduce founder or editorial photography with dark, integrated treatment, and use abstract particle or line artwork selectively. Maintain a calm, high-contrast rhythm; never let decoration compete with the content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero with overlaid top navigation and abstract blue particle artwork. | primary navigation, hero artwork, top-right CTA | near-black canvas, blue particle field, compact navigation |
| 2 | other | Three-column editorial statement with a widely spaced eyebrow and supporting copy. | mission introduction, statement headline | oversized typography, blue word emphasis, wide whitespace |
| 3 | logo-cloud | Four-column portfolio composition combining company marks and category labels. | portfolio discovery, see-all link | logo grid, fine dividers, dark canvas |
| 4 | other | Two-column heading and graphic motif with a left-aligned editorial statement. | testimonial introduction | large headline, blue starburst motif |
| 5 | testimonials | Portrait-led carousel with a prominent central testimonial and adjacent cards. | testimonial carousel, founder attribution | founder portraits, quote text, pagination markers |
| 6 | feature-grid | Large statement above a charcoal three-column section of concise principles. | approach overview, principle links | charcoal panel, oversized headline, thin separators |
| 7 | content-feed | Editorial three-column feed with image-led cards and centered follow links. | news browsing, event discovery, follow links | image cards, uppercase metadata, blue link accents |
| 8 | contact | Open two-column contact and footer composition with a large heading. | team contact, social links, legal navigation | large editorial title, small uppercase labels, subtle line artwork |

## Source CSS custom properties (selected)

```css
--marquee-duration: 30s;
--background: #000;
--foreground: #d8eaff;
```

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