Shortwave
Feature Stack
Loading
Morgen: AI Daily Planner for Calendars & Tasks
Deep charcoal expanse, crisp sans-serif clarity, and subtle, warm accents of burnt orange.
Click any value to copy. Roles are suggestions, not gospel.
- #c84a59oklch(58.3% 0.160 17)Dominant
- #f4c46coklch(84.5% 0.120 81)Surface
- #3c1c26oklch(27.5% 0.052 1)Ink
- #a58854oklch(64.2% 0.078 81)Accent
- #c1a8aaoklch(75.4% 0.029 12)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Faktum | 64px | 700 | 1.05 | 0 | Aa Bb Cc |
| h2 | Faktum | 48px | 700 | 1 | 0 | Aa Bb Cc |
| h3 | Faktum | 32px | 700 | 1.25 | 0 | Aa Bb Cc |
| body | Inter Variable font | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter Variable font | 14px | 600 | 1.43 | 0.25px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c84a59;
--color-surface: #f4c46c;
--color-ink: #3c1c26;
--color-accent: #a58854;
--color-detail: #c1a8aa;
}
/* CSS variables exposed by source */
:root {
--border: #444;
--fontcolorblog: #323946;
--body-text-grey: #cbcccc;
--21222d: #444;
--morgen-red: #ff8295;
--button-text-color: white;
--white: white;
--button-color: #76879d;
--button-hover: #3a4554;
--body-text-white: white;
--morgen-yellow: #f3c26a;
--grey: #616774;
--morgen-black: #191a23;
--light-grey: #21222d;
--black: #191919;
}Drop-in prompt
Build a landing page in the visual style of Morgen: AI Daily Planner for Calendars & Tasks.
Reference design system (extracted from the live site):
- Palette: #c84a59, #f4c46c, #3c1c26, #a58854, #c1a8aa
- Typefaces: Faktum, Inter Variable font
- 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/morgen-so
