@humanforest/tokens 0.1.0

package/type/type.json

@@ -0,0 +1,548 @@
+{
+  "$meta": {
+    "generated": "scripts/type.ts",
+    "base": 16,
+    "scale": "Tailwind default",
+    "families": {
+      "display": {
+        "stack": "var(--font-display)",
+        "label": "Mohr",
+        "weights": [
+          900
+        ],
+        "transform": "uppercase",
+        "note": "Display / headlines · Black 900 · always UPPERCASE. Two licensed cuts (no other Mohr weights exist).",
+        "cuts": [
+          {
+            "label": "Black",
+            "weight": 900,
+            "style": "normal",
+            "fontFamily": "'MohrAlt'",
+            "license": "web only"
+          },
+          {
+            "label": "Black Italic",
+            "weight": 900,
+            "style": "italic",
+            "fontFamily": "'Mohr-BlackIt'",
+            "license": "core + mobile"
+          }
+        ]
+      },
+      "sans": {
+        "stack": "var(--font-sans)",
+        "label": "GT Haptik",
+        "weights": [
+          400,
+          700
+        ],
+        "transform": "none",
+        "note": "Workhorse for body, labels, UI · Regular 400 / Bold 700 (no 600). Light 300 is specced but not self-hosted.",
+        "cuts": [
+          {
+            "label": "Regular",
+            "weight": 400,
+            "style": "normal",
+            "fontFamily": "'GT Haptik'"
+          },
+          {
+            "label": "Regular Italic",
+            "weight": 400,
+            "style": "italic",
+            "fontFamily": "'GT Haptik'"
+          },
+          {
+            "label": "Bold",
+            "weight": 700,
+            "style": "normal",
+            "fontFamily": "'GT Haptik'"
+          },
+          {
+            "label": "Bold Italic",
+            "weight": 700,
+            "style": "italic",
+            "fontFamily": "'GT Haptik'"
+          }
+        ]
+      },
+      "mono": {
+        "stack": "var(--font-mono)",
+        "label": "JetBrains Mono",
+        "weights": [
+          400,
+          700
+        ],
+        "transform": "none",
+        "note": "Code, token names, hex values · 400 / 700 · self-hosted (OFL).",
+        "cuts": [
+          {
+            "label": "Regular",
+            "weight": 400,
+            "style": "normal",
+            "fontFamily": "'JetBrains Mono'"
+          },
+          {
+            "label": "Bold",
+            "weight": 700,
+            "style": "normal",
+            "fontFamily": "'JetBrains Mono'"
+          }
+        ]
+      }
+    },
+    "contexts": {
+      "product": {
+        "label": "Product (web)",
+        "cut": "upright",
+        "note": "The default, global surface. Restrained: display dropped (a hero has no place in a dense dashboard) and headings pulled down the ramp. Sizes shift, families do not — headline is Mohr Black uppercase, every smaller role GT Haptik. MohrAlt upright cut where display does appear.",
+        "families": {}
+      },
+      "mobile": {
+        "label": "Mobile app",
+        "cut": "italic",
+        "note": "Native app, bold: display trimmed one step for small screens. Mohr-BlackIt italic cut.",
+        "families": {}
+      },
+      "marketing": {
+        "label": "Marketing",
+        "cut": "italic",
+        "note": "Hero surfaces: display goes fluid (viewport-tied clamp up to the top of the ramp); everything else canonical.",
+        "families": {}
+      },
+      "deck": {
+        "label": "Deck",
+        "cut": "upright",
+        "note": "Presentations (Slidev on UnoCSS, 1920×1080 canvas): the top of the ramp, sized for a ROOM rather than a reader. Ships as --type-deck-* vars — UnoCSS shares Tailwind’s size scale, so the steps mean the same thing there.",
+        "families": {
+          "headline": "sans"
+        }
+      }
+    },
+    "note": "Size ramp is Tailwind's default font-size scale (xs…7xl, md = 16px base), used verbatim. Line-height is generated from size; family/weight/tracking/transform are authored per role. Contexts remap roles to ramp steps (product low, deck/marketing high); leading and voice follow the role."
+  },
+  "ramp": [
+    {
+      "step": 1,
+      "name": "xs",
+      "px": 12,
+      "rem": 0.75,
+      "lineHeight": 1.333
+    },
+    {
+      "step": 2,
+      "name": "sm",
+      "px": 14,
+      "rem": 0.875,
+      "lineHeight": 1.429
+    },
+    {
+      "step": 3,
+      "name": "md",
+      "px": 16,
+      "rem": 1,
+      "lineHeight": 1.5
+    },
+    {
+      "step": 4,
+      "name": "lg",
+      "px": 18,
+      "rem": 1.125,
+      "lineHeight": 1.556
+    },
+    {
+      "step": 5,
+      "name": "xl",
+      "px": 20,
+      "rem": 1.25,
+      "lineHeight": 1.4
+    },
+    {
+      "step": 6,
+      "name": "2xl",
+      "px": 24,
+      "rem": 1.5,
+      "lineHeight": 1.333
+    },
+    {
+      "step": 7,
+      "name": "3xl",
+      "px": 30,
+      "rem": 1.875,
+      "lineHeight": 1.2
+    },
+    {
+      "step": 8,
+      "name": "4xl",
+      "px": 36,
+      "rem": 2.25,
+      "lineHeight": 1.111
+    },
+    {
+      "step": 9,
+      "name": "5xl",
+      "px": 48,
+      "rem": 3,
+      "lineHeight": 1
+    },
+    {
+      "step": 10,
+      "name": "6xl",
+      "px": 60,
+      "rem": 3.75,
+      "lineHeight": 1
+    },
+    {
+      "step": 11,
+      "name": "7xl",
+      "px": 72,
+      "rem": 4.5,
+      "lineHeight": 1
+    },
+    {
+      "step": 12,
+      "name": "8xl",
+      "px": 96,
+      "rem": 6,
+      "lineHeight": 1
+    },
+    {
+      "step": 13,
+      "name": "9xl",
+      "px": 128,
+      "rem": 8,
+      "lineHeight": 1
+    }
+  ],
+  "roles": [
+    {
+      "name": "display",
+      "family": "display",
+      "familyLabel": "Mohr",
+      "fontStack": "var(--font-display)",
+      "size": "5xl",
+      "px": 48,
+      "rem": 3,
+      "lineHeight": 1,
+      "weight": 900,
+      "tracking": 0.01,
+      "transform": "uppercase",
+      "italicCut": true,
+      "fluid": "clamp(2.25rem, 1.5rem + 3vw, 4.5rem)",
+      "cssVar": "--type-display",
+      "class": "type-display",
+      "contexts": {
+        "product": null,
+        "mobile": 36,
+        "marketing": "fluid",
+        "deck": 96
+      },
+      "contextLineHeights": {
+        "product": 1,
+        "mobile": 1,
+        "marketing": 1,
+        "deck": 1
+      },
+      "note": "Hero statement, the big Mohr moment. Marketing keeps the full fluid clamp; product web trims it away."
+    },
+    {
+      "name": "headline",
+      "family": "display",
+      "familyLabel": "Mohr",
+      "fontStack": "var(--font-display)",
+      "size": "3xl",
+      "px": 30,
+      "rem": 1.875,
+      "lineHeight": 1.1,
+      "weight": 900,
+      "tracking": 0.01,
+      "transform": "uppercase",
+      "italicCut": true,
+      "fluid": null,
+      "cssVar": "--type-headline",
+      "class": "type-headline",
+      "contexts": {
+        "product": 24,
+        "mobile": 24,
+        "marketing": 30,
+        "deck": 72
+      },
+      "contextLineHeights": {
+        "product": 1.1,
+        "mobile": 1.1,
+        "marketing": 1.1,
+        "deck": 1.1
+      },
+      "note": "Page titles. Mohr Black, uppercased."
+    },
+    {
+      "name": "title",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "2xl",
+      "px": 24,
+      "rem": 1.5,
+      "lineHeight": 1.18,
+      "weight": 700,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-title",
+      "class": "type-title",
+      "contexts": {
+        "product": 20,
+        "mobile": 20,
+        "marketing": 24,
+        "deck": 60
+      },
+      "contextLineHeights": {
+        "product": 1.18,
+        "mobile": 1.18,
+        "marketing": 1.18,
+        "deck": 1.18
+      },
+      "note": "Section titles and card headers — GT Haptik Bold, sentence case. Sans on purpose: titles are frequent, so keeping the heavy Mohr for display + headline stops the UI turning shouty."
+    },
+    {
+      "name": "heading-sm",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "lg",
+      "px": 18,
+      "rem": 1.125,
+      "lineHeight": 1.3,
+      "weight": 700,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-heading-sm",
+      "class": "type-heading-sm",
+      "contexts": {
+        "product": 18,
+        "mobile": 18,
+        "marketing": 18,
+        "deck": 48
+      },
+      "contextLineHeights": {
+        "product": 1.3,
+        "mobile": 1.3,
+        "marketing": 1.3,
+        "deck": 1.3
+      },
+      "note": "Subsection heading — GT Haptik Bold at reading size, tighter leading. The bold step below title, for headers nested under a section (h3-level). Distinct from subtitle, which is the light lead paragraph at the same size."
+    },
+    {
+      "name": "heading-xs",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "md",
+      "px": 16,
+      "rem": 1,
+      "lineHeight": 1.3,
+      "weight": 700,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-heading-xs",
+      "class": "type-heading-xs",
+      "contexts": {
+        "product": 16,
+        "mobile": 16,
+        "marketing": 16,
+        "deck": 36
+      },
+      "contextLineHeights": {
+        "product": 1.3,
+        "mobile": 1.3,
+        "marketing": 1.3,
+        "deck": 1.3
+      },
+      "note": "Deepest subsection heading (h4-level) — GT Haptik Bold at body size, tighter leading. One rung below heading-sm; sits on the md base step like body, split from it by weight. For headings nested under a subsection, above body-sm copy."
+    },
+    {
+      "name": "subtitle",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "lg",
+      "px": 18,
+      "rem": 1.125,
+      "lineHeight": 1.5,
+      "weight": 400,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-subtitle",
+      "class": "type-subtitle",
+      "contexts": {
+        "product": 18,
+        "mobile": 18,
+        "marketing": 18,
+        "deck": 60
+      },
+      "contextLineHeights": {
+        "product": 1.5,
+        "mobile": 1.5,
+        "marketing": 1.5,
+        "deck": 1.35
+      },
+      "note": "Lead paragraph / deck — the sans bridge under a Mohr headline."
+    },
+    {
+      "name": "body",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "md",
+      "px": 16,
+      "rem": 1,
+      "lineHeight": 1.6,
+      "weight": 400,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-body",
+      "class": "type-body",
+      "contexts": {
+        "product": 16,
+        "mobile": 16,
+        "marketing": 16,
+        "deck": 48
+      },
+      "contextLineHeights": {
+        "product": 1.6,
+        "mobile": 1.6,
+        "marketing": 1.6,
+        "deck": 1.45
+      },
+      "note": "Default reading size — the 1rem base (Tailwind text-base)."
+    },
+    {
+      "name": "body-sm",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "sm",
+      "px": 14,
+      "rem": 0.875,
+      "lineHeight": 1.5,
+      "weight": 400,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-body-sm",
+      "class": "type-body-sm",
+      "contexts": {
+        "product": 14,
+        "mobile": 14,
+        "marketing": 14,
+        "deck": 36
+      },
+      "contextLineHeights": {
+        "product": 1.5,
+        "mobile": 1.5,
+        "marketing": 1.5,
+        "deck": 1.5
+      },
+      "note": "Dense UI and secondary copy."
+    },
+    {
+      "name": "label",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "sm",
+      "px": 14,
+      "rem": 0.875,
+      "lineHeight": 1.2,
+      "weight": 700,
+      "tracking": 0.01,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-label",
+      "class": "type-label",
+      "contexts": {
+        "product": 14,
+        "mobile": 14,
+        "marketing": 14,
+        "deck": 36
+      },
+      "contextLineHeights": {
+        "product": 1.2,
+        "mobile": 1.2,
+        "marketing": 1.2,
+        "deck": 1.2
+      },
+      "note": "Buttons, chips, form labels — Bold with slight tracking."
+    },
+    {
+      "name": "caption",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "xs",
+      "px": 12,
+      "rem": 0.75,
+      "lineHeight": 1.4,
+      "weight": 400,
+      "tracking": 0,
+      "transform": "none",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-caption",
+      "class": "type-caption",
+      "contexts": {
+        "product": 12,
+        "mobile": 12,
+        "marketing": 12,
+        "deck": 36
+      },
+      "contextLineHeights": {
+        "product": 1.4,
+        "mobile": 1.4,
+        "marketing": 1.4,
+        "deck": 1.4
+      },
+      "note": "Captions, metadata, helper text."
+    },
+    {
+      "name": "overline",
+      "family": "sans",
+      "familyLabel": "GT Haptik",
+      "fontStack": "var(--font-sans)",
+      "size": "xs",
+      "px": 12,
+      "rem": 0.75,
+      "lineHeight": 1.1,
+      "weight": 700,
+      "tracking": 0.08,
+      "transform": "uppercase",
+      "italicCut": false,
+      "fluid": null,
+      "cssVar": "--type-overline",
+      "class": "type-overline",
+      "contexts": {
+        "product": 12,
+        "mobile": 12,
+        "marketing": 12,
+        "deck": 30
+      },
+      "contextLineHeights": {
+        "product": 1.1,
+        "mobile": 1.1,
+        "marketing": 1.1,
+        "deck": 1.1
+      },
+      "note": "Eyebrow / overline — uppercase, wide tracking."
+    }
+  ]
+}

package/type/type.theme.css

@@ -0,0 +1,31 @@
+/* Forest type ramp as Tailwind v4 font-size utilities — generated by scripts/type.ts. Do not edit.
+   The ramp IS Tailwind's default scale, so these match the framework defaults (plus a text-md alias for
+   text-base). Import in any product to get text-xs … text-7xl + paired line-heights from one source. */
+@theme {
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.3333;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.4286;
+  --text-md: 1rem; /* base */
+  --text-md--line-height: 1.5;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.5556;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.4;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.3333;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 1.2;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 1.1111;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+}