Magnumphotos
Specimen
Loading
Huge | A design and technology company
Deep, cool charcoal - crisp geometric type floating in vast, hushed, digital space.
Click any value to copy. Roles are suggestions, not gospel.
- #ec198eoklch(62.2% 0.246 355)Dominant
- #ec83b4oklch(73.8% 0.140 352)Surface
- #97205eoklch(46.0% 0.163 354)Ink
- #8d8269oklch(61.0% 0.038 87)Accent
- #b9c0c2oklch(80.3% 0.008 217)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Monument Grotesk | 52px | 400 | 0.92 | -1.56px | Aa Bb Cc |
| h2 | Monument Grotesk | 52px | 400 | 0.92 | -1.56px | Aa Bb Cc |
| h3 | Monument Grotesk | 28px | 400 | 1.14 | -0.84px | Aa Bb Cc |
| body | Monument Grotesk | 18px | 400 | 1.11 | 0 | Aa Bb Cc |
| button | Monument Grotesk | 20px | 400 | 1.2 | -0.6px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ec198e;
--color-surface: #ec83b4;
--color-ink: #97205e;
--color-accent: #8d8269;
--color-detail: #b9c0c2;
}
/* CSS variables exposed by source */
:root {
--font-monumentGrotesk: "__fontMonumentGrotesk_0b82bf","__fontMonumentGrotesk_Fallback_0b82bf";
--tw-ring-offset-shadow: 0 0 #0000;
--leva-sizes-checkboxSize: 16px;
--leva-borderWidths-active: 1px;
--leva-colors-highlight3: #fefefe;
--tw-ring-shadow: 0 0 #0000;
--leva-fontWeights-folder: normal;
--leva-radii-sm: 3px;
--navigation-mobile-top-distance: 20px;
--leva-colors-elevation1: #292d39;
--leva-radii-lg: 10px;
--leva-sizes-joystickHeight: 100px;
--leva-colors-folderTextColor: #fefefe;
--leva-fontSizes-root: 11px;
--leva-space-colGap: 7px;
--navigation-desktop-top-distance: 30px;
--leva-colors-accent1: #0066dc;
--xxl-screen: 1536;
--leva-colors-elevation2: #181c20;
--leva-space-md: 10px;
--leva-fonts-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
--tw-border-spacing-x: 0;
--leva-radii-xs: 2px;
--tw-scale-y: 1;
--navigation-desktop-height: 80px;
--leva-colors-folderWidgetColor: #8c92a4;
--section-spacing-outer: 30px;
--tw-ring-color: rgba(59,130,246,.5);
--leva-colors-accent2: #007bff;
--edge-sticky-nav-width: 2378px;
--leva-sizes-colorPickerWidth: 160px;
--leva-colors-highlight2: #8c92a4;
--tw-translate-y: 0;
--leva-sizes-rootWidth: 280px;
--leva-sizes-joystickWidth: 100px;
--tw-rotate: 0;
--leva-sizes-scrubberWidth: 8px;
--leva-fontWeights-button: normal;
--tw-ring-offset-color: #fff;
--lg-screen: 1024;
--leva-borderWidths-hover: 1px;
--leva-colors-elevation3: #373c4b;
--tw-skew-x: 0;
--leva-sizes-folderTitleHeight: 20px;
--leva-colors-highlight1: #535760;
--leva-shadows-level2: 0 4px 14px #00000033;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--leva-colors-toolTipBackground: #fefefe;
--tw-ring-offset-width: 0px;
--leva-sizes-titleBarHeight: 39px;
--leva-borderWidths-root: 0px;
--leva-sizes-scrubberHeight: 16px;
--tw-scroll-snap-strictness: proximity;
--leva-borderWidths-focus: 1px;
--leva-colors-toolTipText: #181c20;
--leva-space-sm: 6px;
--tw-scale-x: 1;
--leva-fontWeights-label: normal;
--leva-sizes-imagePreviewWidth: 160px;
}Drop-in prompt
Build a landing page in the visual style of Huge | A design and technology company.
Reference design system (extracted from the live site):
- Palette: #ec198e, #ec83b4, #97205e, #8d8269, #b9c0c2
- Typefaces: Monument Grotesk
- 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/hugeinc-com
