Convertkit
Feature Stack
Loading
Ghost — About
Deep charcoal expanse, crisp sans-serif clarity, subtly animated data flow.
Click any value to copy. Roles are suggestions, not gospel.
- #f5bd33oklch(82.7% 0.156 85)Dominant
- #72561aoklch(47.1% 0.084 83)Surface
- #fcdc94oklch(90.5% 0.097 87)Ink
- #7c8c84oklch(62.5% 0.022 164)Accent
- #c1c6c5oklch(82.2% 0.006 183)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | InterDisplay | 96px | 700 | 1 | -2.4px | Aa Bb Cc |
| h2 | InterDisplay | 12px | 700 | 1 | 1.2px | Aa Bb Cc |
| h3 | InterDisplay | 36px | 700 | 1 | -0.9px | Aa Bb Cc |
| body | InterVariable | 15px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | InterVariable | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | InterVariable | 15px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f5bd33;
--color-surface: #72561a;
--color-ink: #fcdc94;
--color-accent: #7c8c84;
--color-detail: #c1c6c5;
}
/* CSS variables exposed by source */
:root {
--color-darkgrey: #343f44;
--color-wash: #f1f2f3;
--color-midgrey: #738a94;
--color-lime: #d1ff19;
--color-teal: #009c7e;
--color-yellow: #ffd400;
--font-sans-serif: "InterVariable",sans-serif;
--color-whitegrey: #e5eff5;
--color-lightgrey: #c5d2d9;
--color-red: #f05230;
--color-green: #5dcf1f;
--color-blue: #3eb0ef;
--color-purple: #ad26b4;
--color-base: #15171a;
--font-monospace: Menlo,ui-monospace,SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;
--font-heading: "InterDisplay",sans-serif;
--color-pink: #ff247d;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--serif: Georgia,serif;
--tw-border-spacing-x: 0;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-skew-y: 0;
}Drop-in prompt
Build a landing page in the visual style of Ghost — About.
Reference design system (extracted from the live site):
- Palette: #f5bd33, #72561a, #fcdc94, #7c8c84, #c1c6c5
- Typefaces: InterDisplay, InterVariable
- 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/ghost-org--about
