basement.studio | We make cool shit that performs.
Bento Grid
Loading
Agence PowerPoint : +2500 clients satisfaits | mprez
Deep indigo expanse, crisp sans-serif geometry, spacious and subtly authoritative.
Click any value to copy. Roles are suggestions, not gospel.
- #5333f9oklch(51.0% 0.269 278)Dominant
- #735efboklch(59.2% 0.224 283)Surface
- #60272foklch(35.6% 0.083 14)Ink
- #9c7564oklch(59.7% 0.056 45)Accent
- #ccccccoklch(84.5% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | National 2 Compressed | 116px | 700 | 0.9 | 0 | Aa Bb Cc |
| h2 | National 2 Compressed | 56px | 700 | 1 | 0 | Aa Bb Cc |
| h3 | Aeonik | 28px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | Aeonik | 14px | 400 | 1 | 0 | Aa Bb Cc |
| button | Aeonik | 14px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1190px
:root {
--color-dominant: #5333f9;
--color-surface: #735efb;
--color-ink: #60272f;
--color-accent: #9c7564;
--color-detail: #cccccc;
}
/* CSS variables exposed by source */
:root {
--font--body: Aeonik,sans-serif;
--space--s: 3rem;
--space--xxs: 1rem;
--space--l: 7rem;
--space--xs: 1.5rem;
--font--heading: "National 2 Compressed",Impact,sans-serif;
--radius--m: 1rem;
--radius--l: 1.5rem;
--radius--s: .625rem;
--space--m: 5rem;
--_theme-colors---color-sheme--opacity--transparent: #fff0;
--vh: 9px;
--_theme-colors---color-sheme--opacity--white-15: #ffffff26;
--_theme-colors---color-sheme--opacity--white-5: #ffffff0d;
--_theme-colors---color-sheme--placerholder: #ffffff4d;
--theme--electric-purple: #5237f9;
--_theme-colors---color-sheme--opacity--white-20: #fff3;
--_theme-colors---color-sheme--opacity--white-30: #ffffff4d;
--theme--dark-green: #06282d;
--theme--grey: #c4cadf;
--theme--white: white;
--_theme-colors---color-sheme--link: #dbff9b;
--_theme-colors---color-sheme--opacity--white-40: #fff6;
--_ui-styles---border-width: .5px;
--theme--green: #004f5b;
--_theme-colors---color-sheme--box: #ffffff0d;
--_theme-colors---color-sheme--opacity--black-60: #01021199;
--_theme-colors---color-sheme--box-border: #fff0;
--_theme-colors---color-sheme--text-hover: #010211;
--_theme-colors---color-sheme--opacity--black-20: #01021133;
--_theme-colors---color-sheme--opacity--grey-30: #c4cadf4d;
--_theme-colors---color-sheme--paragraph: #c4cadf;
--_theme-colors---color-sheme--border: #fff3;
--_theme-colors---color-sheme--input: #ffffff26;
--_theme-colors---color-sheme--opacity--white-10: #ffffff1a;
--theme--black: #010211;
--_theme-colors---color-sheme--opacity--black-10: #0102111a;
--theme--lavender: #9e9dff;
--_theme-colors---color-sheme--opacity--white-60: #fff9;
--_theme-colors---color-sheme--opacity--black-5: #0102110d;
--_theme-colors---color-sheme--accent: white;
--_theme-colors---color-sheme--background-section: #010211;
--_theme-colors---color-sheme--text: white;
--lime-90: color-mix(in srgb, #dbff9b 90%, transparent);
--_theme-colors---color-sheme--opacity--black-90: #010211e6;
--theme--lime: #dbff9b;
--_theme-colors---color-sheme--box-hover: #ffffff1a;
--_theme-colors---color-sheme--opacity--black-30: #0102114d;
--purple-90: color-mix(in srgb, #5237f9 90%, transparent);
--_theme-colors---color-sheme--background: #010211;
}Drop-in prompt
Build a landing page in the visual style of Agence PowerPoint : +2500 clients satisfaits | mprez.
Reference design system (extracted from the live site):
- Palette: #5333f9, #735efb, #60272f, #9c7564, #cccccc
- Typefaces: National 2 Compressed, Aeonik
- 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/mprez-fr
