Codepen
Feature Stack
Electric violet depths playfully host neon green code, a vibrant, friendly tech dreamscape.




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 | Dammit Sans | 88px | 700 | 1.2 | 0 | Aa Bb Cc |
| h2 | Dammit Sans | 60px | 500 | 1.1 | 0 | Aa Bb Cc |
| h3 | Rubik | 16px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | Rubik | 16px | 400 | 2 | 0 | Aa Bb Cc |
| caption | Rubik | 14px | 500 | 1 | 0.2px | Aa Bb Cc |
| button | Rubik | 14px | 500 | 1.29 | 0.2px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e2b214;
--color-surface: #530865;
--color-ink: #744bea;
--color-accent: #60508a;
--color-detail: #af95c6;
}
/* CSS variables exposed by source */
:root {
--background-image-gradient-gold: linear-gradient(45deg, #ffb287 0%, #ffc36a 50%, #fedb4b 100%);
--bg-primary: #1f1633;
--text-2xl: 1.5rem;
--color-dk-violet: #362d59;
--text-hero-h2--line-height: 1.1;
--color-pink-500: oklch(65.6% .241 354.308);
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--color-orange-800: oklch(47% .157 37.304);
--text-hero-h1-mobile: 3.13688rem;
--color-md-pink: #e1567c;
--color-md-orange: #f4834f;
--color-yellow-800: oklch(47.6% .114 61.907);
--color-neutral-300: oklch(87% 0 0);
--color-hot-pink: #fd44b0;
--text-5xl--line-height: 1;
--text-base--line-height: 1.5rem;
--color-orange-50: oklch(98% .016 73.684);
--color-red-200: oklch(88.5% .062 18.334);
--color-neutral-200: oklch(92.2% 0 0);
--color-gray-300: oklch(87.2% .01 258.338);
--font-mono: "IBM Plex Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--color-gray-3: #cfcfdb;
--bg-secondary: #181225;
--color-gray-500: oklch(55.1% .027 264.364);
--color-gray-2: #ececf1;
--color-green-500: oklch(72.3% .219 149.579);
--color-gray-50: oklch(98.5% .002 247.839);
--color-blurple: #6a5fc1;
--text-hero-h2-mobile: 2.8125rem;
--text-lg--line-height: 1.75rem;
--color-white: #fff;
--color-gray-400: oklch(70.7% .022 261.325);
--color-dk-pink: #c73852;
--color-lt-orange: #ffb287;
--radius-sm: .25rem;
--background-image-gradient-purple-descent: linear-gradient(149deg, #36166b 18.17%, #422082 56.94%, #4e2a9a 95.71%);
--color-dk-purple: #452650;
--font-sans: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--color-md-violet: #584674;
--font-weight-bold: 700;
--color-v-lt-purple: #e2abe0;
--color-gray-100: oklch(96.7% .003 264.542);
--color-red-800: oklch(44.4% .177 26.899);
--color-red-500: oklch(63.7% .237 25.331);
--text-hero-h2-mobile--line-height: 1.15;
--text-hero-h1: 5.5rem;
--text-6xl: 3.75rem;
--text-xs--line-height: 1rem;
--color-dk-blurple: #4e2a9a;
--text-hero-h1--line-height: 1.2;
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-blue-800: oklch(42.4% .199 265.638);
--text-7xl--line-height: 1;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-orange-300: oklch(83.7% .128 66.29);
--color-lt-violet: #79628c;
--color-neutral-100: oklch(97% 0 0);
}Drop-in prompt
Build a landing page in the visual style of Sentry.
Reference design system (extracted from the live site):
- Palette: #e2b214, #530865, #744bea, #60508a, #af95c6
- Typefaces: Dammit Sans, Rubik
- 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/sentry-io