{"_id":"@amplemarket/design-system","_rev":"5-e2c374e195c65a56867af76289d10edb","name":"@amplemarket/design-system","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.2":{"name":"@amplemarket/design-system","version":"0.1.2","license":"UNLICENSED","_id":"@amplemarket/design-system@0.1.2","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"dist":{"shasum":"6605978d0c2381e023cebdeb98e48272818946de","tarball":"https://registry.npmjs.org/@amplemarket/design-system/-/design-system-0.1.2.tgz","fileCount":35,"integrity":"sha512-Ve6hxkHvONEs/cLndVot4DbevIqU28ZrhA5fDiFEVSZfFv4oHpIqlv0/TzG4fZDNg5oVTMvvhSgGi7u2L/v0AA==","signatures":[{"sig":"MEYCIQCGN/sbaHFo+n+2Mvij+U319VH2VeGORia8qzVFrLWEmwIhANxX+ucxu4LNmoW75j62u8bPOnVKbWHhytfawC4IonRS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":328504},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./fonts/labil-grotesk.css","./fonts/*":"./fonts/*","./logos/*":"./logos/*","./tokens/*":"./tokens/*","./package.json":"./package.json"},"gitHead":"5a7c03f602b1d48c9610942b65e0feb68babfb3c","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean"},"_npmUser":{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"},"_npmVersion":"10.9.2","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","directories":{},"_nodeVersion":"23.11.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.2_1782774017490_0.2808603331448718","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@amplemarket/design-system","version":"0.1.3","license":"UNLICENSED","_id":"@amplemarket/design-system@0.1.3","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"dist":{"shasum":"91547daa9d765ebcb0a99ec06babfb58517276eb","tarball":"https://registry.npmjs.org/@amplemarket/design-system/-/design-system-0.1.3.tgz","fileCount":35,"integrity":"sha512-CM/FhXBF4XG9U48jbtWOPbDJ4aR/Q9p1+ptynm9Y91gkuhHFi8l9kqeqm+dGGmZg9V1Zpym3pOh4+minKjrDyA==","signatures":[{"sig":"MEYCIQDaOBVvvR5thuDAvb/Cl7w5HkcLLLP4jSQo74yybNhIPwIhAONIYmmUnDMl8LF6O15bVa9NFNl2huhDzqTHOK75a/Ad","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":328504},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./fonts/labil-grotesk.css","./fonts/*":"./fonts/*","./logos/*":"./logos/*","./tokens/*":"./tokens/*","./package.json":"./package.json"},"gitHead":"1c45d8a95b41af270a00580903e6fc1e8aacee2d","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f89d4267-7704-4758-8d5c-9f4607e57e73"}},"_npmVersion":"11.13.0","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","directories":{},"_nodeVersion":"24.17.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.3_1782835828039_0.2248267861089457","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@amplemarket/design-system","version":"0.2.0","license":"UNLICENSED","_id":"@amplemarket/design-system@0.2.0","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"dist":{"shasum":"9b19445a5a0e913665368c554d7140f3a8f0b20b","tarball":"https://registry.npmjs.org/@amplemarket/design-system/-/design-system-0.2.0.tgz","fileCount":35,"integrity":"sha512-leRcJhajo9vgOIWLB5L1iX2ilOH0eLbtO2IZKT9WvsU1DtTua7VtZVo0vzLcEMTaS8FSXbLYq9N3/ok2D6qKOw==","signatures":[{"sig":"MEUCIEuHuSFA9CY1Jpfaduy9AsX9k3MVqdcUO5GjPzSHduVzAiEA0oCofDO6+08UknqSACatnSkMlMKiA7CrJ71lFQNUsr8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":328241},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./fonts/labil-grotesk.css","./fonts/*":"./fonts/*","./logos/*":"./logos/*","./tokens/*":"./tokens/*","./package.json":"./package.json"},"gitHead":"0eddb3262a0a998857fbf3381b2e8b0ca828af3b","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f89d4267-7704-4758-8d5c-9f4607e57e73"}},"_npmVersion":"11.17.0","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","directories":{},"_nodeVersion":"24.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.2.0_1787922102562_0.18810806114167256","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@amplemarket/design-system","version":"0.2.1","license":"UNLICENSED","_id":"@amplemarket/design-system@0.2.1","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"dist":{"shasum":"343625e72244738d8d56d2dcac37af1eb3fa20dc","tarball":"https://registry.npmjs.org/@amplemarket/design-system/-/design-system-0.2.1.tgz","fileCount":35,"integrity":"sha512-7R93iLylaDhwHu5toou/wAgsCtPDQOOYzEo3xwp6N7Y0ZEANUD89xwq3pQXF6G/Q3TWiwQBotvFv9mlpBvlszw==","signatures":[{"sig":"MEUCIQDpJP8ddAc4rATTRYZiXeoyIhbxjFvTcYguNJ9dYG7wvQIgDMeNb5VscMlbION+gDWVFaWLp25vqoQezollfyWVzSg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":324540},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./fonts/labil-grotesk.css","./fonts/*":"./fonts/*","./logos/*":"./logos/*","./tokens/*":"./tokens/*","./package.json":"./package.json"},"gitHead":"46a5ecc98597416d4d4a86d1a40bfc54653cc1d6","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f89d4267-7704-4758-8d5c-9f4607e57e73"}},"_npmVersion":"11.17.0","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","directories":{},"_nodeVersion":"24.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.2.1_1787925204529_0.8675098991834829","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"_id":"@amplemarket/design-system@0.3.0","dist":{"shasum":"e164fecfa1e4dded18dd77f70ab8c025d077c0b6","tarball":"https://registry.npmjs.org/@amplemarket/design-system/-/design-system-0.3.0.tgz","fileCount":35,"integrity":"sha512-ad+WHdXqMnC8zFi2wX7ZZNzoe1Ev1/lxIbTZxmu3wnkOrMB7mJzYO/QcRKWkmccgFlbIrHCYim9kziol/2Ej1A==","signatures":[{"sig":"MEUCIQD3/QD+VQSnUuJeosYzzubftjuTYuQqQKICfRTg7iReDwIgVWZdg86h7gOQbiud1imWm/VZfPHCdQ+Ht0E6yrpfSXs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAptxd9aOu4ZYGHisor15naGkzw6wNGZ4V3rZmvQkxBjAiBawt5HLOB+27jS6L2139vw6/Ulpym/emAm5VezH5vGWw=="}],"unpackedSize":327910},"main":"./dist/index.cjs","name":"@amplemarket/design-system","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./fonts/labil-grotesk.css","./fonts/*":"./fonts/*","./logos/*":"./logos/*","./tokens/*":"./tokens/*","./package.json":"./package.json"},"gitHead":"4adeeef542a31e31af71b21b151326d3908fb8dc","license":"UNLICENSED","scripts":{"build":"style-dictionary build --config style-dictionary.config.js","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean"},"version":"0.3.0","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f89d4267-7704-4758-8d5c-9f4607e57e73"}},"_npmVersion":"11.19.0","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","directories":{},"maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"_nodeVersion":"24.20.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.3.0_1789403869920_0.7405116058988368"}}},"time":{"created":"2026-06-29T23:00:17.349Z","modified":"2026-09-14T16:37:50.176Z","0.1.2":"2026-06-29T23:00:17.642Z","0.1.3":"2026-06-30T16:10:28.221Z","0.2.0":"2026-08-28T13:01:42.720Z","0.2.1":"2026-08-28T13:53:24.655Z","0.3.0":"2026-09-14T16:37:50.030Z"},"license":"UNLICENSED","description":"Primitive design tokens for Amplemarket — the single source of truth shared across products, marketing sites, and tooling.","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"readme":"# @amplemarket/design-system\n\nThe highest-level design-token repository for Amplemarket. **Primitives only** — no semantic variables, no role assignments, no per-surface opinions. This package is the single source of truth for colors, typography, spacing, radius, shadows, motion, breakpoints, and z-index values used across every Amplemarket property (products, marketing sites, internal tools, AI prompts).\n\nUsage guidance — which hues are \"primary\", which weight is the workhorse, how shadows map to elevation roles, etc. — lives **one level down**, in each consumer repo's semantic layer. Usage differs substantially between surfaces (product UI, marketing, email, decks), so this repo intentionally doesn't ship that opinion.\n\n---\n\n## Install\n\nThis package is published publicly to the npmjs registry.\n\n```sh\nnpm install @amplemarket/design-system\n```\n\n### From a git URL\n\nGit URL installs still work for testing unreleased commits.\n\n```sh\n# npm\nnpm install github:Amplemarket/design-system\n\n# pnpm\npnpm add github:Amplemarket/design-system\n\n# yarn\nyarn add github:Amplemarket/design-system\n```\n\nYou can pin to a specific commit, tag, or branch:\n\n```sh\nnpm install github:Amplemarket/design-system#v0.1.0\nnpm install github:Amplemarket/design-system#main\nnpm install github:Amplemarket/design-system#<sha>\n```\n\nSSH also works (useful in CI with a deploy key):\n\n```sh\nnpm install git+ssh://git@github.com/Amplemarket/design-system.git#v0.1.0\n```\n\n### How the install works\n\n`dist/` is not committed to the repository. The publish workflow builds it in CI before `npm publish`, and the generated files are included in the public npmjs tarball. Registry consumers receive the already-built package and do not need to run a build step.\n\nThe `prepare` lifecycle script remains for local `npm pack` / `npm publish` and git-URL installs. If your CI environment installs this package from git and strips lifecycle scripts (`npm install --ignore-scripts`), you will need to allow the `prepare` script for this package, or vendor the built artifacts another way.\n\n---\n\n## Usage\n\n### CSS custom properties\n\n```css\n@import \"@amplemarket/design-system/css\";\n\n.my-button {\n  background: var(--color-indigo-900);\n  padding: var(--spacing-12) var(--spacing-24);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-300);\n}\n```\n\n### SCSS variables\n\n```scss\n@use \"@amplemarket/design-system/scss\" as tokens;\n\n.my-button {\n  background: tokens.$color-indigo-900;\n  padding: tokens.$spacing-12 tokens.$spacing-24;\n}\n```\n\n### JavaScript / TypeScript\n\n```ts\nimport tokens from \"@amplemarket/design-system\";\n\nconst bg = tokens.color.indigo[\"900\"]; // \"#10054d\"\nconst gap = tokens.spacing[\"24\"];       // \"24px\"\n```\n\n### Raw JSON (tool-to-tool, AI prompts, scripts)\n\n```ts\nimport tokens from \"@amplemarket/design-system/json\";\n```\n\nOr read any source file directly, e.g. `@amplemarket/design-system/tokens/color/palette.json`.\n\n### Figma (native variable import)\n\n`dist/tokens.figma.json` is a single file hand-tuned for Figma's **Variables → Import** panel. In Figma: open the Variables panel, click **Import**, and select the file.\n\nThe file is also exposed as a subpath export for tooling that resolves npm paths:\n\n```ts\nimport figmaTokens from \"@amplemarket/design-system/figma\";\n```\n\nWhat's included: `color`, `borderWidth`, `radius`, `spacing`, `opacity`, `breakpoint`, `zIndex`, `duration`, `fontFamily`, `fontSize`, `letterSpacing`, `lineHeight`. Group names are title-cased for readability (`fontFamily` → `Font Family`).\n\nWhat's excluded — and why:\n\n| Group                  | Reason                                                                 |\n|------------------------|------------------------------------------------------------------------|\n| `shadow`               | Composite type — Figma variables can't represent shadow stacks. Rebuild as effect styles in Figma. |\n| `easing`               | String values (`cubic-bezier(...)`, keywords) — no Figma binding target. |\n| `fontFeatureSettings`  | Figma can't currently reference these as variables.                    |\n| `fontVariationSettings`| Figma can't currently reference these as variables.                    |\n\nWhat's rescaled vs. source — Figma's variable UI binds these properties as percentages, but the source stores the JS/CSS-native convention:\n\n- **Opacity**: `opacity.6` (source `0.06`) → `6` in the Figma file.\n- **Line height**: `lineHeight.110` (source `1.1`) → `110` in the Figma file.\n- **Letter spacing**: `letterSpacing.-8` (source `\"-0.08em\"`) → `-8` in the Figma file. Type changes from `dimension` to `number` since the value is no longer a length.\n- **Alpha colors**: `color.blackAlpha.4` uses `alpha: 0.04` exactly (rather than the 8-bit-rounded `10/255 ≈ 0.039` that the hex byte would imply).\n\nOther outputs (CSS / SCSS / JS / JSON) are unchanged — they continue to ship raw source values.\n\nVariables also ship with **Figma scopes** via DTCG `$extensions` — these narrow the variable picker so e.g. an opacity token doesn't appear when binding font-size:\n\n| Token group     | Figma `VariableScope`         |\n|-----------------|-------------------------------|\n| `opacity`       | `OPACITY`                     |\n| `lineHeight`    | `LINE_HEIGHT`                 |\n| `letterSpacing` | `LETTER_SPACING`              |\n| `fontSize`      | `FONT_SIZE`                   |\n| `fontFamily`    | `FONT_FAMILY`                 |\n| `radius`        | `CORNER_RADIUS`               |\n| `borderWidth`   | `STROKE_FLOAT`                |\n| `spacing`       | `GAP`, `WIDTH_HEIGHT`         |\n\n`color`, `breakpoint`, `zIndex`, and `duration` ship unscoped (Figma default `ALL_SCOPES`) — colors should be reachable as fill/stroke/text-fill, and the latter three have no clean Figma binding target. As of early 2026 Figma's importer is reported to inconsistently honor `$extensions`; the format is forward-compatible regardless.\n\nThe export gate is an explicit allowlist in [style-dictionary.config.js](./style-dictionary.config.js) (`FIGMA_INCLUDE_GROUPS`). Adding a new primitive group at source does **not** auto-include it here — opt in deliberately, and add a `FIGMA_SCOPES` entry in the same file if the new group has a clear scope.\n\n### Font\n\nLabil Grotesk Variable ships with the package:\n\n```css\n@import \"@amplemarket/design-system/fonts\";\n```\n\nThis registers a single `@font-face` for `\"Labil Grotesk Variable\"` (weight range 100–800). The font file sits at `@amplemarket/design-system/fonts/labil-grotesk-variable.woff2` if you need to reference it directly (e.g. Next.js `next/font/local`).\n\n### Logos\n\nThe brand logos ship as SVG files under `logos/`. Reference them by path — there is no CSS or JS wrapper. Each mark has a black variant (for use on light backgrounds) and a white variant (for use on dark backgrounds); the app icon additionally has two corner shapes.\n\n```html\n<!-- anywhere that accepts an image URL -->\n<img src=\"/node_modules/@amplemarket/design-system/logos/logotype/black.svg\" />\n```\n\n```tsx\n// bundlers that resolve subpath exports\nimport logotypeBlack from \"@amplemarket/design-system/logos/logotype/black.svg\";\nimport logomarkWhite from \"@amplemarket/design-system/logos/logomark/white.svg\";\nimport iconRounded   from \"@amplemarket/design-system/logos/icon/rounded.svg\";\n```\n\nFiles:\n\n| Path                              | Mark      | Use                                            |\n|-----------------------------------|-----------|------------------------------------------------|\n| `logos/logotype/black.svg`        | Logotype  | Wordmark + symbol, dark ink — for light backgrounds. |\n| `logos/logotype/white.svg`        | Logotype  | Wordmark + symbol, light ink — for dark backgrounds. |\n| `logos/logomark/black.svg`        | Logomark  | Symbol only, dark ink — for light backgrounds. |\n| `logos/logomark/white.svg`        | Logomark  | Symbol only, light ink — for dark backgrounds. |\n| `logos/icon/rounded.svg`          | App icon  | Square with rounded corners (24px radius).     |\n| `logos/icon/circle.svg`           | App icon  | Fully circular mask.                            |\n\nThe SVGs are intentionally un-optimized beyond what the source export produced — if a consumer needs a smaller inline version they should optimize at the consumer side, because primitive assets shouldn't lose detail here.\n\n---\n\n## What's inside\n\n```\ntokens/\n├── color/                    15 hues × 10 stops (50–900), plus black/white/transparent\n│   ├── base.json             black, white, transparent;\n│   │                         blackAlpha / whiteAlpha (4, 6, 8, 12, 16, 30, 40, 60, 80 — keyed by %)\n│   └── palette.json          neutral, indigo, blue, orange, green, pink, yellow, cyan,\n│                             amber, stone, emerald, lime, salmon, ocean, violet\n├── dimension/\n│   ├── border-width.json     0, 1, 2, 4, 8 (px)\n│   ├── radius.json           0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 9999 (px)\n│   └── spacing.json          0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, …, 256 (px)\n├── typography/\n│   ├── font-family.json              brand (Labil Grotesk Variable — only family shipped)\n│   ├── font-feature-settings.json    ss02\n│   ├── font-size.json                10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 64 (px)\n│   ├── font-variation-settings.json  STBL axis (0, 50, 100)\n│   ├── letter-spacing.json           -8, -7, -6, -5, -4, -3, -2, 0 (keyed by percent, value in em;\n│   │                                 font-agnostic scale — which stops a face uses is semantic)\n│   └── line-height.json              100–200 (keyed ×100, values are ratios)\n├── effect/\n│   ├── opacity.json          0, 6, 8, 12, 30, 40, 60, 80, 100 (keys mirror alpha scale)\n│   └── shadow.json           100–900 scale (each shadow composes 1–3 layers; all\n│                             layer colors are references to color.blackAlpha.*)\n├── motion/\n│   ├── duration.json         0–1000 ms\n│   └── easing.json           linear, in, out, inOut, inQuint, outQuint\n└── layout/\n    ├── breakpoint.json       360, 480, 640, 768, 1024, 1280, 1536 (px)\n    └── z-index.json          0, 10, 20, 30, 40, 50, 100\n\nfonts/\n├── labil-grotesk-variable.woff2\n└── labil-grotesk.css         @font-face declaration\n\nlogos/\n├── logotype/                 full logotype (wordmark + symbol)\n│   ├── black.svg             for light backgrounds\n│   └── white.svg             for dark backgrounds\n├── logomark/                 symbol only\n│   ├── black.svg             for light backgrounds\n│   └── white.svg             for dark backgrounds\n└── icon/                     app-icon forms\n    ├── rounded.svg           square, 24px rounded corners, #111111 fill\n    └── circle.svg            fully circular, #111111 fill\n```\n\nAll token files use the [W3C DTCG (Design Tokens Community Group) format](https://design-tokens.github.io/community-group/format/) (`$value`, `$type`, `$description`).\n\n### Why px for spacing and font sizes\n\nSpacing, radius, border-width, font-size, and breakpoint tokens are in `px` (not `rem`). This is a deliberate choice:\n\n- **Single source of truth is easier when units don't shift under you.** A 12px gap drawn in Figma is 12px in the browser, period — no mental translation through a document-root font-size.\n- **`rem` conversion is a semantic concern.** Consumer repos that need root-font-relative scaling (for user-zoom or accessibility compliance) can wrap these primitives in their semantic layer with a simple `px → rem` divide. The reverse — inferring px intent from rem — is lossy.\n- **Line-height tokens are unitless ratios**, so they compose correctly with any font-size whether the consumer expresses sizes in px or rem.\n\nIf you're building a surface where browser font-size scaling matters (most product UI), do the `px → rem` mapping once in your semantic layer.\n\n---\n\n## Font structure (what consumers need to know)\n\nThese are facts about Labil Grotesk Variable that any consumer needs to correctly use the font. They're brand-universal — nothing here depends on which surface you're building. Usage opinions (how you style headings, body, labels, etc.) belong in your semantic layer.\n\n**Subfamily:** Only the Upright subfamily is shipped (no italic file).\n\n**No monospace face.** The brand doesn't ship or specify a mono family; `fontFamily` exposes only `brand`. If a surface needs a mono font (code blocks, tabular data), handle it locally in that surface's semantic layer.\n\n**Variable axes:**\n\n| Axis   | Range  | Default | Notes                                                                                                     |\n|--------|--------|---------|-----------------------------------------------------------------------------------------------------------|\n| `wght` | 100–800 | 426    | Standard weight axis.                                                                                     |\n| `STBL` | 0–100   | 100    | Custom \"stability\" axis — controls how expressive the face is. `100` is fully upright (the font's default, no rotation), `0` is the most expressive (affected glyphs at maximum rotation), `50` is the intermediate stop. |\n\n**Named instances** (what `wght` value each Labil name corresponds to):\n\n| Value | Name     |\n|-------|----------|\n| 100   | Hairline |\n| 144   | Fine     |\n| 215   | Thin     |\n| 311   | Light    |\n| 426   | Regular  |\n| 555   | Medium   |\n| 685   | Bold     |\n| 800   | Black    |\n\n`fontWeight` is **not** shipped as a primitive token. Weight is a usage decision (which weights map to headings, body, labels, numerics, etc.) that differs per surface, so it lives in each consumer's semantic layer. Set `font-weight` directly against the Labil named-instance values above — e.g. `426` for Regular, `555` for Medium. The brand also relies on `450` as a specific stop between Regular and Medium that has no Labil named instance; consumers who need it can use the raw value.\n\n### Expression (`STBL`)\n\nThe stability axis is the dial for how expressive Labil Grotesk is. It rotates a subset of glyphs; the lower the value, the more rotation:\n\n```css\nfont-variation-settings: var(--font-variation-settings-stbl-100); /* upright — the font default */\nfont-variation-settings: var(--font-variation-settings-stbl-50);  /* intermediate */\nfont-variation-settings: var(--font-variation-settings-stbl-0);   /* most expressive */\n```\n\nWhich stop a given surface uses is a semantic decision — pick it in your own layer.\n\n### Numeric text\n\nAnywhere your UI renders digits that should *read as digits* (prices, counters, metrics, tabular data), apply both:\n\n```css\nfont-variation-settings: var(--font-variation-settings-stbl-100);  /* \"STBL\" 100 */\nfont-variant-numeric: tabular-nums;\n```\n\nThe first pins the stability axis upright, so digits stay unrotated even inside a block that has set a lower `STBL`; the second makes digits monospaced so columns align. This combination is universal across Amplemarket surfaces — implement it in your semantic layer as whatever fits (CSS class, Tailwind plugin, styled-components helper, etc.).\n\n### OpenType features\n\n- `ss02` — stylistic set 02. Used to highlight specific portions of a text. Apply via `font-feature-settings: var(--font-feature-settings-ss02-1)`.\n\n---\n\n## Build\n\n```sh\nnpm install\nnpm run build\n```\n\nThis runs [Style Dictionary](https://styledictionary.com/) v4 over `tokens/**/*.json` and emits, under `dist/`:\n\n| Output           | Path                     | Use                                  |\n|------------------|--------------------------|--------------------------------------|\n| CSS custom props | `dist/tokens.css`        | Browsers, any CSS pipeline           |\n| SCSS variables   | `dist/_tokens.scss`      | Sass-based projects                  |\n| ESM              | `dist/index.mjs`         | Modern JS/TS (nested default export) |\n| CJS              | `dist/index.cjs`         | Node / legacy bundlers               |\n| Types            | `dist/index.d.ts`        | TypeScript                           |\n| Nested JSON      | `dist/tokens.json`       | Arbitrary consumers, AI tools        |\n| Figma DTCG JSON  | `dist/tokens.figma.json` | Figma native variable import (allowlisted groups, percent-rescaled) |\n\n`dist/` is generated — **it is not committed**. The `prepare` script regenerates it on every `npm install` of this package (including git-URL installs by downstream consumers) and before `npm publish` / `npm pack`. Contributors running `npm install` inside this repo will also see `dist/` reappear automatically.\n\nSee [style-dictionary.config.js](./style-dictionary.config.js) to add a new output target.\n\n## Adding or changing a token\n\n1. Edit the relevant file under `tokens/`. Keep it primitive — no semantic keys.\n2. Run `npm run build` locally to verify `dist/` regenerates cleanly. Do **not** commit the generated `dist/` output — it is gitignored and rebuilt on install.\n3. Add an entry to [CHANGELOG.md](./CHANGELOG.md) describing the change (see [Versioning](#versioning) below for what counts as major / minor / patch).\n4. Bump the version in `package.json` according to the versioning policy.\n5. Open a PR. Tag the release (`git tag vX.Y.Z && git push --tags`) so consumers can pin to it.\n\n## Versioning\n\nThis package follows [Semantic Versioning](https://semver.org/). \"Breaking\" is defined from the point of view of a consumer who has built against a specific version of `dist/`:\n\n| Change                                                                  | Bump  |\n|-------------------------------------------------------------------------|-------|\n| Renaming or removing any existing token key                             | major |\n| Changing the **value** of an existing token such that consumer UIs shift visibly (color, spacing, shadow geometry, font size) | major |\n| Removing a build output (CSS/SCSS/ESM/CJS/JSON/d.ts) or an exports path | major |\n| Changing the resolved shape of a token in JS/JSON (e.g. object → array) | major |\n| Adding a new token, scale stop, color hue, or output target             | minor |\n| Cosmetic re-ordering of keys, comment edits, `$description` additions   | patch |\n| Fixing an obvious typo in a value (with negligible visual impact)       | patch |\n\nIf in doubt, assume major. Consumers snapshot the resolved tokens — we would rather over-signal a breaking change than silently ship one.\n\nPre-1.0 caveat: while the package is on `0.x`, treat a minor bump as potentially breaking (per SemVer's 0.x convention) and pin exactly in consumer `package.json` until 1.0.\n\n## Changelog\n\nAll notable changes are recorded in [CHANGELOG.md](./CHANGELOG.md). The repo follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) convention. Every version bump must be accompanied by a changelog entry, with a clear note when a change is considered breaking.\n\n## Rules for contributors\n\n- **No semantics.** `color.primary`, `radius.lg`, `spacing.card`, `shadow.elevated`, `color.success` — all belong in the consumer repo, not here.\n- **No usage opinions.** Don't document \"use `fontSize.16` for body text\" or \"`shadow.500` is our popover shadow\" — surfaces differ. Keep this repo purely descriptive.\n- **Keys encode values where possible.** `spacing.12` means 12px. `color.blue.500` is a palette position. `fontSize.16` is 16px. Use ordinal integers (`shadow.100`, `zIndex.10`) only when the value isn't a single scalar.\n- **Brand-universal *facts* can live on the token via DTCG `$description`.** If a token carries context every consumer needs (e.g. \"STBL is the Labil stability axis; 100 is fully upright, 0 the most expressive\"), put it in `$description` on the token itself — not in a separate doc.\n","readmeFilename":"README.md"}