OWO - Send money on WhatsApp
Bento Grid
Loading
Middle | Helping you home
Soft, warm apricot hues and playful rounded forms float on a spacious, airy canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #fbc71foklch(85.2% 0.169 89)Dominant
- #b06cf5oklch(66.5% 0.201 304)Surface
- #503784oklch(40.6% 0.124 295)Ink
- #804db0oklch(52.4% 0.155 305)Accent
- #a4b4ccoklch(76.5% 0.039 258)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | MiddlePrimary | 64px | 700 | 1.1 | 0 | Aa Bb Cc |
| h2 | MiddlePrimary | 48px | 700 | 1.1 | 0 | Aa Bb Cc |
| h3 | MiddlePrimary | 28px | 700 | 1.11 | 0 | Aa Bb Cc |
| body | MiddlePrimary | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | MiddlePrimary | 14px | 500 | 1.38 | 0 | Aa Bb Cc |
| button | MiddlePrimary | 16px | 400 | 1 | 0 | Aa Bb Cc |
:root {
--color-dominant: #fbc71f;
--color-surface: #b06cf5;
--color-ink: #503784;
--color-accent: #804db0;
--color-detail: #a4b4cc;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--header-height: 5rem;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--form-el-border-radius: 0.25rem;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(123 93 214/1);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Middle | Helping you home.
Reference design system (extracted from the live site):
- Palette: #fbc71f, #b06cf5, #503784, #804db0, #a4b4cc
- Typefaces: MiddlePrimary
- 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/middle-finance
