Alloy
Feature Stack
Loading
Workable
Clean, cool teal geometry floats on a stark white expanse, crisp sans-serif whispers.
Click any value to copy. Roles are suggestions, not gospel.
- #e66b40oklch(66.9% 0.164 39)Dominant
- #871812oklch(40.6% 0.147 29)Surface
- #97edecoklch(89.1% 0.083 195)Ink
- #9c7077oklch(59.2% 0.057 8)Accent
- #98b6c9oklch(76.0% 0.043 236)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | proxima-nova | 72px | 700 | 1.22 | 0 | Aa Bb Cc |
| h2 | proxima-nova | 56px | 700 | 1.14 | 0 | Aa Bb Cc |
| h3 | proxima-nova | 32px | 700 | 1.13 | 0 | Aa Bb Cc |
| body | proxima-nova | 20px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | proxima-nova | 14px | 600 | 1.71 | 0 | Aa Bb Cc |
Max content width 1250px
:root {
--color-dominant: #e66b40;
--color-surface: #871812;
--color-ink: #97edec;
--color-accent: #9c7077;
--color-detail: #98b6c9;
}
/* CSS variables exposed by source */
:root {
--font-size-xl: 3.2rem;
--font-size-sm: 1.8rem;
--font-size-xs: 1.6rem;
--font-size-3xl: 5.6rem;
--font-size-lg: 2.4rem;
--font-size-2xs: 1.2rem;
--font-size-4xl: 7.2rem;
--font-size-md: 2rem;
--font-size-2xl: 4rem;
--line-height-xs: 2rem;
--line-height-md: 3.6rem;
--line-height-xl: 6.4rem;
--line-height-2xs: 1.6rem;
--line-height-lg: 4.8rem;
--line-height-2xl: 8.8rem;
--line-height-sm: 2.8rem;
}Drop-in prompt
Build a landing page in the visual style of Workable.
Reference design system (extracted from the live site):
- Palette: #e66b40, #871812, #97edec, #9c7077, #98b6c9
- Typefaces: proxima-nova, Arial
- 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/workable-com
