Fiddle.Digital Design Agency — Index
Specimen
Stark monochrome editorial, oversized bold serifs floating on clinical white space




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Angie Sans | 20px | 400 | 0.88 | -0.4px | Aa Bb Cc |
| body | Angie Sans | 13px | 400 | 1 | 0 | Aa Bb Cc |
| button | Angie Sans | 24px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 2064px
:root {
--color-dominant: #7f7f7f;
--color-surface: #bcbcbc;
--color-ink: #424242;
--color-accent: #7c7c84;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--spacing--xxs<deleted|variable-35ee9841-a149-0ff7-9a42-be0f6840c3c6>: .5rem;
--spacing--tiny: 1.25rem;
--border-radius--medium: 2.5rem;
--text-size--small: 1rem;
--spacing--md: 5rem;
--text-size--tiny: .8125rem;
--spacing--xxl: 12.5rem;
--font-to: 16;
--font-from: 10;
--spacing--xxs: .4rem;
--spacing--sm: 2.5rem;
--spacing--xl: 7.5rem;
--font-family--angie-sans: "Angie Sans",Georgia,sans-serif;
--text-size--medium-large: 1.625rem;
--spacing--xs: .8rem;
--border-radius--small: .75rem;
--text-size--large: 2rem;
--border-radius--rounded: 999rem;
--text-size--medium: 1.125em;
--border-radius--large: 4rem;
--heading--h5: 1.625rem;
--base: calc((10 - calc(991 / 100) * calc((16 - 10) / (calc(1920 / 100) - calc(991 / 100)))) / 16);
--dialog-animation-speed: 0.4s;
--_oliver-gareis---copy-large: 1.375rem;
--_theme---color--page-transition-overlay: #000;
--_theme---copy-small: 1rem;
--_project---button-inner-top-padding: 1.4em;
--_color---accent-red: #ff5c80;
--heading--h1-line-height: .86;
--heading--h2-line-height: .88;
--_color---background-light-1: white;
--heading--h4-line-height: 1.1;
--_color---accent-yellow: #00c410;
--_theme---color--sticky-nav-background-color: white;
--heading--h4: 2rem;
--vw-to: calc(1920 / 100);
--_oliver-gareis---color--background-light-1: #f7f7f7;
--_project---button-inner-side-padding: 2.5em;
--_theme---color--sticky-nav-divider-color: #ececec;
--heading--h6-line-height: .95;
--container--small: 50rem;
--_color---copy-grey: #8f8f8f;
--heading--heading-letter-spacing: -.02em;
--_color---accent-green: #00c410;
--_theme---color--background-light-1: white;
--_theme---copy-medium: 1.125em;
--heading--h3: 2.625rem;
--_color---background-dark-1: #000;
--_color---background-dark-2: #353535;
--_color---error-red-light: color-mix(in hsl,#ff2828/**/18%,white 0%);
--_oliver-gareis---text-indend-distance: 4.18rem;
--container--page-padding: 3.125rem;
--heading--h6: 1.375rem;
--_color---background-light-2: whitesmoke;
--_theme---text-indend-distance: 4.5rem;
--_color---copy-dark: #000;
--_theme---copy-tiny: .8125rem;
--_color---white<deleted|variable-da572e2e-08d8-ca21-7af8-4330f08a8a56>: white;
--heading--h3-line-height: 1;
--heading--h5-line-height: 1.23;
}Drop-in prompt
Build a landing page in the visual style of Oliver Gareis.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #bcbcbc, #424242, #7c7c84, #bcbcbc
- Typefaces: Angie Sans
- 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/olivergareis-com