---
version: alpha
name: Higgsfield
description: "Acid-lime neon burning through near-black glass — a creative engine's control room."
colors:
  on-surface-variant: "#A8A8A8"
  on-surface: "#FFFFFF"
  surface: "#0F1113"
  error: "#FA0019"
  primary: "#D1FE17"
  cool-400: "#131416"
  cool-300: "#1C1E21"
  cool-250: "#23262A"
  cool-200: "#2A2D32"
  text-primary: "#F7F7F8"
  text-faint: "#898A8B"
  ink: "#131517"
  lime-hover: "#B2D814"
  green-glow: "#00E62E"
  hot-pink: "#FF005B"
  electric-blue: "#0256FE"
  violet: "#8271F8"
  blaze-orange: "#FF4F03"
  cyan: "#9CE6F3"
  signal-yellow: "#FFEB00"
typography:
  caption:
    fontFamily: "Inter Display / Inter"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: "Inter Display / Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: "Inter Display / Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  label:
    fontFamily: "Inter Display / Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.0125rem
  subheading:
    fontFamily: "Inter Display / Inter"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.025rem
  heading:
    fontFamily: "Inter Display / Inter"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.025rem
  display:
    fontFamily: Space Grotesk
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.05rem
  hero:
    fontFamily: Space Grotesk
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.075rem
rounded:
  tags-inline-chips: 6px
  buttons-links: 10px
  inputs-small-cards: 12px
  cards-tiles: 16px
  modals-large-panels: 32px
  pills-avatars-toggles: 9999px
spacing:
  "100": 4px
  "200": 8px
  "300": 12px
  "400": 16px
  "500": 20px
  "600": 24px
  "800": 32px
  "1000": 40px
  "1200": 48px
  "1600": 64px
  "2000": 80px
  "2400": 96px
  "050": 2px
---
# Higgsfield — Style Reference
> Acid-lime neon burning through near-black glass — a creative engine's control room.

**Theme:** dark

Higgsfield is a near-black creative suite lit by a single radioactive accent: acid lime `#d1fe17`, dropped onto a cool graphite ramp (`#131416` → `#1c1e21` → `#23262a`) that reads more like an instrument panel than a marketing page. The signature move is the lime *gloss* — buttons and chips carry an inset sheen gradient (`linear-gradient(#ffff1400, #ffff14)`) plus a `rgba(209,254,23,0.48)` glow ring, so the primary action looks physically backlit. Underneath the monochrome discipline sits a full spectrum reserved for categorization — hot pink `#ff005b`, electric blue `#0256fe`, violet `#8271f8`, blaze orange `#ff4f03`, cyan, red and yellow each anchor a tool family, but they surface only as badge gradients and tags, never as chrome. Typography is a three-voice system: Space Grotesk for tight display headlines, Inter / Inter Display for body and UI, and Doto — a dot-matrix face — for numerals and counters, a nod to the machine. Layout is dense and app-like: a full-bleed grid of glass cards on black, sharp `.5px` hairlines, radii clustered at 8–16px, and a comfortable-but-technical 4px-derived spacing rhythm.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Black | `#0F1113` | `--hf-canvas` | True page background (meta `theme-color`); the black everything floats on. |
| Cool 400 | `#131416` | `--hf-color-cool-400` | Base surface a hair above canvas; section fills. |
| Cool 300 | `#1C1E21` | `--hf-color-cool-300` | Raised surface — cards, panels, the default tile. |
| Cool 250 | `#23262A` | `--hf-color-cool-250` | Top surface / glass base (`#23262abf` at 75%); pills, inputs, popovers. |
| Cool 200 | `#2A2D32` | `--hf-color-cool-200` | Hover/active step above the card. |
| Text Primary | `#F7F7F8` | `--hf-text-primary` | Near-white body and headings — never pure white for large text. |
| Pure White | `#FFFFFF` | `--hf-color-grey-050` | Reserved for high-emphasis display headings and icon strokes only. |
| Text Muted | `#A8A8A8` | `--hf-color-grey-200` | Secondary labels, inactive links, metadata. |
| Text Faint | `#898A8B` | `--hf-text-faint` | Tertiary captions, timestamps. |
| Ink | `#131517` | `--hf-ink` | The dark text that sits *on* lime — never on dark surfaces. |
| Acid Lime | `#D1FE17` | `--hf-color-lime-500` | THE brand. Primary CTA fill, focus glow, active nav, accent headings. The one loud color. |
| Lime Hover | `#B2D814` | `--hf-color-lime-600` | Pressed/hover state of the lime CTA. |
| Green Glow | `#00E62E` | `--hf-color-green-glow` | Success/live neon — a purer green than lime, used for status dots. |
| Hot Pink | `#FF005B` | `--hf-color-pink-500` | Category accent (badge/tag gradients); an editorial spark, not a CTA. |
| Electric Blue | `#0256FE` | `--hf-color-blue-500` | Category accent — video/model badges via radial gradient. |
| Violet | `#8271F8` | `--hf-color-purple-500` | Category accent — a third badge lane. |
| Blaze Orange | `#FF4F03` | `--hf-color-orange-600` | Category accent / warning-adjacent highlight. |
| Cyan | `#9CE6F3` | `--hf-color-cyan-500` | Category accent; the teal promo card pairs `#18DCFF` text on `#0F616D`. |
| Alert Red | `#FA0019` | `--hf-color-red-600` | Destructive actions; `#FF1F2E` red-glow for the neon variant. |
| Signal Yellow | `#FFEB00` | `--hf-color-yellow-600` | Rare highlight / rating; `#FFF05A` yellow-glow for the lit variant. |

## Tokens — Typography
### Space Grotesk — display & headlines, tight and mechanical · `--hf-type-family-grotesk-base`
- **Substitute:** Space Mono (structural cousin), Inter Display, ui-sans-serif
- **Weights:** 300, 500, 700 (loaded 300–700)
- **Sizes:** 28px, 32px, 40px, 44px, 48px, 56px
- **Line height:** 1.0–1.1 for display
- **Letter spacing:** tight — `-.025rem` (slight) to `-.075rem` (tight)
- **Role:** Hero and section headlines. Its slightly condensed, engineered letterforms give the near-black hero its instrument-panel voice.

### Inter Display / Inter — UI, body and controls · `--hf-type-family-primary-base` / `--hf-type-family-secondary-base`
- **Substitute:** ui-sans-serif, system-ui, sans-serif
- **Weights:** 400, 500, 600, 700 (Inter Display loaded across 100–400 incl. italics)
- **Sizes:** 12px, 14px, 16px, 18px, 28.16px, 30px
- **Line height:** 1.4–1.6 body, 1.2 for UI labels
- **Letter spacing:** none (0) to `.0125rem` (wide) for small caps-y labels
- **Role:** Every button, input, card label and paragraph. Inter Display picks up the larger sub-headings; Inter carries dense UI text.

### Doto — dot-matrix numerals · loaded (`Doto 100–900`)
- **Substitute:** Space Mono, IBM Plex Mono
- **Weights:** 100–900 variable
- **Sizes:** counter/stat sizes (14–32px)
- **Line height:** 1.0
- **Letter spacing:** none
- **Role:** The machine flourish — credit counters, timers and numeric readouts render in a dotted LED face, reinforcing the "creative engine" metaphor.

### IBM Plex Mono / Space Mono — technical mono · `--hf-type-family-mono-base`
- **Substitute:** Space Mono, ui-monospace, monospace
- **Weights:** 400
- **Sizes:** 12px, 14px
- **Line height:** 1.4
- **Letter spacing:** none
- **Role:** Code, prompt strings, seeds and IDs.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Body | 14px | 1.5 | 0 | `--text-body` |
| Body Large | 16px | 1.6 | 0 | `--text-body-lg` |
| Label | 18px | 1.4 | `.0125rem` | `--text-label` |
| Subheading | 28px / 28.16px | 1.2 | `-.025rem` | `--text-subheading` |
| Heading | 30px / 32px | 1.1 | `-.025rem` | `--text-heading` |
| Display | 40px / 44px / 48px | 1.05 | `-.05rem` | `--text-display` |
| Hero | 56px | 1.0 | `-.075rem` | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (0.25rem)   **Density:** comfortable-technical (dense grids, generous card padding)
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 050 | 2px | `--hf-space-050` |
| 100 | 4px | `--hf-space-100` |
| 200 | 8px | `--hf-space-200` |
| 300 | 12px | `--hf-space-300` |
| 400 | 16px | `--hf-space-400` |
| 500 | 20px | `--hf-space-500` |
| 600 | 24px | `--hf-space-600` |
| 800 | 32px | `--hf-space-800` |
| 1000 | 40px | `--hf-space-1000` |
| 1200 | 48px | `--hf-space-1200` |
| 1600 | 64px | `--hf-space-1600` |
| 2000 | 80px | `--hf-space-2000` |
| 2400 | 96px | `--hf-space-2400` |

### Border Radius
| Element | Value |
|---------|-------|
| Tags / inline chips | 6px (`--hf-radius-150`) |
| Buttons / links | 8–10px (`--hf-radius-200`) |
| Inputs / small cards | 12px (`--hf-radius-300`) |
| Cards / tiles | 16px (`--hf-radius-400`) |
| Modals / large panels | 24–32px (`--hf-radius-600`) |
| Pills / avatars / toggles | 9999px (`--hf-radius-full`) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Lime Focus Glow | `rgba(209,254,23,0.48) 0 0 0 0` (expands on focus) | `--hf-focus-lime` |
| Sheen (inset) | `inset rgba(255,255,255,0.067) 0 0 0 1px` | `--hf-shadow-sheen` |
| Raised (small) | `0 2px 4px rgba(0,0,0,0.10)` | `--hf-shadow-raised-sm` |
| Modal / overlay inset | `inset rgba(15,17,19,0.2) 0 -4px 32px 0` | `--hf-shadow-overlay` |
| Thumb (strong) | `0 1px 12px rgba(0,0,0,0.30)` | `--hf-shadow-thumb-strong` |

### Layout
- **Page max-width:** full-bleed app shell; content grids span the viewport with `--q-sidebar-width` 239px rail
- **Section gap:** 48–64px (`--hf-space-1200`–`1600`)
- **Card padding:** 6–24px depending on tile density
- **Element gap:** 8–16px (`--hf-space-200`–`400`)
- **Breakpoints:** mobile 20rem · tablet 48rem · desktop 80rem · wide 120rem

## Components
### Primary Button (lime CTA)
**Role:** The single loud action — "Try now", "Generate", "Upgrade".
Fill `#D1FE17`, text `#131517` (ink), radius 10px, padding `0 12px`, 14px/500 Inter. Carries an inset gloss (`linear-gradient(#ffff1400, #ffff14)`) plus a lime-alpha inner darkening so it reads backlit, and a `rgba(209,254,23,0.48)` glow ring on focus. Only ONE per view.

### Secondary Button (muted lime)
**Role:** Adjacent action that stays in the lime family without stealing the CTA.
Lime-alpha fill (`#d1fe171a`, lime-alpha-10), text `#D1FE17`, radius 12px, `.5px`–1px hairline border in white-alpha. Muted, no gloss.

### Ghost / Pill Button
**Role:** Filters, tabs, tag toggles.
Transparent or `#23262A` glass fill, text `#FFFFFF`/`#A8A8A8`, radius 9999px, `2px` white-alpha border. Selected state flips text to lime.

### Input / Textarea
**Role:** Prompt boxes and fields.
Transparent-to-`#1C1E21` fill, text `#FFFFFF`, placeholder `#898A8B`, 14px/400, min-height `10.25rem` for the prompt textarea. Focus adds the lime glow ring; no heavy border.

### Card / Tile
**Role:** The grid unit — every AI tool, template and result.
Fill `#1C1E21` on `#0F1113`, `1px` white-alpha border, radius 16px, padding 6–16px, text `#F7F7F8` 16px. Hover lifts to `#2A2D32` with the sheen inset.

### Glass Panel
**Role:** Floating popovers, menus, the sidebar.
`#23262abf` (75% cool-250) over a `linear-gradient(148.9deg, #ffffff0a, #ffffff0f, #ffffff05)` sheen — true glassmorphism, not a flat fill. Radius 12–16px.

### Category Badge
**Role:** Marks a tool's family (image / video / voice / model).
Small radial-gradient chip: blue `radial(#4fc9dc → #32a2ee → #167bff)`, pink `radial(#ee4596 → #ed2d84 → #ed1572)`, or purple `radial(#ee4596 → #bb2dc2 → #8815ed)`. Text `#FFFFFF`, radius 6–8px, 12px/600. The ONLY place the full spectrum appears.

### Tag / Price Chip
**Role:** "$100 OFF", "NEW", counts.
Fill lime or accent, text `#1A1A1A`, radius 8px, padding `0 12px`, 12px/600. Occasionally asymmetric-radius (sharp bottom corners) for a ticket look.

### Link
**Role:** Inline and nav navigation.
Default `#F7F7F8` 16px; nav-active `#D1FE17` 14px/500 with 8px radius and `4px 8px` padding; muted `#A8A8A8`. No underline — color and weight carry state.

### Accent Heading
**Role:** Highlighted sub-headline (a phrase set apart).
`#D1FE17` Space Grotesk 28px/700 — lime used typographically, sparingly, to punch one line inside an otherwise white headline block.

### Status Dot
**Role:** Live / generating / done indicators.
`#00E62E` green-glow (live), `#FFEB00` yellow-glow (processing), `#FA0019`/`#FF1F2E` red-glow (error). Tiny, neon, no label needed.

### Nav Bar
**Role:** Top app chrome.
Transparent over `#0F1113`, `.5px` bottom hairline `#2E3031`, logo in `#1A1A1A`-on-lime or white, lime "Try now" CTA pinned right.

## Do's and Don'ts
### Do
- Keep the canvas black. Everything is `#0F1113` → `#131416` → `#1C1E21` → `#23262A` — depth comes from luminance steps, not color.
- Let lime `#D1FE17` be the ONLY loud color in chrome. One CTA, one active state, one accent heading per view.
- Put `#131517`/`#1A1A1A` ink on lime, never white — lime is a light surface.
- Use the spectrum (pink/blue/violet/orange/cyan) exclusively for category badges and status, as radial-gradient chips.
- Give the primary CTA its gloss + glow — the backlit look is the brand's texture, not decoration.
- Reach for Space Grotesk with tight tracking (`-.025rem` to `-.075rem`) on anything display-sized.
- Render numerals and counters in Doto when you want the machine to speak.

### Don't
- Don't tint the greys. The neutral ramp is deliberately blue-cool graphite — no warm surfaces.
- Don't put lime on lime, or two lime CTAs in one frame. It stops being a signal.
- Don't use the accent spectrum as button fills or large surfaces — it lives in badges only.
- Don't go pure-white `#FFFFFF` for body copy; `#F7F7F8` is the whitest text gets at size.
- Don't soften the hairlines — `.5px` borders and 16px radii keep the technical edge.
- Don't add drop shadows on dark cards for elevation; use the `.067` sheen inset and a luminance step instead.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#0F1113` | Page background; the void everything sits on. |
| 1 | Base | `#131416` | Section fills a step above canvas. |
| 2 | Raised | `#1C1E21` | Default card / tile / panel. |
| 3 | Top / Glass | `#23262A` (`#23262abf` glass) | Pills, inputs, popovers, sidebar. |
| 4 | Hover | `#2A2D32` | Interactive lift on cards and rows. |

## Elevation
Depth is luminance-first, not shadow-first. Each surface level is one cool-graphite step brighter than the one beneath it (`#0F1113` → `#131416` → `#1C1E21` → `#23262A` → `#2A2D32`), and separation is reinforced by a `.5px` white-alpha hairline plus a `rgba(255,255,255,0.067)` inset sheen along the top edge — the "glass" catch-light. Real drop shadows are reserved for genuinely floating layers (modals, thumbs, overlays) and stay soft and black. The only *outward* glow in the whole system is the lime focus ring (`rgba(209,254,23,0.48)`), which is a state, not elevation.

## Imagery
Media-forward and cinematic. Higgsfield is a generation platform, so the grid is wall-to-wall AI stills and video thumbnails — high-contrast, saturated, often portrait/character work — framed in 16px-radius glass tiles on black. The UI itself stays austere so the generated imagery is the color. Icons are thin monochrome line glyphs (white / grey-200), and the logo is a single continuous ribbon glyph rendered in `#1A1A1A` on lime or white on dark. No illustration, no stock photography — the content IS the imagery.

## Layout
Full-bleed application shell, not a centered marketing column. A collapsible left rail (`--q-sidebar-width` 239px, collapsed 52px) holds tool navigation; the main stage is a dense responsive card grid of tools, templates and results. Promo strips (lime "free trial", teal `#0F616D` "$100 off") span full width between grid sections. Rhythm is tight: 8–16px gaps inside clusters, 48–64px between major sections. The top nav is transparent chrome over black with a `.5px` hairline and the lime CTA pinned right. Everything breathes on a 4px base unit and clusters radii at 8/12/16px for a consistent machined feel.

## Typography Signature
Two registers doing opposite jobs. **Space Grotesk, tracked tight** (`-.075rem` at hero size) makes display headlines feel engineered and condensed — it's the "instrument" voice that suits a near-black control-room aesthetic. **Inter / Inter Display at 0 tracking, 1.5–1.6 line-height** keeps the dense UI legible and neutral so it never competes with the imagery. The flourish is **Doto**, a dot-matrix face reserved for numerals — credit balances, timers, counts — which turns quantitative UI into a literal LED readout. The trick that works: heavy negative tracking on grotesk display + a lime accent word inside an otherwise white headline gives one sharp focal point per screen without adding a second typeface weight to the noise.

## Agent Prompt Guide
## Quick Color Reference
- background: `#0F1113` / text: `#F7F7F8` / surface: `#1C1E21` (glass `#23262A`) / border: `#2E3031` (white-alpha) / accent: `#D1FE17` / primary action: `#D1FE17` fill with `#131517` ink

## Example Component Prompts
1. **Primary CTA button**: Lime `#D1FE17` fill, ink `#131517` text, 14px/500 Inter, radius 10px, padding `0 12px`, inset gloss gradient `linear-gradient(#ffff1400,#ffff14)` plus a lime-alpha inner darkening, and a `rgba(209,254,23,0.48)` glow ring on focus. Exactly one per view.
2. **Tool card / tile**: `#1C1E21` fill on `#0F1113` canvas, `1px` `rgba(255,255,255,0.067)` border, radius 16px, 12px padding, `#F7F7F8` 16px title, thumbnail image filling the top; hover to `#2A2D32` with a top-edge sheen inset.
3. **Category badge**: Small pill, radius 8px, 12px/600 white text, radial-gradient fill — blue `radial(#4fc9dc,#32a2ee,#167bff)` OR pink `radial(#ee4596,#ed2d84,#ed1572)` OR purple `radial(#ee4596,#bb2dc2,#8815ed)`. Used only to mark a tool's family.
4. **Glass popover / sidebar**: `#23262abf` (75% opacity) over `linear-gradient(148.9deg,#ffffff0a,#ffffff0f,#ffffff05)` sheen, radius 12px, `.5px` white-alpha border, `#F7F7F8` labels, `#A8A8A8` secondary text.
5. **Prompt textarea**: Transparent-to-`#1C1E21` fill, `#FFFFFF` text, `#898A8B` placeholder, 14px/400, radius 12px, min-height `10.25rem`, lime focus glow ring, no visible border at rest.

## Similar Brands
- **Vercel** — the same near-black + one-electric-accent discipline and full-bleed technical grid, tuned for developers rather than creators.
- **Linear** — cool-graphite surfaces, `.5px` hairlines, glass popovers and luminance-step elevation; Higgsfield swaps the violet for radioactive lime.
- **Runway** — a kindred AI-media suite where generated imagery is the color and the chrome stays austere and dark.
- **Framer** — dense app-shell layout, pill toggles and a saturated single accent over dark neutral surfaces.
- **Raycast** — mono-accent-on-black command-surface aesthetic with glassy panels and a machined, keyboard-forward feel.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Canvas & cool graphite surfaces */
  --hf-canvas: #0F1113;
  --hf-color-cool-050: #5c626a;
  --hf-color-cool-100: #484e56;
  --hf-color-cool-150: #383e46;
  --hf-color-cool-200: #2a2d32;
  --hf-color-cool-250: #23262a;
  --hf-color-cool-300: #1c1e21;
  --hf-color-cool-350: #18191c;
  --hf-color-cool-400: #131416;
  --hf-color-glass-dark: #23262abf;
  --hf-color-glass-light: #f4f4f4bf;

  /* Colors — Neutral / grey ramp */
  --hf-color-grey-050: #ffffff;
  --hf-color-grey-100: #f4f4f4;
  --hf-color-grey-150: #cecece;
  --hf-color-grey-200: #a8a8a8;
  --hf-color-grey-250: #7f7f7f;
  --hf-color-grey-300: #828282;
  --hf-color-grey-325: #626262;
  --hf-color-grey-350: #565656;
  --hf-color-grey-400: #454545;
  --hf-color-grey-450: #323232;
  --hf-color-grey-500: #2a2a2a;
  --hf-color-grey-550: #1a1a1a;
  --hf-color-grey-600: #000000;
  --hf-color-neutral-100: #ededed;
  --hf-color-neutral-150: #b4b4b4;
  --hf-color-neutral-300: #272727;
  --hf-color-neutral-350: #232323;
  --hf-color-neutral-400: #1e1e1e;
  --hf-color-neutral-500: #171717;
  --hf-color-neutral-550: #0e0e0e;

  /* Text */
  --hf-text-primary: #F7F7F8;
  --hf-text-faint: #898A8B;
  --hf-ink: #131517;

  /* Colors — Lime (brand) */
  --hf-color-lime-100: #fbffec;
  --hf-color-lime-200: #f6ffd1;
  --hf-color-lime-300: #eeffa7;
  --hf-color-lime-400: #e1fe68;
  --hf-color-lime-500: #d1fe17;
  --hf-color-lime-600: #b2d814;
  --hf-color-lime-700: #8ead10;
  --hf-color-lime-800: #6d840c;
  --hf-color-lime-900: #4f6109;
  --hf-color-lime-1000: #344006;

  /* Colors — Accent spectrum (badges & status only) */
  --hf-color-pink-500: #ff005b;
  --hf-color-pink-400: #ff5994;
  --hf-color-pink-600: #d9004d;
  --hf-color-blue-500: #0256fe;
  --hf-color-blue-400: #5b91fe;
  --hf-color-purple-500: #8271f8;
  --hf-color-purple-600: #7152f4;
  --hf-color-orange-500: #ff773d;
  --hf-color-orange-600: #ff4f03;
  --hf-color-cyan-500: #9ce6f3;
  --hf-color-cyan-promo: #18DCFF;
  --hf-color-cyan-promo-bg: #0F616D;
  --hf-color-red-600: #fa0019;
  --hf-color-red-glow: #ff1f2e;
  --hf-color-green-500: #2eb844;
  --hf-color-green-glow: #00e62e;
  --hf-color-yellow-600: #ffeb00;
  --hf-color-yellow-glow: #fff05a;

  /* Typography — Families */
  --hf-type-family-grotesk-base: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --hf-type-family-primary-base: 'Inter Display', ui-sans-serif, system-ui, sans-serif;
  --hf-type-family-secondary-base: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --hf-type-family-mono-base: 'IBM Plex Mono', ui-monospace, monospace;
  --hf-type-family-doto: 'Doto', 'Space Mono', ui-monospace, monospace;

  /* Typography — Weights */
  --hf-type-weight-regular: 400;
  --hf-type-weight-medium: 500;
  --hf-type-weight-semi-bold: 600;
  --hf-type-weight-bold: 700;
  --hf-type-weight-black: 900;

  /* Typography — Letter spacing */
  --hf-type-letter-spacing-tight: -.075rem;
  --hf-type-letter-spacing-slight: -.025rem;
  --hf-type-letter-spacing-none: 0;
  --hf-type-letter-spacing-loose: .00625rem;
  --hf-type-letter-spacing-wide: .0125rem;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-label: 18px;
  --text-subheading: 28px;
  --text-heading: 32px;
  --text-display: 44px;
  --text-hero: 56px;

  /* Spacing (4px base) */
  --hf-space-050: .125rem;
  --hf-space-100: .25rem;
  --hf-space-150: .375rem;
  --hf-space-200: .5rem;
  --hf-space-250: .625rem;
  --hf-space-300: .75rem;
  --hf-space-400: 1rem;
  --hf-space-500: 1.25rem;
  --hf-space-600: 1.5rem;
  --hf-space-700: 1.75rem;
  --hf-space-800: 2rem;
  --hf-space-1000: 2.5rem;
  --hf-space-1200: 3rem;
  --hf-space-1400: 3.5rem;
  --hf-space-1600: 4rem;
  --hf-space-2000: 5rem;
  --hf-space-2400: 6rem;

  /* Border radius */
  --hf-radius-050: .125rem;
  --hf-radius-100: .25rem;
  --hf-radius-150: .375rem;
  --hf-radius-200: .5rem;
  --hf-radius-250: .625rem;
  --hf-radius-300: .75rem;
  --hf-radius-400: 1rem;
  --hf-radius-500: 1.25rem;
  --hf-radius-600: 1.5rem;
  --hf-radius-full: 9999px;

  /* Border widths */
  --hf-border-width-hairline: .5px;
  --hf-border-width-thin: 1px;
  --hf-border-width-medium: 1.5px;
  --hf-border-width-thick: 2px;

  /* Signature gradients */
  --hf-gradient-gloss-lime: linear-gradient(#ffff1400, #ffff14);
  --hf-gradient-badge-blue: radial-gradient(ellipse 39.43% 136.54% at 51.64% 117.31%, #4fc9dc 0%, #32a2ee 50%, #167bff 100%);
  --hf-gradient-badge-pink: radial-gradient(ellipse 39.43% 136.54% at 51.64% 117.31%, #ee4596 0%, #ed2d84 50%, #ed1572 100%);
  --hf-gradient-badge-purple: radial-gradient(ellipse 39.43% 136.54% at 51.64% 117.31%, #ee4596 0%, #bb2dc2 50%, #8815ed 100%);
  --hf-gradient-glass-sheen: linear-gradient(148.916deg, #ffffff0a 22.606%, #ffffff0f 51.256%, #ffffff05 79.906%);

  /* Focus / elevation */
  --hf-focus-lime: 0 0 0 0 rgba(209, 254, 23, 0.48);
  --hf-shadow-sheen: inset 0 0 0 1px rgba(255, 255, 255, 0.067);

  /* Layout */
  --hf-breakpoint-mobile: 20rem;
  --hf-breakpoint-tablet: 48rem;
  --hf-breakpoint-desktop: 80rem;
  --hf-breakpoint-wide: 120rem;
  --q-sidebar-width: 14.9375rem;
  --q-sidebar-width-collapsed: 3.25rem;
  --q-textarea-min-height: 10.25rem;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — surfaces */
  --color-canvas: #0F1113;
  --color-cool-200: #2a2d32;
  --color-cool-250: #23262a;
  --color-cool-300: #1c1e21;
  --color-cool-400: #131416;
  --color-glass-dark: #23262abf;

  /* Colors — text */
  --color-text-primary: #F7F7F8;
  --color-text-muted: #a8a8a8;
  --color-text-faint: #898A8B;
  --color-ink: #131517;
  --color-white: #ffffff;

  /* Colors — lime brand */
  --color-lime-400: #e1fe68;
  --color-lime-500: #d1fe17;
  --color-lime-600: #b2d814;
  --color-lime-700: #8ead10;

  /* Colors — accent spectrum (badges/status) */
  --color-pink-500: #ff005b;
  --color-blue-500: #0256fe;
  --color-purple-500: #8271f8;
  --color-orange-600: #ff4f03;
  --color-cyan-500: #9ce6f3;
  --color-cyan-promo: #18DCFF;
  --color-cyan-promo-bg: #0F616D;
  --color-red-600: #fa0019;
  --color-red-glow: #ff1f2e;
  --color-green-glow: #00e62e;
  --color-yellow-600: #ffeb00;
  --color-yellow-glow: #fff05a;

  /* Typography */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-doto: 'Doto', 'Space Mono', ui-monospace, monospace;

  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-label: 18px;
  --text-subheading: 28px;
  --text-heading: 32px;
  --text-display: 44px;
  --text-hero: 56px;

  --tracking-tight: -.075rem;
  --tracking-slight: -.025rem;
  --tracking-wide: .0125rem;

  /* Spacing */
  --spacing-050: .125rem;
  --spacing-100: .25rem;
  --spacing-200: .5rem;
  --spacing-300: .75rem;
  --spacing-400: 1rem;
  --spacing-600: 1.5rem;
  --spacing-800: 2rem;
  --spacing-1200: 3rem;
  --spacing-1600: 4rem;
  --spacing-2400: 6rem;

  /* Radius */
  --radius-150: .375rem;
  --radius-200: .5rem;
  --radius-300: .75rem;
  --radius-400: 1rem;
  --radius-600: 1.5rem;
  --radius-full: 9999px;
}
```