Expressjs
Feature Stack
Loading
Svelte
Cool, clean, and precise: stark white space, assertive sans-serifs, a digital, minimalist pulse.
Click any value to copy. Roles are suggestions, not gospel.
- #f0541aoklch(65.1% 0.202 38)Dominant
- #2b0a07oklch(20.2% 0.056 29)Surface
- #edb6a6oklch(82.2% 0.068 37)Ink
- #6781a8oklch(59.8% 0.067 258)Accent
- #babdc1oklch(79.7% 0.007 255)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | DM Serif Display | 54px | 500 | 1.2 | 0 | Aa Bb Cc |
| h2 | DM Serif Display | 54px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Georgia | 10px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Fira Sans | 10px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f0541a;
--color-surface: #2b0a07;
--color-ink: #edb6a6;
--color-accent: #6781a8;
--color-detail: #babdc1;
}
/* CSS variables exposed by source */
:root {
--sk-font-family-ui: "Fira Sans", -apple-system, sans-serif;
--sk-bg-1: #fff;
--sk-font-family-mono: "Fira Mono", monospace;
--sk-font-ui-large: 400 3rem / 1.5 "Fira Sans", -apple-system, sans-serif;
--sk-page-content-width: 76rem;
--sk-font-family-heading: "DM Serif Display", Georgia, serif;
--sk-scrollbar: #0000004d;
--sk-bg-highlight: #ff9;
--sk-font-ui-medium: 400 1.6rem / 1.5 "Fira Sans", -apple-system, sans-serif;
--sk-page-padding-top: 8rem;
--sk-bg-accent: #d43008;
--sk-font-h2: 500 3rem / 1.2 "DM Serif Display", Georgia, serif;
--sk-raised-width: 1px 2px 2px 1px;
--sk-line-height-body: calc(1.5 * 1.8rem);
--sk-bg-3: #fafafa;
--sk-raised-active-color: #dbdbdb #ebebeb #ebebeb #dbdbdb;
--sk-raised-color: #f2f2f2 #ebebeb #ebebeb #f2f2f2;
--shiki-token-parameter: #262626;
--safari-fix: translate3d(0, 0, .01);
--shiki-token-keyword: #0074c2;
--sk-raised-shadow: #dbdbdb;
--quint-out: cubic-bezier(.23, 1, .32, 1);
--sk-secondary-nav-height: 6rem;
--sk-fg-accent: #d43008;
--sk-shadow: drop-shadow(0px 0px 14px #0000001a);
--sk-pane-controls-height: 4.2rem;
--sk-font-size-h1: 5.4rem;
--sk-font-family-body: Georgia, serif;
--shiki-token-constant: #262626;
--sk-font-h3: 500 2.4rem / 1.2 "DM Serif Display", Georgia, serif;
--sk-bg-2: #fdfdfd;
--shiki-token-comment: gray;
--sk-font-size-h3: 2.4rem;
--sk-nav-height: 6rem;
--sk-page-padding-bottom: 8rem;
--sk-border: #ebebeb;
--sk-page-padding-side: 4.8rem;
--sk-font-ui-small: 400 1.3rem / 1.5 "Fira Sans", -apple-system, sans-serif;
--sk-raised-highlight: #f2f2f2;
--sk-fg-1: #141414;
--sk-font-h1: 500 5.4rem / 1.2 "DM Serif Display", Georgia, serif;
--sk-fg-3: #666;
--sk-font-mono: 400 1.4rem / 1.7 "Fira Mono", monospace;
--sk-bg-4: #f2f2f2;
--sk-thick-border-width: .3rem;
--sk-font-size-ui-medium: 1.6rem;
--sk-font-size-ui-large: 3rem;
--sk-raised-active-width: 2px 1px 1px 2px;
--sk-fg-4: gray;
--shiki-token-string-expression: #994d00;
--shiki-token-string: #994d00;
--sk-font-size-body: 1.8rem;
--sk-font-body-small: 400 1.6rem / calc(1.5 * 1.6rem) Georgia, serif;
--sk-fg-2: #262626;
--shiki-token-link: #0074c2;
--sk-raised-hover-color: #ebebeb #dbdbdb #dbdbdb #ebebeb;
--sk-font-body: 400 1.8rem / calc(1.5 * 1.8rem) Georgia, serif;
--sk-font-size-mono: 1.4rem;
--shiki-token-punctuation: #262626;
--sk-font-size-body-small: 1.6rem;
}Drop-in prompt
Build a landing page in the visual style of Svelte.
Reference design system (extracted from the live site):
- Palette: #f0541a, #2b0a07, #edb6a6, #6781a8, #babdc1
- Typefaces: DM Serif Display, Georgia, Fira Sans
- Macrostructure: Feature Stack
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/svelte-dev
