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

# Neuralink · Design System

> Human stories, framed by quiet precision

**Theme:** light · **Industry:** health · **Source:** https://neuralink.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._

Neuralink’s homepage pairs a restrained black-and-white interface with immersive video and patient-centered storytelling. Spacious editorial sections and soft, image-led panels make advanced brain-computer technology feel personal and accessible.

## North star

Let immersive human stories carry the emotion while a spacious, high-contrast interface stays visually quiet.

## Overview

The page uses a mostly monochrome framework: white is the main reading canvas, black anchors the full-bleed hero and text, and a pale gray footer marks the close. Accent hues form a narrow pink-to-violet-to-blue gradient in the announcement strip; they are decorative interface color, while warm skin, sand, and game imagery belong to the video rather than the core palette. UntitledSans gives headings a clean, slightly compressed editorial feel through tight negative tracking and light-to-medium weights. The hero is edge-to-edge video with white overlay navigation and a compact rounded white CTA. Below, generous white space separates a two-column mission statement from centered pioneer stories, then image-led audience cards. Rounded media and pill controls soften the clinical subject matter without introducing heavy cards or shadows. The footer becomes a quiet light-gray utility zone.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Neural Ink | `#000000` | `--color-neural-ink` | brand | Hero video backdrop, primary text, navigation, and dark interface surfaces. |
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Main page canvas, hero CTA fill, and reversed text or outlined controls over video. |
| Footer Mist | `#f5f5f5` | `--color-footer-mist` | surface | Light-gray footer band behind utility links and cookie controls. |
| Petal Signal | `#e486ab` | `--color-petal-signal` | accent | Decorative start of the announcement gradient, not a dominant content color. |
| Iris Haze | `#7f80b3` | `--color-iris-haze` | accent | Midpoint hue in the announcement gradient, used as a subtle brand flourish. |
| Dusk Blue | `#435a93` | `--color-dusk-blue` | accent | Deep blue stop in the announcement gradient, not a general-purpose CTA color. |
| Violet Pulse | `#6452d8` | `--color-violet-pulse` | accent | Final violet gradient stop in the announcement strip; decorative rather than structural. |
| Quiet Gray | `#bababa` | `--color-quiet-gray` | semantic | Low-emphasis footer text detail; keep secondary to black utility copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#000000` (Neural Ink) · `--color-surface-2` → `#f5f5f5` (Footer Mist) · `--color-text` → `#000000` (Neural Ink) · `--color-text-muted` → `#ffffff` (Canvas White) · `--color-border` → `#ffffff` (Canvas White) · `--color-accent` → `#e486ab` (Petal Signal) · `--color-accent-2` → `#7f80b3` (Iris Haze) · `--color-accent-3` → `#435a93` (Dusk Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#e486ab` | `#ffffff` | 2.53:1 | fail |
| `#e486ab` | `#000000` | 8.3:1 | AAA |
| `#e486ab` | `#f5f5f5` | 2.32:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(228, 134, 171), rgb(127, 128, 179) 20%, rgb(67, 90, 147) 50%, rgb(100, 82, 216) 95%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UntitledSans | `--font-body` | webfont | 400, 500, 300 | Site-wide headings, body copy, navigation, buttons, and captions. | Inter |

- **UntitledSans:** Use clean sans-serif forms, tight negative tracking on large headings, and regular-weight interface text; casing stays natural.

### Type scale — Major Third (ratio ≈ 1.278, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1 | -0.06em | — | UntitledSans | Hero headline over video, set in compact high-contrast white type. |
| h2 | 44px | 300 | 1 | -0.06em | — | UntitledSans | Primary mission and section headings with light editorial weight. |
| h3 | 32px | 400 | 1 | -0.037em | — | UntitledSans | Story quotes and secondary feature headings. |
| h4 | 24px | 400 | 1.2 | -0.05em | — | UntitledSans | Compact card or nested section headings. |
| body | 18px | 400 | 1.2 | 0 | — | UntitledSans | Mission explanation and supporting narrative copy. |
| caption | 14px | 400 | 1.2 | 0 | — | UntitledSans | Patient details and low-emphasis media annotations. |
| button | 16px | 400 | 1.15 | -0.02em | — | UntitledSans | Pill-shaped clinical-trial and audience-card actions. |
| nav | 16px | 400 | 1.5 | -0.015em | — | UntitledSans | Header links and footer navigation labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 8, 12, 16, 18, 20, 24, 30, 32, 40, 46, 48 px.
- Section rhythm 60px · element gap 30px · card padding — · max content width 612px.

Use a full-bleed video hero followed by broad, calm content bands. The mission section is a two-column split: heading on the left, concise explanatory copy on the right. Center the pioneer storytelling and audience-card sections, leaving substantial breathing room around their media. Measured content width is 612px for constrained content; avoid dense grids and align text deliberately. The page has comfortable density, a 60px section gap, and a 30px element gap in the measured scale. Finish with a light-gray, multi-column utility footer.

## Shape & elevation

- Radius: button `9999px` · media `20px` · link `20px` · xs `20px` · pill `9999px`
- Shadow `md` (link): `rgba(0, 0, 0, 0) 0px 0px 20px 1px`
- Motion: standard transition `0.1s ease` on interactive elements.

The design is mostly flat, relying on canvas changes, imagery, and generous whitespace rather than shadows. Use thin white outlines for controls over dark video and black outlines for footer settings controls. Media has rounded corners; pill-shaped buttons sit clearly above their backgrounds without noticeable drop shadows.

## Imagery

Video leads the page: a full-bleed opening scene carries the hero message, while patient stories use documentary-style clips in rounded media frames. Audience cards use portrait imagery with layered, atmospheric color. The warm hues visible in screenshots are primarily video and image content, not the interface palette. Keep imagery human, candid, and central, with restrained text overlays.

## Components

### Announcement strip

A slim full-width gradient band with centered white link text and a close control.

### Overlay navigation

White navigation links and a thin outlined pill action sit over the hero video.

### Hero CTA

White fill, black text, thin white border, and fully rounded pill shape; keep it prominent against video.

### Mission split

A large, left-aligned heading paired with concise explanatory copy on a white canvas.

### Pioneer story carousel

Centered patient stories combine rounded video, quote, concise patient details, and simple circular navigation.

### Audience cards

Two image-led destinations for patients and technical candidates, with white overlay copy and outlined pill actions.

### Utility footer

Light-gray footer with grouped black links, a patient-registry action, and outlined cookie settings controls.

### Measured component styles

- **Primary button** (“Explore our clinical trials”): background #ffffff · text #000000 · border 1px solid #ffffff · radius 80px · padding 16px 24px · 400 16px UntitledSans
- **Secondary button** (“Learn about clinical trials”): transparent background · text #ffffff · border 1px solid #ffffff · radius 80px · padding 16px 24px · 400 16px UntitledSans
- **Link** (“Patients & Caregivers Learn about clinic”): transparent background · text #000000 · radius 20px · padding 0px · 400 16px UntitledSans · shadow rgba(0, 0, 0, 0) 0px 0px 20px 1px
- **Navigation item** (“Technology”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px UntitledSans

## Do

- Use black and white as the interface foundation.
- Keep the hero video full bleed with legible white overlay content.
- Use UntitledSans-style clean typography and tight heading tracking.
- Give sections ample whitespace and clear editorial alignment.
- Reserve the gradient for the announcement treatment.
- Use rounded media and pill-shaped primary actions.
- Keep secondary footer utilities quiet on pale gray.

## Don't

- Do not treat video colors as brand palette colors.
- Do not add colorful gradients to ordinary content sections.
- Do not crowd the page with dense grids or card chrome.
- Do not add heavy shadows or decorative borders around every block.
- Do not use loud, oversized navigation treatments.
- Do not replace human stories with generic technology imagery.

## Agent prompt

Build a new Neuralink-style page with a restrained black-and-white interface and human-centered storytelling. Use Neural Ink (#000000) for text and dark surfaces, Canvas White (#ffffff) for the main reading canvas and primary CTA, and Footer Mist (#f5f5f5) for a quiet utility footer. Keep Petal Signal (#e486ab), Iris Haze (#7f80b3), Dusk Blue (#435a93), and Violet Pulse (#6452d8) limited to a slim announcement gradient. Set clean sans-serif type similar to UntitledSans, with tightly tracked editorial headings and natural-case labels. Lead with immersive full-bleed video, overlay minimal navigation and a rounded CTA, then alternate spacious split-copy and centered patient-story sections. Use rounded documentary media, restrained outlined controls, generous whitespace, and no heavy shadows or decorative card borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with overlay header, headline, and bottom-left action. | Announcement link, Overlay navigation, Primary CTA | Black video backdrop, White text, Pill CTA, Gradient announcement strip |
| 2 | feature-split | Two-column text split on a white canvas. | Mission introduction, Supporting explanation | Editorial heading, Plain text column, Generous whitespace |
| 3 | testimonials | Centered patient-story carousel with rounded video and text. | Story carousel, Previous and next controls, Patient details | Rounded video, Centered quote, Minimal progress indicator |
| 4 | category-nav | Centered heading above two image-led audience cards. | Audience selection, Contextual destination links | Portrait imagery, Overlay labels, Outlined pill actions |
| 5 | footer | Light-gray footer with grouped link columns and utility actions. | Grouped site navigation, Patient registry action, Cookie settings | Pale-gray band, Black utility links, Outlined settings control |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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