Neuralink
dark theme
Independent Style Review

Neuralink-Style Design System

The Neuralink design system uses a dark-themed visual language. The primary brand color is Canvas White (#ffffff); text is Canvas White (#ffffff) on a Midnight Void (#000000) background. Typography is set in UntitledSans. This DESIGN.md contains 4 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Neuralink.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Neuralink-style design system: color codes and fonts

Theme
dark
Primary color
Canvas White (#ffffff)
Fonts
UntitledSans
Source
neuralink.com

Deep void to soft textured canvas

Neuralink's design system uses a high-contrast dark-to-light progression, transitioning from a deep void to soft, textured surfaces. Typography is minimal and precise, focusing on clear communication over decorative flair. Interactive elements feature soft, large radii, creating an approachable feel within the clinical and technical context. The system relies on a restrained palette, where shifts in background color delicately delineate sections.

Original style summary

Neuralink color codes

ColorHEXCSS tokenUsage
Midnight Void#000000--color-midnight-voidPrimary background for hero and prominent sections, primary text color, button borders, subtle surface backgrounds
Canvas White#ffffff--color-canvas-whitePrimary text color on dark backgrounds, interactive element backgrounds, borders for ghost buttons
Soft Linen#f5f5f5--color-soft-linenLight background for secondary sections and footer, providing a subtle texture
Ash Gray#bababa--color-ash-grayMuted text, inactive navigation items, subtle borders

Which fonts does Neuralink use?

FontWeightsFallback
UntitledSans300, 400, 500, 700System UI (sans-serif)
RoleSizeLine heightToken
body-sm14px1.5--text-body-sm
body16px1.5--text-body
body-lg18px1.5--text-body-lg
subheading24px1.2--text-subheading
heading32px1.15--text-heading
display-sm44px1.15--text-display-sm
display48px1--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Neuralink's public website (neuralink.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Neuralink. The Neuralink name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems