feat(slice-3): design-system foundation — Wiggleverse tokens, fonts, brand marks, UI kit (per ui/designs export)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-10 22:39:30 -07:00
parent cc9d9dda5f
commit ef1498ba08
17 changed files with 820 additions and 0 deletions
@@ -0,0 +1,55 @@
+/* Wiggleverse — Spacing, radius, shadow, layout & motion tokens
+   Derived from the marketing-site CSS. The brand has almost no shadow system —
+   depth is carried by surface color + hairline borders, not drop shadows. */
+
+:root {
+  /* ---- Spacing scale (rem) ---- */
+  --space-0: 0;
+  --space-1: .25rem;
+  --space-2: .5rem;
+  --space-3: .7rem;
+  --space-4: 1rem;
+  --space-5: 1.2rem;
+  --space-6: 1.6rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Section rhythm — fluid vertical padding for page bands */
+  --section-pad: clamp(3rem, 7vw, 5.5rem);
+  --page-hero-pad: clamp(2.8rem, 6vw, 4.5rem);
+
+  /* ---- Layout ---- */
+  --wrap-max: 1080px;     /* content column */
+  --wrap-gutter: 92vw;    /* width: min(--wrap-max, --wrap-gutter) */
+  --measure-prose: 68ch;  /* reading measure for prose blocks */
+
+  /* ---- Radii ---- */
+  --radius-card: 14px;    /* path-cards, build-cards */
+  --radius-panel: 12px;   /* principle tiles */
+  --radius-sm: 4px;       /* focus ring rounding */
+  --radius-pill: 999px;   /* buttons, tags, notices */
+  --radius-mark: 26px;    /* favicon tile rounding */
+
+  /* ---- Borders ---- */
+  --border-hair: 1px;     /* default hairline */
+  --border-card-w: 1px;
+  --btn-border-w: 1.5px;  /* ghost button / focus weight */
+
+  /* ---- Elevation ---- *
+   * The system avoids drop shadows. "Lift" on hover is a -1 to -3px translateY,
+   * not a shadow. These tokens exist for the rare card that needs real elevation. */
+  --shadow-none: none;
+  --shadow-soft: 0 8px 24px rgba(9, 12, 34, .28);
+  --lift-1: translateY(-1px); /* @kind other */ /* buttons */
+  --lift-3: translateY(-3px); /* @kind other */ /* cards */
+
+  /* ---- Glass (sticky header) ---- */
+  --glass-sky: rgba(14, 18, 48, .82);
+  --glass-blur: 10px;
+
+  /* ---- Motion ---- */
+  --ease: ease; /* @kind other */
+  --dur-fast: .15s; /* @kind other */ /* hover / press transitions */
+  --dur-mid: .25s; /* @kind other */ /* mobile nav reveal */
+}