№ oryzo-ai

ORYZO AI

Warm ochre tones, precise sans-serif clarity, open grid fosters focused, generous space.

Split Studiominimalism editorial swiss dark mode aidark

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.

SwatchHexOKLCHSuggested roleCopy

Hex#ca8752
OKLCHoklch(68.1% 0.107 58)
RoleDominant
find sites →
Hex#f0e0c8
OKLCHoklch(91.3% 0.036 78)
RoleSurface
find sites →
Hex#754312
OKLCHoklch(43.5% 0.092 60)
RoleInk
find sites →
Hex#a87f59
OKLCHoklch(62.7% 0.073 64)
RoleAccent
find sites →
Hex#b1ad95
OKLCHoklch(74.4% 0.034 99)
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	halyard-display-variable	123px	500	0.9	-2.214px	Aa Bb Cc
h2	halyard-display-variable	51px	500	1	0	Aa Bb Cc
h3	halyard-display-variable	34px	500	1	0	Aa Bb Cc
body	halyard-display-variable	14px	500	1.2	0	Aa Bb Cc
button	Arial	12px	500	1.1	0	Aa Bb Cc

Spacing scale

18px

24px

120px

Radius scale

0px

23px

36px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #ca8752;
  --color-surface: #f0e0c8;
  --color-ink: #754312;
  --color-accent: #a87f59;
  --color-detail: #b1ad95;
}

/* CSS variables exposed by source */
:root {
  --color-white: #ffedd7;
  --color-grey-brown: #6c5f51;
  --color-white-transparent: #ffedd700;
  --color-black: #100904;
  --color-green: #445231;
  --color-green-lightest: #f6e0c6;
  --color-black-transparent: #10090400;
  --color-pure-white: #fff;
  --color-pure-black: #000;
  --text-font: "halyard-text-variable";
  --color-green-light: #5d6c49;
  --color-brown: #382416;
  --color-orange: #dc5000;
  --vh: 9px;
  --body1: calc(38 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --grid-rows: 1;
  --h5: calc(20 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --body2: calc(24 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --quote: calc(30 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --inner-width: calc(100vw - 3.125vw * 2);
  --site-row-height: calc(3.125vw * 8 / 60);
  --sub1: calc(24 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --h4: calc(32 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --grid-columns: 16;
  --h2: calc(68 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --body3: calc(18 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --site-padding-y: calc(calc(3.125vw * 8 / 60) * 4);
  --grid-gap-width: calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1));
  --sub2: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --grid-gap-scale: calc(24 / 90);
  --grid-span-1: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90));
  --h1: calc(164 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --grid-span-width: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) + calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90)));
  --site-padding-x: 3.125vw;
  --link-header: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --grid-column-width: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90));
  --site-header: 21px;
  --default: calc(18 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --btn: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
  --display-font: "halyard-display-variable";
  --screen-unit: min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25);
  --h3: calc(45 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25));
}

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 ORYZO AI.
Reference design system (extracted from the live site):
- Palette: #ca8752, #f0e0c8, #754312, #a87f59, #b1ad95
- Typefaces: halyard-display-variable, Arial
- Macrostructure: Split Studio
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/oryzo-ai

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

halyard-display-variable

123px

500

0.9

-2.214px

Aa Bb Cc

halyard-display-variable

51px

500

Aa Bb Cc

halyard-display-variable

34px

500

Aa Bb Cc

body

halyard-display-variable

14px

500

1.2

Aa Bb Cc

button

Arial

12px

500

1.1

Aa Bb Cc

:root { --color-dominant: #ca8752; --color-surface: #f0e0c8; --color-ink: #754312; --color-accent: #a87f59; --color-detail: #b1ad95; } /* CSS variables exposed by source */ :root { --color-white: #ffedd7; --color-grey-brown: #6c5f51; --color-white-transparent: #ffedd700; --color-black: #100904; --color-green: #445231; --color-green-lightest: #f6e0c6; --color-black-transparent: #10090400; --color-pure-white: #fff; --color-pure-black: #000; --text-font: "halyard-text-variable"; --color-green-light: #5d6c49; --color-brown: #382416; --color-orange: #dc5000; --vh: 9px; --body1: calc(38 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --grid-rows: 1; --h5: calc(20 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --body2: calc(24 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --quote: calc(30 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --inner-width: calc(100vw - 3.125vw * 2); --site-row-height: calc(3.125vw * 8 / 60); --sub1: calc(24 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --h4: calc(32 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --grid-columns: 16; --h2: calc(68 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --body3: calc(18 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --site-padding-y: calc(calc(3.125vw * 8 / 60) * 4); --grid-gap-width: calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)); --sub2: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --grid-gap-scale: calc(24 / 90); --grid-span-1: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90)); --h1: calc(164 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --grid-span-width: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) + calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90))); --site-padding-x: 3.125vw; --link-header: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --grid-column-width: calc(calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1)) / calc(24 / 90)); --site-header: 21px; --default: calc(18 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --btn: calc(16 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); --display-font: "halyard-display-variable"; --screen-unit: min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25); --h3: calc(45 * min(calc(100vw - 3.125vw * 2) / (1920 - 60 * 2), calc(9px * 100) / 1024 * 1.25)); }

Build a landing page in the visual style of ORYZO AI. Reference design system (extracted from the live site): - Palette: #ca8752, #f0e0c8, #754312, #a87f59, #b1ad95 - Typefaces: halyard-display-variable, Arial - Macrostructure: Split Studio 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/oryzo-ai