Work
Specimen
Deep crimson shadows embrace crisp, stark typography in a spacious, serious void.




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 |
|---|---|---|---|---|---|---|
| h1 | LocomotiveNew | 70px | 400 | 1.1 | 0 | Aa Bb Cc |
| h2 | HelveticaNowDisplay | 26px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | HelveticaNowDisplay | 15px | 400 | 1.3 | 0 | Aa Bb Cc |
| body | HelveticaNowDisplay | 15px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | HelveticaNowDisplay | 26px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f71707;
--color-surface: #7d0c04;
--color-ink: #fa867e;
--color-accent: #7c8484;
--color-detail: #b0d1d4;
}
/* CSS variables exposed by source */
:root {
--border: solid 2px;
--spacing-enormous-mobile: 140;
--spacing-small-mobile: 30;
--spacing-tiny-mobile: 20;
--spacing-micro: 14;
--spacing-large: 80;
--spacing-medium: 40;
--color-bg: #FFFFFF;
--font-size-h2: 1.7333333333rem;
--font-size-h3: 1.4666666667rem;
--spacing-micro-mobile: 8;
--spacing-huge: 200;
--color: #000000;
--spacing-large-mobile: 52;
--font-size-h1: 4.6666666667rem;
--spacing-big: 150;
--spacing-medium-mobile: 40;
--font-size-h4: 1.3333333333rem;
--spacing-big-mobile: 80;
--font-size-h5: 1.2rem;
--spacing-tiny: 20;
--font-size-medium: 1.7333333333rem;
--spacing-enormous: 250;
--font-size-h6: 1.0666666667rem;
--border-size: 2px;
--spacing-huge-mobile: 100;
--font-size: 15px;
--font-size-huge: 7.6388888889vw;
--spacing-small: 30;
--cc-btn-primary-hover-border-color: #000;
--header-height: 4rem;
--cc-bg: #fff;
--cc-btn-primary-hover-color: #fff;
--cc-cookie-category-block-border: #f0f4f7;
--cc-toggle-readonly-bg: #d5dee2;
--cc-overlay-bg: rgba(0,0,0,.65);
--cc-modal-transition-duration: .25s;
--cc-btn-secondary-bg: #eaeff2;
--cc-btn-primary-border-color: #30363c;
--cc-toggle-off-knob-bg: #fff;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-cookie-category-block-hover-bg: #e9eff4;
--cc-pm-toggle-border-radius: 4em;
--about-head-content-offset-vh: 0.15;
--cc-modal-border-radius: .5rem;
--cc-cookie-category-block-hover-border: #e9eff4;
--cc-secondary-color: #5e6266;
--cc-footer-border-color: #e4eaed;
--cc-btn-primary-bg: #30363c;
--head-padding-vh: 0.25;
--cc-btn-secondary-hover-color: #000;
--swiper-theme-color: #007aff;
--cc-btn-secondary-border-color: #eaeff2;
--cc-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--cc-toggle-on-knob-bg: #fff;
--cc-cookie-category-expanded-block-bg: transparent;
--vh: 9px;
--cc-btn-secondary-color: #2c2f31;
--cc-section-category-border: #f0f4f7;
--cc-toggle-readonly-knob-icon-color: #d5dee2;
}Drop-in prompt
Build a landing page in the visual style of Locomotive Ca.
Reference design system (extracted from the live site):
- Palette: #f71707, #7d0c04, #fa867e, #7c8484, #b0d1d4
- Typefaces: LocomotiveNew, HelveticaNowDisplay
- 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/locomotive-ca--en-work-populous