Beatport
Ecosystem Index
Bright, playful yellow and deep ocean blue, crisp sans-serifs, boundless, inviting space.




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 |
|---|---|---|---|---|---|---|
| h2 | Cera Pro | 37px | 700 | 1.35 | 0 | Aa Bb Cc |
| h3 | Cera Pro | 19px | 700 | 1.5 | 0 | Aa Bb Cc |
| body | Cera Pro | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Cera Pro | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fad104;
--color-surface: #045cd4;
--color-ink: #76a6e6;
--color-accent: #757161;
--color-detail: #d8dad3;
}
/* CSS variables exposed by source */
:root {
--ds-color-brand-dark-orange: #c3622c;
--ds-color-content-non-essential: #939393;
--ds-color-interactive-light-subtle-enabled: #fff0;
--ds-color-layer-level-3-default: #f7f7f7;
--ds-color-core-azure-500: #2bbdef;
--ds-shadow-down-100: 0px 0px 1px 0px #22242d1f,0px 1px 1px 0px #22242d14,0px 1px 2px -1px #22242d29;
--ds-creator-3-1-expression-stroke-default: #00000040;
--ds-size-4xl: 80px;
--ds-screen-text-line-height-display-lg: 1.15;
--ds-shadow-down-400: 0px 0px 1px 0px #22242d1f,0px -2px 5px 0px #22242d0a,0px 1px 1px -2px #22242d0a,0px 2px 2px -2px #22242d0a,0px 5px 5px -2px #22242d1f,0px 9px 9px -2px #22242d0f,0px 16px 16px -2px #22242d0f;
--ds-education-expression-stroke-support: #ffffffb0;
--ds-pokemon-expression-surface-primary: #3d3d3d;
--ds-color-core-gray-1400: #191919;
--ds-fortnite-expression-stroke-default: #ffffff87;
--ds-color-support-warning-inverse: #feebdc;
--ds-shadow-moderate: 0px 1.4px 1.4px -.7px #0000000f,0px 5.2px 4.8px -2.6px #00000017,0px 16px 16px -8px #00000026;
--ds-friends-expression-stroke-default: #ffffff87;
--ds-position-indicator-bar-inverse-default-background-color: #ffffffbf;
--ds-insiders-weekend-expression-content-highlight: #52138e;
--ds-lord-of-the-rings-expression-content-highlight: #fac400;
--ds-spacing-xl: 40px;
--ds-color-brand-bright-pink: #e3599d;
--ds-disney-expression-stroke-support: #ffffffb0;
--ds-coming-soon-expression-stroke-default: #00000040;
--ds-color-action-negative-pressed: #450302;
--ds-color-interactive-accent-selected: #af5d2b;
--ds-color-core-blue-200: #bddcfd;
--ds-color-core-orange-50: #fff4eb;
--ds-zelda-expression-stroke-default: #ffffff87;
--ds-icons-expression-content-highlight: #bcbec8;
--ds-dreamzzz-expression-surface-primary: #011c58;
--ds-new-sets-expression-content-accent: #371d0e;
--ds-misc-elevation-md-key-y: 4px;
--ds-color-layer-transparent-light-1: #ffffffe6;
--ds-color-text-negative: #bd0000;
--ds-sonic-expression-content-default: #141414;
--ds-pokemon-expression-content-support: #e5e5e5;
--ds-minifigures-expression-stroke-default: #00000040;
--ds-classic-expression-content-accent: #a64200;
--st-color-black-light: #191919;
--ds-color-content-light: #fff;
--ds-exclusives-expression-content-default: #fff;
--ds-color-stroke-inverse: #fff;
--ds-offers-expression-content-accent: #ffbabd;
--ds-peppa-pig-expression-content-highlight: #011c58;
--ds-position-indicator-dots-size-inline-sm: .625rem;
--ds-layout-spacing-1400: 112px;
--ds-color-transparent-black-100: #0000001a;
--ds-exclusives-expression-surface-inverse: #fff;
--ds-position-indicator-dots-default-enabled-border: .125rem solid #0009;
--ds-color-core-red-900: #d00;
--ds-color-icon-informative: #005ad2;
--ds-color-interactive-hovered: #0045b7;
--ds-pokemon-expression-content-accent: #ffd502;
--ds-color-content-link-visited: #003290;
--ds-bluey-expression-surface-primary: #90c2f9;
--ds-logo-size-inline-sm: clamp(4rem,1.30612vw + 3.69388rem,5rem);
--ds-color-action-negative-hovered: #9b0000;
--ds-braille-expression-content-default: #fff;
--ds-wednesday-expression-stroke-support: #ffffffb0;
}Drop-in prompt
Build a landing page in the visual style of Lego.
Reference design system (extracted from the live site):
- Palette: #fad104, #045cd4, #76a6e6, #757161, #d8dad3
- Typefaces: Cera Pro
- Macrostructure: Ecosystem Index
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/lego-com