@krizaka/tokens 2.3.0 → 2.4.0

package/BRAND.md

@@ -1,7 +1,7 @@
 # The Krizaka brand system
 
-One identity for the parent and its products: **one colour per brand**, one family of marks, one icon language and one
-visual language for pages. The values live in `src/brands/<id>.brand.json` (DTCG) and ship as
+One identity for the parent and its products: **one colour per brand**, one family of marks, one icon language, one
+typography (§5) and one visual language for pages. The values live in `src/brands/<id>.brand.json` (DTCG) and ship as
 `@krizaka/tokens/brands/<id>.css`, `brands` (web, raw CSS) and `brands` (`@krizaka/tokens/native`, ThemeProvider
 overrides). A product never re-invents its values: it imports its brand.
 
@@ -103,3 +103,40 @@ What M2/M3/M4 (the homes of Orochia, Orazaka and krizaka.com) apply. Restrained,
   loops fast; everything stops under `prefers-reduced-motion`.
 - **Text on these backgrounds** uses the text roles (`text-fg`, `text-fg-secondary`, `text-fg-accent`): AA is tested
   on every gradient stop, in both themes.
+
+## 5. Typography — three families, one voice
+
+`@krizaka/fonts` (2026-10, session TY) ships them, self-hosted; `@krizaka/tokens` names them (`--kz-font-display`,
+`--kz-font-text` = `--kz-font-sans`, `--kz-font-mono`) and sets the scale (`type.*` → `text-display-xl`, `text-body-md`…
+in `@krizaka/tailwind`, `typeScale` in `/native`). Only faces under the **SIL Open Font License 1.1**: redistributable,
+bundled in apps, subset by us (no Reserved Font Name on any of the three).
+
+| Role | Family | Why this one |
+| :-- | :-- | :-- |
+| **Display** — headlines, figures, names | **Plus Jakarta Sans** (500–800) | Already the headline face of krizaka.com — no gratuitous change to the parent brand. Compact, slightly squared bowls and flat terminals: it echoes the cut corners of the marks and icons, and stays dense and premium at 800. |
+| **Text** — reading and interface | **Inter** (400–700, cut at the text optical size) | Drawn for screens: tall x-height, open apertures, tabular figures for amounts. Already the default of the tokens and Orazaka's text; krizaka.com's body already asked for its character variants (`cv02`–`cv04`). |
+| **Mono** — code, identifiers, overlines | **JetBrains Mono** (400–700) | Already on every Krizaka surface. Unambiguous 0/O and 1/l/I at 12 px; rectangular forms that sit next to the chamfers. |
+
+What we weighed:
+
+- **Continuity first.** The inventory (krizaka.com: Jakarta + JetBrains Mono; Orochia: Jakarta text + Outfit display;
+  Orazaka: Inter + Outfit as a stand-in "Krizaka Display" + JetBrains Mono; the tokens: Inter; the mobile apps: system
+  faces) has three faces in common use. The decision keeps all three and gives each one job, so every surface moves by
+  one role at most: krizaka.com changes its body (Jakarta → Inter), Orazaka its headlines (Outfit → Jakarta), Orochia its
+  body (Jakarta → Inter) — and **keeps Outfit as its product display face**, a theme override of `--kz-font-display`
+  like its violet.
+- **Outfit as the Krizaka display** was the alternative: rounder and friendlier, it reads as Orochia's voice, and moving
+  the parent's headlines to it is the visible change we wanted to avoid.
+- **Screen and French.** Every file covers latin and latin-ext (é è à ç ô œ « » ’ — French is in the latin file; the
+  browser fetches latin-ext only when a page needs it). Each family has a local fallback whose metrics are adjusted to
+  it (`… Fallback`, size-adjust and ascent/descent overrides): the text does not move when the font arrives (CLS 0).
+
+**Signature.** The Krizaka signature in type is the **wordmark**, drawn, inside the logo (`KrizakaLogo`) — never the name
+set in a font. No typeface is drawn from scratch: a cut-corner stylistic set (a chamfered `K`, `z`, `a` as alternates
+of the display face, under the OFL as a modified version with its own name) is a foundry project for later, tracked as
+an issue, not a dependency of anything today.
+
+Rules (also `rules` of `@krizaka/fonts`, on krizaka.com/docs/ui/typography): display speaks, text reads, mono labels;
+display from 20 px at 600–800, text from 12 px at 400–700; one display line per block; tabular figures for amounts; the
+scale, not one-off sizes; products may override the display role only.
+

package/dist/index.d.ts

@@ -45,8 +45,65 @@ export declare const tokens: {
   readonly shadowLg: "var(--kz-shadow-lg)";
   readonly ease: "var(--kz-ease)";
   readonly fontSans: "var(--kz-font-sans)";
+  readonly fontText: "var(--kz-font-text)";
   readonly fontDisplay: "var(--kz-font-display)";
   readonly fontMono: "var(--kz-font-mono)";
+  readonly typeDisplay2xlSize: "var(--kz-type-display-2xl-size)";
+  readonly typeDisplay2xlLineHeight: "var(--kz-type-display-2xl-line-height)";
+  readonly typeDisplay2xlWeight: "var(--kz-type-display-2xl-weight)";
+  readonly typeDisplay2xlTracking: "var(--kz-type-display-2xl-tracking)";
+  readonly typeDisplayXlSize: "var(--kz-type-display-xl-size)";
+  readonly typeDisplayXlLineHeight: "var(--kz-type-display-xl-line-height)";
+  readonly typeDisplayXlWeight: "var(--kz-type-display-xl-weight)";
+  readonly typeDisplayXlTracking: "var(--kz-type-display-xl-tracking)";
+  readonly typeDisplayLgSize: "var(--kz-type-display-lg-size)";
+  readonly typeDisplayLgLineHeight: "var(--kz-type-display-lg-line-height)";
+  readonly typeDisplayLgWeight: "var(--kz-type-display-lg-weight)";
+  readonly typeDisplayLgTracking: "var(--kz-type-display-lg-tracking)";
+  readonly typeDisplayMdSize: "var(--kz-type-display-md-size)";
+  readonly typeDisplayMdLineHeight: "var(--kz-type-display-md-line-height)";
+  readonly typeDisplayMdWeight: "var(--kz-type-display-md-weight)";
+  readonly typeDisplayMdTracking: "var(--kz-type-display-md-tracking)";
+  readonly typeDisplaySmSize: "var(--kz-type-display-sm-size)";
+  readonly typeDisplaySmLineHeight: "var(--kz-type-display-sm-line-height)";
+  readonly typeDisplaySmWeight: "var(--kz-type-display-sm-weight)";
+  readonly typeDisplaySmTracking: "var(--kz-type-display-sm-tracking)";
+  readonly typeTitleLgSize: "var(--kz-type-title-lg-size)";
+  readonly typeTitleLgLineHeight: "var(--kz-type-title-lg-line-height)";
+  readonly typeTitleLgWeight: "var(--kz-type-title-lg-weight)";
+  readonly typeTitleLgTracking: "var(--kz-type-title-lg-tracking)";
+  readonly typeTitleMdSize: "var(--kz-type-title-md-size)";
+  readonly typeTitleMdLineHeight: "var(--kz-type-title-md-line-height)";
+  readonly typeTitleMdWeight: "var(--kz-type-title-md-weight)";
+  readonly typeTitleMdTracking: "var(--kz-type-title-md-tracking)";
+  readonly typeBodyLgSize: "var(--kz-type-body-lg-size)";
+  readonly typeBodyLgLineHeight: "var(--kz-type-body-lg-line-height)";
+  readonly typeBodyLgWeight: "var(--kz-type-body-lg-weight)";
+  readonly typeBodyLgTracking: "var(--kz-type-body-lg-tracking)";
+  readonly typeBodyMdSize: "var(--kz-type-body-md-size)";
+  readonly typeBodyMdLineHeight: "var(--kz-type-body-md-line-height)";
+  readonly typeBodyMdWeight: "var(--kz-type-body-md-weight)";
+  readonly typeBodyMdTracking: "var(--kz-type-body-md-tracking)";
+  readonly typeBodySmSize: "var(--kz-type-body-sm-size)";
+  readonly typeBodySmLineHeight: "var(--kz-type-body-sm-line-height)";
+  readonly typeBodySmWeight: "var(--kz-type-body-sm-weight)";
+  readonly typeBodySmTracking: "var(--kz-type-body-sm-tracking)";
+  readonly typeCaptionSize: "var(--kz-type-caption-size)";
+  readonly typeCaptionLineHeight: "var(--kz-type-caption-line-height)";
+  readonly typeCaptionWeight: "var(--kz-type-caption-weight)";
+  readonly typeCaptionTracking: "var(--kz-type-caption-tracking)";
+  readonly typeOverlineSize: "var(--kz-type-overline-size)";
+  readonly typeOverlineLineHeight: "var(--kz-type-overline-line-height)";
+  readonly typeOverlineWeight: "var(--kz-type-overline-weight)";
+  readonly typeOverlineTracking: "var(--kz-type-overline-tracking)";
+  readonly typeMonoMdSize: "var(--kz-type-mono-md-size)";
+  readonly typeMonoMdLineHeight: "var(--kz-type-mono-md-line-height)";
+  readonly typeMonoMdWeight: "var(--kz-type-mono-md-weight)";
+  readonly typeMonoMdTracking: "var(--kz-type-mono-md-tracking)";
+  readonly typeMonoSmSize: "var(--kz-type-mono-sm-size)";
+  readonly typeMonoSmLineHeight: "var(--kz-type-mono-sm-line-height)";
+  readonly typeMonoSmWeight: "var(--kz-type-mono-sm-weight)";
+  readonly typeMonoSmTracking: "var(--kz-type-mono-sm-tracking)";
 };
 /** A token's camelCase name. */
 export type TokenName = keyof typeof tokens;
@@ -54,6 +111,23 @@ export type TokenName = keyof typeof tokens;
 export type TokenValues = { readonly [K in TokenName]: string };
 /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
 export declare const values: { readonly dark: TokenValues; readonly light: TokenValues };
+/** The role of a step of the type scale: the family it is set in. */
+export type TypeRole = "display" | "text" | "mono";
+/** A step of the type scale. */
+export interface TypeStep {
+  readonly name: "display-2xl" | "display-xl" | "display-lg" | "display-md" | "display-sm" | "title-lg" | "title-md" | "body-lg" | "body-md" | "body-sm" | "caption" | "overline" | "mono-md" | "mono-sm";
+  readonly role: TypeRole;
+  readonly description: string;
+  /** `72px`. */
+  readonly size: string;
+  /** Unitless: `1.05`. */
+  readonly lineHeight: number;
+  readonly weight: number;
+  /** `-0.03em`. */
+  readonly tracking: string;
+}
+/** The type scale: each step's role (the family), size, line height, weight and tracking — `text-<name>` in @krizaka/tailwind. */
+export declare const typeScale: readonly TypeStep[];
 
 /** A Krizaka brand. */
 export type BrandId = "krizaka" | "orazaka" | "orochia";

package/dist/index.js

@@ -45,8 +45,65 @@ export const tokens = /* @__PURE__ */ Object.freeze({
   "shadowLg": "var(--kz-shadow-lg)",
   "ease": "var(--kz-ease)",
   "fontSans": "var(--kz-font-sans)",
+  "fontText": "var(--kz-font-text)",
   "fontDisplay": "var(--kz-font-display)",
-  "fontMono": "var(--kz-font-mono)"
+  "fontMono": "var(--kz-font-mono)",
+  "typeDisplay2xlSize": "var(--kz-type-display-2xl-size)",
+  "typeDisplay2xlLineHeight": "var(--kz-type-display-2xl-line-height)",
+  "typeDisplay2xlWeight": "var(--kz-type-display-2xl-weight)",
+  "typeDisplay2xlTracking": "var(--kz-type-display-2xl-tracking)",
+  "typeDisplayXlSize": "var(--kz-type-display-xl-size)",
+  "typeDisplayXlLineHeight": "var(--kz-type-display-xl-line-height)",
+  "typeDisplayXlWeight": "var(--kz-type-display-xl-weight)",
+  "typeDisplayXlTracking": "var(--kz-type-display-xl-tracking)",
+  "typeDisplayLgSize": "var(--kz-type-display-lg-size)",
+  "typeDisplayLgLineHeight": "var(--kz-type-display-lg-line-height)",
+  "typeDisplayLgWeight": "var(--kz-type-display-lg-weight)",
+  "typeDisplayLgTracking": "var(--kz-type-display-lg-tracking)",
+  "typeDisplayMdSize": "var(--kz-type-display-md-size)",
+  "typeDisplayMdLineHeight": "var(--kz-type-display-md-line-height)",
+  "typeDisplayMdWeight": "var(--kz-type-display-md-weight)",
+  "typeDisplayMdTracking": "var(--kz-type-display-md-tracking)",
+  "typeDisplaySmSize": "var(--kz-type-display-sm-size)",
+  "typeDisplaySmLineHeight": "var(--kz-type-display-sm-line-height)",
+  "typeDisplaySmWeight": "var(--kz-type-display-sm-weight)",
+  "typeDisplaySmTracking": "var(--kz-type-display-sm-tracking)",
+  "typeTitleLgSize": "var(--kz-type-title-lg-size)",
+  "typeTitleLgLineHeight": "var(--kz-type-title-lg-line-height)",
+  "typeTitleLgWeight": "var(--kz-type-title-lg-weight)",
+  "typeTitleLgTracking": "var(--kz-type-title-lg-tracking)",
+  "typeTitleMdSize": "var(--kz-type-title-md-size)",
+  "typeTitleMdLineHeight": "var(--kz-type-title-md-line-height)",
+  "typeTitleMdWeight": "var(--kz-type-title-md-weight)",
+  "typeTitleMdTracking": "var(--kz-type-title-md-tracking)",
+  "typeBodyLgSize": "var(--kz-type-body-lg-size)",
+  "typeBodyLgLineHeight": "var(--kz-type-body-lg-line-height)",
+  "typeBodyLgWeight": "var(--kz-type-body-lg-weight)",
+  "typeBodyLgTracking": "var(--kz-type-body-lg-tracking)",
+  "typeBodyMdSize": "var(--kz-type-body-md-size)",
+  "typeBodyMdLineHeight": "var(--kz-type-body-md-line-height)",
+  "typeBodyMdWeight": "var(--kz-type-body-md-weight)",
+  "typeBodyMdTracking": "var(--kz-type-body-md-tracking)",
+  "typeBodySmSize": "var(--kz-type-body-sm-size)",
+  "typeBodySmLineHeight": "var(--kz-type-body-sm-line-height)",
+  "typeBodySmWeight": "var(--kz-type-body-sm-weight)",
+  "typeBodySmTracking": "var(--kz-type-body-sm-tracking)",
+  "typeCaptionSize": "var(--kz-type-caption-size)",
+  "typeCaptionLineHeight": "var(--kz-type-caption-line-height)",
+  "typeCaptionWeight": "var(--kz-type-caption-weight)",
+  "typeCaptionTracking": "var(--kz-type-caption-tracking)",
+  "typeOverlineSize": "var(--kz-type-overline-size)",
+  "typeOverlineLineHeight": "var(--kz-type-overline-line-height)",
+  "typeOverlineWeight": "var(--kz-type-overline-weight)",
+  "typeOverlineTracking": "var(--kz-type-overline-tracking)",
+  "typeMonoMdSize": "var(--kz-type-mono-md-size)",
+  "typeMonoMdLineHeight": "var(--kz-type-mono-md-line-height)",
+  "typeMonoMdWeight": "var(--kz-type-mono-md-weight)",
+  "typeMonoMdTracking": "var(--kz-type-mono-md-tracking)",
+  "typeMonoSmSize": "var(--kz-type-mono-sm-size)",
+  "typeMonoSmLineHeight": "var(--kz-type-mono-sm-line-height)",
+  "typeMonoSmWeight": "var(--kz-type-mono-sm-weight)",
+  "typeMonoSmTracking": "var(--kz-type-mono-sm-tracking)"
 });
 
 /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
@@ -93,9 +150,66 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "shadowMd": "0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08)",
   "shadowLg": "0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08)",
   "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
-  "fontSans": "Inter, system-ui, sans-serif",
-  "fontDisplay": "Inter, system-ui, sans-serif",
-  "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
+  "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+  "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+  "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",
+  "fontMono": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  "typeDisplay2xlSize": "72px",
+  "typeDisplay2xlLineHeight": "1.02",
+  "typeDisplay2xlWeight": "800",
+  "typeDisplay2xlTracking": "-0.035em",
+  "typeDisplayXlSize": "56px",
+  "typeDisplayXlLineHeight": "1.05",
+  "typeDisplayXlWeight": "800",
+  "typeDisplayXlTracking": "-0.03em",
+  "typeDisplayLgSize": "44px",
+  "typeDisplayLgLineHeight": "1.1",
+  "typeDisplayLgWeight": "700",
+  "typeDisplayLgTracking": "-0.025em",
+  "typeDisplayMdSize": "34px",
+  "typeDisplayMdLineHeight": "1.15",
+  "typeDisplayMdWeight": "700",
+  "typeDisplayMdTracking": "-0.02em",
+  "typeDisplaySmSize": "26px",
+  "typeDisplaySmLineHeight": "1.2",
+  "typeDisplaySmWeight": "700",
+  "typeDisplaySmTracking": "-0.015em",
+  "typeTitleLgSize": "20px",
+  "typeTitleLgLineHeight": "1.35",
+  "typeTitleLgWeight": "700",
+  "typeTitleLgTracking": "-0.01em",
+  "typeTitleMdSize": "17px",
+  "typeTitleMdLineHeight": "1.4",
+  "typeTitleMdWeight": "600",
+  "typeTitleMdTracking": "-0.012em",
+  "typeBodyLgSize": "18px",
+  "typeBodyLgLineHeight": "1.6",
+  "typeBodyLgWeight": "400",
+  "typeBodyLgTracking": "-0.014em",
+  "typeBodyMdSize": "16px",
+  "typeBodyMdLineHeight": "1.6",
+  "typeBodyMdWeight": "400",
+  "typeBodyMdTracking": "-0.011em",
+  "typeBodySmSize": "14px",
+  "typeBodySmLineHeight": "1.5",
+  "typeBodySmWeight": "400",
+  "typeBodySmTracking": "-0.006em",
+  "typeCaptionSize": "12px",
+  "typeCaptionLineHeight": "1.4",
+  "typeCaptionWeight": "500",
+  "typeCaptionTracking": "0em",
+  "typeOverlineSize": "11px",
+  "typeOverlineLineHeight": "1.3",
+  "typeOverlineWeight": "600",
+  "typeOverlineTracking": "0.12em",
+  "typeMonoMdSize": "14px",
+  "typeMonoMdLineHeight": "1.6",
+  "typeMonoMdWeight": "400",
+  "typeMonoMdTracking": "0em",
+  "typeMonoSmSize": "12px",
+  "typeMonoSmLineHeight": "1.5",
+  "typeMonoSmWeight": "400",
+  "typeMonoSmTracking": "0em"
 }), light: /* @__PURE__ */ Object.freeze({
   "surface0": "hsl(0 0% 98%)",
   "surface1": "hsl(0 0% 100%)",
@@ -139,11 +253,198 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "shadowMd": "0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04)",
   "shadowLg": "0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05)",
   "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
-  "fontSans": "Inter, system-ui, sans-serif",
-  "fontDisplay": "Inter, system-ui, sans-serif",
-  "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
+  "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+  "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+  "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",
+  "fontMono": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  "typeDisplay2xlSize": "72px",
+  "typeDisplay2xlLineHeight": "1.02",
+  "typeDisplay2xlWeight": "800",
+  "typeDisplay2xlTracking": "-0.035em",
+  "typeDisplayXlSize": "56px",
+  "typeDisplayXlLineHeight": "1.05",
+  "typeDisplayXlWeight": "800",
+  "typeDisplayXlTracking": "-0.03em",
+  "typeDisplayLgSize": "44px",
+  "typeDisplayLgLineHeight": "1.1",
+  "typeDisplayLgWeight": "700",
+  "typeDisplayLgTracking": "-0.025em",
+  "typeDisplayMdSize": "34px",
+  "typeDisplayMdLineHeight": "1.15",
+  "typeDisplayMdWeight": "700",
+  "typeDisplayMdTracking": "-0.02em",
+  "typeDisplaySmSize": "26px",
+  "typeDisplaySmLineHeight": "1.2",
+  "typeDisplaySmWeight": "700",
+  "typeDisplaySmTracking": "-0.015em",
+  "typeTitleLgSize": "20px",
+  "typeTitleLgLineHeight": "1.35",
+  "typeTitleLgWeight": "700",
+  "typeTitleLgTracking": "-0.01em",
+  "typeTitleMdSize": "17px",
+  "typeTitleMdLineHeight": "1.4",
+  "typeTitleMdWeight": "600",
+  "typeTitleMdTracking": "-0.012em",
+  "typeBodyLgSize": "18px",
+  "typeBodyLgLineHeight": "1.6",
+  "typeBodyLgWeight": "400",
+  "typeBodyLgTracking": "-0.014em",
+  "typeBodyMdSize": "16px",
+  "typeBodyMdLineHeight": "1.6",
+  "typeBodyMdWeight": "400",
+  "typeBodyMdTracking": "-0.011em",
+  "typeBodySmSize": "14px",
+  "typeBodySmLineHeight": "1.5",
+  "typeBodySmWeight": "400",
+  "typeBodySmTracking": "-0.006em",
+  "typeCaptionSize": "12px",
+  "typeCaptionLineHeight": "1.4",
+  "typeCaptionWeight": "500",
+  "typeCaptionTracking": "0em",
+  "typeOverlineSize": "11px",
+  "typeOverlineLineHeight": "1.3",
+  "typeOverlineWeight": "600",
+  "typeOverlineTracking": "0.12em",
+  "typeMonoMdSize": "14px",
+  "typeMonoMdLineHeight": "1.6",
+  "typeMonoMdWeight": "400",
+  "typeMonoMdTracking": "0em",
+  "typeMonoSmSize": "12px",
+  "typeMonoSmLineHeight": "1.5",
+  "typeMonoSmWeight": "400",
+  "typeMonoSmTracking": "0em"
 }) });
 
+/** The type scale: each step's role (the family), size, line height, weight and tracking — `text-<name>` in @krizaka/tailwind. */
+export const typeScale = /* @__PURE__ */ Object.freeze([
+  {
+    "name": "display-2xl",
+    "role": "display",
+    "description": "The hero of a home page",
+    "size": "72px",
+    "lineHeight": 1.02,
+    "weight": 800,
+    "tracking": "-0.035em"
+  },
+  {
+    "name": "display-xl",
+    "role": "display",
+    "description": "The hero of a page",
+    "size": "56px",
+    "lineHeight": 1.05,
+    "weight": 800,
+    "tracking": "-0.03em"
+  },
+  {
+    "name": "display-lg",
+    "role": "display",
+    "description": "The title of a page",
+    "size": "44px",
+    "lineHeight": 1.1,
+    "weight": 700,
+    "tracking": "-0.025em"
+  },
+  {
+    "name": "display-md",
+    "role": "display",
+    "description": "The title of a section",
+    "size": "34px",
+    "lineHeight": 1.15,
+    "weight": 700,
+    "tracking": "-0.02em"
+  },
+  {
+    "name": "display-sm",
+    "role": "display",
+    "description": "A sub-section, a big figure",
+    "size": "26px",
+    "lineHeight": 1.2,
+    "weight": 700,
+    "tracking": "-0.015em"
+  },
+  {
+    "name": "title-lg",
+    "role": "display",
+    "description": "The title of a card or a dialog",
+    "size": "20px",
+    "lineHeight": 1.35,
+    "weight": 700,
+    "tracking": "-0.01em"
+  },
+  {
+    "name": "title-md",
+    "role": "text",
+    "description": "The title of a list or a panel",
+    "size": "17px",
+    "lineHeight": 1.4,
+    "weight": 600,
+    "tracking": "-0.012em"
+  },
+  {
+    "name": "body-lg",
+    "role": "text",
+    "description": "The lead, a paragraph that stands out",
+    "size": "18px",
+    "lineHeight": 1.6,
+    "weight": 400,
+    "tracking": "-0.014em"
+  },
+  {
+    "name": "body-md",
+    "role": "text",
+    "description": "Running text",
+    "size": "16px",
+    "lineHeight": 1.6,
+    "weight": 400,
+    "tracking": "-0.011em"
+  },
+  {
+    "name": "body-sm",
+    "role": "text",
+    "description": "Dense interface, secondary text",
+    "size": "14px",
+    "lineHeight": 1.5,
+    "weight": 400,
+    "tracking": "-0.006em"
+  },
+  {
+    "name": "caption",
+    "role": "text",
+    "description": "Captions, help, metadata",
+    "size": "12px",
+    "lineHeight": 1.4,
+    "weight": 500,
+    "tracking": "0em"
+  },
+  {
+    "name": "overline",
+    "role": "mono",
+    "description": "The overline of a section, uppercase",
+    "size": "11px",
+    "lineHeight": 1.3,
+    "weight": 600,
+    "tracking": "0.12em"
+  },
+  {
+    "name": "mono-md",
+    "role": "mono",
+    "description": "Code blocks",
+    "size": "14px",
+    "lineHeight": 1.6,
+    "weight": 400,
+    "tracking": "0em"
+  },
+  {
+    "name": "mono-sm",
+    "role": "mono",
+    "description": "Identifiers, endpoints, versions",
+    "size": "12px",
+    "lineHeight": 1.5,
+    "weight": 400,
+    "tracking": "0em"
+  }
+]);
+
 /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
 export const brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {

package/dist/native.d.ts

@@ -50,11 +50,22 @@ export declare const radius: {
 /** Font families: the first family of each web stack (React Native takes a single name). */
 export declare const typography: {
   readonly sans: "Inter";
-  readonly display: "Inter";
+  readonly text: "Inter";
+  readonly display: "Plus Jakarta Sans";
   readonly mono: "JetBrains Mono";
 };
 /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
 export declare const motion: { readonly ease: readonly [number, number, number, number] };
+/** A step of the type scale, in dp. */
+export interface NativeTypeStep {
+  readonly role: "display" | "text" | "mono";
+  readonly fontSize: number;
+  readonly lineHeight: number;
+  readonly fontWeight: "400" | "500" | "600" | "700" | "800";
+  readonly letterSpacing: number;
+}
+/** The type scale in dp (React Native): fontSize, lineHeight and letterSpacing absolute, the role whose family sets it. */
+export declare const typeScale: { readonly [K in "display2xl" | "displayXl" | "displayLg" | "displayMd" | "displaySm" | "titleLg" | "titleMd" | "bodyLg" | "bodyMd" | "bodySm" | "caption" | "overline" | "monoMd" | "monoSm"]: NativeTypeStep };
 
 /** A Krizaka brand. */
 export type BrandId = "krizaka" | "orazaka" | "orochia";

package/dist/native.js

@@ -83,13 +83,119 @@ export const radius = /* @__PURE__ */ Object.freeze({
 /** Font families: the first family of each web stack (React Native takes a single name). */
 export const typography = /* @__PURE__ */ Object.freeze({
   "sans": "Inter",
-  "display": "Inter",
+  "text": "Inter",
+  "display": "Plus Jakarta Sans",
   "mono": "JetBrains Mono"
 });
 
 /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
 export const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]) });
 
+/**
+ * The type scale in dp: fontSize, lineHeight and letterSpacing absolute (React Native has no em), fontWeight as a string,
+ * and the role whose family sets it — with @krizaka/fonts: `{ ...typeScale.bodyMd, fontFamily: fontFamily(role, weight) }`.
+ */
+export const typeScale = /* @__PURE__ */ Object.freeze({
+  "display2xl": {
+    "role": "display",
+    "fontSize": 72,
+    "lineHeight": 73,
+    "fontWeight": "800",
+    "letterSpacing": -2.52
+  },
+  "displayXl": {
+    "role": "display",
+    "fontSize": 56,
+    "lineHeight": 59,
+    "fontWeight": "800",
+    "letterSpacing": -1.68
+  },
+  "displayLg": {
+    "role": "display",
+    "fontSize": 44,
+    "lineHeight": 48,
+    "fontWeight": "700",
+    "letterSpacing": -1.1
+  },
+  "displayMd": {
+    "role": "display",
+    "fontSize": 34,
+    "lineHeight": 39,
+    "fontWeight": "700",
+    "letterSpacing": -0.68
+  },
+  "displaySm": {
+    "role": "display",
+    "fontSize": 26,
+    "lineHeight": 31,
+    "fontWeight": "700",
+    "letterSpacing": -0.39
+  },
+  "titleLg": {
+    "role": "display",
+    "fontSize": 20,
+    "lineHeight": 27,
+    "fontWeight": "700",
+    "letterSpacing": -0.2
+  },
+  "titleMd": {
+    "role": "text",
+    "fontSize": 17,
+    "lineHeight": 24,
+    "fontWeight": "600",
+    "letterSpacing": -0.2
+  },
+  "bodyLg": {
+    "role": "text",
+    "fontSize": 18,
+    "lineHeight": 29,
+    "fontWeight": "400",
+    "letterSpacing": -0.25
+  },
+  "bodyMd": {
+    "role": "text",
+    "fontSize": 16,
+    "lineHeight": 26,
+    "fontWeight": "400",
+    "letterSpacing": -0.18
+  },
+  "bodySm": {
+    "role": "text",
+    "fontSize": 14,
+    "lineHeight": 21,
+    "fontWeight": "400",
+    "letterSpacing": -0.08
+  },
+  "caption": {
+    "role": "text",
+    "fontSize": 12,
+    "lineHeight": 17,
+    "fontWeight": "500",
+    "letterSpacing": 0
+  },
+  "overline": {
+    "role": "mono",
+    "fontSize": 11,
+    "lineHeight": 14,
+    "fontWeight": "600",
+    "letterSpacing": 1.32
+  },
+  "monoMd": {
+    "role": "mono",
+    "fontSize": 14,
+    "lineHeight": 22,
+    "fontWeight": "400",
+    "letterSpacing": 0
+  },
+  "monoSm": {
+    "role": "mono",
+    "fontSize": 12,
+    "lineHeight": 18,
+    "fontWeight": "400",
+    "letterSpacing": 0
+  }
+});
+
 /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
 export const brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {

package/dist/tokens.css

@@ -45,8 +45,8 @@
   --kz-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08); /* Menu, popover, carte au survol */
   --kz-shadow-lg: 0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08); /* Dialogue, feuille */
 
-  /* Typographie */
-  --kz-font-display: var(--kz-font-sans); /* Titres ; égal à sans par défaut, surchargé par le thème produit */
+  /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
+  --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
 }
 
 /* Light. */
@@ -109,7 +109,7 @@ html.light {
   --kz-shadow-sm: 0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04); /* Champ, bouton au repos */
   --kz-shadow-md: 0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04); /* Menu, popover, carte au survol */
   --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
-  --kz-font-display: var(--kz-font-sans); /* Titres ; égal à sans par défaut, surchargé par le thème produit */
+  --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
 }
 
 /* Invariants : identiques dans les deux thèmes. Tout ce qui se pose SUR un média les utilise. */
@@ -134,7 +134,92 @@ html.light {
   --kz-radius-full: 9999px; /* Pastille, avatar */
   --kz-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Courbe par défaut de la signature de mouvement */
 
-  /* Typographie */
-  --kz-font-sans: Inter, system-ui, sans-serif; /* Interface et texte courant */
-  --kz-font-mono: "JetBrains Mono", ui-monospace, monospace; /* Code, montants alignés */
+  /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
+  --kz-font-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Texte : interface et lecture (Inter) */
+  --kz-font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Inter, system-ui, sans-serif; /* Affichage : titres, chiffres (Plus Jakarta Sans) ; surchargé par le thème produit */
+  --kz-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Code, identifiants, surtitres (JetBrains Mono) */
+
+  /* The hero of a home page */
+  --kz-type-display-2xl-size: 72px;
+  --kz-type-display-2xl-line-height: 1.02;
+  --kz-type-display-2xl-weight: 800;
+  --kz-type-display-2xl-tracking: -0.035em;
+
+  /* The hero of a page */
+  --kz-type-display-xl-size: 56px;
+  --kz-type-display-xl-line-height: 1.05;
+  --kz-type-display-xl-weight: 800;
+  --kz-type-display-xl-tracking: -0.03em;
+
+  /* The title of a page */
+  --kz-type-display-lg-size: 44px;
+  --kz-type-display-lg-line-height: 1.1;
+  --kz-type-display-lg-weight: 700;
+  --kz-type-display-lg-tracking: -0.025em;
+
+  /* The title of a section */
+  --kz-type-display-md-size: 34px;
+  --kz-type-display-md-line-height: 1.15;
+  --kz-type-display-md-weight: 700;
+  --kz-type-display-md-tracking: -0.02em;
+
+  /* A sub-section, a big figure */
+  --kz-type-display-sm-size: 26px;
+  --kz-type-display-sm-line-height: 1.2;
+  --kz-type-display-sm-weight: 700;
+  --kz-type-display-sm-tracking: -0.015em;
+
+  /* The title of a card or a dialog */
+  --kz-type-title-lg-size: 20px;
+  --kz-type-title-lg-line-height: 1.35;
+  --kz-type-title-lg-weight: 700;
+  --kz-type-title-lg-tracking: -0.01em;
+
+  /* The title of a list or a panel */
+  --kz-type-title-md-size: 17px;
+  --kz-type-title-md-line-height: 1.4;
+  --kz-type-title-md-weight: 600;
+  --kz-type-title-md-tracking: -0.012em;
+
+  /* The lead, a paragraph that stands out */
+  --kz-type-body-lg-size: 18px;
+  --kz-type-body-lg-line-height: 1.6;
+  --kz-type-body-lg-weight: 400;
+  --kz-type-body-lg-tracking: -0.014em;
+
+  /* Running text */
+  --kz-type-body-md-size: 16px;
+  --kz-type-body-md-line-height: 1.6;
+  --kz-type-body-md-weight: 400;
+  --kz-type-body-md-tracking: -0.011em;
+
+  /* Dense interface, secondary text */
+  --kz-type-body-sm-size: 14px;
+  --kz-type-body-sm-line-height: 1.5;
+  --kz-type-body-sm-weight: 400;
+  --kz-type-body-sm-tracking: -0.006em;
+
+  /* Captions, help, metadata */
+  --kz-type-caption-size: 12px;
+  --kz-type-caption-line-height: 1.4;
+  --kz-type-caption-weight: 500;
+  --kz-type-caption-tracking: 0em;
+
+  /* The overline of a section, uppercase */
+  --kz-type-overline-size: 11px;
+  --kz-type-overline-line-height: 1.3;
+  --kz-type-overline-weight: 600;
+  --kz-type-overline-tracking: 0.12em;
+
+  /* Code blocks */
+  --kz-type-mono-md-size: 14px;
+  --kz-type-mono-md-line-height: 1.6;
+  --kz-type-mono-md-weight: 400;
+  --kz-type-mono-md-tracking: 0em;
+
+  /* Identifiers, endpoints, versions */
+  --kz-type-mono-sm-size: 12px;
+  --kz-type-mono-sm-line-height: 1.5;
+  --kz-type-mono-sm-weight: 400;
+  --kz-type-mono-sm-tracking: 0em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/tokens",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
   "keywords": [
     "krizaka",
@@ -73,7 +73,7 @@
     {
       "name": "./tokens.css",
       "path": "dist/tokens.css",
-      "limit": "2.5 kB",
+      "limit": "3.1 kB",
       "gzip": true,
       "rolldown": false
     },
@@ -94,7 +94,7 @@
     {
       "name": ".",
       "path": "dist/index.js",
-      "limit": "2 kB",
+      "limit": "3 kB",
       "gzip": true
     },
     {