№ useorigin-com

Origin

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

Marquee Heroeditorial fintech ailight

High-contrast composition featuring a deep blue sky background and elegant serif typography. The layout uses a centered, airy hierarchy with a floating promotional pill and a partial mobile device mockup for visual proof. · fintech hero, serif typography, blue gradient background, luxury ai landing page, editorial fintech 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: cool · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#0c649c
OKLCHoklch(48.6% 0.117 245)
RoleDominant
find sites →
Hex#84b4cc
OKLCHoklch(74.4% 0.062 230)
RoleSurface
find sites →
Hex#045991
OKLCHoklch(45.0% 0.115 247)
RoleInk
find sites →
Hex#658ba5
OKLCHoklch(61.8% 0.058 239)
RoleAccent
find sites →
Hex#bcd1de
OKLCHoklch(84.9% 0.029 235)
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	Lyondisplay App	96px	300	1.15	Aa Bb Cc
h2	Lyondisplay App	48px	300	1.15	Aa Bb Cc
h3	Lyondisplay App	36px	300	1.15	Aa Bb Cc
body	Suisseintltrial	16px	400	1.5	Aa Bb Cc
button	Roboto Mono	12px	500	2	Aa Bb Cc

Spacing scale

8px

16px

32px

45px

48px

60px

96px

100px

Radius scale

0px

8px

24px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #0c649c;
  --color-surface: #84b4cc;
  --color-ink: #045991;
  --color-accent: #658ba5;
  --color-detail: #bcd1de;
}

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

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.
Reference design system (extracted from the live site):
- Palette: #0c649c, #84b4cc, #045991, #658ba5, #bcd1de
- 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

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Lyondisplay App

96px

300

1.15

Aa Bb Cc

Lyondisplay App

48px

300

1.15

Aa Bb Cc

Lyondisplay App

36px

300

1.15

Aa Bb Cc

body

Suisseintltrial

16px

400

1.5

Aa Bb Cc

button

Roboto Mono

12px

500

Aa Bb Cc

:root { --color-dominant: #0c649c; --color-surface: #84b4cc; --color-ink: #045991; --color-accent: #658ba5; --color-detail: #bcd1de; } /* CSS variables exposed by source */ :root { --radius: 230px; --size: 450px; --fs-list-renderindex: 0; --icon-size: 170px; }

Build a landing page in the visual style of Origin. Reference design system (extracted from the live site): - Palette: #0c649c, #84b4cc, #045991, #658ba5, #bcd1de - 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