Bbcearth
Photographic




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 | Archivo Narrow Variable | 16px | 700 | 1 | 0 | Aa Bb Cc |
| h3 | Archivo Narrow Variable | 50px | 400 | 1 | 0 | Aa Bb Cc |
| body | Archivo Variable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Archivo Narrow Variable | 24px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e0f804;
--color-surface: #703305;
--color-ink: #cca366;
--color-accent: #ad7f51;
--color-detail: #bab0a5;
}
/* CSS variables exposed by source */
:root {
--spacing-same-as-3xs: clamp(1rem, 1vw, 1vw);
--text-2xl: clamp(2.5rem, calc(4vw * 1), 4rem);
--text-3xs: clamp(.875rem, calc(1.25vw * 1), 1.25rem);
--text-lg: clamp(1.75rem, calc(3vw * 1), 3rem);
--text-fluid-3xl: clamp(3rem, calc(4.5vw * 1), 4.5rem);
--spacing-same-as-2xs: clamp(1.25rem, 1.3vw, 1.3vw);
--text-md: clamp(1.5rem, calc(2.5vw * 1), 2.5rem);
--font-secondary: "Archivo Narrow Variable", sans-serif;
--color-secondary: #000000;
--text-fluid-3xs: clamp(.875rem, calc(1.25vw * 1), 1.25rem);
--text-fluid-2xs: clamp(1rem, calc(1.5vw * 1), 1.5rem);
--text-sm: clamp(1.25rem, calc(2vw * 1), 2rem);
--color-copy: #000000;
--text-fluid-md: clamp(1.5rem, calc(2.5vw * 1), 2.5rem);
--text-standfirst: clamp(1.75rem, calc(3vw * 1), 2.25rem);
--text-fluid-xl: clamp(2rem, calc(3.5vw * 1), 3.5rem);
--font-primary: "Archivo Variable", sans-serif;
--text-fluid-xs: clamp(1.125rem, calc(1.75vw * 1), 1.75rem);
--color-background: #f2f2f2;
--color-primary: #e0ff00;
--text-2xs: clamp(1rem, calc(1.5vw * 1), 1.5rem);
--text-fluid-4xs: clamp(.75rem, calc(1vw * 1), 1rem);
--text-3xl: clamp(3rem, calc(4.5vw * 1), 4.5rem);
--text-xs: clamp(1.125rem, calc(1.75vw * 1), 1.75rem);
--font-copy: "GT Alpina", serif;
--text-fluid-lg: clamp(1.75rem, calc(3vw * 1), 3rem);
--text-fluid-2xl: clamp(2.5rem, calc(4vw * 1), 4rem);
--spacing-same-as-xs: clamp(1.5rem, 1.8vw, 1.8vw);
--spacing-same-as-md: clamp(1.9rem, 2.4vw, 2.4vw);
--text-xl: clamp(2rem, calc(3.5vw * 1), 3.5rem);
--text-prose: clamp(1.07rem, calc(1.75vw * 1), 1.375rem);
--text-fluid-sm: clamp(1.25rem, calc(2vw * 1), 2rem);
--text-4xs: clamp(.75rem, calc(1vw * 1), 1rem);
--a11y-border: #e5e7eb;
--tw-ring-offset-shadow: 0 0 #0000;
--header-height: 56px;
--tw-ring-shadow: 0 0 #0000;
--sticky-billboard-height: 0px;
--a11y-primary: #2563eb;
--line-height-standfirst: 1.1;
--a11y-text: black;
--line-height-lg: .95;
--line-height-prose: 1.25;
--tw-border-spacing-x: 0;
--a11y-z-index: 9999;
--a11y-success: #10b981;
--tw-scale-y: 1;
--a11y-bg: white;
--line-height-md: 1;
--tw-ring-color: rgb(59 130 246 / .5);
--a11y-contrast-link: #2563eb;
--safe-sticky-ad-top: calc(56px + 0px + 32px);
--tw-translate-y: 0;
--a11y-radius: 8px;
--line-height-2xl: 1;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--a11y-contrast-bg: white;
--a11y-shadow: rgba(0, 0, 0, 0.1);
}Drop-in prompt
Build a landing page in the visual style of Huckmag.
Reference design system (extracted from the live site):
- Palette: #e0f804, #703305, #cca366, #ad7f51, #bab0a5
- Typefaces: Archivo Narrow Variable, Archivo Variable
- Macrostructure: Photographic
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/huckmag-com