Lusion — About
Photographic
Loading
Basicagency
Soft, muted earth tones whisper across a spacious layout, anchored by a relaxed, humanist sans-serif.
Click any value to copy. Roles are suggestions, not gospel.
- #ac5c36oklch(56.2% 0.117 45)Dominant
- #783418oklch(41.3% 0.103 41)Surface
- #dfb09aoklch(79.4% 0.063 46)Ink
- #916857oklch(55.5% 0.059 43)Accent
- #ccad96oklch(76.9% 0.048 59)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | SctoGroteskA | 42px | 700 | 1.1 | -2.1px | Aa Bb Cc |
| h3 | SctoGroteskA | 38px | 400 | 1.1 | -1.33px | Aa Bb Cc |
| body | SctoGroteskA | 18px | 400 | 1.4 | -0.18px | Aa Bb Cc |
| caption | SctoGroteskA | 14px | 400 | 1.14 | -0.28px | Aa Bb Cc |
| button | SctoGroteskA | 18px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ac5c36;
--color-surface: #783418;
--color-ink: #dfb09a;
--color-accent: #916857;
--color-detail: #ccad96;
}
/* CSS variables exposed by source */
:root {
--font-weight-h5: 700;
--font-weight-h6: 400;
--font-weight-bold: 700;
--font-weight-regular: 300;
--font-size-h6: 2.2rem;
--font-weight-h4: 700;
--background-color: #f4f4f4ff;
--font-weight-h3: 400;
--font-size-small: 1.4rem;
--font-size-h1: 6.25vw;
--font-size-h4: 2.8rem;
--font-size-large: 2.2rem;
--font-size-h5: 2.2rem;
--text-color: #252422ff;
--font-family: "SctoGroteskA",sans-serif;
--font-weight-h1: 700;
--font-weight-h2: 700;
--font-size-body: 1.8rem;
--font-size-h2: 4.2rem;
--font-size-h3: 3.8rem;
--font-weight-medium: 400;
--bd-color-base-grey-400: #5e5e5e;
--header-height: 12.8rem;
--bd-time-transition-150: 0.15s;
--bd-color-background-button-tertiary-disabled: rgba(249,205,205,0.25);
--bd-layout-z-index-z-9: 900;
--bd-size-line-height-mobile-large: 2.4rem;
--bd-size-font-md: 1.8rem;
--bd-color-text-button-tertiary-base: #252422;
--bd-color-text-button-secondary-hover: #252422;
--bd-color-brand-primary-grey: #f4f4f4;
--line-height-body: 1.4;
--bd-size-line-height-desktop-large: 2.4rem;
--bd-size-grid-padding-mobile: 5.4vw;
--caseStudy-meta-bar: 8.5rem;
--bd-layout-z-index-z-2: 200;
--bd-size-font-xxl: 2.4rem;
--bd-color-background-soundcloud-player-controls: #252422;
--bd-size-spacing-metabar-mobile: 6rem;
--bd-color-text-footer-inverse: #252422;
--bd-color-base-grey-800: #252422;
--bd-size-spacing-section-variable-sm: 7.8vw;
--bd-layout-z-index-z-neg-1: -100;
--bd-size-spacing-section-page-desktop: 12.5vw;
--bd-layout-z-index-z-5: 500;
--bd-color-border-button-secondary-active: rgba(255,255,255,0.8);
--bd-size-spacing-section-intro-sm-mobile: 6rem;
--bd-color-text-base: #252422;
--bd-size-spacing-section-thinking-mobile: 12.5vw;
--bd-time-delay-500: 0.5s;
--bd-color-base-red-50: #f9cdcd;
--bd-size-line-height-desktop-xs: 1.2rem;
--bd-color-text-button-primary-hover: #ffffff;
--bd-time-transition-1000: 1s;
--bd-size-font-6xl: 4rem;
--line-height-h1: 0.9;
--bd-size-font-sm: 1.6rem;
--bd-time-delay-375: 0.38s;
--bd-size-line-height-desktop-small: 1.4rem;
--grid-padding: 8rem;
}Drop-in prompt
Build a landing page in the visual style of Basicagency.
Reference design system (extracted from the live site):
- Palette: #ac5c36, #783418, #dfb09a, #916857, #ccad96
- Typefaces: SctoGroteskA
- 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/basicagency-com--blog-basic-expands-the-executive-team
