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

# Solana · Design System

> A black canvas for markets, momentum, and community.

**Theme:** dark · **Industry:** crypto · **Source:** https://solana.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._

Solana’s homepage pairs a near-black canvas and restrained typography with luminous, abstract network imagery. Editorial headlines, ecosystem proof points, and community content create a confident, technology-led narrative.

## North star

Let crisp white editorial typography and meaningful content lead on a black canvas, with color reserved for vivid media and clear action.

## Overview

The page is built on a nearly uninterrupted black canvas, with subtle charcoal surfaces and hairline dividers separating long, spacious sections. White headlines carry the hierarchy; muted lavender-gray copy recedes without losing legibility. Diatype’s light, tightly tracked display styles give the hero and section titles an editorial, high-impact feel, while the small monospace eyebrow adds a technical counterpoint. The opening composition sets large left-aligned type against an abstract, luminous market-line visual in violet, teal, and green. Below, event cards, partner marks, metrics, news, and community actions create a proof-led story rather than a conventional feature catalog. Content grids are broad and modular, with generous dark negative space around key sections. Cards stay mostly flat, relying on subtle surface shifts and fine borders; rounded pill buttons provide the clearest interaction cue.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Primary page canvas and dominant hero background; gives the long homepage its uninterrupted dark foundation. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headings, body copy, navigation, links, and the filled Get started button. |
| Lavender Haze | `#ababba` | `--color-lavender-haze` | neutral | Main muted text color for supporting descriptions against the black canvas. |
| Night Gradient | `#0b0a10` | `--color-night-gradient` | surface | Very dark card and section surface; also underlies a subtle fade into the black canvas. |
| Charcoal Field | `#121212` | `--color-charcoal-field` | surface | Secondary dark surface used across page areas and occasional boxed content. |
| Graphite Rule | `#1d1c1f` | `--color-graphite-rule` | surface | Subtle divider and border color for cards, navigation, and section edges. |
| Violet Shadow | `#14001d` | `--color-violet-shadow` | accent | Rare purple-black gradient endpoint on a button; not a dominant page color. |
| Soft Silver | `#b3b3b3` | `--color-soft-silver` | neutral | Secondary muted link text; a less prominent alternative to white navigation and links. |
| Smoky Border | `#29272e` | `--color-smoky-border` | surface | Subtle outlines on secondary controls and navigation elements. |
| Slate Outline | `#393841` | `--color-slate-outline` | surface | Fine border on outline-style pill buttons, including Learn more. |
| Quiet Gray | `#8c8c8c` | `--color-quiet-gray` | neutral | Low-emphasis text or links in supporting navigation and utility areas. |
| Coal Edge | `#2f2e33` | `--color-coal-edge` | surface | Dark control and card outlines, including secondary pill buttons. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#121212` (Charcoal Field) · `--color-surface-2` → `#0b0a10` (Night Gradient) · `--color-surface-3` → `#1d1c1f` (Graphite Rule) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#ababba` (Lavender Haze) · `--color-text-subtle` → `#b3b3b3` (Soft Silver) · `--color-border` → `#1d1c1f` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#121212` | 18.73:1 | AAA |
| `#ffffff` | `#0b0a10` | 19.72:1 | AAA |
| `#ffffff` | `#1d1c1f` | 16.96:1 | AAA |
| `#ababba` | `#000000` | 9.27:1 | AAA |
| `#ababba` | `#121212` | 8.27:1 | AAA |
| `#ababba` | `#0b0a10` | 8.7:1 | AAA |
| `#ababba` | `#1d1c1f` | 7.48:1 | AAA |
| `#b3b3b3` | `#000000` | 10.02:1 | AAA |
| `#b3b3b3` | `#121212` | 8.93:1 | AAA |

### Gradients

- `linear-gradient(rgb(11, 10, 16), rgb(11, 10, 16), rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(0, 0, 0), rgb(20, 0, 29))`
- `linear-gradient(rgb(85, 233, 171) 0px, rgb(85, 233, 171) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype | `--font-body` | webfont | 500, 400, 300 | Display, headings, body copy, buttons, links, and navigation. | Inter |
| DSemi | `--font-dsemi` | webfont | 400, 700 | Technical eyebrow labels and small uppercase metadata. | IBM Plex Mono |

- **Diatype:** Use light weights for large editorial headlines; medium weights for body and actions. Headlines use tight negative tracking; avoid unnecessary uppercase.
- **DSemi:** Keep monospace use sparse: compact uppercase labels with generous letter spacing, distinct from the main sans-serif system.

### Type scale — Perfect Fourth (ratio ≈ 1.345, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 300 | 1 | -0.03em | — | Diatype | Oversized hero messaging and prominent brand statements. |
| h1 | 64px | 300 | 1.13 | -0.04em | — | Diatype | Primary page headline and major first-level title. |
| h2 | 40px | 300 | 1 | 0 | uppercase | Diatype | Uppercase section labels or strong section-level headings. |
| h3 | 36px | 500 | 1.22 | -0.03em | — | Diatype | Editorial section titles and prominent card headings. |
| h4 | 24px | 500 | 1.33 | -0.02em | — | Diatype | Card titles and supporting subsection headings. |
| body | 20px | 500 | 1.5 | -0.01em | — | Diatype | Introductory descriptions and primary explanatory copy. |
| caption | 18px | 400 | 1.33 | -0.01em | — | Diatype | Event details and secondary supporting text. |
| button | 18px | 500 | 1.33 | -0.01em | — | Diatype | Primary and secondary button labels. |
| link | 15px | 400 | 1.5 | 0 | — | Diatype | Inline links and low-emphasis navigation items. |
| eyebrow | 11px | 400 | 2.18 | 0.16em | uppercase | DSemi | Compact uppercase technical labels and metadata. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 24, 28, 32, 40, 48 px.
- Section rhythm 40px · element gap 8px · card padding 32px · max content width 1360px.

The page uses a broad, centered content area with a measured maximum width of 1360px, while select hero and media sections run full bleed. Most sections align content to the left and shift between open editorial compositions and modular multi-column grids. The measured spacing system is compact, but the screenshot uses generous dark negative space to separate major stories. Use fine horizontal rules to mark transitions; cards and logo rows sit within the wider grid rather than forming a uniformly boxed dashboard.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `4px` · nav `4px` · link `12px` · xs `4px` · sm `12px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px, rgba(255, 255, 255, 0.29) 0px -4px 12px 0px inset, rgba(255, 255, 255, 0.4) 0px 1px 0px 0px ins`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(54, 27, 64) 0px -4px 12px 0px inset, rgb(195, 124, 224) 0px 1px 0px 0px inset, rgb(208, 107, 248) 0px -1px 0px 0px inset`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall interface is flat, with no strong page-wide drop shadows. Use charcoal surface changes and thin graphite borders to distinguish cards and controls. Pill buttons are the main elevated-feeling controls; retain their subtle inset highlight rather than adding prominent card shadows or layered panels.

## Imagery

The hero pairs its headline with a full-width abstract market visualization: a dark field crossed by a glowing, wave-like line and violet, teal, and green light. Event and editorial areas use image-led cards, while partner logos and network graphics supply ecosystem proof. Keep media dark and atmospheric, with vivid color concentrated inside artwork rather than applied as broad interface fills.

## Components

### Primary action

White pill-shaped Get started button with black text; it is the clearest filled control on the dark page.

### Outline action

White-label pill button with a fine dark-gray outline, used for Learn more and View all actions.

### Event card

Image-led event panel with a clear title, muted supporting copy, and a compact secondary action.

### Metric panel

Large numeric network proof points grouped in a restrained dark layout with thin separating rules.

### Logo strip

A horizontal row of partner marks on black, kept visually lighter than headline content.

### Community tiles

Dark charcoal action cards for validators, staking, apps, code, and tokenization; use a small icon and concise copy.

### Global navigation

Compact dark header with Solana branding, text-based menu groups, and understated search and language utilities.

### Measured component styles

- **Primary button** (“Get started”): background #ffffff · text #000000 · radius 9999px · padding 12px 20px · 500 18px Diatype
- **Secondary button** (“Learn more”): transparent background · text #ffffff · border 1px solid #393841 · radius 9999px · padding 0px 24px · 500 18px Diatype
- **Link** (“Use Solana”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Diatype
- **Card** (“Breakpoint 2026: Booked Breakpoint? Let'”): background #0d0c11 · text #ffffff · radius 0px · padding 32px · 400 21px Diatype
- **Navigation item** (“Use Solana Build Enterprise Products Eco”): transparent background · text #ffffff · radius 0px · padding 0px · 400 21px Diatype

## Do

- Keep the main canvas near-black and visually continuous.
- Use white for headlines and high-priority actions.
- Reserve muted gray for supporting text and utility links.
- Let abstract violet and teal color live mainly in imagery.
- Separate long sections with subtle hairlines and negative space.
- Use pill shapes for key buttons and restrained corner rounding for cards.

## Don't

- Do not turn every section into a bordered card grid.
- Do not use bright color as a broad interface background.
- Do not let supporting text compete with the headline.
- Do not add heavy shadows or glossy, stacked surfaces.
- Do not center every section; preserve the left-aligned editorial rhythm.
- Do not use monospace for general body copy.

## Agent prompt

Build a new Solana-style page on a near-black Deep Canvas (#000000), using Signal White (#ffffff) for dominant headings and actions and Lavender Haze (#ababba) for supporting copy. Use Diatype or a close sans-serif such as Inter for the editorial hierarchy; keep DSemi-like monospace labels sparse. Make the layout broad and left-aligned, with a strong opening statement, dark negative space, and clear section transitions marked by subtle Graphite Rule (#1d1c1f) lines. Use dark surfaces like Night Gradient (#0b0a10) and Charcoal Field (#121212) selectively for cards. Keep controls simple: a white filled pill for the primary action and fine outlined pills for secondary actions. Put vivid violet, teal, or green effects in artwork, not large UI fills. Favor flat compositions and useful content over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with left-aligned headline, supporting copy, CTA, and atmospheric abstract media. | Primary action, Floating event card, Persistent utility prompt | Large light headline, White pill CTA, Glowing line artwork |
| 2 | logo-cloud | Compact horizontal partner-logo strip beneath the hero. | Brand recognition, Ecosystem proof | Centered logo row, Dark canvas |
| 3 | gallery | Left-aligned two-line heading above a horizontal gallery of event cards. | View all action, Carousel navigation, Event discovery | Image-led cards, Compact event metadata, Dark background |
| 4 | stats | Broad, sparse feature area with copy at left and compact metrics to the right. | Network proof points, Live-feeling statistics | Large numeric values, Thin dividers, Open black space |
| 5 | content-feed | Section heading and View all control above a broad multi-column content area. | Category exploration, View all action | Tabbed filters, Dark outlined panels, Modular columns |
| 6 | integrations | Wide heading above a multi-column grid of institution logos and financial metrics. | Partner proof, Browse more | Logo grid, Metric tiles, Thin cell dividers |
| 7 | content-feed | Editorial heading with a wide, card-based news and update area. | Article discovery, Carousel controls, View all action | Image-led stories, Headline and excerpt, Subtle dark cards |
| 8 | video | Left-aligned section intro followed by a horizontal set of video story tiles. | Play video, Browse stories | Play icons, Wide media tiles, Short story titles |
| 9 | feature-grid | Full-width community panel with an intro row and grid of actionable tiles. | Choose a participation path, Explore community roles | Icon-led cards, Dark charcoal surfaces, Concise descriptions |
| 10 | footer | Multi-column link directory with brand and language controls above and legal utilities below. | Grouped navigation, Language selection, Social links | Small muted links, Column headings, Dark open layout |

## Source CSS custom properties (selected)

```css
--radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(85,154,239,.5);
--font-mono: "Roboto Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--body-bg: #121212;
--body-text: #fafafa;
--body-text-secondary: #848895;
--mdx-text-color: #c0c0c0;
--mdx-text-color-2: #3f3a4e;
--mdx-text-color-3: #818384;
--mdx-link-color: #00ffbd;
--mdx-link-color-hover: #00ffbd;
--mdx-bg: #222121;
--mdx-table-bg-1: #151515;
--mdx-table-bg-2: #181818;
--mdx-details-bg: #1d1f21;
--mdx-details-border: #414141;
--callout-text-color: #e2e2e2;
--callout-yellow-bg: #a36a00;
--callout-yellow-border: #e6ab09;
--callout-green-bg: #086835;
--callout-green-border: #118e4c;
--callout-red-bg: #5c0909;
--callout-red-border: #810e0e;
--callout-blue-bg: #032a4a;
--callout-blue-border: #0e4d81;
```

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