Arc — Features
Component Playground
Loading
Design Maestro | Boost your design productivity
Deep charcoal expanse, crisp sans-serif lines, a subtly digital, efficient clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #24c4f4oklch(76.5% 0.138 225)Dominant
- #c8e044oklch(86.1% 0.176 118)Surface
- #234354oklch(36.6% 0.048 233)Ink
- #549c6coklch(63.2% 0.103 153)Accent
- #bcc0ceoklch(80.9% 0.020 273)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | system-ui | 56px | 600 | 1.2 | 0 | Aa Bb Cc |
| h2 | system-ui | 40px | 600 | 1.25 | 0 | Aa Bb Cc |
| h3 | system-ui | 18px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | system-ui | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
| button | system-ui | 16px | 500 | 1.75 | 0 | Aa Bb Cc |
Max content width 1248px
:root {
--color-dominant: #24c4f4;
--color-surface: #c8e044;
--color-ink: #234354;
--color-accent: #549c6c;
--color-detail: #bcc0ce;
}
/* CSS variables exposed by source */
:root {
--font-from-0: 12;
--font-from-1: 14;
--font-to-1: 16;
--font-to-2: 18;
--font-to-0: 16;
--font-to-3: 20;
--font-from-3: 18;
--font-from-2: 16;
--base-0: calc((12 - calc(1 / 100) * calc((16 - 12) / (calc(479 / 100) - calc(1 / 100)))) / 16);
--vw-to-1: calc(1440 / 100);
--vw-to-0: calc(479 / 100);
--coefficient-3: calc((20 - 18) / (calc(2400 / 100) - calc(1920 / 100)));
--base-2: calc((16 - calc(1440 / 100) * calc((18 - 16) / (calc(1920 / 100) - calc(1440 / 100)))) / 16);
--coefficient-0: calc((16 - 12) / (calc(479 / 100) - calc(1 / 100)));
--coefficient-1: calc((16 - 14) / (calc(1440 / 100) - calc(479 / 100)));
--vw-from-1: calc(479 / 100);
--base-3: calc((18 - calc(1920 / 100) * calc((20 - 18) / (calc(2400 / 100) - calc(1920 / 100)))) / 16);
--vw-from-3: calc(1920 / 100);
--vw-to-3: calc(2400 / 100);
--coefficient-2: calc((18 - 16) / (calc(1920 / 100) - calc(1440 / 100)));
--vw-from-2: calc(1440 / 100);
--base-1: calc((14 - calc(479 / 100) * calc((16 - 14) / (calc(1440 / 100) - calc(479 / 100)))) / 16);
--vw-from-0: calc(1 / 100);
--vw-to-2: calc(1920 / 100);
}Drop-in prompt
Build a landing page in the visual style of Design Maestro | Boost your design productivity.
Reference design system (extracted from the live site):
- Palette: #24c4f4, #c8e044, #234354, #549c6c, #bcc0ce
- Typefaces: system-ui
- Macrostructure: Component Playground
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/designmaestro-io
