Astro Build
Specimen
Deep violet expanse, crisp sans-serif, spacious and subtly glowing digital architecture.




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 |
|---|---|---|---|---|---|---|
| h1 | APK Protocol | 60px | 500 | 1.12 | -3px | Aa Bb Cc |
| h2 | APK Protocol | 48px | 500 | 1 | -1.2px | Aa Bb Cc |
| h3 | APK Protocol | 40px | 500 | 1.33 | -1px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| caption | APK Protocol | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #6516df;
--color-surface: #360b79;
--color-ink: #c484fc;
--color-accent: #7c679e;
--color-detail: #9178b2;
}
/* CSS variables exposed by source */
:root {
--text-base--line-height: calc(1.5 / 1);
--color-nickel: #3b3440;
--font-mono: "KH Teka Mono", monospace;
--color-white: #fff;
--radius-sm: .25rem;
--text-xs--line-height: calc(1 / .75);
--color-zest: #22ff73;
--radius-md: .375rem;
--text-xl: 1.25rem;
--radius-lg: .5rem;
--color-wine: #140033;
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--color-electric: #6c3bff;
--color-slate: #14121a;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-2xl: 1.5rem;
--shadow-pop: 0 4px 12px #0000000f;
--text-lg: 1.125rem;
--text-5xl--line-height: 1;
--text-lg--line-height: calc(1.75 / 1.125);
--color-grey: #867e8e;
--font-sans: Inter, sans-serif;
--color-space: #103;
--text-6xl: 3.75rem;
--font-heading: "APK Protocol", sans-serif;
--color-aqua: #32f3e9;
--color-stroke: #e5e4e7;
--color-beige: #f4f3ec;
--font-weight-semibold: 600;
--color-brand: #b39aff;
--color-midnight: #0c0912;
--text-4xl: 2.25rem;
--text-sm--line-height: calc(1.25 / .875);
--color-primary: #16171d;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--text-xs: .75rem;
--font-weight-medium: 500;
--color-vite: #b39aff;
--radius-xs: .125rem;
--radius-xl: .75rem;
--text-6xl--line-height: 1;
--text-base: 1rem;
--container-md: 28rem;
--tw-inset-shadow-alpha: 100%;
--vp-c-text-3: #6a6a71;
--twoslash-tag-bg: #3772cf20;
--docsearch-background-color: #14121a;
--vp-button-brand-active-border: transparent;
--docsearch-sidepanel-hit-color: #fff;
--aspect-video: 16 / 9;
--vp-local-nav-bg-color: #16171d;
--vp-badge-info-bg: #65758529;
--vp-code-line-height: 1.7;
--vp-c-note-1: #b39aff;
--vp-font-family-mono: "KH Teka Mono", monospace;
}Drop-in prompt
Build a landing page in the visual style of Vite.
Reference design system (extracted from the live site):
- Palette: #6516df, #360b79, #c484fc, #7c679e, #9178b2
- Typefaces: APK Protocol, Inter
- 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/vite-dev