From 4ae9287d3a832900388c8f20f97d3404a2271b06 Mon Sep 17 00:00:00 2001 From: "Ricardo Q. Bazan" Date: Sat, 17 Oct 2026 15:24:18 -0500 Subject: [PATCH] docs: say that a step's family in tokens.json names a font token Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01N8f1sEEDiR2ikgqtHWXgYn --- .changeset/type-family-key.md | 5 +++++ skills/vlab-brand/typography.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/type-family-key.md diff --git a/.changeset/type-family-key.md b/.changeset/type-family-key.md new file mode 100644 index 0000000..1296f45 --- /dev/null +++ b/.changeset/type-family-key.md @@ -0,0 +1,5 @@ +--- +"@variablelab/brand": patch +--- + +The Typography chapter says that a step's `family` in `tokens.json` names a font token, `sans` or `mono`, and that its stack is that token's `value` under `font`. diff --git a/skills/vlab-brand/typography.md b/skills/vlab-brand/typography.md index f499e2f..69691ad 100644 --- a/skills/vlab-brand/typography.md +++ b/skills/vlab-brand/typography.md @@ -37,7 +37,7 @@ The bigger the size, the tighter the tracking: each step carries its own value. - CSS: `@variablelab/brand/tokens.css` defines five properties per step on `:root`: `--vlab-type--size`, `-line-height`, `-weight`, `-tracking` and `-family`, such as `--vlab-type-title-size`. A step with no line height has no `-line-height`. `-family` is `var(--vlab-font-sans)` or `var(--vlab-font-mono)`. - Tailwind v4: `@import "@variablelab/brand/theme.css"` adds each step as a font size with its line height, tracking and weight (`text-title`, `text-meta`). The family goes beside it: `text-meta font-mono`. -- Anything else, such as a server-rendered image: read `type` in `@variablelab/brand/tokens.json`. +- Anything else, such as a server-rendered image: read `type` in `@variablelab/brand/tokens.json`. There a step's `family` is the name of a font token, `sans` or `mono`, not a stack: the stack is that token's `value` under `font`. ## Text flow