Alloy
Feature Stack
Loading
Zendesk
Deep ochre and charcoal, precise sans serif, expansive negative space fostering focused clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #ce6c0foklch(63.3% 0.153 55)Dominant
- #57330aoklch(35.8% 0.074 64)Surface
- #d3f179oklch(91.2% 0.150 121)Ink
- #978c62oklch(63.9% 0.060 95)Accent
- #d4b09doklch(78.4% 0.050 49)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Vanilla Sans | 14px | 700 | 1.3 | 0.75px | Aa Bb Cc |
| h2 | Vanilla Sans | 18px | 500 | 1.28 | 0 | Aa Bb Cc |
| h3 | Vanilla Sans | 26px | 500 | 1.25 | 0 | Aa Bb Cc |
| body | Vanilla Sans | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Vanilla Sans | 16px | 600 | 1.44 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ce6c0f;
--color-surface: #57330a;
--color-ink: #d3f179;
--color-accent: #978c62;
--color-detail: #d4b09d;
}
/* CSS variables exposed by source */
:root {
--space-contentMarginMd: 48px;
--space-globalPadding: 24px;
--space-contentMarginSm: 24px;
--space-sectionPadding: 88px;
--space-contentMarginLg: 64px;
--space-modalPaddingHorizontal: 40px;
--space-textMarginLg: 24px;
--radius: 20px;
--space-scrollPadding: 90px;
--space-sectionPaddingHorizontal: 24px;
--space-textMarginMd: 16px;
--space-buttonMargin: 32px;
--space-linkMarginSm: 16px;
--space-textMarginSm: 8px;
--space-tabletExtraPadding: 0px;
--space-space: 24px;
--space-sectionPaddingVertical: 88px;
--space-linkMarginMd: 24px;
--contentWidth: 1150px;
}Drop-in prompt
Build a landing page in the visual style of Zendesk.
Reference design system (extracted from the live site):
- Palette: #ce6c0f, #57330a, #d3f179, #978c62, #d4b09d
- Typefaces: Vanilla Sans
- 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/zendesk-com
