---
version: alpha
name: Higgsfield
description: A dark-cinematic AI video studio where electric chartreuse punctuates a near-black canvas, a single grotesque typeface carries every scale from 96px hero to 12px label, and motion-first energy is expressed through full-bleed video previews, tight rounded cards, and a signature neon-green accent reserved exclusively for interactive signals.

colors:
  # Surface / canvas
  background: "#0f1113"             # deepest near-black canvas, manifest backgroundColor
  surface: "#131517"                # elevated panels, modal floors, nav bar
  surface-raised: "#1c1e20"         # raised card surfaces, secondary containers
  surface-muted: "#22252a"          # hover wash, active state fill

  # Ink / text
  ink: "#f7f7f8"                    # primary text on dark canvas
  ink-secondary: "#898a8b"          # supporting copy, placeholder text, muted UI
  ink-dim: "#565a5e"                # lowest-emphasis helper text, footnotes
  on-accent: "#14151a"              # dark label on the chartreuse accent surfaces

  # Brand accent — the neon signal
  accent: "#d1fe17"                 # chartreuse — the signature interactive signal, manifest themeColor
  accent-dim: "#222b00"             # was rgba(209,254,23,0.05) — opaque fallback for tinted badge fill
  accent-mid: "#4a5c00"             # was rgba(209,254,23,0.24) — opaque fallback for ghost accent button

  # Semantic
  error: "#e72930"                  # CSS var --color-icon-error
  warning: "#f3c977"                # CSS var --color-icon-warning
  success: "#40d986"                # CSS var --color-success-7
  info: "#5984f2"                   # CSS var --color-blue-7

  # Borders
  border: "#2a2d31"                 # was rgba(255,255,255,0.08) — standard divider on dark
  border-subtle: "#1e2024"          # hairline separator, lowest-contrast divider

  # Shadow tints
  shadow-soft: "#000000"            # was rgba(0,0,0,0.25) — ambient cast beneath cards
  shadow-accent: "#1a2100"          # was rgba(209,254,23,0.48) — green glow on focus rings

typography:
  display-hero:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.5px
  display:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.0px
  heading-section:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.3px
  title:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  label:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-accent}"

  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.accent-mid}"
    textColor: "{colors.accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 8px 12px
  button-ghost-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"

  button-watch:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 6px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 16px
  card-media:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 0px
  card-feature:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 20px

  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 0px 16px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 8px 8px
  nav-link-hover:
    textColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.accent-dim}"
    textColor: "{colors.accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 2px 10px
  badge-solid:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 2px 10px

  tab:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 6px 12px
  tab-active:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"

  tooltip:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 6px 10px
---

# Higgsfield Design System

## Overview

Higgsfield is an AI video generation studio that operates like a film director's control room — obsessively dark, motion-first, and built to show work rather than explain it. The canvas is near-black (`{colors.background}`), the dominant value of nearly every surface in the app, and the only chromatic burst allowed through is a single electric chartreuse (`{colors.accent}`) that fires at exactly the moments something is interactive: a primary button, a badge indicator, a hover color-shift on a navigation link. Outside of those moments, the page reads in shades of dark gray and muted white, treating the video previews and generated footage as the true color in the composition.

The typography is built on a single grotesque family — the brand uses "font-grotesk" class names throughout, a clean neutral sans-serif — running at aggressive weight (700 for display, 600 for headings, 500 for labels) with tight negative tracking at large sizes. There is no editorial serif, no decorative script, and no monospace in the marketing surface. All hierarchy comes from size and weight, and the scale compresses quickly: the gap from 72px hero to 16px body covers 9 stops, keeping the page visually dense at large sizes without losing clarity at the small end.

The signature visual move is the video-as-tile approach: AI-generated footage and studio feature demos appear as dark rounded cards, mostly without padding so the media bleeds edge to edge within the `{rounded.xl}` corners. The page communicates capability by letting you see the output in motion, not by describing features in copy. Paired with the tight dark surfaces and the reserved chartreuse, the result is a tool that feels less like a productivity SaaS and more like a piece of professional creative software.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) acts as a studio black-box — media and UI float against it
- Single chartreuse accent (`{colors.accent}`) is the *only* chromatic color — applied to primary CTAs, active badges, hover link-shifts, and nothing else
- Grotesque typeface at high weights (700 for display, 600 for headings) with aggressive negative tracking — confident, not delicate
- Full-bleed video tiles as the dominant design element — `{components.card-media}` with zero padding is the workhorse component
- Compact rounded corners (`{rounded.xl}` = 12px) — neither sharp nor pillowy; suits a professional tool aesthetic
- Tab-based navigation (`{components.tab}`) for switching between product modes, keeping the interface dense and contextual
- Chartreuse badge (`{components.badge}`) as the "new feature" signal — a recurring UI pattern for surfacing product launches
- Motion transitions (`cubic-bezier(0.4, 0, 0.2, 1)`) on buttons, links, and hero elements; the brand is inherently about motion
- Tight micro-spacing (4px/8px/12px) inside components; generous 64px–96px rhythm between sections
- Dark elevated surfaces (`{colors.surface-raised}`, `{colors.surface-muted}`) create layering without shadows — depth through tone, not cast

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The deepest surface — the studio floor. Hero, page canvas, behind all content.
- **Dark Panel** (`{colors.surface}`): Raised one stop — navigation bar, card surfaces, modal floors.
- **Raised Surface** (`{colors.surface-raised}`): Slightly lighter — feature cards, secondary containers.
- **Hover Wash** (`{colors.surface-muted}`): The interactive dark wash — active tabs, hovered fills.

### Ink / Text
- **Near-White** (`{colors.ink}`): Primary text on the dark canvas.
- **Gray** (`{colors.ink-secondary}`): Supporting copy, nav links in resting state, placeholder text.
- **Dim Gray** (`{colors.ink-dim}`): Helper text, footnotes, lowest-emphasis labels.
- **On-Accent** (`{colors.on-accent}`): Near-black label that sits on the chartreuse accent — readable and brand-consistent.

### Brand Accent
- **Chartreuse** (`{colors.accent}`): The single chromatic signal. Primary button fills, badge text, hover link color, active state indicators. Never a background wash for large surfaces.
- **Accent Dim** (`{colors.accent-dim}`): Opaque approximation of the tinted badge background (was `rgba(209,254,23,0.05)`).
- **Accent Mid** (`{colors.accent-mid}`): Opaque approximation of the ghost button fill (was `rgba(209,254,23,0.24)`).

### Semantic
- **Error** (`{colors.error}`), **Warning** (`{colors.warning}`), **Success** (`{colors.success}`), **Info** (`{colors.info}`): Semantic palette from CSS variables; used in the product app, not the marketing surface.

### Borders & Shadow Tints
- **Border** (`{colors.border}`): Standard divider — was `rgba(255,255,255,0.08)`, flattened to opaque dark.
- **Border Subtle** (`{colors.border-subtle}`): Hairline separator, near-invisible on dark canvas.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque black used for ambient card cast.
- **Shadow Accent** (`{colors.shadow-accent}`): Opaque stand-in for the green glow on focus/active states (was `rgba(209,254,23,0.48)`).

## Typography

### Font Family
- **Primary (and only)**: `Grotesk` (the site uses class `font-grotesk`, consistent with a licensed grotesque such as ABC Grotesk or similar), with fallbacks `ui-sans-serif, system-ui, -apple-system, sans-serif`. A clean, neutral neo-grotesque at high weight — workmanlike precision over expressive character.
- No secondary or monospace family appears in the marketing surface.
- **Weight strategy**: 700 for display, 600 for headings and buttons, 500 for labels, 400 for body — always heavy relative to the size.

### Hierarchy

The full type scale is in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 / -1.5px — the marquee product headline |
| `display` | 48px / 700 / -1.0px — major section headings |
| `heading-section` | 32px / 700 / -0.5px — feature section headers |
| `heading-sub` | 24px / 600 / -0.3px — card and module titles |
| `title` | 20px / 600 — product card titles, modal headers |
| `body-large` | 18px / 400 — lead paragraphs, feature descriptions |
| `body` | 16px / 400 — standard body and nav labels |
| `body-small` | 14px / 400 — dense supporting copy, secondary metadata |
| `button-ui` | 16px / 600 — CTA button labels |
| `label` | 14px / 500 — tab labels, form labels, nav links |
| `caption` | 12px / 600 / 0.5px — badge text, category chips, eyebrows |

### Principles
- **Heavy at every size**: weight stays 600–700 for headings and buttons. Lightness would read as fragile against the dark canvas.
- **Tighten the display, zero-out the body**: -1.5px at 72px, tapering to 0px at body scale.
- **One family, all contexts**: the grotesque runs navigation, UI labels, marketing copy, and badges without a second family to introduce.
- **Caption inverts**: the smallest text (`{typography.caption}`) adds 0.5px positive tracking for legibility at small sizes.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 4px. Internal component spacing is dense (4px/8px/12px steps), while section-level rhythm opens to `{spacing.4xl}` (64px) and `{spacing.5xl}` (96px) between major content blocks — the dark canvas needs air between feature zones.

### Grid & Container
- Full-viewport-width hero with centered content
- Product tiles use a responsive CSS grid: typically 2–4 columns depending on tile type
- Tab-mode navigation keeps the canvas width persistent across product sections
- Max content width approximately 1280px on large desktop

### Whitespace Philosophy
- **Dark is the frame**: the near-black canvas absorbs and unifies; whitespace here reads as depth, not emptiness
- **Dense controls**: tabs, badges, and buttons pack tightly with 6–10px internal padding
- **Breathing room between sections**: 64–96px vertical margins keep feature zones distinct on the long-scroll marketing page

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` divider only | Hero canvas, full-bleed media sections |
| Surface (Level 1) | `{colors.surface}` fill, no shadow | Nav bar, default card surfaces |
| Raised (Level 2) | `{colors.surface-raised}` fill | Feature cards, secondary panels |
| Active (Level 3) | `{colors.surface-muted}` fill | Hover, active tab, pressed state |
| Glow (Focus) | `0 0 0 2px {colors.shadow-accent}` | Chartreuse glow on focused interactive elements |

**Shadow Philosophy**: Higgsfield achieves depth through sequential dark tones rather than cast shadows. Each surface step is a slightly lighter near-black — canvas, surface, raised, muted — so depth reads as value stepping in a controlled dark scale. Actual box shadows are minimal. The one exception is the focus state: a chartreuse glow ring (`{colors.shadow-accent}`) that uses the accent color's energy to signal keyboard focus against the dark backgrounds.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 6px | Inner icon containers, small chips |
| `md` | 8px | Small buttons, tag labels, category badges |
| `lg` | 10px | Primary buttons, input fields |
| `xl` | 12px | Cards, media tiles, modal surfaces |
| `2xl` | 16px | Feature cards, large containers |
| `pill` | 9999px | Special pill variants (rare) |

The radius personality is tightly professional: every interactive element lands in the 8–12px range. No sharp 0px corners (this isn't enterprise minimal) and no full pills on primary buttons (this isn't a consumer lifestyle app). The 12px card radius — visible clearly on the video tile grid — gives the interface a contemporary softness while staying grounded in tool-mode precision.

## Components

The complete component spec lives in the `components:` token block.

### Button variants
- **`button-primary`** — Chartreuse (`{colors.accent}`) fill, near-black label (`{colors.on-accent}`), 10px radius, 10px 20px padding. The main call-to-action. On hover, transitions to `{colors.ink}` (white) fill — a sharp inversion. Used for "Try now", "Create for free".
- **`button-secondary`** — Raised dark surface (`{colors.surface-raised}`), gray label, 8px radius. The companion ghost action — "Learn more", mode toggles.
- **`button-ghost`** — Tinted chartreuse fill (`{colors.accent-mid}`), chartreuse text, 12px radius. Secondary accent-state actions — "View all presets". On hover, fills fully with accent.
- **`button-watch`** — Muted dark fill with white label, 10px radius, tighter padding. "Watch now" inline video trigger.

### Cards
- **`card`** — Standard dark surface, 12px radius, 16px padding. Feature descriptions, tool summaries.
- **`card-media`** — Same surface but **zero padding** — video and image content bleeds to the 12px rounded corners. The gallery workhorse.
- **`card-feature`** — Raised surface, 16px radius, 20px padding. Hero feature tiles with more depth and breathing room.

### Navigation
- **`nav-bar`** — Dark panel surface, white labels, 16px horizontal padding. Horizontal scroll on overflow for the many product-mode tabs.
- **`nav-link`** — Resting in gray (`{colors.ink-secondary}`), shifting to white on hover — the chartreuse color-shift appears on certain active/hover states in the hero navigation.

### Tabs
- **`tab`** — Dark raised fill, gray label, 8px radius, 6px 12px padding. Active state (`tab-active`) moves to a slightly lighter muted fill with white label.

### Badges
- **`badge`** — Chartreuse-tinted dark fill (`{colors.accent-dim}`), chartreuse text, 12px radius. The "NEW" / launch indicator pattern — appears frequently to call out new product features.
- **`badge-solid`** — Full chartreuse fill (`{colors.accent}`), near-black label. High-emphasis badge for major announcements.

## Do's and Don'ts

### Do
- Keep the canvas pure near-black (`{colors.background}`) — the dark floor is what makes the video tiles and chartreuse pop
- Reserve chartreuse (`{colors.accent}`) for primary CTAs, active badges, and hover link-shifts only — the signal value depends on restraint
- Use full-bleed video tiles (`{components.card-media}`) as the primary way to show product capability — demonstrate, don't describe
- Apply heavy weights (700 for display, 600 for headings) — the grotesque needs mass to hold against the dark canvas
- Use negative tracking (-1.5px at 72px, -1.0px at 48px) for display sizes — loose tracking on dark reads as soft
- Snap cards to `{rounded.xl}` (12px) — the signature professional radius
- Create depth through surface stepping (`{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-muted}`) rather than shadows
- Use the chartreuse glow (`{colors.shadow-accent}`) as the focus ring — it connects keyboard navigation to the brand signal

### Don't
- Don't paint large surface areas in chartreuse — a button-sized signal works; a section-wide wash destroys the accent economy
- Don't introduce a second typeface or a display serif — the grotesque is the only voice
- Don't loosen tracking on large headings toward 0 or positive — the compressed setting is the brand
- Don't use rounded pill buttons as the default shape — `{rounded.lg}` (10px) is the primary button radius; pills are rare
- Don't rely on drop shadows for depth — use tonal stepping between dark surface layers
- Don't lighten the canvas toward a mid-gray — the near-black is deliberate; mid-gray reads as unfinished
- Don't add a second brand color — no secondary accent, no gradient of chartreuse into another hue; the monochromatic-plus-signal system is intentional
- Don't use `{colors.ink-secondary}` for primary body text — it's a supporting tone, not a body-copy color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column; hero headline scales to ~32px; tab nav collapses to scrollable strip |
| Mobile | 480–767px | Single column; media tiles stack vertically; nav shows hamburger menu |
| Tablet | 768–1023px | Two-column tile grid; hero scales to ~48px; section spacing compresses |
| Desktop | 1024–1279px | Full layout; 3–4 column media grid; tab navigation fully horizontal |
| Large Desktop | ≥1280px | Max-width container centered; wide media grid; full section rhythm |

### Touch Targets
- Primary buttons run 10px 20px padding — approximately 40px tall, comfortable for touch
- Tab components at 6px 12px padding are tighter; the scroll-strip pattern compensates on mobile
- Card media tiles are large tap targets by nature — full-card tap area

### Collapsing Strategy
- **Navigation**: horizontal product-mode tabs collapse to a scrollable horizontal strip on mobile; overflow hides off-screen
- **Hero**: headline scales from 72px toward 32px; subhead and CTA persist; video background may simplify to static poster
- **Tile grid**: steps 4 → 3 → 2 → 1 column depending on breakpoint
- **Spacing**: section rhythm compresses from 96px toward 32px on mobile

### Image Behavior
- Video tiles fill `{components.card-media}` edge to edge and reflow as responsive grid children
- Poster frames used as fallback / initial frame before video loads

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-black (`{colors.background}`)
- Text: Near-white (`{colors.ink}`) on dark, Gray (`{colors.ink-secondary}`) for secondary
- Brand accent: Chartreuse (`{colors.accent}`) — reserved interactive signal
- On-accent: Near-black (`{colors.on-accent}`)
- Border: Dark divider (`{colors.border}`)
- Raised surface: `{colors.surface-raised}`

### Example Component Prompts

- "Create a dark hero on `{colors.background}` with a 72px near-white (`{colors.ink}`) headline in a grotesque font, weight 700, letter-spacing -1.5px, line-height 1.0. Below: a primary CTA button — chartreuse (`{colors.accent}`) fill, near-black (`{colors.on-accent}`) label, `{typography.button-ui}`, `{rounded.lg}` radius, 10px 20px padding. Beside it a secondary ghost button in `{colors.surface-raised}` with gray label."
- "Build a video tile grid: each tile uses `{components.card-media}` — `{colors.surface}` background, `{rounded.xl}` corner radius, zero padding so video bleeds to the corners. Grid: 3 columns on desktop, 1 column on mobile. Tile hover state adds a `{colors.surface-muted}` overlay at 40% opacity."
- "Design a feature badge using `{components.badge}`: `{colors.accent-dim}` fill, `{colors.accent}` text, `{typography.caption}` (12px / 600 / 0.5px tracking), `{rounded.xl}` radius, 2px 10px padding. For a high-emphasis launch badge, use `{components.badge-solid}` — full `{colors.accent}` fill with `{colors.on-accent}` label."
- "Render the navigation bar: `{colors.surface}` background, no visible border, product-mode tabs using `{components.tab}` — dark raised fill, gray labels, 8px radius. Active tab uses `{colors.surface-muted}` fill with white label. Right side: sign-up CTA in `{components.button-primary}`."
- "Create a feature card using `{components.card-feature}`: `{colors.surface-raised}` fill, `{rounded.2xl}` radius, 20px padding. Header in `{typography.heading-sub}` (24px / 600). Supporting copy in `{typography.body-small}` (`{colors.ink-secondary}`). Optional badge in top-right using `{components.badge}`."

### Iteration Guide

1. Start on `{colors.background}`. If the canvas is lighter than near-black, darken it — the entire system depends on this baseline.
2. Chartreuse (`{colors.accent}`) appears once per view region: one button, one badge, or one link hover. If it appears more than once, remove the duplicates.
3. Display type at 700 weight, -1.5px tracking at hero size. Verify tightness before proceeding.
4. Use surface stepping (`{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-muted}`) for depth. No drop shadows.
5. Cards snap to `{rounded.xl}` (12px). Media tiles get zero padding. Feature tiles get 20px.
6. Focus states use the chartreuse glow ring — `0 0 0 2px {colors.shadow-accent}` — connecting keyboard navigation to brand identity.
7. The grotesque runs everything. If a second typeface appeared, remove it.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Higgsfield. Brand names and trademarks belong to their respective owners.