Glacier Tint
#e2e7fcSoft accent wash, highlight background behind emphasis spans, subtle selected state
Glassnode
glassnode.comWebsite preview
The design language
Glassnode reads as a monochrome institutional research console — a Bloomberg terminal dressed for a product launch page. The canvas is cool light gray, type is set in Inter at restrained sizes, and the only chromatic hint is a whisper of pale lavender that appears as accent washes and soft borders. Pages alternate between light content bands and dark statement bands, creating a study/dashboard rhythm where data and editorial copy trade places. Components are near-rectangular: 2px radii, hairline 1px borders, almost no shadow, and buttons that are solid black or ghost outlines rather than colorful pills. The system communicates authority through typographic weight and information density, not through color.
Color palette
accent
neutral
Pure Black
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Obsidian
#1a1a1aDark section backgrounds, footer, dark band surfaces
Graphite
#333333Secondary headings, dark surface text, nav text on dark
Iron
#5a5a5aMuted body copy, descriptions, helper text
Slate
#666666Secondary body text, de-emphasized paragraphs
Steel
#808080Placeholder text, disabled states, input borders
Fog
#a0a0a0Light muted text, icon strokes, subtle borders
Ash
#bfbfbfLight dividers, icon strokes on light surfaces, nav borders
Mist
#dedfe1Hairline borders, card outlines, subtle dividers across all surfaces
Cloud
#edeff2Page canvas, default body background behind content bands
Paper
#f7f8faElevated card surface, subtle inset panels, light section background
White
#ffffffCard surfaces, input fields, highest elevation surface, text on dark
Badge Slate
#6f6f6fBadge text and small-tag foreground
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 700 · 1.2The quick brown fox jumps
heading
32px · 700 · 1.2The quick brown fox jumps
heading-sm
24px · 700 · 1.3The quick brown fox jumps
subheading
20px · 700 · 1.4The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 400 · 1.5The quick brown fox jumps
caption
12px · 700 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 700
- Sizes
- 12px, 14px, 16px, 20px, 24px, 32px
- Line height
- 1.0 (badges/icons) · 1.2 (tight headings) · 1.3 (buttons/nav) · 1.4 (subheadings) · 1.5 (body paragraphs)
- Letter spacing
- normal across all sizes; tracking is default Inter, not tightened for display
- Fallback
- Inter (Google Fonts) — direct substitute, already on the system
Entire interface — body copy, navigation, buttons, badges, cards, subheadings, UI labels
Additional typeface
Fraktion
- Weights
- 700
- Sizes
- 56px
- Line height
- 1.2
- Fallback
- Söhne Breit Halbfett or ABC Diatype Mono Bold for closest geometric-bold fallback
Hero display headline only — a single, custom, weight-700 face for the primary H1
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 16px
Border radius
nav
2pxtags
2pxcards
2pxinputs
2pxbuttons
2pxSpacing scale
2px4px6px8px10px12px14px16px24px26px29px32px37px40px48px49px56px72px80px212pxGuidelines
Do
- Use #000000 for primary button fills and #ffffff for text on dark — never introduce a chromatic CTA color
- Set all radii to 2px; the system's near-rectangular silhouette is signature, do not round beyond 2px
- Default to a 1px #dedfe1 border to separate surfaces; reach for shadow only on the hero chart widget and primary buttons
- Alternate light and dark bands at the section level to create the dashboard editorial rhythm
- Use Inter weight 500 for UI controls and weight 700 for headings; reserve the custom display face for the 56px hero H1
- Keep the canvas #edeff2 and elevated cards #ffffff — never invert the surface stack
- Treat #e2e7fc as the only accent — apply it as a soft wash behind a word in a headline or as a fill under a chart line
Don’t
- Do not introduce saturated brand colors, gradients, or colored icon fills — the system is monochrome by intent
- Do not use border-radius above 2px; pills, 8px cards, or 16px tiles break the institutional feel
- Do not stack colored shadows or glow effects; the only legitimate shadow is the 2-4px button drop and the layered hero widget drop
- Do not use Fraktion for anything below the hero H1 — the custom face is a single-impact choice, not a system font
- Do not place white cards on white backgrounds without the #dedfe1 border — surfaces must be defined by hairline, not by fill change
- Do not break the 8px spacing scale; avoid arbitrary values between the listed tokens (2/4/6/8/10/12/16/24/32)
- Do not use emoji, colored illustrations, or photography in product UI — the visual language is charts and type only
Components
Primary Filled Button
Highest-emphasis action — main conversion (Get in touch, Contact us, Send me free research)Background #000000 or #1a1a1a, text #ffffff, Inter 16px weight 500, padding 12px 24px, border-radius 2px, subtle box-shadow rgba(0,0,0,0.04) 0px 2px 4px. No border, no gradient. Tight, near-rectangular silhouette.
Ghost Outline Button
Secondary action paired with primary (Launch Studio, nav CTAs)Background transparent or #ffffff, text #000000, border 1px #000000 or #dedfe1, Inter 14-16px weight 500, padding 10px 20px, border-radius 2px. Inverts to white-on-dark on dark bands.
Dark Band CTA
Inline action on dark sections (Subscribe form submit)Background #ffffff, text #000000, Inter 16px weight 500, padding 12px 24px, border-radius 2px, no shadow. The inverse of the primary button — used on Obsidian sections.
Partner Report Card
Content card for research reports, case studies, featured publicationsBackground #ffffff, 1px border #dedfe1, border-radius 2px, no shadow. Cover image fills top, then 16px padding wrapping partner label (Inter 12px uppercase tracking), title (Inter 20px weight 700 #000000), and description (Inter 14px #5a5a5a, 3-line clamp).
Feature Block (Dark Band)
Two-column feature section on dark background with illustration and bullet listBackground #1a1a1a, two-column grid with text left, abstract chart illustration right. Heading Inter 24px weight 700 #ffffff, description Inter 16px #a0a0a0, bullet list with Iron-stroke icons in #ffffff.
Hero Chart Widget
Live data widget embedded in the hero — product credibility artifactBackground #ffffff, 1px border #dedfe1, border-radius 2px, subtle layered shadow rgba(0,0,0,0.04) 0px 2px 4px, rgba(0,0,0,0.08) 0px 8px 32px. Contains a tab header, line chart in #4a6cf7 over a pale #e2e7fc fill, and a search/select input at the base.
Top Navigation
Primary site nav with logo, menu, and dual CTABackground #ffffff, 1px bottom border #dedfe1, height ~64px. Logo left in Inter 20px weight 700 lowercase. Center/right nav links in Inter 14px weight 500 #333333 with 29px horizontal gap. Ends with a ghost outline (Launch Studio) and a filled dark button (Contact us).
Announcement Bar
Full-width dark band above nav for live news/launchesBackground #1a1a1a, centered Inter 14px weight 500 #ffffff text, single line, with an inline link in white. Padding 8-10px vertical.
Subscribe Form
Email capture on dark closing bandDark band #1a1a1a, single-line input: background #ffffff, border 1px #dedfe1, radius 2px, placeholder #808080, paired flush-right with white-filled submit button. No floating labels, no decorative icons.
Logo Strip
Trust-by-association row of partner/brand logosSits on #edeff2 canvas, single horizontal row, 5 logos evenly distributed. Logos rendered in #000000 monochrome at uniform height (~24px), no color variants.
Footer
Site footer with link columns and legalBackground #1a1a1a, text in Inter 14px weight 400 #a0a0a0 and #ffffff for headings, 1px top border not used — sits directly on dark surface. Multi-column link grid, compact spacing.
Badge / Tag
Small uppercase label (Partner Reports, category tags)Inter 12px weight 500 #6f6f6f, uppercase, no background, no border, no radius. Functions as a typographic marker, not a chip.
Input Field
Text input — search, email, ticker selectorBackground #ffffff, border 1px #dedfe1, border-radius 2px, padding 10px 12px, Inter 14px #000000, placeholder #808080. Focus state tightens border to #000000 with no glow ring.
Surfaces & elevation
Level 0
Canvas
#edeff2Page background between content bands
Level 1
Surface
#f7f8faLight section background, subtle inset panels
Level 2
Card
#ffffffWhite card surface, input fields, top of light stack
Level 3
Dark Band
#1a1a1aDark statement sections, footer, announcement bar
Level 4
Accent Wash
#e2e7fcPale lavender highlight behind emphasis and chart fills
Elevation is a whisper, not a declaration. Most components sit flat on the canvas with a 1px hairline border; the only meaningful shadows are a 2-4px tight drop on primary buttons and a layered 8-32px drop on the hero chart widget to lift it above the hero composition. No cards, modals, or popovers gain shadow — the system uses borders, not depth.
Primary Filled Button
rgba(0, 0, 0, 0.04) 0px 2px 4px 0px
Hero Chart Widget
rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px
Layout & imagery
Layout
Max-width 1200px centered container with full-bleed light and dark bands. The page opens with a hero band (light gray canvas, 2-column split: left headline + description + CTA, right floating chart widget) followed by a dark band (near-black, 2-column alternating feature blocks with chart illustrations). A partner report grid sits on a light band (4-column card row). The page closes with a centered dark subscribe band. Vertical rhythm: ~80px section gaps, alternating light/dark/light/dark bands create a dashboard-meets-editorial cadence. Navigation is a top bar with logo left, menu center-right, and dual CTA (ghost + filled) at the far right.
Imagery
Imagery is dominated by data visualizations rather than photography: line charts with blue strokes over pale lavender fills, abstract line illustrations on dark bands suggesting market trajectories, and rectangular report covers with deep navy gradients. The hero product widget is the visual hero — a real chart UI lifted directly from the product. Partner logos are monochrome black on light gray. Photography, illustration, and decorative graphics are absent; the visual language is dashboard-native.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (on light) / #ffffff (on dark) - background: #edeff2 (canvas) / #ffffff (cards) - border: #dedfe1 (hairline) / #000000 (emphasis) - accent: #e2e7fc (soft wash only) - primary action: no distinct CTA color **3 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Build a 4-column partner report card grid on a #edeff2 canvas: each card is #ffffff with 1px #dedfe1 border, 2px radius, 16px padding. Cover image fills the top, followed by a 12px uppercase #6f6f6f Inter label, a 20px Inter weight 700 #000000 title, and a 14px Inter #5a5a5a description clipped to 3 lines. 3. Build a dark subscribe band: #1a1a1a background, full-width, centered. 32px Inter weight 700 #ffffff headline with one word wrapped in a #e2e7fc background highlight. 16px Inter #a0a0a0 subtext. Single inline form: white #ffffff input with 1px #dedfe1 border, 2px radius, #808080 placeholder, paired flush with a white-filled submit button (background #ffffff, text #000000, 2px radius).
Similar brands
Chainalysis
Same institutional crypto-analytics posture — near-monochrome palette, hairline borders, dark-band editorial sections, Inter-family type
Messari
Shared research-console feel: light canvas, dark statement bands, chart-as-hero imagery, restrained single-accent approach
The Block
Identical dashboard-editorial hybrid: black/white/gray palette, 2-column feature blocks, data visualizations as primary imagery
Bloomberg Terminal
Same data-density ethos expressed as a marketing site — achromatic surfaces, weight-700 display type, near-zero radius, border-defined cards
Koyfin
Comparable financial-data brand language: muted grays, single blue accent, flat components, information density over decoration
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
