№ blockstream-com--lightning

Part of Blockstream - 7 pages captured →

Blockstream

Electric teal shadows pulse across stark, geometric forms, punctuated by crisp, assertive sans-serifs.

Feature Stackdark mode minimalism brutalism crypto fintechdark

The design prioritizes a clean, dark aesthetic with a focus on showcasing the product's interface. Bold typography and contrasting elements create a sense of technical precision and modern functionality. · dark fintech, blockchain app, crypto wallet, technical website, minimal dark, saas product, cryptocurrency design, blockstream ui, mobile app showcase, modern fintech

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: neon · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#04c3fb
OKLCHoklch(76.3% 0.148 228)
RoleDominant
find sites →
Hex#0a5973
OKLCHoklch(43.4% 0.080 227)
RoleSurface
find sites →
Hex#fcc076
OKLCHoklch(84.7% 0.114 71)
RoleInk
find sites →
Hex#77acbc
OKLCHoklch(71.3% 0.060 219)
RoleAccent
find sites →
Hex#bcd0dc
OKLCHoklch(84.6% 0.027 234)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	rigid-square	54px	800	1.11	Aa Bb Cc
h2	rigid-square	20px	700	1.4	Aa Bb Cc
h3	rigid-square	28px	700	1.4	Aa Bb Cc
body	Inter	10px	300	1.4	Aa Bb Cc
button	Arial	13px	400	1.4	Aa Bb Cc

Spacing scale

10px

15px

20px

30px

60px

90px

100px

150px

Radius scale

0px

2px

8px

27px

Container

Max content width 473px

Export

:root {
  --color-dominant: #04c3fb;
  --color-surface: #0a5973;
  --color-ink: #fcc076;
  --color-accent: #77acbc;
  --color-detail: #bcd0dc;
}

/* CSS variables exposed by source */
:root {
  --accent-muted: rgba(0, 176, 147, 0.1);
  --bg-primary: #111316;
  --text-secondary: rgba(165, 166, 167);
  --accent-hover: #FFFFFF;
  --radius-sm: 2px;
  --accent: #00B093;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --radius-md: 8px;
  --bg-secondary: #1E2024;
  --text-primary: #FFFFFF;
  --border-hover: rgba(0, 176, 147, 0.3);
  --radius-lg: 12px;
  --text-muted: #A5A6A7;
  --bg-card: #1E2024;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --green: #00D395;
  --transition-base: 0.3s ease;
  --blinking-width: 4px;
  --danger: #EF4444;
  --warning: #F59E0B;
  --container-width: 1090px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Blockstream.
Reference design system (extracted from the live site):
- Palette: #04c3fb, #0a5973, #fcc076, #77acbc, #bcd0dc
- Typefaces: rigid-square, Inter, Arial
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/blockstream-com--lightning

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

rigid-square

54px

800

1.11

Aa Bb Cc

rigid-square

20px

700

1.4

Aa Bb Cc

rigid-square

28px

700

1.4

Aa Bb Cc

body

Inter

10px

300

1.4

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #04c3fb; --color-surface: #0a5973; --color-ink: #fcc076; --color-accent: #77acbc; --color-detail: #bcd0dc; } /* CSS variables exposed by source */ :root { --accent-muted: rgba(0, 176, 147, 0.1); --bg-primary: #111316; --text-secondary: rgba(165, 166, 167); --accent-hover: #FFFFFF; --radius-sm: 2px; --accent: #00B093; --border-color: rgba(255, 255, 255, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --radius-md: 8px; --bg-secondary: #1E2024; --text-primary: #FFFFFF; --border-hover: rgba(0, 176, 147, 0.3); --radius-lg: 12px; --text-muted: #A5A6A7; --bg-card: #1E2024; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --green: #00D395; --transition-base: 0.3s ease; --blinking-width: 4px; --danger: #EF4444; --warning: #F59E0B; --container-width: 1090px; }

Build a landing page in the visual style of Blockstream. Reference design system (extracted from the live site): - Palette: #04c3fb, #0a5973, #fcc076, #77acbc, #bcd0dc - Typefaces: rigid-square, Inter, Arial - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/blockstream-com--lightning