Blockstream
Feature Stack
Loading
Step
Deep charcoal expanse, crisp sans-serif clarity, cool digital spaciousness.
Click any value to copy. Roles are suggestions, not gospel.
- #f2639aoklch(69.4% 0.183 359)Dominant
- #5f3816oklch(38.1% 0.073 59)Surface
- #c0cc70oklch(81.6% 0.117 115)Ink
- #676698oklch(53.2% 0.078 284)Accent
- #9d86beoklch(66.1% 0.085 303)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 82px | 900 | 0.98 | -0.82px | Aa Bb Cc |
| h2 | Inter | 54px | 900 | 0.98 | -0.54px | Aa Bb Cc |
| body | Montserrat | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | Inter | 16px | 600 | 1.25 | -0.18px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f2639a;
--color-surface: #5f3816;
--color-ink: #c0cc70;
--color-accent: #676698;
--color-detail: #9d86be;
}
/* CSS variables exposed by source */
:root {
--font-size-x-large: 36px;
--font-size-small: 14px;
--font-size-x-small: 12px;
--font-size-default: $font-size-default;
--font-size-medium-large: 24px;
--font-size-large: 28px;
--font-size-medium: 18px;
--step-white-medium: #ffffff80;
--step-future-fuscia-soft: #f6629947;
--onboarding-loading-z-index: 13;
--step-cold-steel-medium: #afb4c280;
--header-height: space-val(0)space-val(17)px;
--step-orange: #f59e0b;
--step-cyanora-soft: #3cd0f538;
--step-vertical-gradient-cyanora-to-future-fuscia: linear-gradient(to bottom, #3cd0f5 0%, #f66299 100%);
--step-orange-light: #ffb366;
--onboarding-footer-z-index: 10;
--step-gray-600: #404040;
--step-sharp-gradient-tricolor: linear-gradient(to left, #f66299 0% 32%, #3cd0f5 33% 66%, #fcd411 67% 99%);
--step-gray-925: #1e1e1e;
--step-gradient-purple-orchid-orange: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
--step-linear-gradient-cyanora-to-future-fuscia: linear-gradient(90deg, #3cd0f5 0%, #f66299 100%);
--step-transparent: #fff0;
--step-off-white: #f6f7fa;
--step-button-gray: #4e4e4e;
--fixed-section-z-index: 8;
--step-gray-450: #505050;
--step-right-before-black: #292931;
--step-white-faint: #ffffff29;
--step-turquoise-blue-gradient: linear-gradient(85deg, #1b888f 2.14%, #26b7c1 80.05%);
--highlight-z-index: 1;
--step-shadow-button: 0 1px 0 #2222341a;
--step-periwinkle: #799cf7;
--step-raspberry-deep: #66243c;
--header-banner-height: 70px;
--step-black-medium: #00000080;
--step-right-before-midnight: #363649;
--step-cold-steel-opaque: #afb4c2cc;
--step-success: #16a34a;
--step-black: #000;
--step-vertical-gradient-cyanora-to-violet: linear-gradient(to bottom, #3cd0f5 0%, #c574fd 100%);
--step-gray-550: #4a4a4a;
--viewport-height: calc(100dvh - space-val(0)space-val(17)px);
--step-background: #111;
--step-shadow-soft: 0 0 10px #2222341a;
--step-input-focus-border: #afb4c2;
--step-orchid: #ec4899;
--content-height: calc(100dvh - space-val(0)space-val(17)px);
--step-hot-pink: #ff69b4;
--step-button-black: #0a0a0a;
--step-shadow-modal: 0 4px 24px #00000080;
--step-gray-400: #555;
--step-cold-steel: #afb4c2;
--step-turquoise: #1b888f;
--step-black-v2: #111;
--main-z-index: 2;
--step-positive: #64da90;
--step-cyanora: #3cd0f5;
--step-white: #fff;
--header-top: space-val(0)px;
}Drop-in prompt
Build a landing page in the visual style of Step.
Reference design system (extracted from the live site):
- Palette: #f2639a, #5f3816, #c0cc70, #676698, #9d86be
- Typefaces: Inter, Montserrat
- 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/step-com
