higgsfield.ai — Design System

1. Visual Theme & Atmosphere

Higgsfield.ai occupies the aggressive end of AI-product dark design — a near-black canvas punctuated by electric chartreuse, the kind of neon accent that reads as computational power made visible. The atmosphere is cinematic and tech-forward: deep voids of rgb(15, 17, 19) create depth, while rgb(209, 254, 23) flashes like a monitor refresh. It’s a site that wants to feel like a tool that’s already running. The footer inverts the palette entirely — bright lime on near-black — as if the interface acknowledges its own energy at the bottom. Uppercase headings reinforce the commanding, machine-like tone.

2. Color Palette & Roles

Background / Canvas

• #0f1113 (rgb(15, 17, 19)) — primary page background, near-black with a cool tint
• #1c1e20 (rgb(28, 30, 32)) — card/module surfaces
• #131517 (rgb(19, 21, 23)) — deepest inset panels

Accent / Signal

• #d1fe17 (rgb(209, 254, 23)) — primary brand accent; CTA highlights, header icon tint, footer background
• rgba(209, 254, 23, 0.1) — ghost badge background with lime tint

Secondary Accents

• rgb(237, 21, 114) — hot pink used sparingly for visual interruption
• rgb(31, 155, 197) — blue inset highlight on specific interactive surfaces

Text

• #f7f7f8 (rgb(247, 247, 248)) — primary body text on dark
• #ffffff — links and headings at full contrast
• rgb(20, 21, 26) — text reversed on the lime footer

Danger/Status

• rgba(230, 72, 61, 0.15) — low-opacity error surface

3. Typography Rules

The type system pairs Space Grotesk (headings) with the system sans-serif stack for body. All headings are uppercase — this is not a stylistic suggestion but a core brand rule enforced via text-transform: uppercase.

No serif. No display type. The system-sans fallback for body text signals confidence — the brand doesn’t need a premium font everywhere, Space Grotesk carries the identity.

4. Component Stylings

Buttons — Borderless by default. The lime CTA uses glow shadows rgba(209, 254, 23, 0.48) as focus ring, not a border. Primary action buttons sit on the near-black surface without outlines.

Cards / Panels — Rounded at 8px, 12px, 14px, and 16px — a loose scale suggesting iteration rather than rigid system. Dark surface rgb(46, 48, 49) for card bodies.

Badges — Pill shape (border-radius: 3.35544e+07px ≈ fully round), lime tint background, lime text.

Toasts — React Toastify configured with white background (#fff) and standard semantic colors; these are app-layer UI, not marketing layer.

Inset shadows — Used for button depth: rgba(0,0,0,0.43) 0px -3px 0px 0px inset gives buttons a pressed-bottom feel.

5. Layout Principles

Narrow breakpoints at 440px and 480px only — this is effectively a two-mode layout: mobile and everything else. Content lives in a single-column centered flow on mobile, expanding to wider editorial grids on desktop. The lack of a mid-range tablet breakpoint suggests the design was conceived desktop-first with a minimal mobile adaptation.

Spacing is Tailwind-standard, no custom CSS variables for spacing. Sections use generous vertical breathing room driven by padding classes.

6. Depth & Elevation

Depth is achieved through luminance contrast, not shadows. The surface stack reads:

• luminance 0.84 — lime accent panels
• luminance 0.186 — card bodies
• luminance 0.116 — hover/transition surfaces
• luminance 0.081 — deepest panels
• luminance 0.067 — overlay scrim rgba(17,17,17,0.5)

Shadows are reserved for interactive feedback (focus glow on buttons) and the pink accent block (complex inset + drop combination). The dark-mode-first design means elevation is read as lightness, not shadow.

7. Do’s and Don’ts

Do

• Use #d1fe17 only for one element per viewport — its power comes from scarcity
• Apply text-transform: uppercase to all Space Grotesk headings
• Pair lime with near-black (#131517) for maximum contrast
• Use border-radius 8–16px for cards; pill (9999px) only for badges/tags

Don’t

• Introduce warm neutrals or beige — the cool near-black palette is deliberate
• Use Space Grotesk in lowercase for headings — it loses brand character
• Add drop shadows on dark cards — use luminance steps instead
• Overuse the hot pink rgb(237, 21, 114) accent; it’s a surprise, not a system color

8. Responsive Behavior

Two breakpoints only: 440px and 480px. The design collapses to a single-column stack below 440px. Navigation likely converts to a drawer or hidden state. Typography scale does not appear to step down with clamp — sizes are fixed, implying the layout reflows content rather than rescaling type.

No mid-range breakpoints means tablet visitors see the desktop layout from 481px upward — acceptable for a landing/marketing page but worth monitoring for 768px viewports.

9. Agent Prompt Guide

Build a dark AI-product landing page in the style of higgsfield.ai. Use a near-black background (#0f1113), electric chartreuse accent (#d1fe17) applied to exactly one focal element per section. All headings in Space Grotesk, uppercase, bold. Body in system sans-serif. Cards use border-radius: 12px with surface color rgb(46, 48, 49). Lime badges are fully rounded pills with rgba(209, 254, 23, 0.1) fill. Button focus states use lime glow shadow, not a border. Footer inverts: lime background with dark text. Only two breakpoints: 440px and 480px.

Generated by Sparkbites — extracted from live CSS analysis