Remixes of gloam.trade
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: Gloam
description: |
Gloam's design system embodies a modern, minimalist aesthetic centered on
clarity and trustworthiness for financial and privacy-focused software. The
visual language pairs deep, near-black canvases (#08090A) with clean white
surfaces (#FFFFFF) and muted, sophisticated accents in soft greens and grays.
The system employs carefully orchestrated gradients—particularly soft radial
blurs in muted sage and taupe tones—to create subtle depth and movement
without overwhelming the interface. Typography is set exclusively in Aeonik, a
geometric sans-serif that reinforces modernity and approachability.
Interactions are smooth and restrained; the design avoids heavy shadows in
favor of layered micro-elevations and color-blocking for depth. The overall
mood is premium yet accessible, balancing technical sophistication with
human-centered warmth.
source:
url: "https://gloam.trade"
pagesAnalyzed: 6
extractedAt: 2026-10-29
tokensMeasured: true
colors:
primary: "#F4F5F6"
canvas: "#08090A"
surface: "#FFFFFF"
surface-alt: "#000000"
ink: "#FFFFFF"
body: "#F4F5F6"
muted: "#CDD0D4"
faint: "#9B9FA6"
hairline: "#232529"
accent-1: "#8FD3AD"
accent-2: "#5F636A"
accent-3: "#111214"
accent-4: "#2C774F"
accent-5: "#34373C"
neutral-1: "#6C7077"
neutral-2: "#E4E6E9"
typography:
display-xl:
fontFamily: Aeonik
fontSize: 74.88px
fontWeight: 300
lineHeight: 1.02
letterSpacing: -2.1px
display-lg:
fontFamily: Aeonik
fontSize: 72px
fontWeight: 300
lineHeight: 1
letterSpacing: -2.16px
display-md:
fontFamily: Aeonik
fontSize: 48px
fontWeight: 300
lineHeight: 1.06
letterSpacing: -1.06px
heading-xxl:
fontFamily: Aeonik
fontSize: 36px
fontWeight: 500
lineHeight: 1.12
letterSpacing: -0.72px
heading-xl:
fontFamily: Aeonik
fontSize: 34px
fontWeight: 300
lineHeight: 1.1
letterSpacing: -0.61px
heading-lg:
fontFamily: Aeonik
fontSize: 30px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -0.6px
heading-md:
fontFamily: Aeonik
fontSize: 26.4px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.4px
heading-sm:
fontFamily: Aeonik
fontSize: 21px
fontWeight: 400
lineHeight: 1.38
letterSpacing: -0.31px
heading-xs:
fontFamily: Aeonik
fontSize: 15px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-xl:
fontFamily: Aeonik
fontSize: 26px
fontWeight: 300
lineHeight: 1
letterSpacing: -0.52px
body-lg:
fontFamily: Aeonik
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Aeonik
fontSize: 15px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Aeonik
fontSize: 14px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-xs:
fontFamily: Aeonik
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0px
body-xs-2:
fontFamily: Aeonik
fontSize: 13px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
nav-sm:
fontFamily: Aeonik
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
nav-xs:
fontFamily: Aeonik
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
button-lg:
fontFamily: Aeonik
fontSize: 14px
fontWeight: 500
lineHeight: 1.25
letterSpacing: 0px
button-md:
fontFamily: Aeonik
fontSize: 13px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.06px
button-sm:
fontFamily: Aeonik
fontSize: 12.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
button-xs:
fontFamily: Aeonik
fontSize: 12px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
caption-md:
fontFamily: Aeonik
fontSize: 16px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
caption-sm:
fontFamily: Aeonik
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm-strong:
fontFamily: Aeonik
fontSize: 12px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
caption-xs:
fontFamily: Aeonik
fontSize: 11.5px
fontWeight: 500
lineHeight: 2.26
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: Aeonik
fontSize: 11.5px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 1.61px
textTransform: uppercase
code:
fontFamily: Aeonik
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.8
letterSpacing: 0px
rounded:
none: 0px
xs: 6px
sm: 12px
md: 18px
lg: 20px
xl: "22%"
xxl: 24px
r-28: 28px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 48px
borderWidths:
thin: 1px
shadows:
sm: "rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.7) 0px 12px 30px -18px"
md: "rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.85) 0px 30px 80px -24px"
lg: "rgb(35, 37, 41) 0px 1px 0px 0px"
xl: "rgba(11, 12, 14, 0.04) 0px 1px 2px 0px, rgba(11, 12, 14, 0.12) 0px 10px 28px -16px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#1C1C1C"
textMuted: "#707070"
border: "#D8D8D8"
accent: "#65707C"
accentFg: "#FFFFFF"
focusRing: "#848F9A"
elevation: shadow
dark:
bg: "#08090A"
surface: "#FFFFFF"
surfaceRaised: "#FFFFFF"
text: "#FFFFFF"
textMuted: "#F4F5F6"
border: "#232529"
accent: "#F4F5F6"
accentFg: "#0B0B0C"
focusRing: "#F4F5F6"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 1:1 (needs 4.5:1)"
gradients:
- context: hero
kind: mixed
value: "radial-gradient(62% 72% at 86% 104%, rgb(169, 214, 187) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(48% 62% at 102% 42%, rgb(207, 230, 216) 0px, rgba(0, 0, 0, 0) 72%), radial-gradient(60% 40% at 40% 112%, rgb(207, 230, 216) 0px, rgba(0, 0, 0, 0) 72%), radial-gradient(46% 58% at 58% 78%, rgb(210, 214, 219) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(52% 62% at 18% 22%, rgb(255, 255, 255) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(38% 44% at 66% 26%, rgb(255, 255, 255) 0px, rgba(0, 0, 0, 0) 70%), linear-gradient(135deg, rgb(243, 244, 245) 0px, rgb(229, 231, 234) 55%, rgb(214, 233, 222) 100%)"
filter: "blur(48px)"
- context: section
kind: linear
value: "linear-gradient(color(srgb 1 1 1 / 0.94), color(srgb 0.941176 0.945098 0.952941 / 0.94))"
- context: section
kind: mixed
value: "linear-gradient(90deg, rgba(0, 0, 0, 0) 49.5%, color(srgb 0.290196 0.305882 0.333333 / 0.4) 50%, rgba(0, 0, 0, 0) 50.5%), radial-gradient(70% 45% at 50% 100%, color(srgb 0.784314 0.796078 0.815686 / 0.8), rgba(0, 0, 0, 0) 75%)"
- context: section
kind: radial
value: "radial-gradient(42% 46% at 92% 96%, color(srgb 0.784314 0.796078 0.815686 / 0.8) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(36% 40% at 100% 40%, color(srgb 0.890196 0.898039 0.909804 / 0.75) 0px, rgba(0, 0, 0, 0) 70%)"
filter: "blur(36px)"
- context: section
kind: radial
value: "radial-gradient(42% 46% at 92% 96%, color(srgb 0.14902 0.160784 0.176471 / 0.8) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(36% 40% at 100% 40%, color(srgb 0.0862745 0.0901961 0.101961 / 0.75) 0px, rgba(0, 0, 0, 0) 70%)"
filter: "blur(36px)"
- context: hero
kind: mixed
value: "radial-gradient(62% 72% at 86% 104%, rgb(29, 61, 44) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(48% 62% at 102% 42%, rgb(22, 36, 28) 0px, rgba(0, 0, 0, 0) 72%), radial-gradient(60% 40% at 40% 112%, rgb(22, 36, 28) 0px, rgba(0, 0, 0, 0) 72%), radial-gradient(46% 58% at 58% 78%, rgb(12, 13, 15) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(52% 62% at 18% 22%, rgb(36, 39, 43) 0px, rgba(0, 0, 0, 0) 70%), radial-gradient(38% 44% at 66% 26%, rgb(36, 39, 43) 0px, rgba(0, 0, 0, 0) 70%), linear-gradient(135deg, rgb(18, 19, 22) 0px, rgb(13, 14, 16) 55%, rgb(19, 32, 26) 100%)"
filter: "blur(48px)"
components:
button-outline:
typography: "{typography.nav-xs}"
textColor: "rgb(11, 12, 14)"
border: "1px solid rgba(255, 255, 255, 0.85)"
height: 40px
padding: "0px 16px 0px 16px"
rounded: "{rounded.sm}"
backgroundColor: "color(srgb 1 1 1 / 0.92)"
button-outline-sm:
typography: "{typography.button-md}"
textColor: "rgb(11, 12, 14)"
border: "1px solid rgb(207, 210, 214)"
height: 36px
padding: "0px 16px 0px 16px"
rounded: 999px
backgroundColor: "color(srgb 1 1 1 / 0.7)"
button-filled:
textColor: "{colors.ink}"
height: 48px
padding: "0px 24px 0px 24px"
fontSize: 15px
fontFamily: Aeonik
fontWeight: 500
lineHeight: 1
rounded: 999px
backgroundColor: "rgb(11, 12, 14)"
button-filled-sm:
typography: "{typography.button-md}"
textColor: "{colors.ink}"
height: 36px
padding: "0px 16px 0px 16px"
rounded: 999px
backgroundColor: "rgb(11, 12, 14)"
button-primary:
textColor: "rgb(11, 12, 14)"
height: 44px
padding: "0px 20px 0px 20px"
fontSize: 14px
fontFamily: Aeonik
fontWeight: 500
lineHeight: 1
rounded: 999px
backgroundColor: "{colors.primary}"
card:
typography: "{typography.body-lg}"
textColor: "rgb(11, 12, 14)"
padding: "16px 16px 16px 16px"
boxShadow: "rgba(11, 12, 14, 0.04) 0px 1px 2px 0px, rgba(11, 12, 14, 0.12) 0px 10px 28px -16px"
rounded: 16px
backgroundColor: "{colors.surface}"
card-sm:
typography: "{typography.button-sm}"
textColor: "{colors.body}"
padding: "0px 14px 0px 14px"
boxShadow: "rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.7) 0px 12px 30px -18px"
rounded: "3.35544e+07px"
backgroundColor: "{colors.accent-3}"
navigation:
typography: "{typography.body-lg}"
textColor: "rgb(11, 12, 14)"
height: 21px
navigation-lg:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
height: 48px
padding: "0px 32px 0px 32px"
footer:
typography: "{typography.body-lg}"
textColor: "rgb(11, 12, 14)"
padding: "128px 28px 28px 28px"
footer-2:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
padding: "128px 28px 28px 28px"
link:
typography: "{typography.body-lg}"
textColor: "rgb(11, 12, 14)"
padding: "24px 24px 24px 24px"
rounded: "{rounded.md}"
backgroundColor: "rgb(243, 244, 245)"
link-sm:
typography: "{typography.button-md}"
textColor: "rgb(11, 12, 14)"
padding: "0px 16px 0px 16px"
rounded: 999px
backgroundColor: "{colors.primary}"
states:
other-hover:
target: other
state: hover
backgroundColor: "rgba(51, 91, 249, 0.9)"
other-focus:
target: other
state: focus
outlineWidth: 1px
other-active:
target: other
state: active
outlineWidth: 2px
button-active:
target: button
state: active
transform: "scale(0.98)"
button-disabled:
target: button
state: disabled
opacity: 0.45
transform: none
input-focus:
target: input
state: focus
outline: none
badge-disabled:
target: badge
state: disabled
opacity: 0.5
badge-active:
target: badge
state: active
transform: "scale(0.97)"
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 1px
other-disabled:
target: other
state: disabled
opacity: 0.35
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 6
navLinksVisible: 4
menuToggleVisible: true
headingPx: 42
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 712
gridColumns: 3
navLinksVisible: 4
menuToggleVisible: true
headingPx: 42
bodyPx: 16
sectionPaddingX: 28
- width: 1024
containerWidth: 968
gridColumns: 3
navLinksVisible: 9
menuToggleVisible: false
headingPx: 53
bodyPx: 16
sectionPaddingX: 28
- width: 1280
containerWidth: 1224
gridColumns: 3
navLinksVisible: 9
menuToggleVisible: false
headingPx: 67
bodyPx: 16
sectionPaddingX: 28
- width: 1440
containerWidth: 1400
gridColumns: 3
navLinksVisible: 9
menuToggleVisible: false
headingPx: 75
bodyPx: 16
sectionPaddingX: 28
coverage:
statesFound: 61
gradientsFound: 8
rolesUnassigned: 7
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Gloam's design system embodies a modern, minimalist aesthetic centered on clarity and trustworthiness for financial and privacy-focused software. The visual language pairs deep, near-black canvases ({colors.canvas} — #08090A) with clean white surfaces ({colors.surface} — #FFFFFF) and muted, sophisticated accents in soft greens and grays. The system employs carefully orchestrated gradients—particularly soft radial blurs in muted sage and taupe tones—to create subtle depth and movement without overwhelming the interface. Typography is set exclusively in Aeonik, a geometric sans-serif that reinforces modernity and approachability. Interactions are smooth and restrained; the design avoids heavy shadows in favor of layered micro-elevations and color-blocking for depth. The overall mood is premium yet accessible, balancing technical sophistication with human-centered warmth.
Key Characteristics
{rounded.full} for interactive components){colors.primary} — #F4F5F6): Primary call-to-action fills, brand accent, active states, and body copy. Light neutral used for filled buttons and contrast elements on dark canvases.{colors.accent-1} — #8FD3AD): Decorative. Used in hero gradients and visual flourishes; no direct UI role.{colors.accent-2} — #5F636A): Decorative. Neutral accent; no assigned semantic role.{colors.accent-3} — #111214): Decorative. Near-black accent; no assigned semantic role.{colors.accent-4} — #2C774F): Decorative. Muted sage used in hero gradients; no direct UI role.{colors.accent-5} — #34373C): Decorative. Subtle dark accent; no assigned semantic role.{colors.canvas} — #08090A): Dark button fills; primary interactive background.{colors.canvas} — #08090A): Default page background; primary canvas surface.{colors.surface} — #FFFFFF): Card and panel backgrounds; primary text container and heading color.{colors.surface-alt} — #000000): Alternating section bands; pure black accent surfaces.{colors.muted} — #CDD0D4): Captions, secondary text, and supporting information.{colors.faint} — #9B9FA6): Tertiary text, placeholder text, and disabled states.{colors.neutral-1} — #6C7077): Unassigned neutral; general tertiary use.{colors.neutral-2} — #E4E6E9): Unassigned neutral; light border and surface variation.{colors.hairline} — #232529): 1px borders and dividers; subtle stroke color.Primary: Aeonik (sans-serif) — geometric, modern, used throughout all text roles.
Fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Aeonik | 74.88px | 300 | 1.02 | -2.1px | Largest hero heading; extreme tracking compression |
| Display Large | Aeonik | 72px | 300 | 1 | -2.16px | Large display; tightly tracked |
| Display MD | Aeonik | 48px | 300 | 1.06 | -1.06px | Medium display; display-weight compression |
| Heading XXL | Aeonik | 36px | 500 | 1.12 | -0.72px | Extra-large section heading |
| Heading XL | Aeonik | 34px | 300 | 1.1 | -0.61px | Large heading; lighter weight variant |
| Heading LG | Aeonik | 30px | 500 | 1.2 | -0.6px | Large section heading |
| Heading MD | Aeonik | 26.4px | 400 | 1.25 | -0.4px | Medium heading; balanced weight |
| Body XL | Aeonik | 26px | 300 | 1 | -0.52px | Large body text; display-weight; tightly tracked |
| Heading SM | Aeonik | 21px | 400 | 1.38 | -0.31px | Small heading |
| Heading XS | Aeonik | 15px | 500 | 1.5 | 0px | Extra-small heading; semibold |
| Body LG | Aeonik | 16px | 400 | 1.5 | 0px | Large body text |
| Caption MD | Aeonik | 16px | 400 | 1.63 | 0px | Medium caption; looser leading |
| Button LG | Aeonik | 14px | 500 | 1.25 | 0px | Large button text; semibold |
| Body MD | Aeonik | 15px | 400 | 1.5 | 0px | Standard body text |
| Nav SM | Aeonik | 14px | 400 | 1.5 | 0px | Navigation link; standard weight |
| Body SM | Aeonik | 14px | 400 | 1.63 | 0px | Small body text; generous leading |
| Button MD | Aeonik | 13px | 500 | 1 | -0.06px | Standard button text; semibold, tight leading |
| Nav XS | Aeonik | 13.5px | 400 | 1.5 | 0px | Extra-small navigation text |
| Body XS-2 | Aeonik | 13px | 400 | 1.5 | 0px | Extra-small body; standard leading |
| Code | Aeonik | 13.5px | 400 | 1.8 | 0px | Code/monospace role; generous line height |
| Body XS | Aeonik | 13.5px | 400 | 1.38 | 0px | Extra-small body text |
| Button SM | Aeonik | 12.5px | 400 | 1.5 | 0px | Small button text |
| Caption SM Strong | Aeonik | 12px | 500 | 1.5 | 0px | Small caption; semibold |
| Caption SM | Aeonik | 12px | 400 | 1.5 | 0px | Small caption; regular weight |
| Button XS | Aeonik | 12px | 400 | 1.25 | 0px | Extra-small button text |
| Caption XS | Aeonik | 11.5px | 500 | 2.26 | 0px | Extra-small caption; semibold, very loose leading |
| Caption XS Uppercase | Aeonik | 11.5px | 500 | 1.5 | 1.61px | Extra-small uppercase label; wide letter spacing |
Primary Button (Filled)
rgb(11, 12, 14) ({colors.canvas})rgb(255, 255, 255)0px 24px48px{typography.button-lg} (14px, weight 500){rounded.full} (9999px — pill shape)Primary Button Small (Filled)
rgb(11, 12, 14) ({colors.canvas})rgb(255, 255, 255)0px 16px36px{typography.button-md} (13px, weight 500){rounded.full} (9999px)Secondary Button (Outline)
color(srgb 1 1 1 / 0.92) (near-white, translucent)rgb(11, 12, 14)0px 16px40px{typography.button-md} (13.5px, weight 400){rounded.sm} (12px)1px solid rgba(255, 255, 255, 0.85)Secondary Button Small (Outline Small)
color(srgb 1 1 1 / 0.7) (translucent white)rgb(11, 12, 14)0px 16px36px{typography.button-md} (13px, weight 500){rounded.full} (9999px)1px solid rgb(207, 210, 214)Ghost Button (Link Variant)
rgb(244, 245, 246) ({colors.primary})rgb(11, 12, 14)0px 16px44px{typography.button-md} (14px, weight 500){rounded.full} (9999px)Button Hover State
scale(0.98) (slight press-down effect on active)Button Disabled State
0.45noneCard (Default)
rgb(255, 255, 255) ({colors.surface})rgb(11, 12, 14)16px{rounded.md} (18px)rgba(11, 12, 14, 0.04) 0px 1px 2px 0px, rgba(11, 12, 14, 0.12) 0px 10px 28px -16px (soft layered micro-elevation){typography.body-lg} (16px, weight 400)24pxCard Small (Dark Surface)
rgb(17, 18, 20) (near-black)rgb(244, 245, 246) ({colors.primary})0px 14px32px{rounded.full} (9999px)rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.7) 0px 12px 30px -18px (inset highlight + soft drop shadow){typography.button-sm} (12.5px, weight 400)18.75pxCard Hover State
Input Focus State
var(--navy-500) (brand blue; specific hex not measured in extraction)0 0 0 4px color-mix(in srgb, var(--navy-500) 12%, transparent) (soft blue glow)Input Hover State
Input Placeholder / Disabled
{colors.faint} (#9B9FA6)Navigation Default (Light Theme)
rgba(0, 0, 0, 0) (transparent)rgb(11, 12, 14)0px{typography.nav-sm} (16px, weight 400)Navigation Large (Dark Theme)
rgba(0, 0, 0, 0) (transparent)rgb(244, 245, 246) ({colors.primary})0px 32px48px{typography.nav-sm} (16px, weight 400)Navigation Link Hover
var(--foreground) (full contrast)Link Card (Default)
rgb(243, 244, 245) (light neutral)rgb(11, 12, 14)24px{rounded.md} (18px){typography.body-lg} (16px, weight 400)24pxLink Button Small
rgb(244, 245, 246) ({colors.primary})rgb(11, 12, 14)0px 16px36px{rounded.full} (9999px){typography.button-md} (13px, weight 500)Base unit: {spacing.xs} (8px). All spacing derives from multiples of this unit, enabling consistency and flexibility across layouts.
{spacing.xxs} = 4px (smallest gaps, inline spacing){spacing.xs} = 8px (default inline/vertical spacing){spacing.sm} = 12px (compact spacing between elements){spacing.md} = 16px (standard padding, section margins){spacing.lg} = 20px (comfortable spacing){spacing.xl} = 24px (generous spacing, card padding){spacing.xxl} = 28px (large gaps between blocks){spacing.xxxl} = 32px (extra-large gaps){spacing.section} = 40px (section-level vertical spacing){spacing.band} = 48px (hero and major section spacing)Usage Context: Inline element spacing uses {spacing.xs}–{spacing.md}; padding within cards and sections uses {spacing.lg}–{spacing.xl}; vertical gaps between major sections use {spacing.band} (48px).
Max Width: 1400px (at 1440px viewport, content column = 1400px with symmetric gutters)
Content Column Widths (Measured by Viewport):
Grid Strategy: The site uses a flexible grid. Columns are responsive; 3 columns appear at medium and large breakpoints; single-column and 6-column layouts are used for mobile and specific card grids.
Section Patterns: Full-width hero bands alternate with contained content sections. Hero sections extend edge-to-edge; content sections use symmetric horizontal padding ({spacing.md} at mobile, {spacing.lg} at desktop).
Whitespace is generous and intentional. The system favors breathing room over density. Large vertical gaps ({spacing.band} = 48px) separate major sections and hero areas. Horizontal padding creates inset margins even on full-width sections. Cards and contained elements use internal padding ({spacing.xl} = 24px) to ensure content is never cramped. This philosophy reinforces the premium, trustworthy aesthetic and supports legibility for financial/technical content.
{rounded.none} = 0px (sharp edges; rarely used){rounded.xs} = 6px (minimal rounding; subtle softness){rounded.sm} = 12px (moderate rounding; outline buttons){rounded.md} = 18px (primary card radius; default rounded appearance){rounded.lg} = 20px (slightly larger; image corners){rounded.xl} = 22% (algorithmic radius for circular/proportional elements){rounded.xxl} = 24px (generous rounding; large cards){rounded.r-28} = 28px (extra-generous rounding; specific decorative use){rounded.full} = 9999px (pill/circle; all interactive buttons, small badges)Component Contexts:
{rounded.full} (pill shape){rounded.md} (18px default; {rounded.xxl} for larger containers){rounded.xl} (22% proportional){rounded.sm} (12px) or {rounded.full} depending on variant1px — used for card borders, hairlines, and subtle dividers (e.g., {colors.hairline} dividers, outline button borders)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; background color only | Canvas, nav, flat sections |
| Micro (SM) | rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.7) 0px 12px 30px -18px | Small dark cards, badges |
| Micro (MD) | rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.85) 0px 30px 80px -24px | Standard cards, containers |
| Hairline | rgb(35, 37, 41) 0px 1px 0px 0px (navigation footer only) | Navigation borders |
| XL | rgba(11, 12, 14, 0.04) 0px 1px 2px 0px, rgba(11, 12, 14, 0.12) 0px 10px 28px -16px | Elevated cards, overlays |
Shadow Philosophy: Gloam employs a layered micro-elevation strategy. Rather than bold, high-contrast shadows, the system uses two-layer shadows: a nearly transparent inset highlight (white or translucent at 0.03–0.04 opacity) combined with a soft diffused drop shadow. This creates barely-perceptible depth, maintaining the clean, minimalist aesthetic while avoiding visual clutter. Shadows are strictly reserved for cards and elevated surfaces; flat sections and navigation rely on color-blocking for depth differentiation.
0.85 (85% opacity) — Used for translucent borders and overlays; subtle visibility reduction.0.60 (60% opacity) — Used for reduced-prominence text and disabled states; clear deemphasis.These opacity values are applied via rgba color definitions and color-mix functions (e.g., color-mix(in srgb, var(--primary) 60%, transparent)) for hover and active states.
| Layer | Z-Index | Context |
|---|---|---|
| Base | 1 | Default document flow; page background |
| Base Elevated | 2 | Slightly raised elements; subtle layering |
| Dropdown | 10 | Menu and select dropdowns; above default content |
| Dropdown Raised | 30, 40, 50, 60, 70 | Nested and cascading dropdowns; progressively higher stacking |
Stacking Strategy: The system uses a sparse z-index ladder, reserving 1 and 2 for base stacking, then jumping to 10+ for interactive overlays. Dropdown and modal layers are assigned in 10-unit increments (30, 40, 50, 60, 70) to allow for nested menus and progressive layering without conflict.
{rounded.full} for all interactive buttons — Pills create visual consistency and modern appearance across the interface.{colors.surface}, {colors.canvas}) to create visual separation; avoid relying on shadows alone.{spacing.band} (48px) between major sections; never compress vertical rhythm below {spacing.section} (40px) for section breaks.{colors.primary} (#F4F5F6) for primary CTAs and brand accents — This light neutral is the brand's signature and should anchor interactive hierarchies.{colors.canvas} (#08090A) and {colors.surface} (#FFFFFF) ensures readability and brand recognition.{rounded.full}) consistently — Reinforces the modern, trustworthy aesthetic.{rounded.xs} (6px) for general UI — Buttons specifically use {rounded.full} (9999px); non-button elements should default to {rounded.md} (18px) or higher.{spacing.md} (16px) between distinct content blocks — Maintain breathing room; dense layouts contradict the system's premium positioning.{opacity: 0.45} is the lower bound.{colors.hairline} (#232529) for large surface areas — Reserve this dark gray for 1px borders and subtle dividers only; use {colors.canvas} for backgrounds.1.5 for legibility.| Breakpoint | Viewport Width | Content Width | Key Changes | Nav Behavior |
|---|---|---|---|---|
| Mobile | 375px | 343px | Single-column layout; 16px gutters; 42px headings; menu toggle visible | 4 links visible + toggle |
| Tablet | 768px | 712px | Multi-row grids; 28px gutters; 42px headings; menu toggle visible | 4 links visible + toggle |
| Desktop | 1024px | 968px | 3-column grids; 28px gutters; 53px headings; no menu toggle; full nav visible | 9 links visible; no toggle |
| Large Desktop | 1280px | 1224px | 3-column grids; 28px gutters; 67px headings; full nav | 9 links visible |
| Extra Large | 1440px | 1400px | 3-column grids; 28px gutters; 75px headings; max width reached | 9 links visible |
Breakpoint Derivation: Breakpoints are identified by where layout-critical values change. The mobile-to-tablet transition (768px) introduces wider gutters (16px → 28px) and reveals full navigation links. The tablet-to-desktop transition (1024px) removes the menu toggle and enables full navigation display. Large viewports (1280px+) increase heading sizes progressively while maintaining container max-width at 1400px.
Minimum interactive touch target size: 44px height for buttons and links. Observed button heights are 36px (small), 40px (outline), 44px (primary), and 48px (filled large). Small interactive elements (badges, captions) may fall below 44px only when they are non-critical or have larger sibling targets nearby. All clickable areas maintain at least 44px of vertical or square space where possible.
Mobile (375px):
{spacing.md} (16px)Tablet (768px):
{spacing.lg} (28px)Desktop (1024px and above):
{spacing.lg} (28px){colors.primary} — #F4F5F6) — Use for button fills, active states, brand accents{colors.canvas} — #08090A) — Solid dark background for primary and filled buttons{colors.surface} — #FFFFFF) — White card backgrounds and panel containers{colors.canvas} — #08090A) — Near-black default canvas{colors.surface} — #FFFFFF) — Primary text color; high contrast on dark backgrounds{colors.muted} — #CDD0D4) — Captions and supporting text{colors.faint} — #9B9FA6) — Placeholder and disabled text{colors.hairline} — #232529) — 1px subtle dividers{colors.accent-1} — #8FD3AD) — Hero gradients and flourishes onlySet all button and interactive text in Aeonik, weight 500 (semibold); body defaults to weight 400. Display sizes use weight 300 for elegance. Never deviate from Aeonik; no secondary typeface exists.
Apply {rounded.full} (9999px pill radius) to all interactive buttons and small badges. Cards use {rounded.md} (18px). Images use {rounded.xl} (22% proportional). No other component should use arbitrary radii.
Compress letter-spacing on display and large heading roles: Display sizes use -2.1px to -0.72px tracking; never render large headings with 0px tracking.
Use two-layer shadows for cards only: Inset highlight (0.03–0.04 opacity white) + soft drop shadow (0.7–0.85 opacity black). Never apply bold single-layer shadows.
Leverage color-blocking for depth. Switch background colors ({colors.canvas} ↔ {colors.surface}) to create visual separation. Shadows are micro-effects, not primary depth tools.
Maintain minimum {spacing.band} (48px) vertical gaps between major sections. Internal card padding: {spacing.xl} (24px). All gutters: {spacing.md} (16px) mobile, {spacing.lg} (28px) desktop.
Responsively scale headings: 42px mobile → 53px at 1024px → 75px at 1440px. Use viewport-relative or breakpoint-defined sizing; never lock display sizes.
Implement pill-shaped nav links and secondary buttons using {rounded.full}. Outline buttons use {colors.surface} backgrounds with {colors.hairline} borders.
Reserve z-index layering for overlays: base (1–2), dropdowns (10+). Assign in 10-unit increments (30, 40, 50, 60, 70) for nested menus.
Set input focus state to navy-500 (brand blue, CSS variable) with a 4px box-shadow using color-mix(in srgb, var(--navy-500) 12%, transparent) for a soft glow. Remove outline; rely on border and shadow for focus indication.
Semantic status colors: The site declares no error, success, warning, or info states in measurable markup. A semantic color ramp (red/green/yellow/blue) is not part of this extraction and should not be invented.
Seven unassigned accent colors: Colors {colors.accent-1} through {colors.accent-5} (plus {colors.neutral-1} and {colors.neutral-2}) have no measured semantic role. They appear in hero gradients and decorative elements only. Do not assign them to buttons, text, or interactive states without explicit evidence.
Dark mode / theme toggling: The extracted data shows evidence of theme switching (light/dark toggle visible in docs page), but only the light theme was systematically measured. Shadow, spacing, and color values may differ in dark mode; the dark-mode-specific gradient definitions suggest a dark variant exists but was not fully analyzed.
Interaction states beyond those explicitly listed: Hover, focus, active, and disabled states are included only where CSS was explicitly parsed. Other potential states (loading, pending, readonly, aria-selected) may exist in the application but were not measured.
Surfaces behind authentication / restricted access: Only 6 public pages of the site were analyzed. Private balance screens, account settings, and authenticated dashboards may expose additional components or color roles not visible in this extraction.
Animations and transitions: Timing functions, duration values, and easing curves were not extracted. The system includes transform: scale(0.98) for button active states and transform: translate(3px) for hover effects, but animation timing is not defined here.
High-contrast / accessibility overrides: No explicit high-contrast color mode or accessibility-focused variant was measured. Standard color roles should be validated for WCAG compliance independently.
Component variants beyond those listed: Additional button styles, badge states, or dropdown behaviors may exist in the full application but are not present in the 6 measured pages. Only components observed in the extraction are documented above.
Specific navy-500 blue value: The interaction states reference var(--navy-500) for input focus states and focus-visible rings, but the exact hex value was not extracted. This CSS custom property must be defined elsewhere in the application's theme layer.