Magnumphotos
Specimen
Loading
Siena Film Foundation
Soft ochre whispers on aged paper, bold serif anchors in expansive, quiet space.
Click any value to copy. Roles are suggestions, not gospel.
- #d2792coklch(66.2% 0.141 57)Dominant
- #fbf3ecoklch(96.8% 0.013 64)Surface
- #6d3f17oklch(41.6% 0.083 58)Ink
- #84847coklch(61.1% 0.012 107)Accent
- #bcbcb4oklch(79.3% 0.011 107)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Neue Brucke | 90px | 400 | 0.77 | -2.688px | Aa Bb Cc |
| h3 | Neue Brucke | 26px | 400 | 0.9 | 0 | Aa Bb Cc |
| body | NB International | 20px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | NB International | 20px | 400 | 1.3 | 0 | Aa Bb Cc |
:root {
--color-dominant: #d2792c;
--color-surface: #fbf3ec;
--color-ink: #6d3f17;
--color-accent: #84847c;
--color-detail: #bcbcb4;
}
/* CSS variables exposed by source */
:root {
--text-h4: 2rem;
--text-bl: 1.05rem;
--text-h5: 1.6rem;
--text-h1: 5.6rem;
--text-eyeb: .8rem;
--text-h2: 3.2rem;
--text-h3: 3rem;
--rounded-full: 100rem;
--text-eyeb-small: .6rem;
--rounded-md: 12px;
--rounded-xs: 6px;
--white--hole-size: .6rem;
--gold: #ffc700;
--easeOutBack: cubic-bezier(.175, 0, .77, 1);
--panels-duration: .9s;
--sgx: 2.1rem;
--easeOutQuint: cubic-bezier(.23, 1, .32, 1);
--customEase: cubic-bezier(.19, 1, .22, 1);
--gy: 3rem;
--roll-gx: 3.8rem;
--black: black;
--col--gray: #bababa;
--white: #faf7ef;
--leading-md: .21rem;
--gray: #222;
--white--30: #faf7ef4d;
--red: #ff0f00;
--easeOut: cubic-bezier(.77, 0, .175, 1);
--gutter: 1.2rem;
--100vh: 900px;
--gx: 3rem;
}Drop-in prompt
Build a landing page in the visual style of Siena Film Foundation.
Reference design system (extracted from the live site):
- Palette: #d2792c, #fbf3ec, #6d3f17, #84847c, #bcbcb4
- Typefaces: Neue Brucke, NB International
- 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/siena-film
