Feathericons
Component Playground
Loading
Excalidraw
Soft, airy grayscale—clean geometric forms float on a quiet, boundless expanse.
Click any value to copy. Roles are suggestions, not gospel.
- #6c64dcoklch(57.3% 0.177 282)Dominant
- #2c1671oklch(30.1% 0.144 285)Surface
- #6e6cdcoklch(58.9% 0.166 281)Ink
- #66589boklch(50.4% 0.105 292)Accent
- #aca2caoklch(73.4% 0.058 296)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Times | 32px | 700 | 1.4 | 0 | Aa Bb Cc |
| h2 | Assistant | 24px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #6c64dc;
--color-surface: #2c1671;
--color-ink: #6e6cdc;
--color-accent: #66589b;
--color-detail: #aca2ca;
}
/* CSS variables exposed by source */
:root {
--zIndex-ui-top: 100;
--zIndex-ui-library: 120;
--sab: 0px;
--zIndex-modal: 1000;
--zIndex-eyeDropperPreview: 6;
--zIndex-interactiveCanvas: 2;
--zIndex-canvas: 1;
--sar: 0px;
--sat: 0px;
--zIndex-popup: 1001;
--zIndex-eyeDropperBackdrop: 5;
--zIndex-ui-context-menu: 90;
--sal: 0px;
--zIndex-wysiwyg: 3;
--zIndex-hyperlinkContainer: 7;
--zIndex-ui-main-menu: 110;
--zIndex-layerUI: 4;
--zIndex-cursorHint: 8;
--zIndex-toast: 999999;
--zIndex-svgLayer: 3;
--zIndex-canvasButtons: 3;
--zIndex-ui-styles-popup: 100;
--zIndex-ui-bottom: 60;
}Drop-in prompt
Build a landing page in the visual style of Excalidraw.
Reference design system (extracted from the live site):
- Palette: #6c64dc, #2c1671, #6e6cdc, #66589b, #aca2ca
- Typefaces: Times, Assistant, Arial
- 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/excalidraw-com
