Jeremiah Oshiokhame

Generated Oct 17, 2026

DESIGN.md for higgsfield.ai

higgsfield.ai11 colors6 componentsSpace Grotesk + Inter

Remix

12 screenshots captured· higgsfield.ai

1 / 12 · Higgsfield AI — AI-native creative suite · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Higgsfield
description: |
  Higgsfield AI's design system embodies a premium, forward-thinking aesthetic
  rooted in cutting-edge AI creativity. The palette is anchored in deep,
  near-black canvases (#0F1113) with electric lime accents (#D1FE17) that
  electrify the interface, creating dramatic contrast and commanding attention.
  The typography strategy pairs crisp, geometric sans-serifs with tight negative
  tracking on display sizes, reinforcing a tech-native, engineered personality.
  Depth is achieved through color blocking and carefully layered micro-shadows
  rather than bold elevation, maintaining a clean, minimalist surface while
  suggesting sophisticated depth. The overall mood is bold yet refined—a design
  system confident enough to let vibrant accent colors dominate interactive
  moments, while neutral surfaces recede into a calm, darkened canvas.
source:
  url: "https://higgsfield.ai/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-17
  tokensMeasured: true
colors:
  primary: "#D1FE17"
  canvas: "#0F1113"
  surface: "#1C1E21"
  surface-alt: "#FFFFFF"
  ink: "#FFFFFF"
  body: "#F7F7F8"
  muted: "#C5D9A2"
  faint: "#898A8B"
  hairline: "#1886F5"
  accent-1: "#23262A"
  accent-2: "#53C546"
  neutral-1: "#000000"
typography:
  display-xl:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.13
    letterSpacing: -1.2px
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.17
    letterSpacing: -1.2px
  display-lg-strong:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: -2px
  display-lg-tight:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: -4px
  display-md:
    fontFamily: "Space Grotesk"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -2px
    textTransform: uppercase
  display-md-strong:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -1.2px
  heading-xxl:
    fontFamily: "Space Grotesk"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: -1.44px
    textTransform: uppercase
  heading-xl:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.13
    letterSpacing: -1.2px
  heading-lg:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.4px
  heading-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  heading-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: -1px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -1px
  body-md-tight:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -1px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-2:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.1px
  body-sm-strong:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.1px
  button-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-md-strong:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: 0px
  button-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm-strong:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  button-xs:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0px
  caption-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1px
  code:
    fontFamily: "IBM Plex Mono"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 5px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  xxl: 16px
  r-20: 20px
  r-24: 24px
  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 2px 3px 0px inset"
  md: "rgba(255, 255, 255, 0.05) 0px 1.5px 3px 0px inset"
  lg: "rgb(209, 254, 23) 0px 0px 8px 0px"
  xl: "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FEFFF7"
    surface: "#F4F5ED"
    surfaceRaised: "#ECEDE6"
    text: "#1B1D11"
    textMuted: "#707168"
    border: "#DADBD4"
    accent: "#5B7100"
    accentFg: "#FFFFFF"
    focusRing: "#7C9A01"
    elevation: shadow
  dark:
    bg: "#0F1113"
    surface: "#1C1E21"
    surfaceRaised: "#2E3033"
    text: "#FFFFFF"
    textMuted: "#F7F7F8"
    border: "#1886F5"
    accent: "#D1FE17"
    accentFg: "#0B0B0C"
    focusRing: "#D1FE17"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 20, 0) 0%, rgb(255, 255, 20) 100%), linear-gradient(90deg, rgb(209, 254, 23) 0%, rgb(209, 254, 23) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 38%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.15) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(rgb(255, 255, 255) 0%, rgb(153, 153, 153) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(90deg, rgb(209, 254, 23) 0%, rgba(209, 254, 23, 0.8) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(rgb(255, 255, 255) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.5) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(to top in oklab, rgb(15, 17, 19) 0%, rgba(0, 0, 0, 0) 100%)"
components:
  button-primary:
    typography: "{typography.body-md-tight}"
    textColor: "{colors.primary}"
    border: "2px solid rgba(0, 0, 0, 0.09)"
    height: 48px
    padding: "0px 12px 0px 12px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(209, 254, 23, 0.48) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
    rounded: "{rounded.xl}"
    backgroundColor: "rgba(209, 254, 23, 0.24)"
  button-primary-sm:
    typography: "{typography.button-md-strong}"
    textColor: "rgb(26, 26, 26)"
    height: 40px
    padding: "8px 18px 8px 18px"
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.primary}"
  button-secondary:
    typography: "{typography.button-md-strong}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "8px 18px 8px 18px"
    rounded: "{rounded.lg}"
    backgroundColor: "rgba(255, 255, 255, 0.1)"
  button-secondary-sm:
    typography: "{typography.body-sm-strong}"
    textColor: "{colors.ink}"
    height: 36px
    padding: "0px 12px 0px 12px"
    boxShadow: "rgba(255, 255, 255, 0.05) 0px 1.5px 3px 0px inset"
    rounded: "{rounded.lg}"
    backgroundColor: "rgba(255, 255, 255, 0.05)"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.surface}"
  card-lg:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
  badge-primary:
    typography: "{typography.caption-xs}"
    textColor: "{colors.primary}"
    height: 16px
    padding: "2px 6px 2px 6px"
    rounded: "{rounded.sm}"
    backgroundColor: "rgba(209, 254, 23, 0.2)"
  badge-icon:
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.2)"
    height: 48px
    padding: "3px 3px 3px 3px"
    fontSize: 48px
    boxShadow: "rgba(255, 255, 255, 0.2) 0px 3px 6px 0px inset, rgba(0, 0, 0, 0.1) 0px 6px 6px 0px"
    fontFamily: "Space Grotesk"
    fontWeight: 700
    lineHeight: 1.17
    rounded: "{rounded.xl}"
    backgroundColor: "rgb(42, 45, 50)"
  badge-icon-2:
    textColor: "rgb(26, 26, 26)"
    border: "1px solid rgba(255, 255, 255, 0.2)"
    height: 48px
    padding: "3px 3px 3px 3px"
    fontSize: 48px
    boxShadow: "rgba(255, 255, 255, 0.2) 0px 3px 6px 0px inset, rgba(0, 0, 0, 0.1) 0px 6px 6px 0px"
    fontFamily: "Space Grotesk"
    fontWeight: 700
    lineHeight: 1.17
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.primary}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    height: 28px
  footer:
    typography: "{typography.body-md}"
    textColor: "rgb(20, 21, 26)"
    backgroundColor: "{colors.primary}"
  footer-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    backgroundColor: "{colors.canvas}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.85) 0px 0px 32px 0px"
    rounded: "{rounded.r-24}"
    backgroundColor: "{colors.neutral-1}"
  link-2:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    boxShadow: "rgba(0, 0, 0, 0.85) 0px 0px 32px 0px"
    rounded: "{rounded.r-24}"
    backgroundColor: "rgb(15, 15, 15)"
states:
  button-hover:
    target: button
    state: hover
    opacity: 1
  other-hover:
    target: other
    state: hover
    opacity: 1
  input-focus:
    target: input
    state: focus
    outline: none
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
  other-focus-visible:
    target: other
    state: focus-visible
    opacity: 0.5
  button-focus-visible:
    target: button
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.4) 0px 0px 0px 2px"
  other-active:
    target: other
    state: active
    backgroundColor: "rgba(66, 133, 244, 0.1)"
  other-focus:
    target: other
    state: focus
    outline: none
    borderColor: currentcolor
    borderWidth: medium
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 6
    navLinksVisible: 5
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 736
    gridColumns: 6
    navLinksVisible: 27
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 16
  - width: 1024
    containerWidth: 992
    gridColumns: 6
    navLinksVisible: 27
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 16
  - width: 1280
    containerWidth: 1248
    gridColumns: 6
    navLinksVisible: 27
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 16
  - width: 1440
    containerWidth: 1408
    gridColumns: 6
    navLinksVisible: 27
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 16
coverage:
  statesFound: 45
  gradientsFound: 15
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Higgsfield AI

1. Visual Theme & Atmosphere

Higgsfield AI's design system embodies a premium, forward-thinking aesthetic rooted in cutting-edge AI creativity. The palette is anchored in deep, near-black canvases ({colors.canvas} — #0F1113) with electric lime accents ({colors.primary} — #D1FE17) that electrify the interface, creating dramatic contrast and commanding attention. The typography strategy pairs crisp, geometric sans-serifs with tight negative tracking on display sizes, reinforcing a tech-native, engineered personality. Depth is achieved through color blocking and carefully layered micro-shadows rather than bold elevation, maintaining a clean, minimalist surface while suggesting sophisticated depth. The overall mood is bold yet refined—a design system confident enough to let vibrant accent colors dominate interactive moments, while neutral surfaces recede into a calm, darkened canvas.

Key Characteristics

Ultra-dark canvas (#0F1113) as default page background with accent surfaces in #1C1E21
Electric lime primary (#D1FE17) used strategically for CTAs, active states, and brand moments
Negative letter-spacing on display typography (up to -4px) for a dense, modern feel
Layered micro-shadows and inset highlight effects rather than projection-based depth
Rounded-corner language across interactive elements ({rounded.lg} — 10px on buttons; {rounded.full} — 9999px for pill-shaped badges)
Purposeful opacity cascades for hover and disabled states
Hero sections exploit radial and linear gradient combinations to add atmospheric dimension

2. Color Palette & Roles

Primary

Primary Brand ({colors.primary} — #D1FE17): Electric lime used for primary CTAs, active states, brand mark emphasis, and accent moments. Commanding presence in dark contexts; often paired with reduced opacity for secondary emphasis.

Accent Colors

Accent Decorative 1 ({colors.accent-1} — #23262A): Dark gray accent; no measured semantic role. Use for decorative elements or visual hierarchy refinement in limited contexts.
Accent Decorative 2 ({colors.accent-2} — #53C546): Muted sage green; no measured semantic role. Reserve for decorative or supplementary visual treatment; not assigned to interactive or status functions.

Interactive

Interactive Focus Ring ({colors.hairline} — #1886F5): Bright blue used for focus ring borders and divider lines. Provides clear keyboard and focus-visible indication.

Neutral Scale

Canvas ({colors.canvas} — #0F1113): Default page background. Used throughout as the primary darkened surface layer.
Surface ({colors.surface} — #1C1E21): Secondary surface for cards, panels, and grouped content. Sits one step lighter than canvas.
Surface Alt / Ink ({colors.surface-alt} — #FFFFFF): White; used for alternating section bands and as primary heading/text color when placed on dark contexts.
Body ({colors.body} — #F7F7F8): Off-white used for body copy and primary text on dark backgrounds.
Muted ({colors.muted} — #C5D9A2): Pale yellow-green for captions, secondary text, and de-emphasized information.
Faint ({colors.faint} — #898A8B): Mid-gray for tertiary text, placeholder content, and disabled states.
Neutral Black ({colors.neutral-1} — #000000): Pure black, used sparingly in footer contexts and text elements requiring maximum contrast.

Semantic / Status

No error, success, warning, or info states were measured on the site. The design system does not declare a semantic color ramp.

3. Typography Rules

Font Family

Primary: Inter (https://fonts.googleapis.com/) — sans-serif with tight, geometric proportions, used for body, buttons, navigation, captions, and most UI copy. Fallback: system-ui, -apple-system, sans-serif

Display / Heading: Space Grotesk (https://fonts.googleapis.com/) — uppercase-friendly geometric sans-serif with distinctive letterforms, used for large display and heading scales. Fallback: system-ui, -apple-system, sans-serif

Code: IBM Plex Mono (https://fonts.googleapis.com/) — monospace, uppercase-transformed, used for code and technical content. Fallback: monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Inter	64px	600	1.13	-1.2px	Large hero headlines
Display Large Tight	Inter	48px	700	1.17	-4px	Ultra-tight tracking for impact
Display Large Strong	Inter	48px	700	1.17	-2px	Strong headline variant
Display Large	Inter	48px	600	1.17	-1.2px	Main display size
Display Medium Strong	Inter	40px	700	1.2	-1.2px	Prominent subheading
Display Medium	Space Grotesk	40px	500	1.2	-2px	Uppercase display; Space Grotesk
Heading XXL	Space Grotesk	36px	700	1.11	-1.44px	Uppercase large heading; Space Grotesk
Heading XL	Inter	32px	600	1.13	-1.2px	Section heading
Heading Large	Inter	28px	600	1.14	-0.4px	Medium-large section header
Heading Medium	Inter	24px	600	1.25	0px	Standard section heading
Heading Small	Inter	20px	600	1.2	-0.4px to -0.5px	Subsection title
Heading XS	Inter	18px	600	1.56	-1px	Compact heading
Body Medium Strong	Inter	16px	500	1.5	0px to -1px	Emphasised body copy; may use -1px tracking
Body Medium Tight	Inter	16px	600	1.5	-1px	Dense body variant
Body Medium	Inter	16px	400	1.5	0px to -1px	Standard body text
Body Small Strong	Inter	14px	500	1.43	0.1px	Emphasised small text
Body Small 2	Inter	14px	400	1.43	0.1px	Secondary small body
Body Small	Inter	14px	400	1.43	0px	Default small text
Button Medium Strong	Inter	14px	600	1.14	0px	Dense button label
Button Medium	Inter	14px	500	1.43	0px	Standard button text
Button Small Strong	Inter	12px	600	1.33	0px	Compact button, strong
Button Small	Inter	12px	500	1.5	0px	Compact button
Button XS	Inter	10px	500	1.4	0px	Tiny button label
Caption Small	Inter	12px	400	1.5	0px	Small caption
Caption XS	Inter	10px	700	1.2	0.1px	Tiny uppercase caption
Label	Inter	14px	400	1.14	0px	Form label text
Code	IBM Plex Mono	14px	700	1.43	0px	Monospace; uppercase-transformed

Principles

Negative tracking on display: Sizes 48px and above use tracking from -1.2px to -4px, creating a dense, engineered aesthetic suited to hero moments and high-impact headlines.
Inter for UI rhythm: Body and button text uses Inter with 0px to 0.1px tracking, maintaining clarity and geometric precision at smaller sizes.
Line height variance: Larger sizes drop to 1.13–1.17; body defaults to 1.5 for readability; buttons compress to 1.14–1.43 for compact presentation.
Weight hierarchy: Headings and CTAs favor weight 600–700; body defaults to 400, with 500 used for emphasis; uppercase Space Grotesk reserves weight 500–700 for display contexts.

4. Component Stylings

Buttons

Primary (Large)

Background: rgba(209, 254, 23, 0.24)
Text Color: #D1FE17
Text: {typography.body-md-tight} (16px, weight 600, line-height 24px)
Padding: {spacing.md} (16px) horizontal, {spacing.md} vertical
Border: 2px solid rgba(0, 0, 0, 0.09)
Border Radius: {rounded.lg} (10px)
Box Shadow: Glow effect: rgba(209, 254, 23, 0.48) 0px 0px 0px 0px (outer halo; inner layers transparent)
Hover State: Opacity 1; background lightens with increased alpha
Disabled State: Opacity 0.5
Focus Visible: box-shadow: 0 0 0 2px var(--hf-color-background-primary), 0 0 0 var(--hf-space-100) var(--hf-color-border-focus)

Primary Small

Background: #D1FE17
Text Color: #1A1A1A
Text: {typography.button-md-strong} (14px, weight 600, line-height 16px)
Padding: {spacing.sm} (12px) horizontal, 8px vertical
Border Radius: {rounded.lg} (10px)
Box Shadow: None
Hover State: Opacity 1
Disabled State: Opacity 0.5

Secondary

Background: rgba(255, 255, 255, 0.1)
Text Color: #FFFFFF
Text: {typography.button-md-strong} (14px, weight 600, line-height 16px)
Padding: {spacing.sm} (12px) horizontal, 8px vertical
Border: None
Border Radius: {rounded.lg} (10px)
Box Shadow: None
Hover State: Background becomes rgba(255, 255, 255, 0.15) or opacity-modulated
Disabled State: Opacity 0.5

Secondary Small

Background: rgba(255, 255, 255, 0.05)
Text Color: #FFFFFF
Text: {typography.button-md} (14px, weight 500, line-height 20px)
Padding: {spacing.xs} (8px) horizontal, {spacing.xs} vertical
Border: None
Border Radius: {rounded.lg} (10px)
Box Shadow: rgba(255, 255, 255, 0.05) 0px 1.5px 3px 0px inset (subtle inset lift)
Hover State: Opacity 1; background opacity increases
Disabled State: Opacity 0.5

Cards & Containers

Card Default

Background: {colors.surface} (#1C1E21)
Text Color: {colors.body} (#F7F7F8)
Border: None
Border Radius: {rounded.xl} (12px)
Box Shadow: None
Padding: 0px (flat, no internal spacing; handled by child elements)
Font: {typography.body-md} (16px, weight 400, line-height 24px)

Card Large (Alternative)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.body} (#F7F7F8)
Border: None
Border Radius: {rounded.none} (0px — sharp corners for full-bleed content)
Padding: 0px
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Use: Hero or full-width sections where background imagery or gradients dominate

Badges

Primary Badge

Background: rgba(209, 254, 23, 0.2)
Text Color: #D1FE17
Text: {typography.caption-xs} (10px, weight 700, line-height 12px)
Padding: 2px 6px
Border Radius: {rounded.sm} (6px)
Box Shadow: None
Use: Highlight new, "top," or featured items (e.g., "TOP", "NEW")

Icon Badge

Background: #2A2D32
Text Color: #FFFFFF
Border: 1px solid rgba(255, 255, 255, 0.2)
Border Radius: {rounded.xl} (12px)
Padding: 3px
Box Shadow: rgba(255, 255, 255, 0.2) 0px 3px 6px 0px inset, rgba(0, 0, 0, 0.1) 0px 6px 6px 0px (inset highlight + soft drop shadow)
Font: Space Grotesk, 48px, weight 700, line-height 56.016px
Use: Icon containers with subtle depth

Icon Badge Lime

Background: #D1FE17
Text Color: #1A1A1A
Border: 1px solid rgba(255, 255, 255, 0.2)
Border Radius: {rounded.xl} (12px)
Padding: 3px
Box Shadow: Same as Icon Badge (inset + drop)
Font: Space Grotesk, 48px, weight 700
Use: Accent icon container; lime variant for emphasis

Inputs & Forms

Input Default

Label Text: {typography.label} (14px, weight 400, line-height 1.14)
Input Text: {typography.body-md} (16px, weight 400)
Border: 1px solid {colors.hairline} (#1886F5) on focus-visible
Background: Inferred as canvas or surface (not explicitly extracted)
Focus State: outline: 2px solid var(--color-font-primary) or outline: 2px solid var(--hf-color-border-focus)
Disabled: Opacity typically 0.5

Navigation

Navigation Bar (Desktop)

Background: rgba(0, 0, 0, 0) (transparent; inherits canvas)
Text Color: {colors.body} (#F7F7F8)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Height: 28px
Padding: 0px
Border Radius: {rounded.none} (0px)
Nav Links: Typically {typography.button-md} (14px, weight 500) in navigation context
Hover State: Text color shifts to highlight or primary brand color; may include background overlay
Focus Visible: Often a focus ring or underline (exact state varies; see Known Gaps)

Footer

Background (Primary): #D1FE17
Text Color: #141B1A
Background (Secondary): {colors.canvas} (#0F1113)
Text Color (Secondary): {colors.body} (#F7F7F8)
Font: {typography.body-md} (16px, weight 400, line-height 24px)
Padding: 0px (sections manage internal spacing)
Height: Varies by section (780px for primary, 73px for secondary footer strip)

5. Layout Principles

Spacing System

Base Unit: {spacing.xs} = 8px

Scale:

{spacing.xxs} = 4px — Minimal internal component spacing
{spacing.xs} = 8px — Tight spacing between small elements
{spacing.sm} = 12px — Compact padding within buttons, inputs
{spacing.md} = 16px — Default section padding and component spacing
{spacing.lg} = 20px — Generous spacing between major content blocks
{spacing.xl} = 24px — Larger vertical/horizontal gaps
{spacing.xxl} = 28px — Extra-large spacing for emphasis
{spacing.xxxl} = 32px — Large spacing between sections
{spacing.section} = 40px — Section internal padding; gap between grouped components
{spacing.band} = 48px — Full-width section vertical padding; major layout divisions

Context:

Button padding: {spacing.sm} to {spacing.md} (12–16px horizontal)
Card padding: Typically 0px externally; child elements manage {spacing.md} to {spacing.lg} internally
Section horizontal padding: {spacing.md} (16px) on all measured breakpoints
Vertical spacing between sections: {spacing.band} (48px)

Grid & Container

Max Width: Content column varies:

375px viewport: 343px content
768px and above: 736–1408px content

Column Strategy: 6-column grid implied across all breakpoints (consistent measurement across 375px–1440px)

Section Patterns:

Full-width header/hero with centered content column
1–3 column card grids depending on viewport and product section
Stacked layout below ~768px; multi-column above

Whitespace Philosophy

The design system prioritizes color blocking and visual hierarchy through surface changes over reliance on whitespace. Dark canvas backgrounds are interrupted by lighter surface cards, and the electric lime primary creates focal points without requiring excessive breathing room. Sections are separated by {spacing.band} (48px) vertical gaps; internal component grouping uses {spacing.md} to {spacing.lg} (16–20px). Horizontal sections maintain consistent {spacing.md} (16px) padding on left and right edges across all breakpoints.

Border Radius Scale

{rounded.none} = 0px — Full-bleed sections, images, large cards when sharpness is desired
{rounded.xs} = 5px — Subtle rounding on specific elements
{rounded.sm} = 6px — Badge components; primary badge radius
{rounded.md} = 8px — General utility radius for cards and containers
{rounded.lg} = 10px — Button radius; primary and secondary button variants
{rounded.xl} = 12px — Default card radius; icon badge containers
{rounded.xxl} = 16px — Larger, more prominent card rounding
{rounded.r-20} = 20px — Extra-large container rounding
{rounded.r-24} = 24px — Link and content container rounding (24px)
{rounded.full} = 9999px — Pill-shaped elements; infinity radius for circular badges and small accent components

Border Widths

Thin: 1px — Used on button borders (primary button variant), badge borders, and focus rings.

6. Depth & Elevation

Level	Treatment	Use
Flat (Base)	No shadow; solid background color only	Canvas, most card surfaces, default button states
Micro Inset	`rgba(255, 255, 255, 0.03) 0px 2px 3px 0px inset` or `rgba(255, 255, 255, 0.05) 0px 1.5px 3px 0px inset`	Button surfaces for subtle internal light; secondary button variants
Glow / Halo	`rgba(209, 254, 23, 0.48) 0px 0px 0px 0px` or `rgb(209, 254, 23) 0px 0px 8px 0px`	Primary CTA emphasis; accent color focus rings; brand moment highlights
Soft Drop	`rgba(0, 0, 0, 0.2) 0px 2px 4px 0px`	Utility shadow for card or modal lift
Icon Inset + Drop	`rgba(255, 255, 255, 0.2) 0px 3px 6px 0px inset, rgba(0, 0, 0, 0.1) 0px 6px 6px 0px`	Icon badge containers; combines inset highlight with subtle projection

Shadow Philosophy:

The system employs layered micro-shadows and inset highlights rather than progressive projection-based depth. Depth is signaled primarily through color blocking—dark canvas, medium surface, and light text create natural hierarchy. Micro inset shadows (0.03–0.05 opacity) on button surfaces provide tactile suggestion without visual weight. The primary accent (#D1FE17) is occasionally deployed as a subtle glow (rgba(209, 254, 23, 0.48)) to emphasize CTAs, creating a signature "halo" effect. This approach maintains a clean, minimalist aesthetic while suggesting careful engineering and purposeful interaction design.

Opacity Levels

6% (0.06) — Extremely subtle overlays; minimal visual impact
30% (0.30) — Moderate transparency for hover or secondary states
38% (0.38) — Significant but still readable transparency
51% (0.51) — Half-transparent; visible but recessed
63% (0.63) — Darker transparency; reduced legibility
80% (0.80) — Near-opaque; slight transparency only

Usage: Opacity levels are applied to surface backgrounds (e.g., button hover states transition from 0.05 to 0.1), disabled states (typically 0.5), and decorative overlays.

Z-index / Layering

The extracted tokens list z-index values as base integers 1–8, but without explicit role labels. In practice:

Base: z-index 1–2 — Default card and surface layers
Dropdown: z-index 3–4 — Floating menus and popovers above cards
Sticky: z-index 5 — Fixed/sticky navigation bars
Modal: z-index 6–7 — Dialog and modal overlays
Toast/Notification: z-index 8 — Floating notifications at top of stack

Use numeric values deterministically; do not introduce new z-indices outside this range without design review.

7. Do's and Don'ts

Do

Use the electric lime (#D1FE17) strategically for primary CTAs, active states, and brand moments. Its high contrast against the dark canvas makes it commanding and ensures accessibility.
Leverage dark canvas (#0F1113) as the default background. It reduces cognitive load and allows accent colors to shine; secondary surfaces (#1C1E21) should be used sparingly for grouped content.
Apply negative letter-spacing (up to -4px) on display sizes (48px+) to reinforce the tight, engineered aesthetic. This is a signature trait; maintain it consistently.
Use inset micro-shadows on button surfaces for tactile feedback without visual heaviness. Combine with the accent glow effect on primary CTAs for subtle emphasis.
Maintain rounded corners at {rounded.lg} (10px) on interactive elements (buttons, badges) for a modern, friendly feel while keeping sharp corners ({rounded.none}) on full-bleed sections.
Stack multiple typefaces purposefully: Inter for UI and body rhythm; Space Grotesk for uppercase display; IBM Plex Mono for code. Do not mix casually.
Respect the spacing scale: Use {spacing.band} (48px) to separate major sections; {spacing.md} (16px) for section padding. Consistency across breakpoints builds rhythm.
Test focus states explicitly: The system defines focus rings using the hairline color (#1886F5) and often includes multi-layer box-shadows. Ensure all interactive elements are keyboard-accessible.
Compose gradients deliberately: The extracted system includes radial + linear combinations with intentional opacity transitions (e.g., rgba(209, 254, 23, 0.4) fading to full transparency). Replicate these exactly for consistent depth.
Reserve badges for new, featured, or priority callouts. Lime-background badges (#D1FE17 text on dark context) should highlight the most important feature; grayscale icons or secondary badges for supplementary info.

Don't

Do not invent new accent colors or semantic states. The system declares no error/success/warning palette. If a status indicator is needed, use the accent colors with restraint or request design review.
Do not apply heavy drop-shadows or progressive layered shadows. The system uses color blocking and micro insets; deep shadows will contradict the engineered, minimalist aesthetic.
Do not use the decorative accent colors (#23262A, #53C546) for semantic or interactive elements. They have no measured role; confine them to background textures or ornamental use.
Do not round corners inconsistently. If buttons use {rounded.lg} (10px), maintain that radius across the UI unless intentionally contrasting a specific role. Sharp corners (0px) should be reserved for full-bleed content.
Do not mix neutral grays arbitrarily. The system defines a clear ramp: canvas → surface → body → muted → faint. Adding intermediate grays will muddy the hierarchy.
Do not pair negative letter-spacing with body text. Tight tracking (beyond -0.5px) is reserved for display sizes 48px and above. Body text should use 0px to 0.1px tracking for legibility.
Do not apply the primary accent to disabled states. Disabled elements should reduce opacity (typically 0.5), not change hue; this maintains clarity that an element is non-interactive.
Do not use focus states without explicit keyboard testing. Multi-layer box-shadows on :focus-visible are defined; verify they meet WCAG contrast and visibility standards in your implementation.
Do not override component border-radius per instance. Every radius value is mapped to a semantic scale; use token references consistently so design changes propagate across the UI.
Do not add horizontal scrolling on mobile. The layout must reflow gracefully within {spacing.md} (16px) padding at 375px viewport width; avoid forcing a horizontal scroll experience.

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Content Column	Visible Nav Links	Key Changes
Mobile	375px	343px (16px padding)	5	Full single-column layout; menu toggle enabled
Tablet	768px	736px (16px padding)	27	Multi-column grid activated; nav visible
Desktop	1024px+	992px–1408px (16px padding)	27	Full-width content; no further layout shifts
Large	1440px	1408px (16px padding)	27	Maximum column width locked

Derive breakpoint strategy from measured data:

No breakpoint at 375px–767px transition: The content column expands but the 16px padding is maintained; no major layout shift occurs.
No breakpoint at 768px–1023px transition: Nav remains visible; content column scaling is smooth.
No breakpoint at 1024px–1440px transition: Layout stabilizes; further width increases do not trigger reflow.

Implication: The site uses a fluid single-column layout on mobile that gracefully expands to multi-column grids on tablet/desktop without rigid breakpoint boundaries. CSS media queries should target specific viewport thresholds if menu behavior or typography scaling changes are required; the current data suggests minimal breakpoint-driven changes.

Touch Targets

Interactive elements should maintain a minimum 48px height (confirmed on measured buttons and badge icon containers). On smaller viewports, buttons and navigation links may squeeze to 36–40px but should never drop below 32px to maintain tap comfort on mobile.

Collapsing Strategy

Mobile (375px): Single-column layout; hero content stacks vertically; cards display 1 per row; navigation menu likely collapses into a toggle (inferred from "menu toggle" mention, though exact hamburger behavior not extracted).
Tablet (768px+): Multi-column grids (2–3 columns visible); navigation expands; content column width increases but section padding remains {spacing.md} (16px).
Desktop (1024px+): Full multi-column layouts (3+ columns); maximum content column locked; no further shifts.

Font scaling: Heading sizes remain consistent across breakpoints (64px display on mobile, e.g.). If smaller heading sizes are desired on mobile, implement explicit typography media queries (not captured in extraction).

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Brand (#D1FE17) — use for call-to-action buttons, active states, and brand emphasis
Page Background: Canvas (#0F1113) — default full-page background
Card/Panel Background: Surface (#1C1E21) — secondary surfaces for grouped content
Heading Text: Surface Alt / Ink (#FFFFFF) — white text, typically on dark backgrounds
Body Copy: Body (#F7F7F8) — off-white for readability on dark canvas
Secondary Text: Muted (#C5D9A2) — pale yellow-green for captions and de-emphasized info
Tertiary Text: Faint (#898A8B) — mid-gray for placeholder and disabled text
Focus Ring / Divider: Hairline (#1886F5) — bright blue for keyboard focus and 1px borders
Accent (Decorative 1): Accent Decorative 1 (#23262A) — dark gray; no semantic role, use sparingly
Accent (Decorative 2): Accent Decorative 2 (#53C546) — sage green; no semantic role, use sparingly
Footer Text: Black (#000000) on Primary (#D1FE17) background, or white on canvas

Iteration Guide

Start with the dark canvas (#0F1113) as default. Every page inherits this base. Surfaces (#1C1E21) are secondary and should be used deliberately, not as a default card background—only when visual grouping is required.
Reserve the lime accent (#D1FE17) for primary interactive moments: CTAs, active navigation states, brand marks, and feature highlights. Test contrast ratios to ensure legibility; lime on light surfaces will fail WCAG AA. Prefer lime on dark.
Apply negative letter-spacing (-1.2px to -4px) exclusively to display typography (48px+). Maintain 0px to 0.1px tracking on body and button text for legibility. This tight/loose contrast is a signature trait; preserve it.
Use rounded corners at 10px on buttons and badges ({rounded.lg}). Reserve sharp corners (0px) for full-bleed hero/banner sections. Pill-shaped elements (9999px) are rare; limit to specific accent badges.
Build depth through color blocking, not shadows. Inset micro-shadows (0.03–0.05 opacity) on button surfaces are sufficient; avoid drop-shadows unless a floating modal or popovers requires lift.
Maintain the spacing scale religiously: 16px horizontal padding on all sections; 48px vertical section gaps. Do not arbitrarily adjust spacing; use the defined scale ({spacing.xs} through {spacing.band}).
Compose focus states with multi-layer box-shadows (primary ring + secondary ring + optional drop). All interactive elements must have a :focus-visible state that meets WCAG AA contrast and visibility standards. Test with keyboard navigation.
Stack typography consistently: Inter for UI/body; Space Grotesk for uppercase display; IBM Plex Mono for code. Do not mix Inter with handwriting or script fonts; the system's personality is geometric and modern.
Opacity levels scale from 6% (barely perceptible) to 80% (nearly opaque). Use 30–51% for hover states and disabled elements. Do not invent intermediate values; trust the measured scale.
Gradient patterns are baked into hero and section backgrounds. Several multi-layer gradients with radial + linear combinations have been extracted. Replicate them exactly (including oklab color space expressions) for consistent atmospheric depth. Do not simplify or approximate gradients.

10. Known Gaps

No semantic color ramp: The site does not declare or expose error, success, warning, or info state colors. Status indicators should be designed with brand leadership before implementation.
Three decorative accent colors without roles: {colors.accent-1} (#23262A) and {colors.accent-2} (#53C546) have no measured semantic assignment. Their function is unclear; they may be historical or reserved. Do not assign them to interactive or status functions without confirmation.
Interaction states partially extracted: The stylesheet contained many :hover, :focus-visible, and :active rules, but not all may apply to the design system's primary components. Custom component states (e.g., multi-select, toggled, expanded) were not measured; verify these in implementation.
No light/dark mode data: Extraction measured one visual theme (dark). A companion light mode, if it exists, was not analyzed. The provided palette is dark-theme only.
Responsive typography scaling unconfirmed: While heading sizes appear stable across breakpoints, no CSS media queries targeting specific font-size changes were extracted. Mobile typography may need custom scaling; confirm with design QA.
Exact menu toggle behavior unspecified: The responsiveness table notes a "menu toggle" on mobile, but the toggle component's styling, animation, and open/close states are not in the extracted data.
Surfaces behind authentication not visited: The extraction covered 6 public pages. Authenticated user flows, dashboards, and account settings may use different typography, colors, or component styles.
Gradient animations not captured: Several hero gradients suggest potential animations (e.g., color shifts or parallax). Static CSS-only values were extracted; interactive or animated gradient behavior is not documented.
Cross-origin stylesheet data incomplete: Some stylesheets were not readable due to CORS restrictions. Specific CSS-declared details (e.g., media query thresholds, animation curves) may be missing.
Custom CSS variables referenced but not resolved: Focus-visible states and some interactive rules reference custom properties (e.g., var(--hf-border-width-thick)). The actual pixel values these map to are not fully extracted; rely on the fallback px values provided in this document.

Document Version: 1.0
Extracted From: https://higgsfield.ai/
Pages Analyzed: 6
Last Updated: 2025
Confidence: High for color, typography, and spacing; moderate for interaction states and responsive thresholds; gaps noted above.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from higgsfield.ai

Primary

#D1FE17

Primary CTA, brand accent, active state

#23262A

Accent / decorative

#53C546

Accent / decorative

Neutral

#0F1113

Default page background

#1C1E21

Card / panel background

#FFFFFF

Alternating section band; Headings / primary text

#F7F7F8

Body copy

#C5D9A2

Captions, secondary text

#898A8B

Tertiary / placeholder text

#1886F5

1px borders and dividers

#000000

Neutral

Typography · InterGoogle Fonts

caption10px · 700 · 12px

body14px · 400 · 20px

button14px · 600 · 16px

list-item16px · 400 · 24px

button14px · 500 · 20px

link16px · 500 · 24px

body16px · 600 · 24px

body14px · 400 · 20px

link14px · 500 · 20px

button12px · 600 · 16px

nav-link14px · 500 · 20px

body16px · 500 · 24px

body14px · 500 · 20px

input14px · 400 · 16px

body16px · 600 · 20px

body18px · 600 · 24px

body12px · 500 · 16px

body18px · 600 · 24px

caption12px · 400 · 18px

body18px · 400 · 28px

h164px · 600 · 72px

h332px · 600 · 36px

label12px · 500 · 16px

nav-link14px · 500 · 20px

body16px · 400 · 24px

heading28px · 600 · 32px

display40px · 700 · 48px

display48px · 600 · 56px

display48px · 700 · 56px

body20px · 600 · 24px

body18px · 500 · 28px

display48px · 700 · 56px

heading24px · 600 · 30px

button12px · 500 · 18px

body13.008px · 600 · 18.5824px

h320px · 600 · 24px

caption12px · 500 · 16px

heading18px · 600 · 28px

body8px · 500 · 11px

button16px · 400 · 24px

button10px · 500 · 14px

Typography · Space GroteskGoogle Fonts

display40px · 500 · 48px

h256px · 700 · 64px

h336px · 700 · 40px

heading28px · 700 · 36px

display48px · 700 · 56px

heading16px · 700 · 24px

display44px · 700 · 44px

heading28px · 700 · 32px

display48px · 700 · 50px

display56px · 700 · 58.8px

display40px · 700 · 48px

h148px · 700 · 56.016px

h240px · 500 · 48px

heading32px · 700 · 36px

h140px · 700 · 40px

Typography · IBM Plex MonoGoogle Fonts

code14px · 700 · 20px

Spacing

8px

12px

16px

4px

24px

32px

20px

48px

Elevation

rgba(255, 255, 255, 0.03) 0px 2px 3px 0px inset

rgba(255, 255, 255, 0.05) 0px 1.5px 3px 0px inset

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(209, 254, 23) 0px 0px 8px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px 0px

Components · 6

Remixes of higgsfield.ai

Latest remixes

No public remixes yet. Be the first to make one.

Remix it