Siena Film Foundation
Specimen
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #b26046oklch(57.9% 0.113 38)Dominant
- #f0e7ddoklch(93.2% 0.017 71)Surface
- #5d2812oklch(34.7% 0.085 42)Ink
- #836a55oklch(54.3% 0.045 62)Accent
- #c7b691oklch(78.1% 0.054 86)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Graphik Web | 16px | 400 | 1 | 0 | Aa Bb Cc |
| h3 | Graphik Web | 28px | 600 | 1.15 | -0.56px | Aa Bb Cc |
| body | Graphik Web | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Graphik Web | 18px | 500 | 1.4 | -0.36px | Aa Bb Cc |
Max content width 1320px
:root {
--color-dominant: #b26046;
--color-surface: #f0e7dd;
--color-ink: #5d2812;
--color-accent: #836a55;
--color-detail: #c7b691;
}
/* CSS variables exposed by source */
:root {
--s-bg-btn-bg-disabled: #b2b2b2;
--s-bg-color: #1a1a1a;
--vh: 9px;
--s-bg-btn-color: #fff;
--s-bg-btn-bg-active: #042165;
--s-bg-form-toggle-bg-active: #1a47b8;
--s-bg-rules: #e6e6e6;
--s-bg-form-toggle-border-inactive: #5b5b5b;
--s-bg-form-toggle-border-active: #1a47b8;
--s-bg-btn-bg-hover: #0c3392;
--s-bg-btn-bg: #1a47b8;
--s-bg-form-toggle-bg-inactive: #5b5b5b;
--s-bg-accent: #fff;
--s-bg-bg: #fff;
}Drop-in prompt
Build a landing page in the visual style of Getty: Resources for Visual Art and Cultural Heritage.
Reference design system (extracted from the live site):
- Palette: #b26046, #f0e7dd, #5d2812, #836a55, #c7b691
- Typefaces: Graphik Web
- Macrostructure: Specimen
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/getty-edu
