---
version: alpha
name: Solana
description: A pure-black crypto canvas lit by a single purple-to-green gradient aura where ABC Diatype carries everything at airy light weights, a Diatype Semi-Mono runs the tiny tracked labels, the primary CTA stays a clean white pill, and the brand's signature magenta-violet glow does all the chromatic work.

colors:
  # Surface / canvas
  background: "#000000"
  surface: "#0b0a10"           # the deep panel fill / hero gradient base
  surface-elevated: "#14001d"  # the purple-black gradient terminus, raised cards
  surface-violet: "#1a1320"    # tinted card behind violet glow

  # Ink / text
  ink: "#eaecf0"               # primary near-white headings and body
  ink-secondary: "#ababba"     # supporting copy, muted labels
  ink-muted: "#818384"         # captions, metadata, the faintest helper text
  on-light: "#000000"          # black text on the white primary button

  # Brand accent — the singular Solana gradient pair
  primary: "#9945ff"           # Solana purple — the chromatic anchor and gradient start
  primary-magenta: "#d06bf8"   # magenta-violet — the gradient mid / glassy pill highlight
  accent-green: "#14f195"      # Solana green — the gradient end, underlines, success
  accent-green-bright: "#00ffbd" # link-hover bright mint
  accent-green-soft: "#55e9ab" # softer green for accent rules and chips
  on-primary: "#ffffff"        # white text on filled purple

  # CTA
  cta: "#ffffff"               # the primary "Get started" pill fill
  cta-text: "#000000"          # black text on the white CTA
  cta-hover: "#eaecf0"         # white CTA hover

  # Borders
  border: "#1c1b22"            # was rgba(236,228,253,0.12) — Google format requires hex
  border-strong: "#2a2730"     # was rgba(236,228,253,0.2) — Google format requires hex

  # Shadow tints (opaque approximations for the elevation table)
  shadow-violet: "#361b40"     # was rgb(54,27,64) inset glow — kept opaque for hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.9) — Google format requires hex

typography:
  display-hero:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1.5px
  display:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.13
    letterSpacing: -1.0px
  heading:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.2px
  body-large:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-small:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption:
    fontFamily: "ABC Diatype, Diatype, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  label-mono:
    fontFamily: "Diatype Semi-Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.42
    letterSpacing: 0.5px
  label-mono-bold:
    fontFamily: "Diatype Semi-Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 1.0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 40px
  5xl: 64px
  6xl: 120px

rounded:
  sm: 4px
  md: 12px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.cta}"
    textColor: "{colors.cta-text}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.cta-hover}"
    textColor: "{colors.cta-text}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-gradient:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  button-gradient-hover:
    backgroundColor: "{colors.primary-magenta}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-violet:
    backgroundColor: "{colors.surface-violet}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 16px 32px

  link:
    textColor: "{colors.accent-green-soft}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.accent-green-bright}"
    typography: "{typography.body}"
    padding: 0px

  eyebrow-mono:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono-bold}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary-magenta}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Solana Design System

## Overview

Solana's homepage is what a layer-1 blockchain looks like when it wants to feel less like a finance terminal and more like a music festival. The canvas is pure black (`{colors.background}`), and the single most distinctive move is the glow: a soft purple-to-magenta-to-green gradient aura (`{colors.primary}` → `{colors.primary-magenta}` → `{colors.accent-green}`) blooming from the top of the hero, fading into the dark. That gradient is the entire brand identity. There is almost no other chromatic color on the page — the gradient does all the work, and everything else is black, white, and gray. The result reads as energetic and premium at once, a dark room lit by a single neon source.

The typography reinforces the restraint. The headline — "Meet Solana IRL. Build connections." — is set in **ABC Diatype** (`{typography.display-hero}`), a clean Swiss grotesque, at an airy *light* weight (300) and large size (88px), near-white (`{colors.ink}`). That choice of weight matters: most crypto brands shout in bold, but Solana whispers in a thin, confident grotesque, letting the gradient supply the energy. Small labels and eyebrows switch to **Diatype Semi-Mono** (`{typography.label-mono-bold}`), uppercased and tracked, giving the supporting chrome a technical, on-chain cadence without ever feeling like a code editor.

The color discipline is the most surprising part. Despite owning a famous gradient, Solana keeps the *primary* call-to-action a clean **white pill** (`{colors.cta}` fill, black text, fully rounded) — the gradient is reserved for the ambient glow and the occasional glassy filled button, never for the workhorse CTA. Pills are everywhere (`{rounded.pill}`, the dominant radius by far), and the green half of the gradient (`{colors.accent-green-soft}`) does double duty as the link color, brightening to electric mint (`{colors.accent-green-bright}`) on hover. The overall impression: a confident, dark, gradient-lit brand that trusts one neon idea to carry the whole experience.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) — committedly dark, no light mode
- The signature purple→magenta→green gradient (`{colors.primary}` → `{colors.primary-magenta}` → `{colors.accent-green}`) as an ambient glow blooming from the hero
- **ABC Diatype** grotesque at airy *light* weight 300 for display (`{typography.display-hero}`) — quiet confidence, not bold crypto shouting
- **Diatype Semi-Mono** (`{typography.label-mono}`) for tracked uppercase labels and eyebrows — technical, on-chain cadence
- Primary CTA is a clean **white pill** (`{colors.cta}`), black text — the gradient is *not* the button color
- Pills dominate (`{rounded.pill}`) for buttons, inputs, and chips; 12px radius for cards
- Solana green (`{colors.accent-green-soft}`) doubles as the link color, brightening to mint (`{colors.accent-green-bright}`) on hover
- Glassy gradient buttons use violet inset glows (`{colors.shadow-violet}`) for a lit, three-dimensional finish
- Near-white text (`{colors.ink}`) and muted gray (`{colors.ink-secondary}`) carry all copy — color stays in the glow
- Hairline borders (`{colors.border}`) — faint purple-tinted dividers, never heavy boxes
- Event/partner cards float on subtle dark panels (`{colors.surface}`) against the black

## Colors

### Surface & Canvas
- **Black** (`{colors.background}`): The dominant canvas. Nearly the entire site sits on pure black.
- **Panel** (`{colors.surface}`): The deep near-black panel fill behind cards and the hero gradient base.
- **Violet-Black** (`{colors.surface-elevated}`): The purple-black gradient terminus and raised card fills.
- **Violet Tint** (`{colors.surface-violet}`): Cards sitting inside the violet glow.

### Ink / Text
- **Near-White** (`{colors.ink}`): Headings and body copy. Soft, not pure white.
- **Gray** (`{colors.ink-secondary}`): Supporting copy and muted labels.
- **Muted Gray** (`{colors.ink-muted}`): Captions and the faintest helper text.

### Brand Accent — the Gradient
- **Solana Purple** (`{colors.primary}`): The gradient start and the chromatic anchor.
- **Magenta-Violet** (`{colors.primary-magenta}`): The gradient mid and the glassy pill highlight.
- **Solana Green** (`{colors.accent-green}`) / **Soft Green** (`{colors.accent-green-soft}`): The gradient end; the soft variant is the link color.
- **Bright Mint** (`{colors.accent-green-bright}`): The link-hover electric green.

### CTA
- **White** (`{colors.cta}`): The primary "Get started" pill fill — black text (`{colors.cta-text}`). Hover dims slightly to `{colors.cta-hover}`.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`, `{colors.border-strong}`): Faint purple-tinted dividers and edges (the originals were rgba with violet tint — flattened to opaque hex for the Google spec).
- **Violet / Ambient** (`{colors.shadow-violet}`, `{colors.shadow-ambient}`): Opaque stand-ins for the violet inset glow and the deep ambient drop.

## Typography

### Font Family
- **Primary**: `ABC Diatype` — a clean Swiss grotesque, used across display and body. Display runs at a distinctive light weight (300).
- **Monospace**: `Diatype Semi-Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. Reserved for tracked uppercase labels and eyebrows — a technical accent, not for code.
- **OpenType / tracking**: light weights on large display sizes with mild negative tracking; mono labels use positive tracking with uppercase transform.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 88px / Diatype 300 / -1.5px — the marquee headline |
| `display` | 64px / Diatype 300 — large section titles |
| `heading` | 40px / Diatype 400 — feature headings |
| `heading-sub` | 24px / Diatype 500 — sub-section headings |
| `body-large` | 21px / Diatype 400 — lead paragraphs |
| `body` | 18px / Diatype 400 — standard body |
| `body-small` | 16px / Diatype 400 — dense supporting copy |
| `button` | 18px / Diatype 500 — button text |
| `caption` | 14px / Diatype 400 — metadata, helper text |
| `label-mono` | 14px / Diatype Semi-Mono 500 — tracked uppercase labels |
| `label-mono-bold` | 12px / Diatype Semi-Mono 700 / 1.0px — eyebrows and tiny markers |

### Principles
- **Light, not loud**: large display sits at weight 300. The gradient supplies the energy, so the type stays quiet and confident.
- **Mono as technical accent**: Diatype Semi-Mono labels signal "on-chain / technical," uppercased and tracked.
- **Weight does hierarchy**: 300 for hero, 400/500 for headings and body. Rarely heavier than 500.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Large vertical rhythm (`{spacing.6xl}` = 120px) separates major sections; component internals stay compact (`{spacing.md}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a hero with the gradient glow at top, a light-weight headline, and a white CTA pill, followed by horizontally-scrolling card rails (events, partners)
- Partner logos sit in a quiet monochrome strip below the hero

### Whitespace Philosophy
- **Black is the design**: the canvas does the work; the gradient is the only chromatic event
- **Airy and premium**: generous spacing keeps the dark page feeling expensive rather than dense
- **The glow is the hero**: visual weight concentrates in the gradient aura, everything else recedes

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, faint `{colors.border}` only | Section bands, most page content |
| Panel (Level 1) | `0 1px 2px` at ~5% black | Resting cards and chips on the dark canvas |
| Glassy button (Level 2) | violet inset glow (`{colors.shadow-violet}`) + bright top/bottom inset highlights | The filled gradient buttons — lit, three-dimensional |
| Elevated (Level 3) | `0 24px 80px -32px` at ~90% black (`{colors.shadow-ambient}`) | Floating hero panels and modals |

**Shadow Philosophy**: On a pure-black page, ordinary drop shadows are nearly invisible, so Solana leans on *inset* glows instead. The signature glassy button stacks an inner violet glow with thin bright top-and-bottom inset highlights so the pill reads like a lit, three-dimensional object catching the gradient's light. Large floating panels use a very deep, wide ambient cast to separate from the black. Separation comes from luminance and glow, not from soft gray blur.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tiny chips, kbd keys, thumbnails |
| `md` | 12px | Cards and panels — the default container radius |
| `lg` | 16px | Larger feature cards |
| `pill` | 9999px | Buttons, inputs, badges — the dominant interactive shape |

The system is pill-forward: nearly every button, input, and chip is fully rounded (`{rounded.pill}`), with a tidy 12px on cards. The pills give the dark, technical brand a friendly, rounded warmth.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — White (`{colors.cta}`) fill, black text, fully pill. The main "Get started" CTA. Hover dims to `{colors.cta-hover}`.
- **`button-outline`** — Transparent on black, near-white text, faint `{colors.border}` outline, pill. Secondary actions.
- **`button-gradient`** — The glassy filled purple/magenta pill with violet inset glow — used sparingly for emphasis.

### Cards
- **`card`** / **`card-violet`** — Dark panel or violet-tinted fill, 12px radius. The violet variant sits inside the glow.

### Inputs
- **`input`** — Dark panel fill, pill radius, faint border. **`input-focus`** brightens the border / adds a soft ring; no heavy chrome.

### Navigation
- **`nav-bar`** — Black, faint hairline, the Solana wordmark at left. Sits flush at the top above the gradient glow.

### Accent & Labels
- **`link`** — Soft Solana green text, brightening to mint (`link-hover`) on hover.
- **`eyebrow-mono`** — Diatype Semi-Mono, uppercased and tracked — the technical section marker.
- **`badge`** — Violet-black fill, magenta mono text, pill radius.

## Do's and Don'ts

### Do
- Keep the canvas pure black (`{colors.background}`) — Solana is committedly dark
- Make the purple→magenta→green gradient (`{colors.primary}` → `{colors.primary-magenta}` → `{colors.accent-green}`) an ambient glow, not a flat fill — it's the one chromatic event
- Set display type in **ABC Diatype** at light weight 300 (`{typography.display-hero}`) — quiet confidence
- Use **Diatype Semi-Mono** (`{typography.label-mono}`) for eyebrows and labels, uppercased and tracked
- Keep the primary CTA a clean **white pill** (`{colors.cta}`) with black text — the gradient is not the button
- Make buttons, inputs, and chips fully pill-rounded (`{rounded.pill}`); cards at 12px (`{rounded.md}`)
- Use Solana green (`{colors.accent-green-soft}`) for links, brightening to mint (`{colors.accent-green-bright}`) on hover
- Light glassy gradient buttons with violet inset glows (`{colors.shadow-violet}`) rather than drop shadows

### Don't
- Don't switch to a light canvas — the brand lives on black
- Don't make the gradient the primary button color — it's the glow; the CTA is white
- Don't set the hero in a bold weight — Diatype 300 light is the signature; bold reads as generic crypto
- Don't scatter the green and purple as flat fills everywhere — color stays concentrated in the glow and links
- Don't use ordinary gray drop shadows on black — they vanish; use inset glows and luminance steps
- Don't reach for sharp corners — the system is pill-forward with 12px cards
- Don't replace Diatype Semi-Mono labels with the sans — the mono cadence is the technical signature

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard Tailwind-style stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero scales 88px → ~44px; nav collapses to a menu; card rails become swipeable; the gradient glow shrinks to the top edge |
| Tablet | 640–1023px | Two-column feature blocks begin; card rails show ~2 cards |
| Desktop | 1024–1279px | Full layout; centered hero glow, white CTA pill |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run ~44px tall with `12px 20px` padding — comfortable for thumbs
- Card rails are touch-scrollable with chevron controls on larger screens

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the white "Get started" CTA persists
- **Hero**: the gradient glow concentrates to the top edge; headline scales down while keeping light weight
- **Type**: display drops from 88px toward ~44px; body holds at 16-18px
- **Spacing**: section padding compresses from 120px toward ~64px

### Image Behavior
- Event and partner cards reflow as horizontally-scrolling rails; artwork fills the card and crops rather than letterboxing

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black (`{colors.background}`)
- Text: Near-White (`{colors.ink}`)
- Brand accent: the gradient — Purple (`{colors.primary}`) → Magenta (`{colors.primary-magenta}`) → Green (`{colors.accent-green}`)
- Secondary text: Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **White pill** (`{colors.cta}`) with black text (`{colors.cta-text}`) — not the gradient

### Example Component Prompts

- "Create a hero on pure black (`{colors.background}`) with a soft purple→magenta→green gradient glow (`{colors.primary}` → `{colors.primary-magenta}` → `{colors.accent-green}`) blooming from the top, an 88px near-white (`{colors.ink}`) headline in ABC Diatype at light weight 300, and a white pill CTA (`{colors.cta}` fill, black text, `{rounded.pill}` radius)"
- "Build a secondary outline button: transparent on black, near-white text, a faint `{colors.border}` 1px outline, `{rounded.pill}` radius, `12px 20px` padding"
- "Render an eyebrow label in Diatype Semi-Mono (`{typography.label-mono-bold}`), uppercased, gray (`{colors.ink-secondary}`), 1.0px tracking — a technical section marker"
- "Create a glassy gradient button: purple (`{colors.primary}`) fill, white text, `{rounded.pill}` radius, with a violet inset glow (`{colors.shadow-violet}`) and thin bright top/bottom inset highlights so it reads lit and three-dimensional"
- "Design an event card: dark panel (`{colors.surface}`), `{rounded.md}` radius, full-bleed artwork that crops, a near-white (`{colors.ink}`) title and a gray (`{colors.ink-secondary}`) date caption"
- "Style a link in soft Solana green (`{colors.accent-green-soft}`) that brightens to mint (`{colors.accent-green-bright}`) on hover, no underline"

### Iteration Guide

1. Start on pure black (`{colors.background}`). If you reached for a light or gray canvas, stop — Solana lives on black.
2. The gradient (`{colors.primary}` → `{colors.primary-magenta}` → `{colors.accent-green}`) is an ambient glow, not a flat fill or a button color. Concentrate it in the hero.
3. Display type is ABC Diatype at light weight 300 (`{typography.display-hero}`). If it's bold, lighten it.
4. The primary CTA is a white pill (`{colors.cta}`), black text. If your main button is purple, recolor it white.
5. Make buttons, inputs, and chips fully pill (`{rounded.pill}`); cards at 12px (`{rounded.md}`).
6. Links are Solana green (`{colors.accent-green-soft}`) → mint (`{colors.accent-green-bright}`) on hover.
7. On black, use inset glows (`{colors.shadow-violet}`) and luminance steps for depth — ordinary gray drop shadows vanish.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Solana. Brand names and trademarks belong to their respective owners.