A system you can feel.

:root {
  /* Brand — from Figma Foundations (Generator DS) */
  --red: #E51B15; --red-01: #FBDDDD; --red-02: #F6BCBB;
  --mauve: #995C85; --mauve-01: #F0E7ED; --mauve-02: #E0CEDA; --pink: #E8A9C4;
  --gradient:   linear-gradient( 90deg, #E51B15, #995C85);  /* signature (h) */
  --gradient-v: linear-gradient(180deg, #995C85, #E51B15);  /* vertical */
  --gradient-a: linear-gradient( 45deg, #995C85, #E51B15);  /* angular */
  /* GOLDEN RULE: brand boxes = the gradient as a 15–30% TINT, never a flat pink. */
  --tint-15: linear-gradient(90deg, rgba(153,92,133,.15), rgba(229,27,21,.15)); /* box bg — rest  */
  --tint-30: linear-gradient(90deg, rgba(153,92,133,.30), rgba(229,27,21,.30)); /* box bg — hover */

  /* Neutrals (full ramp) + ink */
  --neu-01:#FBFBFB; --neu-02:#EBEBEB; --neu-03:#949494; --neu-04:#666666; --black:#363636;
  --ink: #26221F; --ink-soft: #555555; --ink-muted: #777777; --ink-faint: #949494;
  --bg: #FBFBFB; --surface: #FFFFFF;
  --line: #F0E7ED; --line-2: #E0CEDA;
  --pink-50: #FCEFF2; --peach: #FBE3DC; --mauve-50: #F3D9E4; --tint: #F8EBF0;

  /* Dark + state (DS source: success #19B404, error #D13F00) */
  --dark: #1C171F; --dark-2: #26221F; --plum: #161019;
  --success: #1FAE5A; --warning: #FF6B35; --danger: #E51B15;

  /* Spacing · radii · shadows */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:72px;
  --r-sm:4px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --sh-md: 0 12px 34px rgba(153,92,133,.14);
  --sh-lg: 0 30px 70px rgba(153,92,133,.20);
  --sh-action: 0 14px 34px rgba(229,27,21,.26);
  --focus: 0 0 0 3px rgba(153,92,133,.18);

  /* Type (self-hosted) */
  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;   /* italic accents */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

Apply the Web Design Team design system. It is a calm but confident,
editorial theme: a neutral warm base with one restrained brand accent.
This identity is the team's own — never use the full Worten logo/wordmark
or name (the W mark alone, e.g. in the app icon, is fine).

TYPE (self-host, no Google CDN)
- Hanken Grotesk for display + UI, weights 400–800; headings 800 with
  tight negative letter-spacing (-.035 to -.045em), line-height ~.92.
- Newsreader italic for editorial accents (one or two words per heading,
  often in the brand gradient).
- JetBrains Mono for eyebrows/labels (uppercase, .22em tracking) and code.

COLOUR
- Page #FBFBFB, surfaces #FFFFFF. Ink #26221F / #555555 / #777777 / #949494
  (never pure black). Borders blush #F0E7ED at rest, #E0CEDA on hover.
- Accent mauve #995C85 (+ pink #E8A9C4 on dark). Signature gradient
  linear-gradient(90deg, #E51B15, #995C85) — the boldest colour, used once
  per view: primary button, brand dot, a thin hairline, or a serif accent.
- GOLDEN RULE (fixes 90% of "it looks off"): every brand BOX — card, panel,
  input, header/app-bar, tile, dropzone — uses the gradient as a 15–30% TINT
  (op15 at rest, op30 on hover/active), NEVER a flat/solid pink. Full-opacity
  gradient is only for icons, the primary button, accents and text.
- Warm tints #FCEFF2 / #FBE3DC / #F3D9E4. Dark surfaces #1C171F / #161019
  for contrast sections (the gradient becomes a glow). State: success
  #1FAE5A, warning #FF6B35, error #E51B15.

SPACE / SHAPE / MOTION
- Spacing 8/16/24/32/48/72. Radii 4/12/16/24, pills for buttons.
- Soft mauve-tinted shadows; the primary button adds a red action shadow.
- Ambient floating gradient blobs, a subtle cursor glow, reveal-on-scroll,
  light parallax and magnetic buttons — always honour prefers-reduced-motion.

COMPONENTS
- Primary button: gradient fill, white text, pill, weight 600, red action
  shadow, lifts 3px on hover. Secondary: soft pink (#FCEFF2) fill, mauve
  text. Outline: 1px subtle border. Link: gradient text + sliding arrow.
- Inputs/select/textarea: soft surface, 1px border, radius 12px, focus =
  mauve border + glow, error = red border. Cards: white, 1px blush border,
  radius 24px, soft lift. Frosted sticky header with a tiny LIVE pill.
- Form controls — toggle/switch, checkbox, radio: the active/checked state
  always wears the brand gradient; off-states are neutral grey/blush.
- Feedback — progress bar and ring fill in the gradient; badges/tags are
  mono-uppercase pills (neutral, or brand / success / warning / danger).
- App patterns (all brand-tint surfaces, op15→op30 on hover): app-bar/header
  (logotype left; functional icons — home, info… — in brand red #E51B15 per
  the DS, quiet actions right); template-selection cards and module-selector
  rows (white icon circle + title + badge + nudging arrow); modals/pop-ups in
  3 sizes — input (default), quick/confirm (sm, gradient-tint glyph), gallery
  (lg); SKU gallery grid (tinted tiles, hover overlay, dashed "add" tile);
  import dropzone + file cards (selected = red inset ring, uploading = % + ring);
  archive rows (name · date · time · eye/edit/trash); navigator/pagination
  (gradient-underlined active page).
- Gradient utilities: horizontal / vertical / angular, plus 15% and 30%
  tints and a gradient-text treatment. One stroke icon set (24px sprite,
  inherits currentColor); functional icons render in brand red per the DS.
- Logos (generator mark family): logomark = the gradient "+"; logotype =
  wordmark with its "t" as the "+"; app icon = rounded gradient-tint tile
  carrying the Worten W with the "+".

FEEL — lots of whitespace, few elements, big confident type with a serif
italic accent, soft motion. No neon, no clutter, no flashy gradients
beyond the single signature.