Webdesigner aus Köln | Design | Webflow | Animationen | Barrierefreiheit
Bento Grid
Swiss precision, soft grey voids, bold sans-serifs floating on matte paper




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h3 | Open Runde | 19px | 600 | 1.5 | -0.385px | Aa Bb Cc |
| body | Open Runde | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Open Runde | 12px | 400 | 1 | 0 | Aa Bb Cc |
| button | Open Runde | 12px | 400 | 1 | 0 | Aa Bb Cc |
:root {
--color-dominant: #cd5644;
--color-surface: #f1c19b;
--color-ink: #1c743c;
--color-accent: #4ea4a4;
--color-detail: #9fd5bc;
}
/* CSS variables exposed by source */
:root {
--color-indigo-300: oklch(78.5% .115 274.713);
--text-2xl: 1.5rem;
--color-neutral-100: oklch(97% 0 none);
--color-purple-500: oklch(62.7% .265 303.9);
--color-gray-800: oklch(27.8% .033 256.848);
--color-pink-300: oklch(82.3% .12 346.018);
--text-lg: 1.125rem;
--color-neutral-600: oklch(43.9% 0 none);
--color-neutral-500: oklch(55.6% 0 none);
--color-indigo-950: oklch(25.7% .09 281.288);
--color-neutral-300: oklch(87% 0 none);
--text-5xl--line-height: 1;
--text-2xl--line-height: calc(2 / 1.5);
--text-base--line-height: calc(1.5 / 1);
--spacing: .25rem;
--color-neutral-200: oklch(92.2% 0 none);
--color-gray-300: oklch(87.2% .01 258.338);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-blue-500: oklch(62.3% .214 259.815);
--color-green-500: oklch(72.3% .219 149.579);
--color-pink-900: oklch(40.8% .153 2.432);
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--color-gray-700: oklch(37.3% .034 259.733);
--color-gray-600: oklch(44.6% .03 256.802);
--radius-sm: .25rem;
--color-blue-600: oklch(54.6% .245 262.881);
--font-weight-bold: 700;
--color-red-500: oklch(63.7% .237 25.331);
--text-sm--line-height: calc(1.25 / .875);
--color-purple-950: oklch(29.1% .149 302.717);
--color-gray-200: oklch(92.8% .006 264.531);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--text-xs: .75rem;
--text-xs--line-height: calc(1 / .75);
--color-black: #000;
--color-neutral-700: oklch(37.1% 0 none);
--font-weight-normal: 400;
--font-weight-medium: 500;
--color-neutral-400: oklch(70.8% 0 none);
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--color-neutral-800: oklch(26.9% 0 none);
--radius-2xl: 1rem;
--text-xl: 1.25rem;
--radius-lg: .5rem;
--text-base: 1rem;
--tw-ring-offset-shadow: 0 0 #0000;
--fa-style-family-classic: "Font Awesome 6 Free";
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--aspect-video: 16 / 9;
--leading-relaxed: 1.625;
--leading-snug: 1.375;
--tw-drop-shadow-alpha: 100%;
--glass-angle-2: -45deg;
}Drop-in prompt
Build a landing page in the visual style of Dousan Miao.
Reference design system (extracted from the live site):
- Palette: #cd5644, #f1c19b, #1c743c, #4ea4a4, #9fd5bc
- Typefaces: Open Runde
- 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/dousanmiao-com