Audius
Marquee Hero
Loading
Doodles: Be Beautiful. Be Everywhere.
Dreamy pastel clouds drift over a boundless, whimsical landscape of rounded forms.
Click any value to copy. Roles are suggestions, not gospel.
- #249dc3oklch(65.0% 0.114 225)Dominant
- #eea6c7oklch(80.4% 0.094 350)Surface
- #25618coklch(47.4% 0.093 243)Ink
- #9d5d93oklch(56.9% 0.110 333)Accent
- #d6bcadoklch(81.3% 0.036 52)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Funnel Sans | 48px | 700 | 1 | -2.4px | Aa Bb Cc |
| h2 | Funnel Sans | 96px | 700 | 0.9 | 0 | Aa Bb Cc |
| h3 | Funnel Sans | 24px | 600 | 1 | -1.6px | Aa Bb Cc |
| body | Funnel Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | __Inter_472ac2 | 18px | 800 | 1.14 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #249dc3;
--color-surface: #eea6c7;
--color-ink: #25618c;
--color-accent: #9d5d93;
--color-detail: #d6bcad;
}
/* CSS variables exposed by source */
:root {
--header-border-mobile: 3px;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--header-height-mobile-open: calc(82px + 3px);
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--header-height-mobile: 82px;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Doodles: Be Beautiful. Be Everywhere..
Reference design system (extracted from the live site):
- Palette: #249dc3, #eea6c7, #25618c, #9d5d93, #d6bcad
- Typefaces: Funnel Sans, __Inter_472ac2
- Macrostructure: Marquee Hero
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/doodles-app
