Oatly | the Original Oat Drink Company | Oatly
Bento Grid
Loading
Mooala | Organic Plant Based Milk for the Whole Family - Mooala Brands
Warm, softly textured ochre - clean, friendly sans serif - expansive, gentle negative space.
Click any value to copy. Roles are suggestions, not gospel.
- #a46a21oklch(57.4% 0.112 67)Dominant
- #e8c190oklch(83.3% 0.078 73)Surface
- #64380foklch(38.8% 0.082 59)Ink
- #ac8464oklch(64.4% 0.067 60)Accent
- #ccb9aboklch(79.8% 0.029 59)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Libre Baskerville | 24px | 400 | 1.2 | 0 | Aa Bb Cc |
| h2 | Libre Baskerville | 54px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | DM Sans | 14px | 400 | 1.5 | 0.35px | Aa Bb Cc |
| caption | DM Sans | 12px | 400 | 1.5 | 0.35px | Aa Bb Cc |
| button | DM Sans | 18px | 400 | 1.5 | 0.45px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a46a21;
--color-surface: #e8c190;
--color-ink: #64380f;
--color-accent: #ac8464;
--color-detail: #ccb9ab;
}
/* CSS variables exposed by source */
:root {
--typeBaseWeight: 400;
--colorSmallImageBgDark: #f7f7f7;
--colorSaleTagText: #ffffff;
--colorBodyAlpha05: rgba(255, 255, 255, .05);
--colorTextBody: #42434d;
--colorTextBodyAlpha005: rgba(66, 67, 77, .05);
--sizeChartMargin: 30px 0;
--color-bg: #ffffff;
--colorToolbarText: #ffffff;
--typeBasePrimary: "DM Sans";
--colorBtnPrimaryLight: #444b72;
--colorNav: #ffffff;
--colorNavSearch: #4b4d5e;
--typeBaseSpacing: 0.025em;
--typeBaseFallback: sans-serif;
--colorLargeImageBg: #e7e7e7;
--colorScheme1Text: #272831;
--typeHeaderSpacing: 0.0em;
--colorScheme2Text: #ffffff;
--colorPrice: #272831;
--colorToolbar: #272831;
--colorBody: #ffffff;
--colorBorder: #efebeb;
--color-body: #ffffff;
--colorCartDot: #ffffff;
--colorFooterText: #272831;
--colorScheme2Bg: #343643;
--colorBodyDim: #f2f2f2;
--typeBaseLineHeight: 1.5;
--typeBaseSize: 14px;
--sizeChartIconMargin: 5px;
--colorScheme3Bg: #efebeb;
--colorBtnPrimaryDim: #272b42;
--colorLink: #42434d;
--colorFooter: #f9f9fb;
--colorTextSavings: #ba4444;
--colorBtnPrimaryText: #ffffff;
--typeHeaderPrimary: "Libre Baskerville";
--textFrameMargin: 10px;
--typeHeaderSize: 42px;
--typeHeaderWeight: 400;
--colorCartDotText: #42434d;
--colorSaleTag: #ba4444;
--colorScheme1Bg: #d3dac9;
--colorSmallImageBg: #ffffff;
--colorLargeImageBgLight: #ffffff;
--colorTextBodyAlpha008: rgba(66, 67, 77, .08);
--colorModalBg: rgba(231, 231, 231, .6);
--typeHeaderFallback: serif;
--colorFooterBorder: #e8e8e1;
--typeHeaderLineHeight: 1.2;
--colorScheme3Text: #272831;
--color-body-text: #42434d;
--colorBtnPrimary: #313652;
--colorNavText: #42434d;
--urlSwirlSvg: url(//mooala.com/cdn/shop/t/21/assets/swirl.svg);
--iconWeight: 3px;
--collectionTileMargin: 10%;
--header-padding-bottom: 0;
--pageWidthPadding: 40px;
}Drop-in prompt
Build a landing page in the visual style of Mooala | Organic Plant Based Milk for the Whole Family - Mooala Brands.
Reference design system (extracted from the live site):
- Palette: #a46a21, #e8c190, #64380f, #ac8464, #ccb9ab
- Typefaces: Libre Baskerville, DM Sans
- 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/mooala-com
