Csswizardry
Feature Stack
Loading
Electronjs
Deep indigo expanse, crisp sans-serif lines, spacious and quietly powerful.
Click any value to copy. Roles are suggestions, not gospel.
- #0ecbf0oklch(77.7% 0.138 217)Dominant
- #076a7doklch(48.4% 0.084 216)Surface
- #9ceaf9oklch(89.2% 0.079 211)Ink
- #64949doklch(63.6% 0.053 211)Accent
- #bbbbbcoklch(79.2% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | system-ui | 35px | 200 | 1.25 | 0 | Aa Bb Cc |
| h2 | system-ui | 40px | 900 | 1.25 | 0 | Aa Bb Cc |
| h3 | system-ui | 19px | 700 | 1.25 | 0 | Aa Bb Cc |
| body | system-ui | 16px | 400 | 1.65 | 0 | Aa Bb Cc |
| caption | system-ui | 13px | 400 | 1.65 | 0 | Aa Bb Cc |
| button | system-ui | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0ecbf0;
--color-surface: #076a7d;
--color-ink: #9ceaf9;
--color-accent: #64949d;
--color-detail: #bbbbbc;
}
/* CSS variables exposed by source */
:root {
--shadow-elevation-low: 0px 1px 1px hsl(0deg 0% 63%/.07),0px 1.4px 1.4px -1.8px hsl(0deg 0% 63%/.06),-.1px 3px 2.9px -3.5px hsl(0deg 0% 63%/.04);
--shadow-pop: 0 4px 12px rgba(0,0,0,.06);
--shadow-color: 0deg 0% 63%;
--ifm-menu-link-padding-vertical: .375rem;
--ifm-spacing-vertical: 1rem;
--ifm-color-primary-contrast-background: #ebf2fc;
--ifm-pre-line-height: 1.45;
--docsearch-background-color: #f5f5fa;
--ifm-global-border-width: 1px;
--ifm-card-horizontal-spacing: 1rem;
--ifm-avatar-photo-size: 3rem;
--ifm-h2-font-size: 1.5rem;
--ifm-font-weight-semibold: 500;
--ifm-color-primary-lighter: #4cc8ff;
--ifm-scrollbar-track-background-color: #f1f1f1;
--ifm-color-success-darker: #008b00;
--ifm-alert-padding-horizontal: 1rem;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-success-contrast-foreground: #003100;
--ifm-blockquote-color: #444950;
--ifm-blockquote-font-size: 100%;
--docsearch-icon-stroke-width: 1.4;
--ifm-font-size-base: 100%;
--ifm-navbar-link-color: #1c1e21;
--ifm-breadcrumb-padding-vertical: .4rem;
--ifm-heading-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--ifm-breadcrumb-separator-size-multiplier: 1.25;
--ifm-link-hover-color: #028399;
--ifm-color-primary-dark: #000885;
--ifm-background-surface-color: #fff;
--docsearch-footer-background: rgba(255,255,255,.65);
--ifm-font-weight-base: 400;
--ifm-font-weight-normal: 400;
--docsearch-search-button-text-color: #5a5e9a;
--ifm-tabs-padding-vertical: 1rem;
--ifm-color-emphasis-400: #ccd0d5;
--ifm-color-secondary-contrast-background: #fdfdfe;
--ifm-color-success-lightest: #80d280;
--ifm-navbar-item-padding-horizontal: 8px;
--docsearch-hit-height: 56px;
--ifm-pre-border-radius: .4rem;
--ifm-color-white: #fff;
--docsearch-modal-height: 600px;
--ifm-list-margin: 1rem;
--ifm-color-primary-contrast-foreground: #102445;
--ifm-badge-border-width: 1px;
--docsearch-spacing: 12px;
--ifm-color-danger-lightest: #fd9c9f;
--ifm-color-warning-dark: #e6a700;
--ifm-color-danger-lighter: #fb7478;
--ifm-alert-color: #1c1e21;
--ifm-pills-spacing: .125rem;
--ifm-color-danger-light: #fb565b;
--docusaurus-collapse-button-bg: transparent;
--ifm-color-gray-900: #1c1e21;
--docsearch-key-background: #f5f5fa;
--ifm-lightest-value: 50%;
--ifm-color-primary-darkest: #000;
--ifm-font-color-base: #1c1e21;
--ifm-breadcrumb-item-background-active: rgba(162,236,251,.2);
}Drop-in prompt
Build a landing page in the visual style of Electronjs.
Reference design system (extracted from the live site):
- Palette: #0ecbf0, #076a7d, #9ceaf9, #64949d, #bbbbbc
- Typefaces: system-ui
- 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/electronjs-org--blog-archive
