Graphite
Split Studio
Loading
Redis
Deep charcoal expanse, stark sans-serif precision, a cool, functional, data-driven stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #ee4239oklch(63.2% 0.210 28)Dominant
- #143444oklch(30.9% 0.047 233)Surface
- #fcceccoklch(89.1% 0.052 21)Ink
- #a46c64oklch(58.8% 0.073 28)Accent
- #babcc4oklch(79.6% 0.011 275)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | primaryFont | 100px | 400 | 0.85 | -1px | Aa Bb Cc |
| h2 | Space Grotesk | 32px | 500 | 1.2 | 0 | Aa Bb Cc |
| h3 | Space Grotesk | 32px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Space Grotesk | 14px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ee4239;
--color-surface: #143444;
--color-ink: #fccecc;
--color-accent: #a46c64;
--color-detail: #babcc4;
}
/* CSS variables exposed by source */
:root {
--secondary-button-bg-hover: transparent;
--secondary-button-bg: transparent;
--secondary-button-fg-active: #e4291e;
--secondary-button-border: #e4291e;
--secondary-button-border-active: #e4291e;
--primary-button-border-hover: #8a221c;
--secondary-button-fg-hover: #8a221c;
--primary-button-bg-hover: #d1281e;
--primary-button-fg-hover: #fff;
--secondary-button-border-hover: #8a221c;
--secondary-button-bg-active: transparent;
--primary-button-fg-active: #fff;
--primary-button-border: #e4291e;
--primary-button-bg-active: #e4291e;
--bg-default-hover: #091a23;
--primary-button-border-active: #e4291e;
--primary-button-bg: #e4291e;
--secondary-button-fg: #e4291e;
--primary-button-fg: #fff;
--purple-05: #b76be2;
--cursor-x: 50%;
--hyper-07: #e4291e;
--yellow: #dcff1e;
--header-height: 70px;
--hyper-10: #351d22;
--violet-09: #592479;
--tertiary-button-bg: transparent;
--dusk-01: #f3f3f3;
--q-docked-width: 0px;
--hyper-05: #ff4438;
--yellow-06: #d0f41d;
--base-white: #fff;
--yellow-11: #4e5f02;
--dusk-10: #d9d9d9;
--dusk-50: #8a99a0;
--midnight: #091a23;
--yellow-08: #a9ca03;
--yellow-07: #bfe112;
--ease: cubic-bezier(.4,0,.2,1);
--black-90: #191919;
--grey-20: #e9e9e9;
--tertiary-button-fg-active: #e4291e;
--header-banner-height: 38px;
--grey-50: #f9fafb;
--purple-07: #8f2ec4;
--yellow-10: #fbffe8;
--yellow-09: #8caa00;
--tertiary-button-bg-hover: transparent;
--grey-10: #fcfcfc;
--base-black: #000;
--hyper-09: #8a221c;
--sky-blue-10: #f2fbff;
--cursor-y: 50%;
--tertiary-button-bg-active: transparent;
--black-50: gray;
--hyper-04: #fd736a;
--light-blue: #f9fdff;
--dusk-90: #2d4754;
--yellow-50: #f1ffa5;
--qdvw: calc(100dvw - calc(0px + 0px));
}Drop-in prompt
Build a landing page in the visual style of Redis.
Reference design system (extracted from the live site):
- Palette: #ee4239, #143444, #fccecc, #a46c64, #babcc4
- Typefaces: primaryFont, Space Grotesk, Times
- Macrostructure: Split Studio
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/redis-io
