Remixes of summit-floor34.higgsfield.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Summit-floor34
description: |
Summit / Floor 34 embodies a luxury expedition aesthetic through an elegant,
deliberately restrained interface. The design evokes the atmosphere of an
upscale building lobby or high-rise arrival experience—rich earth tones, warm
metallics, and generous whitespace create an environment of calm ascent. The
palette privileges warmth and depth, with sophisticated typography and
cinematic composition driving the narrative of "dressing for the ascent."
Every element speaks to verticality, progression, and refined craftsmanship.
The visual language is deliberately minimal: sharp corners, high contrast
text, and deliberate use of negative space reinforce exclusivity and
intentionality.
source:
url: "https://summit-floor34.higgsfield.app"
pagesAnalyzed: 1
extractedAt: 2026-10-14
tokensMeasured: true
colors:
primary: "#4C503D"
accent: "#30251C"
canvas: "#211912"
on-primary: "#F4F0E9"
ink: "#FFFFFF"
body: "#F4F0E9"
muted: "#EEE7DD"
faint: "#C5BCB0"
accent-1: "#4B392B"
accent-2: "#131416"
typography:
display-xxl:
fontFamily: Archivo
fontSize: 345.6px
fontWeight: 900
lineHeight: 0.8
letterSpacing: -25.92px
display-xl:
fontFamily: Archivo
fontSize: 322.56px
fontWeight: 900
lineHeight: 0.83
letterSpacing: -29.03px
display-lg:
fontFamily: Archivo
fontSize: 288px
fontWeight: 900
lineHeight: 0.79
letterSpacing: -23.04px
display-md:
fontFamily: Archivo
fontSize: 129.6px
fontWeight: 900
lineHeight: 0.87
letterSpacing: -7.78px
display-sm:
fontFamily: Archivo
fontSize: 86.4px
fontWeight: 700
lineHeight: 0.94
letterSpacing: -3.89px
display-xs:
fontFamily: Archivo
fontSize: 77.76px
fontWeight: 800
lineHeight: 1
letterSpacing: -4.67px
heading-md:
fontFamily: Archivo
fontSize: 33.12px
fontWeight: 900
lineHeight: 1.5
letterSpacing: -1.7px
heading-sm:
fontFamily: Archivo
fontSize: 17px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.4px
body-xl:
fontFamily: Bodoni
fontSize: 26px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: Bodoni
fontSize: 19.44px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Bodoni
fontSize: 19.2px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
body-sm:
fontFamily: Archivo
fontSize: 16px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
body-xs:
fontFamily: Archivo
fontSize: 12px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
body-xs-tight:
fontFamily: Archivo
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
nav:
fontFamily: Archivo
fontSize: 11px
fontWeight: 400
lineHeight: 1
letterSpacing: 2px
textTransform: uppercase
button-md:
fontFamily: Archivo
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: Archivo
fontSize: 10px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 1.4px
textTransform: uppercase
caption-sm:
fontFamily: Archivo
fontSize: 11px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm-uppercase:
fontFamily: Archivo
fontSize: 11px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 2px
textTransform: uppercase
caption-xs:
fontFamily: Archivo
fontSize: 10px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: Archivo
fontSize: 10px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 2.6px
textTransform: uppercase
rounded:
none: 0px
spacing:
xxs: 4px
xs: 12px
sm: 24px
md: 28px
lg: 32px
xl: 40px
xxl: 44px
xxxl: 48px
section: 56px
band: 60px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FCFCFB"
surface: "#F2F2F1"
surfaceRaised: "#EAEAE9"
text: "#141413"
textMuted: "#6B6B6A"
border: "#D9D9D8"
accent: "#4C503D"
accentFg: "#FFFFFF"
focusRing: "#4C503D"
elevation: shadow
dark:
bg: "#211912"
surface: "#201811"
surfaceRaised: "#322A24"
text: "#FFFFFF"
textMuted: "#F4F0E9"
border: "#3C352E"
accent: "#6D7357"
accentFg: "#FFFFFF"
focusRing: "#4C503D"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgba(24, 16, 11, 0.4), rgba(0, 0, 0, 0))"
- context: section
kind: radial
value: "radial-gradient(rgb(48, 37, 28), rgb(33, 25, 18))"
components:
button-filled:
typography: "{typography.caption-sm}"
textColor: "{colors.canvas}"
height: 73px
padding: "20px 26px 20px 26px"
backgroundColor: "{colors.on-primary}"
button-filled-sm:
typography: "{typography.button-md}"
textColor: "{colors.canvas}"
height: 54px
padding: "15px 15px 15px 15px"
backgroundColor: "{colors.on-primary}"
button-outline:
typography: "{typography.body-xs-tight}"
textColor: "{colors.body}"
border: "1px solid {colors.on-primary}"
height: 60px
padding: "20px 32px 20px 32px"
button-text:
typography: "{typography.nav}"
textColor: "{colors.body}"
height: 39px
padding: "14px 0px 14px 0px"
button-text-sm:
typography: "{typography.heading-sm}"
textColor: "{colors.body}"
height: 25.5px
card:
typography: "{typography.button-md}"
textColor: "{colors.ink}"
card-sm:
typography: "{typography.button-md}"
textColor: "{colors.body}"
navigation:
typography: "{typography.nav}"
textColor: "{colors.body}"
height: 40px
footer:
typography: "{typography.button-md}"
textColor: "{colors.body}"
padding: "55px 57.6px 0px 57.6px"
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.heading-md}"
textColor: "{colors.body}"
link-sm:
typography: "{typography.nav}"
textColor: "{colors.body}"
padding: "14px 0px 14px 0px"
states:
other-hover:
target: other
state: hover
filter: "brightness(1.04)"
button-disabled:
target: button
state: disabled
opacity: 0.5
other-focus-visible:
target: other
state: focus-visible
opacity: 1
outline: none
button-active:
target: button
state: active
transform: "scale(0.96)"
button-focus-visible:
target: button
state: focus-visible
outline: none
input-focus-visible:
target: input
state: focus-visible
outline: none
nav-hover:
target: nav
state: hover
opacity: 1
input-disabled:
target: input
state: disabled
opacity: 0.4
other-disabled:
target: other
state: disabled
opacity: 0.5
breakpoints:
- width: 375
containerWidth: 330
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: false
headingPx: 94
bodyPx: 16
sectionPaddingX: 23
- width: 768
containerWidth: 676
gridColumns: 2
navLinksVisible: 2
menuToggleVisible: false
headingPx: 192
bodyPx: 16
sectionPaddingX: 46
- width: 1024
containerWidth: 942
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 205
bodyPx: 16
sectionPaddingX: 41
- width: 1280
containerWidth: 1178
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 256
bodyPx: 16
sectionPaddingX: 51
- width: 1440
containerWidth: 1325
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 288
bodyPx: 16
sectionPaddingX: 58
coverage:
statesFound: 62
gradientsFound: 2
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Summit / Floor 34 embodies a luxury expedition aesthetic through an elegant, deliberately restrained interface. The design evokes the atmosphere of an upscale building lobby or high-rise arrival experience—rich earth tones, warm metallics, and generous whitespace create an environment of calm ascent. The palette privileges warmth and depth, with sophisticated typography and cinematic composition driving the narrative of "dressing for the ascent." Every element speaks to verticality, progression, and refined craftsmanship. The visual language is deliberately minimal: sharp corners, high contrast text, and deliberate use of negative space reinforce exclusivity and intentionality.
Key Characteristics
{rounded.none}), no softening curves{colors.primary} — #4C503D): Used sparingly as the primary interactive and brand accent color; appears in CTAs and visual emphasis points. Earthy sage-brown that bridges warmth and sophistication.{colors.accent} — #30251C): Darker companion to the primary; used in hero bands and layered visual depth. Reinforces the warm, sunken aesthetic.{colors.accent-1} — #4B392B): Warm mid-brown with no assigned semantic role; available for texture and visual variation across backgrounds and blocks.{colors.accent-2} — #131416): Near-black decorative accent; used for contrast or visual layering where needed.{colors.canvas} — #211912): Default page background; rich, warm dark brown that anchors the entire interface and conveys luxury depth.{colors.ink} — #FFFFFF): Pure white used for headings and primary text; maximum contrast against dark canvas for commanding readability at display sizes.{colors.on-primary} — #F4F0E9): Warm cream used for body copy and labels on brand surfaces; softer than pure white, reducing eye strain on extended reading.{colors.muted} — #EEE7DD): Light warm gray for captions and secondary text; bridges between primary body and tertiary elements.{colors.faint} — #C5BCB0): Pale taupe for tertiary text and placeholder states; lowest contrast against canvas, used sparingly for de-emphasized content.No explicit border color palette extracted; interaction states and focus rings are managed through CSS custom properties and composited colors. See Component Stylings for specific border treatments.
Primary (Headings & Display): Archivo, sans-serif (fallback: system sans) Secondary (Body & Serif): Bodoni, serif (fallback: Georgia, serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Archivo | 345.6px | 900 | 0.80 | -25.92px | Extreme theatrical sizes; negative tracking is signature |
| Display XL | Archivo | 322.56px | 900 | 0.83 | -29.03px | Hero campaign headlines |
| Display LG | Archivo | 288px | 900 | 0.79 | -23.04px | Full-page hero text |
| Display MD | Archivo | 129.6px | 900 | 0.87 | -7.78px | Section headers; maintains tight tracking |
| Display SM | Archivo | 86.4px | 700 | 0.94 | -3.89px | Sub-hero text blocks |
| Display XS | Archivo | 77.76px | 800 | 1.00 | -4.67px | Compressed hero variants |
| Heading MD | Archivo | 33.12px | 900 | 1.50 | -1.7px | Prominent section titles |
| Heading SM | Archivo | 17px | 600 | 1.50 | -0.4px | Subsection labels and emphasis |
| Body XL | Bodoni | 26px | 400 | 1.50 | 0px | Feature text; serif warmth |
| Body LG | Bodoni | 19.44px | 400 | 1.50 | 0px | Narrative body copy (serif) |
| Body MD | Bodoni | 19.2px | 400 | 1.55 | 0px | Standard body text (serif) |
| Body SM | Archivo | 16px | 400 | 1.65 | 0px | Standard body sans-serif |
| Body XS | Archivo | 12px | 400 | 1.65 | 0px | Body copy; tighter line for compact layouts |
| Body XS Tight | Archivo | 12px | 400 | 1.50 | 0px | Links and compact text |
| Button MD | Archivo | 16px | 400 | 1.50 | 0px | Primary button label |
| Button SM | Archivo | 10px | 400 | 1.50 | 1.4px | Small button text, uppercase |
| Caption SM | Archivo | 11px | 400 | 1.50 | 0px | Image captions, metadata |
| Caption SM Uppercase | Archivo | 11px | 400 | 1.50 | 2px | Uppercase label text |
| Caption XS | Archivo | 10px | 400 | 1.50 | 0px | Smallest caption (rare) |
| Caption XS Uppercase | Archivo | 10px | 400 | 1.50 | 2.6px | Smallest uppercase label |
| Nav | Archivo | 11px | 400 | 1.00 | 2px | Navigation links, uppercase |
text-transform: uppercase) combined with expanded letter-spacing (2px, 2.6px) for UI clarity and hierarchy distinction.Button Filled (Primary Large)
{colors.on-primary} (#F4F0E9){colors.canvas} (#211912){typography.button-sm} (10px, weight 400, 1.5 line-height, 1.4px letter-spacing, uppercase)20px 26px73px227px0px{rounded.none} (0px)nonebrightness(1.04) filterscale(0.96) transforminset 0 0 0 var(--hf-border-width-thick) var(--hf-color-border-focus)Button Filled Small
{colors.on-primary} (#F4F0E9){colors.canvas} (#211912){typography.button-md} (16px, weight 400, 1.5 line-height)15px 15px54px151px0px{rounded.none} (0px)nonebrightness(1.04) filterscale(0.96) transformButton Outline
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.caption-sm} (11px, weight 400, 1.5 line-height)20px 32px60px152px1px solid {colors.on-primary} (#F4F0E9){rounded.none} (0px)noneborderColor shifts to var(--hf-color-border-strong)Button Text
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.caption-sm-uppercase} (11px, weight 400, 1.5 line-height, 2px letter-spacing, uppercase)14px 0px39px0px{rounded.none} (0px)nonecolor shifts to var(--hf-color-icon-primary)Button Text Small
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.heading-sm} (17px, weight 600, 1.5 line-height)0px25.5px0px{rounded.none} (0px)noneCard Default (Full-Width)
rgba(0, 0, 0, 0) (transparent){colors.ink} (#FFFFFF){typography.body-sm} (16px, weight 400, 1.65 line-height)0px1440px7020px0px{rounded.none} (0px)noneinset 0 0 0 var(--hf-border-width-thick) var(--hf-color-border-focus)Card Default Small
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.body-sm} (16px, weight 400, 1.65 line-height)0px491.094px750.281px0px{rounded.none} (0px)noneNo explicit form input styles extracted from the measured components. Input interaction states exist in the stylesheet (:focus-visible, :disabled) but visible component styling was not captured. See Known Gaps.
Navigation Default
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.nav} (11px, weight 400, 1.0 line-height, 2px letter-spacing, uppercase)0px40px233px0px{rounded.none} (0px)nonecolor shifts to var(--hf-color-text-primary) and backgroundColor shifts to var(--hf-color-overlay-hover)opacity: 1color shifts to var(--hf-color-text-primary)Footer Default
{colors.canvas} (#211912){colors.on-primary} (#F4F0E9){typography.body-sm} (16px, weight 400, 1.65 line-height)55px 57.6px 0px 57.6px424.328px1440px0px{rounded.none} (0px)noneLink Default (Large Heading)
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.heading-md} (33.12px, weight 900, 1.5 line-height, -1.7px letter-spacing)0px49.6875px153.125px0px{rounded.none} (0px)noneLink Default Small
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#F4F0E9){typography.caption-sm-uppercase} (11px, weight 400, 1.5 line-height, 2px letter-spacing, uppercase)14px 0px40px93px0px{rounded.none} (0px)noneThe spacing scale follows a 4px base unit, expanding in deliberate increments:
{spacing.xxs} = 4px — Fine-grain micro-spacing (internal element gaps){spacing.xs} = 12px — Compact element spacing{spacing.sm} = 24px — Standard inter-element spacing{spacing.md} = 28px — Medium section breathing room{spacing.lg} = 32px — Large element separation{spacing.xl} = 40px — Prominent spacing between major sections{spacing.xxl} = 44px — Extra-large section breaks{spacing.xxxl} = 48px — Generous spacing for dramatic effect{spacing.section} = 56px — Section-level padding and margins{spacing.band} = 60px — Full-width band padding1440px330px (mobile) to 1325px (1440px viewport)23px (375px viewport) to 58px (1440px viewport); section gutters expand with viewportWhitespace is used strategically to convey luxury and breathing room. Display typography is set on full-width backgrounds with minimal padding, allowing text to command the visual field. Body sections use generous vertical spacing ({spacing.section} and {spacing.band}) to separate narrative blocks. Horizontal padding increases proportionally with viewport width, preventing text from feeling cramped on large screens while maintaining visual hierarchy on mobile.
{rounded.none} = 0px — Universal across all interactive and decorative components; sharp, orthogonal corners are the system default and brand identityAll measured component roles (buttons, cards, badges, images) use {rounded.none}, reinforcing a geometric, architectural aesthetic.
No explicit border-width scale was extracted from measured components. Borders are applied on specific interactive states (focus rings, outlines) but are managed through CSS custom properties (--hf-border-width-thick, --hf-border-width-medium, --hf-border-width-thin) rather than a static pixel scale. See Known Gaps.
The Summit / Floor 34 system employs a color-blocking elevation strategy rather than multi-layered shadows. Depth is conveyed through strategic background color shifts, creating discrete visual tiers without reliance on shadow gradients.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | background: {colors.canvas} (#211912) | Default page surface; no shadow |
| Raised (Section Bands) | background: {colors.accent} (#30251C) or {colors.accent-1} (#4B392B) | Distinct content sections; achieved through background color contrast, not shadow |
| Overlay / Modal | Managed via z-index stacking and opacity blending; no explicit shadow data extracted | Floating content above page; see Z-index section |
Shadow Philosophy: The extraction revealed no multi-level box-shadow definitions—the system is fundamentally flat. Depth is achieved through color contrast and z-index layering, not shadow stacking. This aligns with the cinematic, architectural aesthetic: surfaces appear to be constructed from distinct material layers (fabric, metal, concrete) rather than floating in optical space.
Two decorative gradients are defined for visual texture:
linear-gradient(rgba(24, 16, 11, 0.4), rgba(0, 0, 0, 0)) — Soft fade-to-transparency for depth on top of images or backgroundsradial-gradient(rgb(48, 37, 28), rgb(33, 25, 18)) — Warm radial shift from medium to dark brown; used to add subtle dimensionality to hero sectionsExtracted interaction states reference var(--hf-opacity-disabled) and var(--hf-opacity-muted), but explicit pixel values were not captured in the token data. Common observed hover states include opacity: 0.85, opacity: 0.5 (disabled), and opacity: 1 (focus-active). See Known Gaps for full disabled and muted opacity scale.
The system defines two z-index families:
z-index: 1, 2, 3, 4, 5, 6 — Progressive stacking for standard page flow and overlaysz-index: 30 — Sub-menus and floated contentz-index: 90 — Modals, notifications, and top-level floating UIThe gap between dropdown (30) and premium overlays (90) allows for intermediate layering of toasts, popovers, and other mid-tier elements.
{rounded.none}) on all interactive and container elements; softness is not part of this system's vocabulary{typography.display-xl} through {typography.display-xs}); this extreme tracking is a signature visual trait and should be preserved exactly{colors.ink} (#FFFFFF) headings and {colors.canvas} (#211912) backgrounds for commanding readability23px to 58px) to accommodate scaling2px, 2.6px) to navigation and captions; this clarifies hierarchy and matches the geometric aestheticbrightness(1.04)) and active states as scale transforms (scale(0.96)); avoid color inversion{rounded.none} is universal and brand-defining-3.89px to -29.03px)30) and modal (90) tiers2px, 2.6px) is essential to visual clarity| Viewport Width | Content Column | Grid Columns | Nav Visible | Largest Heading | Body Font | Section Padding X |
|---|---|---|---|---|---|---|
| 375px | 330px | 2 | 1 link | 94px | 16px | 23px |
| 768px | 676px | 2 | 2 links | 192px | 16px | 46px |
| 1024px | 942px | 3 | 2 links | 205px | 16px | 41px |
| 1280px | 1178px | 3 | 2 links | 256px | 16px | 51px |
| 1440px | 1325px | 3 | 2 links | 288px | 16px | 58px |
Breakpoint Logic:
94px ({typography.display-sm})192px (~{typography.display-md})205px; horizontal padding compresses slightly to 41px288px ({typography.display-lg}); section padding grows to 58px to accommodate wider viewportsNo explicit minimum touch target sizes were extracted. Button heights measured (54px small, 73px large, 60px outline) exceed typical 44px iOS guidelines, and nav items measure 40px in height. See Known Gaps for formal touch target specification.
288px (1440px) to 94px (375px), maintaining readable hierarchy across all sizes23px (mobile) to 58px (desktop), keeping content readable and breathing room proportional330px (mobile) to 1325px (desktop), maintaining readable line lengths via proportional width scaling{colors.primary} — #4C503D) — Sage-brown for interactive emphasis{colors.canvas} — #211912) — Rich dark brown page base{colors.ink} — #FFFFFF) — Pure white for maximum contrast on display{colors.on-primary} — #F4F0E9) — Warm cream for readable body copy{colors.muted} — #EEE7DD) — Light gray for captions and metadata{colors.faint} — #C5BCB0) — Pale taupe for de-emphasized text{colors.accent} — #30251C) — Dark brown for hero bands and layered depth{colors.accent-1} — #4B392B) and Accent 2 ({colors.accent-2} — #131416) — Optional texture and contrast-3.89px to -29.03px); preserve exact values. Body text alternates between Bodoni serif (narrative warmth) and Archivo sans (UI clarity).0px radius ({rounded.none}); no exceptions. Buttons, cards, containers, and images are orthogonal and architectural.canvas → accent → accent-1), not layered shadows. Use z-index stacking (1–90) for floating content.23px (375px viewport) to 58px (1440px viewport); this proportion is critical for breathing room at scale.{colors.ink} (#FFFFFF) with {colors.canvas} (#211912) for headings; use {colors.on-primary} (#F4F0E9) for body text on dark backgrounds. Never reduce this contrast.brightness(1.04) filter; active states use scale(0.96) transform. Focus states add a border ring via inset 0 0 0 var(--hf-border-width-thick) var(--hf-color-border-focus).text-transform: uppercase with expanded letter-spacing (2px to 2.6px); this clarifies hierarchy and matches the geometric aesthetic.1–6 (page flow); dropdowns: 30 (sub-menus); premium overlays: 90 (modals, toasts). Intermediate values (7–29, 31–89) are reserved for popovers and alerts.{colors.accent-1} (#4B392B) and {colors.accent-2} (#131416) were measured but have no explicitly declared semantic purpose. They are available as decorative or contextual colors but should not be assumed to carry fixed UI meaning.--hf-border-width-thick, --hf-border-width-medium, --hf-border-width-thin) but the actual pixel values are not captured in the token data. Assume these are computed or aliased elsewhere; see interaction state rules in Component Stylings for actual behavior.var(--hf-opacity-disabled) and var(--hf-opacity-muted) appear in interaction states, but exact pixel opacity values (0.4, 0.5, 0.85) are inferred from observed hovers, not formally declared. Full disabled and muted opacity scale is not specified.:focus-visible and :disabled states but no base or default variant styling was measured. Assume inputs inherit body text sizing and use focus ring treatment (inset border) consistent with buttons and cards.