№ wagmi-com

Wagmi

Icy, deep-sea blue depths—clean, geometric sans-serifs on expansive, subtly textured space.

Marquee Heroeditorial dark mode minimalism crypto fintechdark

The hero image establishes a strong mood with its dramatic, painterly style. The typography is clean and modern, contrasting with the fantastical imagery. The overall density is low, allowing the visual to dominate. · dark hero, fantasy saas, minimalist landing, technical hero, ai website, editorial design, longship hero, dark website, wagmi design

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: muted · monochrome · cool

SwatchHexOKLCHSuggested roleCopy

Hex#1fafdf
OKLCHoklch(70.5% 0.131 227)
RoleDominant
find sites →
Hex#04161c
OKLCHoklch(18.8% 0.028 221)
RoleSurface
find sites →
Hex#ecdbc2
OKLCHoklch(89.9% 0.038 78)
RoleInk
find sites →
Hex#ac7c64
OKLCHoklch(62.8% 0.070 48)
RoleAccent
find sites →
Hex#beb4a5
OKLCHoklch(77.4% 0.024 78)
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	Tracking	Sample
body	Lexend Deca	16px	400	1.5	0	Aa Bb Cc
button	Lexend Deca	16px	400	1.4	0	Aa Bb Cc

Radius scale

16px

Container

Max content width 610px

Export

:root {
  --color-dominant: #1fafdf;
  --color-surface: #04161c;
  --color-ink: #ecdbc2;
  --color-accent: #ac7c64;
  --color-detail: #beb4a5;
}

/* CSS variables exposed by source */
:root {
  --swiper-theme-color: #007aff;
}

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 Wagmi.
Reference design system (extracted from the live site):
- Palette: #1fafdf, #04161c, #ecdbc2, #ac7c64, #beb4a5
- Typefaces: Lexend Deca
- Macrostructure: Marquee Hero
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/wagmi-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

Lexend Deca

16px

400

1.5

Aa Bb Cc

button

Lexend Deca

16px

400

1.4

Aa Bb Cc

:root { --color-dominant: #1fafdf; --color-surface: #04161c; --color-ink: #ecdbc2; --color-accent: #ac7c64; --color-detail: #beb4a5; } /* CSS variables exposed by source */ :root { --swiper-theme-color: #007aff; }

Build a landing page in the visual style of Wagmi. Reference design system (extracted from the live site): - Palette: #1fafdf, #04161c, #ecdbc2, #ac7c64, #beb4a5 - Typefaces: Lexend Deca - Macrostructure: Marquee Hero 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/wagmi-com