№ nopan-com--payment-methods

Nopan · Features

Deep obsidian void, glowing cobalt neon, sharp sans-serifs in clinical space

Catalogueminimalism fintechlight

High-contrast layout featuring a deep charcoal hero section with subtle geometric line art, transitioning into a clean white grid of payment method cards. · fintech catalogue, dark mode hero, payment method grid, corporate minimalism, high contrast saas

Nopan · Features - mobile — Mobile · 375

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: high-contrast · cool

SwatchHexOKLCHSuggested roleCopy

Hex#f94613
OKLCHoklch(65.1% 0.222 35)
RoleDominant
find sites →
Hex#f7e58e
OKLCHoklch(91.8% 0.109 98)
RoleSurface
find sites →
Hex#148c50
OKLCHoklch(56.4% 0.135 154)
RoleInk
find sites →
Hex#6d9192
OKLCHoklch(63.0% 0.040 198)
RoleAccent
find sites →
Hex#9696c4
OKLCHoklch(69.0% 0.067 285)
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
h1	Manrope	60px	600	1.2	-2.4px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Export

:root {
  --color-dominant: #f94613;
  --color-surface: #f7e58e;
  --color-ink: #148c50;
  --color-accent: #6d9192;
  --color-detail: #9696c4;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

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 Nopan · Features.
Reference design system (extracted from the live site):
- Palette: #f94613, #f7e58e, #148c50, #6d9192, #9696c4
- Typefaces: Manrope, sans-serif
- Macrostructure: Catalogue
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/nopan-com--payment-methods

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Manrope

60px

600

1.2

-2.4px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #f94613; --color-surface: #f7e58e; --color-ink: #148c50; --color-accent: #6d9192; --color-detail: #9696c4; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Nopan · Features. Reference design system (extracted from the live site): - Palette: #f94613, #f7e58e, #148c50, #6d9192, #9696c4 - Typefaces: Manrope, sans-serif - Macrostructure: Catalogue 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/nopan-com--payment-methods