Standardvision
Marquee Hero
Loading
Climeworks
Deep teal and charcoal, clean sans-serif, spacious and subtly technical, like a glacial study.
Click any value to copy. Roles are suggestions, not gospel.
- #3cace6oklch(70.7% 0.130 236)Dominant
- #04141coklch(18.1% 0.028 231)Surface
- #7dc5f4oklch(79.4% 0.099 238)Ink
- #578699oklch(59.4% 0.059 225)Accent
- #b4b5b8oklch(77.3% 0.004 271)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | WebRecklessNeue | 77px | 400 | 1 | -1.5px | Aa Bb Cc |
| h2 | WebRecklessNeue | 46px | 400 | 1.15 | 0 | Aa Bb Cc |
| h3 | WebHaffer | 32px | 400 | 1.25 | 0 | Aa Bb Cc |
| body | WebHaffer | 18px | 400 | 1.45 | 0 | Aa Bb Cc |
| caption | WebHaffer | 18px | 700 | 1.45 | 0 | Aa Bb Cc |
| button | WebHaffer | 18px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #3cace6;
--color-surface: #04141c;
--color-ink: #7dc5f4;
--color-accent: #578699;
--color-detail: #b4b5b8;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--btn-color-disabled: #A7ACAE;
--btn-color-hover: black;
--livewire-progress-bar-color: #2299dd;
--w-container-gap-capped: 3rem;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--w-grid-gap: 2.5rem;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--btn-arrow-color: #008FE8;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--btn-color-pressed: black;
--tw-scale-y: 1;
--btn-text-color: black;
--w-card: 2.5rem;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--btn-color: black;
--w-container-gap: calc((100vw - 1280px + 6rem)/2);
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Climeworks.
Reference design system (extracted from the live site):
- Palette: #3cace6, #04141c, #7dc5f4, #578699, #b4b5b8
- Typefaces: WebRecklessNeue, WebHaffer
- 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/climeworks-com
