Deel
Split Studio
Loading
Stash
Cool, deep space palette; precise sans-serifs on expanses of quiet, clean volume.
Click any value to copy. Roles are suggestions, not gospel.
- #049ceboklch(66.4% 0.158 242)Dominant
- #044c5coklch(38.5% 0.068 219)Surface
- #ebf4fcoklch(96.3% 0.014 245)Ink
- #45808foklch(56.6% 0.066 216)Accent
- #cfbc9eoklch(80.3% 0.046 79)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Riforma LL | 44px | 500 | 1.09 | -0.88px | Aa Bb Cc |
| h3 | Riforma LL | 36px | 500 | 1.11 | -0.72px | Aa Bb Cc |
| body | Riforma | 18px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Riforma | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #049ceb;
--color-surface: #044c5c;
--color-ink: #ebf4fc;
--color-accent: #45808f;
--color-detail: #cfbc9e;
}
/* CSS variables exposed by source */
:root {
--bg-primary: #fff;
--text-placeholder: #7490aa;
--text-positive-dark: #002f1b;
--bg-negative: #fcbbce;
--bg-warning: #fbdaae;
--bg-action-primary: #009ceb;
--bg-target-primary: #37536c;
--bg-hover-secondary: #d9e1e8;
--bg-action-disabled-primary: #7490aa;
--bg-action-tertiary: #fff;
--bg-secondary: #f6f8fa;
--text-disabled: #a6b9c9;
--shadow-primary: 0px 2px 8px #0b162014;
--text-warning: #bf791e;
--border-focused: #7bdcf8;
--text-positive: #009255;
--bg-action-brand: #5ad4ff;
--text-inverted: #fff;
--bg-target-tertiary: #ebf0f5;
--text-action-secondary: #0b1620;
--text-action-tertiary: #fff;
--text-secondary: #1f3447;
--text-negative: #c4003b;
--border-primary: #d9e1e8;
--text-tertiary: #37536c;
--text-action-disabled-primary: #a6b9c9;
--border-active: #009ceb;
--bg-hover-tertiary: #f6f8fa;
--bg-target-secondary: #a6b9c9;
--text-warning-dark: #482900;
--bg-accent: #009ceb;
--text-action-disabled-secondary: #d9e1e8;
--bg-action-secondary: #ebf0f5;
--shadow-button: 0px 2px 8px #0b16208f;
--text-primary: #0b1620;
--text-action-primary: #0b1620;
--bg-alternate: #009ceb;
--text-dark: #0b1620;
--text-negative-dark: #57001a;
--bg-positive: #69f6bc;
--bg-hover-primary: #0089e1;
--red1: #ffcfdd;
--tw-ring-shadow: 0 0 #0000;
--icon-placeholder: #7490aa;
--neutral-dark5: #4f5e6b;
--red-light: #fcbbce;
--green4: #00bf6f;
--gold7: #724100;
--neutral-light5: #a6b9c9;
--neutral-dark8: #c3d3e0;
--blue7: #006ec4;
--blue8: #00427b;
--red7: #7e0026;
--green-dark: #002f1b;
--blue9: #001c36;
--tw-border-spacing-x: 0;
--neutral-light6: #7490aa;
--dark1: #111920;
--light7: #37536c;
--green6: #00663b;
}Drop-in prompt
Build a landing page in the visual style of Stash.
Reference design system (extracted from the live site):
- Palette: #049ceb, #044c5c, #ebf4fc, #45808f, #cfbc9e
- Typefaces: Riforma LL, Riforma
- 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/stash-com
