Azure Microsoft
Marquee Hero
Deep charcoal expanse, urgent crimson streaks, sharp geometric type – a focused, digital frontier.




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 | 64px | 600 | 1.1 | 0 | Aa Bb Cc |
| h2 | Inter | 20px | 500 | 1.4 | 0.2px | Aa Bb Cc |
| h3 | Inter | 24px | 500 | 1.4 | 0.2px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | GeistMono | 12px | 400 | 1.6 | 0.2px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ce1326;
--color-surface: #770e18;
--color-ink: #fc6464;
--color-accent: #b25660;
--color-detail: #beb4b4;
}
/* CSS variables exposed by source */
:root {
--color-blue-transparent: hsla(202,100%,67%,0.15);
--spacing-1: 8px;
--spacing-9: 80px;
--spacing-4: 32px;
--spacing-13: 224px;
--color-bg-100: rgb(16,17,17);
--spacing-6: 48px;
--color-bg: #07080a;
--spacing-1-5: 12px;
--spacing-12: 168px;
--color-button-fg: rgb(24,25,26);
--background: #07080a;
--color-yellow: hsl(43,100%,60%);
--spacing-8: 64px;
--spacing-none: 0px;
--font-color-rgb: 255,255,255;
--spacing-2: 16px;
--color-fg-300: #78787c;
--spacing-3: 24px;
--font-jetbrains-mono: "JetBrains Mono","JetBrains Mono Fallback";
--color-button-bg-hover: hsl(0,0%,100%);
--spacing-11: 112px;
--color-button-bg: hsla(0,0%,100%,0.815);
--color-border: hsl(195,5%,15%);
--color-red: hsl(0,100%,69%);
--color-bg-400: rgb(73,75,77);
--color-green: hsl(151,59%,59%);
--font-geist-mono: "GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
--font-inter: "Inter","Inter Fallback";
--color-blue: hsl(202,100%,67%);
--spacing-5: 40px;
--color-fg: hsl(240,11%,96%);
--color-red-transparent: hsla(0,100%,69%,0.15);
--spacing-7: 56px;
--color-green-transparent: hsla(151,59%,59%,0.15);
--spacing-10: 96px;
--color-yellow-transparent: hsla(43,100%,60%,0.15);
--spacing-0-5: 4px;
--color-fg-400: rgb(94,99,102);
--radius-md: 6px;
--spacing-2-5: 20px;
--color-bg-200: rgb(24,25,26);
--color-fg-200: rgb(194,199,202);
--color-bg-300: rgb(49,49,51);
--rounding-lg: 16px;
--container-xs-width: 746px;
--rounding-xl: 20px;
--key-bg-end-color: rgb(13, 13, 13);
--rounding-normal: 8px;
--grey-900: #07080a;
--grey-400: #434345;
--key-bg-start-color: rgb(18, 18, 18);
--main-font: "Inter","Inter Fallback",sans-serif;
--removed-body-scroll-bar-size: 0px;
--grey-200: #9c9c9d;
--reverse-background: #ffffff;
--rounding-xs: 4px;
--grey-50: #e6e6e6;
--r2: 0deg;
--grid-gap: 32px;
}Drop-in prompt
Build a landing page in the visual style of Raycast — Pricing.
Reference design system (extracted from the live site):
- Palette: #ce1326, #770e18, #fc6464, #b25660, #beb4b4
- Typefaces: Inter, GeistMono
- Macrostructure: Marquee Hero
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/raycast-com--pricing