№ omsom-com

Omsom

Electric tangerine and burnt umber, bold sans-serifs dance across vibrant, layered depths.

Split Studioplayful maximalism food beverage ecommercelight

Proud + loud Asian flavors. Damn delicious Saucy Noodles + Cooking Sauces, crafted in partnership with iconic Asian American chefs. · playful, maximalism, creator, media, hero-fullbleed, feature-trio

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#d4a025
OKLCHoklch(73.6% 0.141 83)
RoleDominant
find sites →
Hex#ed9f74
OKLCHoklch(77.0% 0.110 49)
RoleSurface
find sites →
Hex#751d06
OKLCHoklch(37.4% 0.126 35)
RoleInk
find sites →
Hex#845444
OKLCHoklch(49.5% 0.069 39)
RoleAccent
find sites →
Hex#e4d6ce
OKLCHoklch(88.5% 0.019 52)
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	Times	10px	400	1.4	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d4a025;
  --color-surface: #ed9f74;
  --color-ink: #751d06;
  --color-accent: #845444;
  --color-detail: #e4d6ce;
}

/* CSS variables exposed by source */
:root {
  --fg0S1Q: #1962ff;
  --HfWZ1A: #3e2a14;
  --71VQUQ: #096d11;
  --4sJsqA: #394c6026;
  --LIE6Cw: #fff;
  --iBIYpw: #f0f1f5;
  --Mm01yw: #612dae;
  --IzK8tQ: #1c273080;
  --V0s6Og: #612dae;
  --eLjurg: #fff;
  --3R4u8w: rgba(57,76,96,.15);
  --3KQj6A: #3d8bff;
  --QVtuYg: #36a137;
  --CMMUiA: #501b21;
  --wlsoXA: 0px 0px 0px 1px rgba(64,87,109,.04),0px 6px 20px -4px rgba(64,87,109,.3);
  --3ifkTA: #fff;
  --OQ2gpA: #0d1216;
  --BZ60Jw: rgba(64,87,109,.07);
  --UzSy6g: rgba(57,76,96,.15);
  --J0YKvA: hsla(0,0%,100%,.7);
  --d1p99w: #fff;
  --xGXQgA: #394c6026;
  ---Xfh1Q: rgba(64,87,109,.07);
  --XxI4hg: #0d1216db;
  --gFgXSg: #40576d12;
  --QADODw: rgba(13,18,22,.7);
  --Zya5eQ: rgba(53,71,90,.2);
  --xAYPzA: #8b3dff;
  --cVPmKw: #ad5a00;
  --9luNoA: #fff;
  --QclmLg: #911826;
  --CAzrpw: 0.025;
  --jz0LSw: #008009;
  --620Maw: rgba(53,71,90,.2);
  --safe-area-inset-bottom: 0px;
  --KwfPsg: #0e131800;
  --4zRigw: #ffffffb2;
  --ys5XGg: rgba(240,241,245,0);
  --2-zmYA: rgba(165,112,255,.15);
  --6Hmmng: #11171d99;
  --galhog: 0px 0px 0px 0.5px #40576d12,0px 2px 4px 0px #182c5923,0px 6px 12px 0px #182c5912;
  --MghLXQ: rgba(64,87,109,.07);
  --xcCO9w: #1c273080;
  --87SmIg: rgba(36,49,61,.4);
  --1sn2Sg: #a370fc26;
  --Unijpw: rgba(36,49,61,.4);
  --jyDisg: #b61629;
  --ooFCBA: #c1c5cd;
  --nOtbOg: #db142c;
  --GXtk9g: #40576d12;
  --REcY5g: #0d1216;
  --W1_3nw: #40576d12;
  --JF44pw: 0px 0px 0px 0.5px #40576d12,0px 8px 16px 0px #182c5923,0px 24px 24px 0px #182c5912;
  --7mVY-Q: 0 0 0 1px rgba(64,87,109,.07),0 0 8px 0 rgba(57,76,96,.15);
  --xc412Q: #e7dbff;
  --O8dBuQ: #0e1318;
  --oAdupw: #0e1318;
  --kl47TA: #8b3dff;
  --4RaSjg: #fff;
  --4DkvNQ: #3d8bff;
}

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 Omsom.
Reference design system (extracted from the live site):
- Palette: #d4a025, #ed9f74, #751d06, #845444, #e4d6ce
- Typefaces: Times
- 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/omsom-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

Times

10px

400

1.4

Aa Bb Cc

:root { --color-dominant: #d4a025; --color-surface: #ed9f74; --color-ink: #751d06; --color-accent: #845444; --color-detail: #e4d6ce; } /* CSS variables exposed by source */ :root { --fg0S1Q: #1962ff; --HfWZ1A: #3e2a14; --71VQUQ: #096d11; --4sJsqA: #394c6026; --LIE6Cw: #fff; --iBIYpw: #f0f1f5; --Mm01yw: #612dae; --IzK8tQ: #1c273080; --V0s6Og: #612dae; --eLjurg: #fff; --3R4u8w: rgba(57,76,96,.15); --3KQj6A: #3d8bff; --QVtuYg: #36a137; --CMMUiA: #501b21; --wlsoXA: 0px 0px 0px 1px rgba(64,87,109,.04),0px 6px 20px -4px rgba(64,87,109,.3); --3ifkTA: #fff; --OQ2gpA: #0d1216; --BZ60Jw: rgba(64,87,109,.07); --UzSy6g: rgba(57,76,96,.15); --J0YKvA: hsla(0,0%,100%,.7); --d1p99w: #fff; --xGXQgA: #394c6026; ---Xfh1Q: rgba(64,87,109,.07); --XxI4hg: #0d1216db; --gFgXSg: #40576d12; --QADODw: rgba(13,18,22,.7); --Zya5eQ: rgba(53,71,90,.2); --xAYPzA: #8b3dff; --cVPmKw: #ad5a00; --9luNoA: #fff; --QclmLg: #911826; --CAzrpw: 0.025; --jz0LSw: #008009; --620Maw: rgba(53,71,90,.2); --safe-area-inset-bottom: 0px; --KwfPsg: #0e131800; --4zRigw: #ffffffb2; --ys5XGg: rgba(240,241,245,0); --2-zmYA: rgba(165,112,255,.15); --6Hmmng: #11171d99; --galhog: 0px 0px 0px 0.5px #40576d12,0px 2px 4px 0px #182c5923,0px 6px 12px 0px #182c5912; --MghLXQ: rgba(64,87,109,.07); --xcCO9w: #1c273080; --87SmIg: rgba(36,49,61,.4); --1sn2Sg: #a370fc26; --Unijpw: rgba(36,49,61,.4); --jyDisg: #b61629; --ooFCBA: #c1c5cd; --nOtbOg: #db142c; --GXtk9g: #40576d12; --REcY5g: #0d1216; --W1_3nw: #40576d12; --JF44pw: 0px 0px 0px 0.5px #40576d12,0px 8px 16px 0px #182c5923,0px 24px 24px 0px #182c5912; --7mVY-Q: 0 0 0 1px rgba(64,87,109,.07),0 0 8px 0 rgba(57,76,96,.15); --xc412Q: #e7dbff; --O8dBuQ: #0e1318; --oAdupw: #0e1318; --kl47TA: #8b3dff; --4RaSjg: #fff; --4DkvNQ: #3d8bff; }

Build a landing page in the visual style of Omsom. Reference design system (extracted from the live site): - Palette: #d4a025, #ed9f74, #751d06, #845444, #e4d6ce - Typefaces: Times - 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/omsom-com