Codepen
Feature Stack




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 | Abcgintodiscordnord | 56px | 700 | 0.86 | -0.56px | Aa Bb Cc |
| h2 | Abcgintodiscordnord | 22px | 700 | 0.8 | -0.66px | Aa Bb Cc |
| h3 | Abcgintodiscord | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
| body | Ggsans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Abcgintodiscord | 16px | 500 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2b33ac;
--color-surface: #0c0484;
--color-ink: #5a5ae5;
--color-accent: #6b6c92;
--color-detail: #b8a2c8;
}
/* CSS variables exposed by source */
:root {
--brand-760: hsl(234.34 calc(1*46.903%) 22.157%/1);
--brand-760-hsl: 234.34 calc(1*46.903%) 22.157%;
--bg-gradient-retro-storm-1-hsl: 201.553 calc(1*47.032%) 42.941%;
--brand-160: hsl(234.545 calc(1*84.615%) 94.902%/1);
--brand-200-hsl: 236 calc(1*83.333%) 92.941%;
--bg-gradient-aurora-5: hsl(229.839 calc(1*92.537%) 26.275%/1);
--bg-gradient-sunset-2: hsl(21.667 calc(1*66.667%) 57.647%/1);
--primary-345: hsl(214.286 calc(1*8.434%) 67.451%/1);
--radius-md: 12px;
--brand-460: hsl(234.93 calc(1*85.542%) 67.451%/1);
--bg-gradient-cotton-candy-2: hsl(226.4 calc(1*92.593%) 84.118%/1);
--primary-560: hsl(225 calc(1*6.667%) 23.529%/1);
--bg-gradient-aurora-1-hsl: 219.74 calc(1*86.517%) 17.451%;
--bg-gradient-mars-2-hsl: 0 calc(1*36.19%) 41.176%;
--primary-300: hsl(210 calc(1*9.259%) 78.824%/1);
--space-20: 20px;
--primary-560-hsl: 225 calc(1*6.667%) 23.529%;
--size-4: 4px;
--brand-560: hsl(234.72 calc(1*51.44%) 52.353%/1);
--space-4: 4px;
--bg-gradient-lofi-vibes-2: hsl(183.81 calc(1*57.798%) 78.627%/1);
--bg-gradient-blurple-twilight-1: hsl(233.904 calc(1*79.574%) 53.922%/1);
--bg-gradient-crimson-moon-1: hsl(0 calc(1*88.608%) 30.98%/1);
--bg-gradient-hanami-2-hsl: 43.146 calc(1*73.554%) 76.275%;
--size-xxl: 32px;
--bg-gradient-aurora-1: hsl(219.74 calc(1*86.517%) 17.451%/1);
--brand-260: hsl(235.2 calc(1*86.207%) 88.627%/1);
--primary-700: hsl(225 calc(1*6.25%) 12.549%/1);
--bg-gradient-midnight-blurple-1-hsl: 245.077 calc(1*55.085%) 53.725%;
--bg-gradient-forest-3: hsl(76.154 calc(1*20.635%) 24.706%/1);
--primary-200: hsl(216 calc(1*9.804%) 90%/1);
--bg-animated-gradient-background-not-black: hsl(240 calc(1*7.143%) 5.49%/1);
--bg-gradient-forest-2-hsl: 142.5 calc(1*26.23%) 23.922%;
--bg-gradient-hanami-2: hsl(43.146 calc(1*73.554%) 76.275%/1);
--space-128: 128px;
--space-xs: 8px;
--bg-gradient-midnight-blurple-2: hsl(259.024 calc(1*74.545%) 10.784%/1);
--font-weight-normal: 400;
--text-link: #00b0f4;
--space-12: 12px;
--brand-430-hsl: 235 calc(1*85.714%) 69.804%;
--space-40: 40px;
--brand-100-hsl: 240 calc(1*77.778%) 98.235%;
--bg-gradient-crimson-moon-2-hsl: 0 calc(1*0%) 0%;
--primary-360-hsl: 213.75 calc(1*8.081%) 61.176%;
--brand-200: hsl(236 calc(1*83.333%) 92.941%/1);
--primary-130: hsl(220 calc(1*13.043%) 95.49%/1);
--bg-gradient-crimson-moon-2: hsl(0 calc(1*0%) 0%/1);
--brand-560-hsl: 234.72 calc(1*51.44%) 52.353%;
--primary-460: hsl(228 calc(1*5.155%) 38.039%/1);
--primary-460-hsl: 228 calc(1*5.155%) 38.039%;
--bg-gradient-sepia-2-hsl: 36.207 calc(1*46.774%) 24.314%;
--bg-gradient-sepia-2: hsl(36.207 calc(1*46.774%) 24.314%/1);
--size-sm: 12px;
--size-20: 20px;
--bg-gradient-chroma-glow-3: hsl(298.491 calc(1*90.857%) 34.314%/1);
--size-md: 16px;
--bg-gradient-cotton-candy-1-hsl: 349.315 calc(1*76.842%) 81.373%;
--brand-130: hsl(235.714 calc(1*87.5%) 96.863%/1);
--font-display-marketing-header: "ABC Ginto Nord Discord","gg sans",serif,"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}Drop-in prompt
Build a landing page in the visual style of Discord.
Reference design system (extracted from the live site):
- Palette: #2b33ac, #0c0484, #5a5ae5, #6b6c92, #b8a2c8
- Typefaces: Abcgintodiscordnord, Ggsans, ABC Ginto Normal
- 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/discord-com