Builder
Specimen
Loading
Astro Build
Deep indigo expanse, crisp sans-serif geometry, and a subtly glowing, technical quiet.
Click any value to copy. Roles are suggestions, not gospel.
- #551ca5oklch(40.4% 0.197 294)Dominant
- #1c1469oklch(27.5% 0.139 276)Surface
- #8968bfoklch(58.8% 0.133 300)Ink
- #5a5582oklch(47.3% 0.072 288)Accent
- #cec9e1oklch(84.7% 0.033 295)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Obviously | 48px | 700 | 1.1 | 0 | Aa Bb Cc |
| h2 | Obviously | 36px | 300 | 1.11 | 0 | Aa Bb Cc |
| h3 | ui-sans-serif | 16px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | MDIO | 14px | 300 | 1 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 16px | 300 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #551ca5;
--color-surface: #1c1469;
--color-ink: #8968bf;
--color-accent: #5a5582;
--color-detail: #cec9e1;
}
/* CSS variables exposed by source */
:root {
--tw-ring-shadow: 0 0 #0000;
--ec-frm-inlBtnBrd: #eef0f9;
--ec-brdRad: 0.375rem;
--ec-sbThumbHoverCol: #555965;
--heading-style-normal: "slnt" 0;
--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;
--ec-uiFontFml: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
--ec-tm-lineMarkerLabelPadInl: 0.2rem;
--ec-tm-markBrdCol: #5570b3d0;
--sans-cv03: "cv03" on;
--ec-tm-markBg: #264a8980;
--ec-tm-lineMarkerAccentWd: 0.15rem;
--heading-weight: 290;
--sans-ss03: "ss03" on;
--ec-brdCol: rgb(84 88 100);
--ec-codeBg: #17191e;
--sans-case: "case" on;
--ec-gtrFg: #686c76;
--ec-tm-delDiffIndCol: #e68a7ed0;
--heading-ss06: "ss06" on;
--tw-text-opacity: 1;
--sans-cv04: "cv04" on;
--ec-gtrBrdWd: 1.5px;
--tw-border-spacing-x: 0;
--ec-frm-trmTtbDotsFg: #cccccc;
--heading-weight-light: 290;
--ec-frm-edTabsMargInlStart: 0;
--ec-focusBrd: #00daef;
--mono-calt: "calt" on;
--tw-ring-color: #3b82f680;
--ec-frm-edTabBrdRad: 0.375rem;
--ec-tm-delDiffIndContent: '-';
--sans-cv06: "cv06" on;
--ec-frm-edActTabBg: #17191e;
--tw-rotate: 0;
--ec-frm-trmBg: #23262d;
--sans-cv05: "cv05" on;
--tw-ring-offset-color: #fff;
--ec-frm-edTabsMargBlkStart: 0;
--ec-tm-insDiffIndContent: '+';
--ec-codeFontSize: 0.85rem;
--ec-codePadInl: 1.35rem;
--ec-frm-inlBtnFg: #eef0f9;
--ec-tm-lineDiffIndMargLeft: 0.3rem;
--sans-weight-bold: 600;
--ec-codeFontFml: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
--ec-uiFontSize: 0.9rem;
--mono-style: "ital" 0;
--tw-bg-opacity: 1;
--tw-ring-offset-width: 0px;
--ec-tm-lineMarkerAccentMarg: 0rem;
--ec-tm-insDiffIndCol: #7eb070d0;
--tw-scroll-snap-strictness: proximity;
--heading-ss11: "ss11" on;
--sans-cpsp: "cpsp" on;
--ec-frm-edActTabIndBtmCol: #ffffff00;
--ec-frm-trmTtbBg: #17191e;
--tw-shadow-colored: 0 0 #0000;
--ec-tm-delBg: #81322b80;
--ec-tm-inlMarkerPad: 0.15rem;
}Drop-in prompt
Build a landing page in the visual style of Astro Build.
Reference design system (extracted from the live site):
- Palette: #551ca5, #1c1469, #8968bf, #5a5582, #cec9e1
- Typefaces: Obviously, ui-sans-serif
- Macrostructure: Specimen
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/astro-build--showcase
