Void Black
#000000Page canvas, deepest background layer — the void against which everything else floats
Solana
solana.comWebsite preview
The design language
Solana operates in a midnight void: a near-black canvas punctuated by flowing neon aurora graphics in violet, magenta, and green. The system is deliberately monochromatic — white and warm-gray typography carry all communication weight, while the only chromatic presence comes from the brand's signature flowing wave illustrations, never from interface chrome. Components are whisper-thin: 1px hairline borders, pill-shaped controls at 9999px radius, and cards that float on barely-distinguishable dark surfaces. The custom Diatype typeface, with its tightly negative letter-spacing that tightens further at display sizes, gives every headline a compressed, futuristic confidence. Buttons achieve a subtle 3D embossed effect through a layered shadow stack that pairs a soft drop shadow with inset white highlights — the chrome looks pressed into the surface rather than floating above it. Density is comfortable, never packed; the page breathes with generous section gaps and lets the aurora graphics do the visual heavy lifting.
Color palette
neutral
Obsidian
#0d0c11Card surfaces, elevated panels — a barely-perceptible warm purple-black lift from the canvas
Charcoal Press
#121212Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Onyx
#12151dNavigation bar background, sticky header surface
Smoke
#050505Secondary canvas tone, gradient terminus — the deepest non-pure-black
Graphite
#3e3c41Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Ash
#848895Muted text, secondary navigation labels, icon strokes in resting state
Fog
#ababbaBody text, descriptions, secondary copy — warm gray that softens white's intensity
Bone White
#ffffffPrimary headings, high-emphasis text, icon fills, reversed button text
Hairline
#eaecf0Ultra-subtle borders at low opacity — defines card edges and input fields against the void
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
88px · 500 · 1 · -3.52px trackingThe quick brown fox jumps
heading-lg
64px · 500 · 1.13 · -2.56px trackingThe quick brown fox jumps
text-40
40px · 300 · 1The quick brown fox jumps
heading
36px · 500 · 1.22 · -1.08px trackingThe quick brown fox jumps
text-28
28px · 500 · 1.14The quick brown fox jumps
heading-sm
24px · 500 · 1.33 · -0.48px trackingThe quick brown fox jumps
subheading
21px · 400 · 1.4 · -0.21px trackingThe quick brown fox jumps
text-20
20px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Diatype
- Weights
- 300, 400, 500
- Sizes
- 16, 18, 20, 21, 24, 28, 36, 40, 64, 88
- Line height
- 1.00–1.56
- Letter spacing
- -0.04em at 88px, -0.03em at 40-64px, -0.02em at 24-36px, -0.01em at 16-21px
- Fallback
- Inter, Geist, Satoshi
Primary typeface for all UI — body text, headings, buttons, navigation. The geometric, slightly condensed forms paired with aggressively negative letter-spacing give every line a compressed, technical authority. Weight 300 for display headlines creates a whisper-confident tone; weight 400 for body; weight 500 for emphasis. Letter-spacing tightens proportionally: -0.04em at display sizes, -0.01em at body sizes.
Additional typeface
DSemi
- Weights
- 700
- Sizes
- 12, 14
- Line height
- 1.14, 1.33
- Fallback
- JetBrains Mono Bold, Space Mono Bold
Reserved for the Solana wordmark and select nav micro-labels at 12-14px. The heavy weight at micro sizes acts as a brand signature — a condensed monospaced bold that contrasts Diatype's lighter geometric forms.
Additional typeface
ui-sans-serif
- Weights
- 400
- Sizes
- 21px
- Line height
- 1.5
ui-sans-serif — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 8px
Border radius
nav
4pxcards
12pxbadges
9999pxinputs
12pxbuttons
9999pxSpacing scale
2px4px6px8px10px12px14px16px20px24px28px30px32px40px44px48px52px64px72px128pxGuidelines
Do
- Use the void black (#000000) as the base canvas for all pages — never introduce a light background section
- Apply Diatype weight 300 for all display and hero headlines; reserve weight 500 only for button labels and short emphasis runs
- Set border-radius to 9999px for every button, tag, and pill-shaped element — the pill is a brand signature
- Use the embossed button shadow stack (inset white highlights + soft drop shadow) on all primary actions to maintain the pressed-glass feel
- Reference the aurora gradient (black to #14001d) as the only acceptable canvas gradient — it creates depth for the wave graphics
- Keep all body and description text in #ababba Fog; reserve pure white exclusively for headings and high-emphasis labels
- Use 12px radius for cards and content containers, 4px for small UI elements — never default to 8px
Don’t
- Do not introduce a chromatic CTA color — all primary actions use the dark embossed pill with white text
- Do not use drop-shadow elevation on cards or panels; the system defines surface layers through background luminance shifts, not shadows
- Do not break the negative letter-spacing pattern at any size — tracking loosens the brand's compressed authority
- Do not use decorative gradients on UI components (buttons, cards, inputs) — gradients belong only in the hero aurora and event imagery
- Do not set border-radius to 0 or to common defaults like 8px on interactive elements; the radius scale is 4/12/9999 only
- Do not place light or white surfaces in the interface — the entire system lives in the void
- Do not use saturated colors for icons, badges, or status indicators; all functional UI is monochrome
Components
Pill Primary Button
Primary action trigger9999px border-radius (full pill). Background #121212 with the signature embossed shadow stack. Text: Diatype 16px weight 500, #ffffff. Padding: 10px 20px. Includes a leading icon (arrow/triangle) before the label. The inset white highlights make the pill look like it catches light from above.
Pill Ghost Button
Secondary action, view-all links9999px border-radius. Transparent or #0d0c11 background with #eaecf0 border at low opacity. Text: Diatype 14-16px weight 400, #ababba or #ffffff. Padding: 8px 20px. Used for less prominent actions like 'View all'.
Carousel Arrow Button
Horizontal scroll navigationCircular button (9999px radius), ~40px diameter. #121212 background with #eaecf0 border. Contains a left/right chevron in #ababba. Shadow-less — sits flat on the surface.
Navigation Bar
Persistent site headerFull-width sticky bar at #12151d background. Left: Solana wordmark (DSemi 14px weight 700, #ffffff) with the triple-bar logo mark. Center: nav links (Diatype 14px weight 400, #ababba) with chevron dropdowns. Right: search input, language selector. Padding: 12px 24px. Height ~56px.
Search Input
Global search and AI promptRounded input with 12px radius. Background: #0d0c11. Border: 1px #eaecf0 at low opacity. Placeholder: 'Search or ask AI' in Diatype 14px #848895. Includes a keyboard shortcut badge ('⌘K') in the right corner. Padding: 8px 16px.
Event Card
Promotional content tile for conferences and hackathons12px border-radius. Full-bleed gradient or photographic background. Contains overlaid event branding text in large display type, date, and location. No visible border — the card edge is defined by the imagery. Dimensions vary; typically 1:1.2 aspect ratio in horizontal carousels.
Content Card
Article or feature card12px border-radius. Background: #0d0c11. Border: 1px #eaecf0 at very low opacity. Padding: 24px. Contains a small icon mark, headline (Diatype 24-28px weight 400, #ffffff), and optional body text in #ababba. No drop shadow — the border alone defines the edge.
Partner Logo Strip
Social proof and trust signalsHorizontal row of 6-8 partner logos (Western Union, Visa, Worldpay, Circle, PayPal, Fiserv). Logos rendered in their native brand colors or in #ababba monochrome. Centered, no dividers, generous spacing between logos.
Hero Section
Above-the-fold brand statementFull-width dark canvas with the aurora gradient (linear-gradient black to #14001d). Left-aligned headline at 64-88px Diatype weight 300, #ffffff. Sub-text at 18px Diatype weight 400, #ababba. Primary pill button below. Flowing wave SVG graphics occupy the right 60% of the viewport, extending beyond the fold.
Floating Chat Bubble
AI assistant entry pointFixed bottom-right element. Dark pill shape with #eaecf0 border. Solana logo mark + 'Ask AI' label in Diatype 14px #ffffff. Sits independently from the page flow — always visible regardless of scroll position.
Section Heading
Subsection title anchorDiatype 40-64px weight 300, #ffffff. Two-line structure common (e.g., 'Meet Solana IRL. / Build connections.'). Left-aligned. No accompanying decorative element — relies on size and weight contrast for hierarchy.
Surfaces & elevation
Level 1
Void
#000000Base page canvas — the absolute background
Level 2
Obsidian
#0d0c11Card surfaces, content containers
Level 3
Charcoal
#121212Elevated buttons, hover-state surfaces
Level 4
Onyx
#12151dSticky navigation, persistent UI chrome
Solana avoids traditional drop-shadow elevation. The signature button shadow stack pairs a soft external shadow with two inset white highlights — a 1px top highlight and a 12px diffused top glow — creating a pressed-glass effect that makes the chrome look molded from the surface rather than floating above it. This inverted-highlight approach is the opposite of Material Design's approach: instead of casting shadows downward, light appears to hit from above.
Pill Button
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 inset, rgba(255, 255, 255, 0.2) 0px -1px 0px 0px inset
Layout & imagery
Layout
Full-bleed dark canvas, no max-width constraint on background color — content containers are max-width 1280px centered. Hero is left-aligned text occupying the left 40% with aurora wave graphics filling the right 60% and bleeding off-screen. Sections stack vertically with 80px gaps, alternating between black canvas and slightly elevated obsidian surfaces. Content blocks are 2-column or 3-column grids: event cards in horizontal carousels (3 visible at once with edge bleed), content cards in 2-up splits, partner logos in single horizontal rows. Navigation is a single sticky top bar at 56px height. No sidebar, no footer columns visible above the fold — the page prioritizes generous vertical breathing room over information density.
Imagery
The signature visual element is the flowing aurora wave: smooth, ribbon-like 3D curves in violet, magenta, and electric green that sweep horizontally across the hero canvas. These are rendered as soft, semi-transparent gradient meshes — not sharp line art — giving them a nebulous, atmospheric quality. Event cards feature full-bleed photographic and graphic composites with heavy gradient overlays. Partner logos appear in their native brand colors but small and contained. Product and protocol imagery is absent from the homepage; the aurora and event photography carry all visual weight.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (headings), #ababba (body), #848895 (muted) - background: #000000 (canvas), #0d0c11 (cards), #121212 (buttons) - border: #eaecf0 (hairline, use at low opacity) - accent: no distinct UI accent color — brand presence comes from aurora graphics, not interface chrome - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. *Create a hero section.* Full-width #000000 canvas with the aurora gradient (linear-gradient(0deg, #000000, #14001d)). Headline left-aligned at 88px Diatype weight 300, #ffffff, letter-spacing -3.52px. Sub-text at 18px Diatype weight 400, #ababba. Below: pill button — 9999px radius, #121212 background, white text 'Get started' at 16px weight 500, with the signature embossed shadow stack and a leading arrow icon. Right side: flowing violet-magenta-green wave SVG graphics filling 60% width. 2. *Create a content card.* 12px border-radius, #0d0c11 background, 1px #eaecf0 border at 8% opacity, 24px padding. Small triple-bar icon at top-left in #ababba. Headline at 28px Diatype weight 400, #ffffff. No drop shadow — the border alone defines the edge. 3. *Create a search input.* 12px border-radius, #0d0c11 background, 1px #eaecf0 border at 12% opacity. Placeholder 'Search or ask AI' in Diatype 14px #848895. Right-side keyboard badge '⌘K' in a 4px-radius sub-pill with #3e3c41 background. Padding: 8px 16px. Width: 240px. 4. *Create a navigation bar.* Full-width sticky, #12151d background, 56px height, 24px horizontal padding. Left: Solana wordmark (DSemi 14px weight 700) with triple-bar logo. Center: 5 nav links (Learn, Developers, Products, Network, Community) in Diatype 14px weight 400, #ababba, with chevron icons. Right: search input + language selector. 5. *Create an event card for a carousel.* 12px border-radius, no visible border. Background: a gradient composite image (photo of a cityscape with a violet-to-green gradient overlay). Overlaid text: event name at 40px Diatype weight 700 in white, date and location at 16px Diatype weight 400 in #ffffff at 80% opacity. Card aspect ratio 1:1.2, displayed in a horizontal scrolling row with edge bleed.
Similar brands
Polygon Labs
Same dark-void canvas with flowing neon-purple wave graphics in the hero, and similarly compressed geometric sans-serif headlines at display sizes
Ethereum.org
Dark theme with minimal UI chrome, white-only typography hierarchy, and large display headlines that dominate the viewport
Vercel
Pure black canvas with high-contrast white type, ultra-thin hairline borders, and pill-shaped controls — same anti-decorative philosophy
Linear
Near-identical typographic restraint: custom geometric sans-serif, aggressively negative letter-spacing at display sizes, dark elevated surfaces defined by background shifts rather than shadows
Stripe
Similar gradient-based hero illustrations that create atmospheric depth without UI noise, and the same compressed weight-300 headline treatment at hero scale
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
