Arcway
Marquee Hero
Loading
Huts · About
Forest green sanctuary, elegant cream serifs floating in deep mossy silence
Click any value to copy. Roles are suggestions, not gospel.
- #a4bc71oklch(75.9% 0.103 123)Dominant
- #dceba6oklch(91.2% 0.091 118)Surface
- #54742coklch(51.8% 0.107 130)Ink
- #7c9c54oklch(65.1% 0.105 129)Accent
- #c7ccbcoklch(83.7% 0.023 121)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | HW Cigars | 56px | 400 | 1.1 | -1.12px | Aa Bb Cc |
| h3 | HW Cigars | 56px | 400 | 1.1 | -1.12px | Aa Bb Cc |
| body | ABC Walter Neue | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | ABC Walter Neue | 14px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a4bc71;
--color-surface: #dceba6;
--color-ink: #54742c;
--color-accent: #7c9c54;
--color-detail: #c7ccbc;
}
/* CSS variables exposed by source */
:root {
--cc-cookie-category-expanded-block-bg: transparent;
--header-height: 86px;
--cc-btn-secondary-color: #2c2f31;
--cc-section-category-border: #f0f4f7;
--cc-webkit-scrollbar-bg: #f0f4f7;
--cc-bg: #fff;
--cc-btn-primary-hover-border-color: #000;
--cc-btn-secondary-hover-bg: #d4dae0;
--cc-toggle-readonly-knob-icon-color: #d5dee2;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-bg: #000;
--cc-footer-color: #5e6266;
--cc-cookie-category-block-border: #f0f4f7;
--cc-toggle-enabled-icon-color: #fff;
--cc-toggle-readonly-bg: #d5dee2;
--cc-overlay-bg: #000000a6;
--cc-toggle-disabled-icon-color: #fff;
--cc-webkit-scrollbar-hover-bg: #000;
--bp-desktop: 1440;
--cc-modal-transition-duration: .25s;
--cc-btn-secondary-hover-border-color: #d4dae0;
--cc-btn-secondary-bg: #eaeff2;
--cc-modal-margin: 1rem;
--cc-toggle-on-bg: #30363c;
--cc-separator-border-color: #f0f4f7;
--bp-tablet: 1100;
--cc-btn-border-radius: .4rem;
--bp-phone: 768;
--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;
--bp-mobile: 940;
--cc-footer-bg: #eaeff2;
--cc-z-index: 2147480000;
--cc-modal-border-radius: .5rem;
--cc-cookie-category-block-bg: #f0f4f7;
--cc-cookie-category-block-hover-border: #e9eff4;
--cc-secondary-color: #5e6266;
--cc-btn-primary-color: #fff;
--cc-toggle-readonly-knob-bg: #fff;
--cc-footer-border-color: #e4eaed;
--bp-mega: 1920;
--cc-btn-primary-bg: #30363c;
--bp-min: 375;
--cc-btn-secondary-hover-color: #000;
--cc-primary-color: #2c2f31;
--cc-toggle-off-bg: #667481;
--cc-link-color: #30363c;
--cc-btn-secondary-border-color: #eaeff2;
--grid-column-count: 12;
--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;
}Drop-in prompt
Build a landing page in the visual style of Huts · About.
Reference design system (extracted from the live site):
- Palette: #a4bc71, #dceba6, #54742c, #7c9c54, #c7ccbc
- Typefaces: HW Cigars, ABC Walter Neue
- Macrostructure: Marquee Hero
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/huts-com--about
