Digitalocean
Stat-Led
Loading
Reactsummit
Deep charcoal expanse, stark geometric type, and a cool, precise digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #48d025oklch(75.4% 0.231 140)Dominant
- #196c12oklch(46.5% 0.144 142)Surface
- #a1ea8eoklch(86.7% 0.143 139)Ink
- #5e7697oklch(56.0% 0.059 256)Accent
- #bbbbb9oklch(79.1% 0.003 106)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GothamPro | 86px | 900 | 1 | 0 | Aa Bb Cc |
| h2 | GothamPro | 80px | 900 | 0.9 | 0.8px | Aa Bb Cc |
| h3 | GothamPro | 34px | 700 | 1 | -2.312px | Aa Bb Cc |
| body | GothamPro | 14px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | GothamPro | 12px | 700 | 1.2 | 0 | Aa Bb Cc |
:root {
--color-dominant: #48d025;
--color-surface: #196c12;
--color-ink: #a1ea8e;
--color-accent: #5e7697;
--color-detail: #bbbbb9;
}
/* CSS variables exposed by source */
:root {
--font-gotham: GothamPro,sans-serif;
--color-popup-ticket-border: #99FF00;
--accentColor: #99FF00;
--color-brand-hover: #00DD3B;
--color-brand: #99FF00;
--ticketsFormBg: transparent;
--button-background-hover: linear-gradient(187deg, #9F0 2.5%, #00DD3B 97.5%);
--workshop-item-border: #363636;
--price-increase-bg: #161917;
--button-color: #000;
--ticketsFormInputBorder: 1px solid #363636;
--price-color: #fff;
--workshop-item-color: #fff;
--workshop-item-bg: #363636;
--workshop-item-type-color: #000;
--workshop-item-type-color-free: #000;
--checkout-card-bg: #262626;
--bodyColor: #fff;
--reach-dialog: 1;
--checkout-section-bg: #181818;
--price-item-radius: 16px;
--price-slider-btn-color: #00FF00;
--price-btn-border-color-hover: #5C5C5C;
--button-background: linear-gradient(87deg, #9F0 2.5%, #00DD3B 97.5%);
--price-section-bg: #161917;
--price-item-bg: #161917;
--price-btn-border: 1px solid #3C3C3C;
--price-slider-btn-bg-hover: #222222;
--workshop-item-type-bg: #fff;
--price-slider-btn-size: 54px;
--workshop-item-ff: GothamPro;
--price-slider-btn-radius: 50%;
--price-item-title-color: #fff;
--banner-btn-size: 12px;
--price-item-title-weight: 500;
--ticketsFormInputRadius: 8px;
--price-slider-btn-bg: #161917;
--checkout-section-secondary-color: #949494;
--price-btn-color: #fff;
--ticketsFormBorder: 2px solid #363636;
--button-color-hover: #000;
--price-item-border: #363636;
--workshop-item-type-radius: 4px;
--checkout-section-color: #fff;
--price-slider-btn-border-color: #363636;
--banner-accent-font: GothamPro,Arial,sans-serif;
--checkout-outline-color: #3e3e3e;
--price-item-border-width: 2px;
--banner-font: GothamPro,Arial,sans-serif;
--banner-radius: 16px;
--ticketsFormRadius: 16px;
}Drop-in prompt
Build a landing page in the visual style of Reactsummit.
Reference design system (extracted from the live site):
- Palette: #48d025, #196c12, #a1ea8e, #5e7697, #bbbbb9
- Typefaces: GothamPro
- Macrostructure: Stat-Led
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/reactsummit-com
