Ghost
Feature Stack
Deep indigo depth—clean, geometric sans-serifs float in spacious, softly shadowed clarity.




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 | Inter | 60px | 800 | 1.07 | 0 | Aa Bb Cc |
| h2 | Inter | 40px | 800 | 1.1 | 0 | Aa Bb Cc |
| h3 | Inter | 28px | 800 | 1.14 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1344px
:root {
--color-dominant: #345ae8;
--color-surface: #303f6d;
--color-ink: #9cbcfc;
--color-accent: #6b7aaa;
--color-detail: #94a9cd;
}
/* CSS variables exposed by source */
:root {
--bulma-info-100: hsla(198deg,100%,100%,1);
--bulma-danger-80-invert: hsla(348deg,100%,15%,1);
--bulma-warning-85: hsla(42deg,100%,83%,1);
--bulma-success-55-invert: hsla(153deg,53%,8%,1);
--bulma-warning-on-scheme: hsla(42deg,100%,23%,1);
--bulma-white-ter: #f3f4f6;
--bulma-danger-35: hsla(348deg,100%,35%,1);
--bulma-text-20-invert: hsla(221deg,14%,84%,1);
--bulma-pre-background: hsl(221,14%,96%);
--bulma-info-10-l: 10%;
--bulma-text-25-invert: hsla(221deg,14%,94%,1);
--bulma-text-l: 29%;
--bulma-info-100-invert: hsla(198deg,100%,20%,1);
--bulma-danger-90-l: 90%;
--bulma-text-65-l: 64%;
--bulma-link-soft-invert: hsla(233deg,100%,20%,1);
--bulma-info-05: hsla(198deg,100%,5%,1);
--bulma-success-00: hsla(153deg,53%,0%,1);
--bulma-danger-soft: hsla(348deg,100%,90%,1);
--bulma-info-50-invert: hsla(198deg,100%,5%,1);
--bulma-link-15-invert: hsla(233deg,100%,78%,1);
--bulma-text-85: hsla(221deg,14%,84%,1);
--bulma-link-light-invert-l: 33%;
--bulma-text-75-invert-l: 14%;
--bulma-link-55: hsla(233deg,100%,53%,1);
--bulma-primary-25-invert-l: 100%;
--bulma-white-bis: #f9fafb;
--bulma-text-15-invert-l: 74%;
--bulma-primary-light-l: 91%;
--bulma-success-dark-l: 8%;
--bulma-info-80: hsla(198deg,100%,80%,1);
--bulma-success-65-invert-l: 8%;
--bulma-danger-25: hsla(348deg,100%,25%,1);
--bulma-link-s: 100%;
--bulma-warning-80-invert: hsla(42deg,100%,13%,1);
--bulma-black-on-scheme-l: 4%;
--bulma-danger-dark-l: 10%;
--bulma-text-60-l: 59%;
--bulma-text-on-scheme-l: 29%;
--bulma-text-40: hsla(221deg,14%,39%,1);
--bulma-success-05-invert-l: 43%;
--bulma-text-95-invert-l: 24%;
--bulma-danger-95: hsla(348deg,100%,95%,1);
--bulma-primary-50-l: 51%;
--bulma-warning-bold: hsla(42deg,100%,20%,1);
--bulma-link-20-l: 18%;
--bulma-text-00-invert-l: 59%;
--bulma-burger-item-width: 20px;
--bulma-light-s: 14%;
--bulma-warning-15: hsla(42deg,100%,13%,1);
--bulma-link-75-invert: hsla(233deg,100%,8%,1);
--bulma-primary-95-l: 96%;
--bulma-warning-10-l: 8%;
--bulma-success-45-l: 43%;
--bulma-info-dark-l: 10%;
--bulma-primary-base: hsla(171deg,100%,41%,1);
--bulma-danger-10-invert-l: 75%;
--bulma-white-s: 14%;
--bulma-success-light: hsla(153deg,53%,88%,1);
--bulma-body-rendering: optimizeLegibility;
}Drop-in prompt
Build a landing page in the visual style of Signal.
Reference design system (extracted from the live site):
- Palette: #345ae8, #303f6d, #9cbcfc, #6b7aaa, #94a9cd
- Typefaces: Inter
- 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/signal-org