№ madeinuxstudio-com

Home | MIUX

Warm, muted earth tones; clean, spacious layout; humanist sans-serif breathing quiet confidence.

Bento Gridminimalism editorial swiss agencylight

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#bac125
OKLCHoklch(78.0% 0.164 112)
RoleDominant
find sites →
Hex#d1bc9c
OKLCHoklch(80.5% 0.049 78)
RoleSurface
find sites →
Hex#647408
OKLCHoklch(52.7% 0.121 119)
RoleInk
find sites →
Hex#95836a
OKLCHoklch(62.0% 0.042 76)
RoleAccent
find sites →
Hex#d4ccb4
OKLCHoklch(84.5% 0.034 92)
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	__SSS_7de170	111px	400	1	-1.11px	Aa Bb Cc

Spacing scale

33px

93px

180px

Radius scale

0px

8px

12px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #bac125;
  --color-surface: #d1bc9c;
  --color-ink: #647408;
  --color-accent: #95836a;
  --color-detail: #d4ccb4;
}

/* CSS variables exposed by source */
:root {
  --brand-ac-2: #9e8f7b;
  --primary-ease: cubic-bezier(0.215,0.61,0.355,1);
  --brand-ac-4: #986c32;
  --brand-ac-1: #b9bdab;
  --brand-ac-3: #d5c8b0;
  --font-SSS: "__SSS_7de170","__SSS_Fallback_7de170";
  --brand-dark: #333335;
  --brand-light: #f7f3ed;
  --light-50: hsla(0,0%,100%,.5);
  --layout-margin: 2.0833333333vw;
  --dark-7: rgba(0,0,0,.07);
  --vh: 9px;
  --layout-width: calc(100vw - (2 * 2.0833333333vw));
  --headerHeight: 9rem;
  --transparent: transparent;
  --dark-70: rgba(0,0,0,.7);
  --dark-10: rgba(0,0,0,.1);
  --dark-40: rgba(0,0,0,.4);
  --layout-columns-gap: 1.0416666667vw;
  --dark-50: rgba(0,0,0,.5);
  --layout-columns-count: 12;
  --light-15: hsla(0,0%,100%,.15);
  --dark-15: rgba(0,0,0,.15);
  --dark-20: rgba(0,0,0,.2);
  --dark-30: rgba(0,0,0,.3);
  --layout-column-width: calc((calc(100vw - (2 * 2.0833333333vw)) - ((12 - 1) * 1.0416666667vw)) / 12);
  --light-30: hsla(0,0%,100%,.3);
  --light-20: hsla(0,0%,100%,.2);
}

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 Home | MIUX.
Reference design system (extracted from the live site):
- Palette: #bac125, #d1bc9c, #647408, #95836a, #d4ccb4
- Typefaces: __SSS_7de170
- Macrostructure: Bento Grid
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/madeinuxstudio-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

__SSS_7de170

111px

400

-1.11px

Aa Bb Cc

:root { --color-dominant: #bac125; --color-surface: #d1bc9c; --color-ink: #647408; --color-accent: #95836a; --color-detail: #d4ccb4; } /* CSS variables exposed by source */ :root { --brand-ac-2: #9e8f7b; --primary-ease: cubic-bezier(0.215,0.61,0.355,1); --brand-ac-4: #986c32; --brand-ac-1: #b9bdab; --brand-ac-3: #d5c8b0; --font-SSS: "__SSS_7de170","__SSS_Fallback_7de170"; --brand-dark: #333335; --brand-light: #f7f3ed; --light-50: hsla(0,0%,100%,.5); --layout-margin: 2.0833333333vw; --dark-7: rgba(0,0,0,.07); --vh: 9px; --layout-width: calc(100vw - (2 * 2.0833333333vw)); --headerHeight: 9rem; --transparent: transparent; --dark-70: rgba(0,0,0,.7); --dark-10: rgba(0,0,0,.1); --dark-40: rgba(0,0,0,.4); --layout-columns-gap: 1.0416666667vw; --dark-50: rgba(0,0,0,.5); --layout-columns-count: 12; --light-15: hsla(0,0%,100%,.15); --dark-15: rgba(0,0,0,.15); --dark-20: rgba(0,0,0,.2); --dark-30: rgba(0,0,0,.3); --layout-column-width: calc((calc(100vw - (2 * 2.0833333333vw)) - ((12 - 1) * 1.0416666667vw)) / 12); --light-30: hsla(0,0%,100%,.3); --light-20: hsla(0,0%,100%,.2); }

Build a landing page in the visual style of Home | MIUX. Reference design system (extracted from the live site): - Palette: #bac125, #d1bc9c, #647408, #95836a, #d4ccb4 - Typefaces: __SSS_7de170 - Macrostructure: Bento Grid 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/madeinuxstudio-com