Lusion — About
Photographic
Loading
Index — Adcker
Crisp, stark black and white, bold sans-serifs asserting a confident, minimalist presence.
Click any value to copy. Roles are suggestions, not gospel.
- #905c40oklch(52.5% 0.080 49)Dominant
- #cca484oklch(74.7% 0.065 60)Surface
- #5b3a28oklch(38.3% 0.055 49)Ink
- #9c897aoklch(64.3% 0.032 60)Accent
- #b1bcc4oklch(78.9% 0.017 239)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | nhm | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
| h2 | nhm | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | psl | 34px | 400 | 1.2 | -0.516px | Aa Bb Cc |
| body | nhm | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #905c40;
--color-surface: #cca484;
--color-ink: #5b3a28;
--color-accent: #9c897a;
--color-detail: #b1bcc4;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--swiper-navigation-size: 44px;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the global-styles printed at wp_footer.";
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Index — Adcker.
Reference design system (extracted from the live site):
- Palette: #905c40, #cca484, #5b3a28, #9c897a, #b1bcc4
- Typefaces: nhm
- Macrostructure: Index-First
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/adcker-com
