№ useorigin-com--products-spending

Origin · Features

Deep cerulean luxury, crisp white serif elegance floating in an airy sky

Marquee Herominimalism dark mode fintech aidark

A high-end aesthetic featuring a full-bleed abstract organic background with a centered typographic hierarchy. The use of a refined serif for the headline contrasts with a clean sans-serif for the UI elements. · fintech hero, ai search bar, luxury serif typography, minimalist landing page, warm abstract background

Origin · 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: warm · muted · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#3c94b4
OKLCHoklch(62.7% 0.096 226)
RoleDominant
find sites →
Hex#d4ac84
OKLCHoklch(77.1% 0.071 66)
RoleSurface
find sites →
Hex#215163
OKLCHoklch(41.0% 0.060 226)
RoleInk
find sites →
Hex#a48261
OKLCHoklch(63.1% 0.063 65)
RoleAccent
find sites →
Hex#cec4b3
OKLCHoklch(82.4% 0.026 81)
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	Lyondisplay App	96px	300	0.9	0	Aa Bb Cc
h2	Lyondisplay App	80px	300	1	-0.8px	Aa Bb Cc
h3	Lyondisplay App	38px	300	0.9	0	Aa Bb Cc
body	Suisseintltrial	16px	400	1.5	0	Aa Bb Cc
button	Roboto Mono	12px	500	2	0	Aa Bb Cc

Spacing scale

8px

32px

90px

100px

Radius scale

0px

8px

16px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #3c94b4;
  --color-surface: #d4ac84;
  --color-ink: #215163;
  --color-accent: #a48261;
  --color-detail: #cec4b3;
}

/* CSS variables exposed by source */
:root {
  --size: 450px;
  --radius: 230px;
  --icon-size: 170px;
  --fs-list-renderindex: 0;
}

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 Origin · Features.
Reference design system (extracted from the live site):
- Palette: #3c94b4, #d4ac84, #215163, #a48261, #cec4b3
- Typefaces: Lyondisplay App, Suisseintltrial
- 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/useorigin-com--products-spending

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Lyondisplay App

96px

300

0.9

Aa Bb Cc

Lyondisplay App

80px

300

-0.8px

Aa Bb Cc

Lyondisplay App

38px

300

0.9

Aa Bb Cc

body

Suisseintltrial

16px

400

1.5

Aa Bb Cc

button

Roboto Mono

12px

500

Aa Bb Cc

:root { --color-dominant: #3c94b4; --color-surface: #d4ac84; --color-ink: #215163; --color-accent: #a48261; --color-detail: #cec4b3; } /* CSS variables exposed by source */ :root { --size: 450px; --radius: 230px; --icon-size: 170px; --fs-list-renderindex: 0; }

Build a landing page in the visual style of Origin · Features. Reference design system (extracted from the live site): - Palette: #3c94b4, #d4ac84, #215163, #a48261, #cec4b3 - Typefaces: Lyondisplay App, Suisseintltrial - 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/useorigin-com--products-spending