{"_id":"@bitbaum/design-tokens","name":"@bitbaum/design-tokens","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@bitbaum/design-tokens","version":"1.1.0","engines":{"node":">=20"},"publishConfig":{"access":"public","provenance":true},"description":"Design SSOT for OrangeCat, FleetCrown and Solon — tokens, self-hosted faces, and the Tailwind preset that maps them.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bitbaum/design-tokens.git"},"exports":{"./tokens.css":"./tokens.css","./tailwind-preset":"./tailwind-preset.js","./fonts/*":"./fonts/*"},"sideEffects":["*.css"],"devDependencies":{"@eslint/js":"^10.0.1","@types/node":"^26.4.0","eslint":"^10.9.1","globals":"^17.12.0","prettier":"3.9.6","typescript":"^6.0.3"},"scripts":{"lint":"eslint .","typecheck":"tsc --noEmit","test":"node --test test/*.test.js","verify":"pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm test","format":"prettier --write .","format:check":"prettier --check ."},"_nodeVersion":"22.22.0","_id":"@bitbaum/design-tokens@1.1.0","dist":{"integrity":"sha512-sDVplKP4jKe0WHCOnW7xk75RC46JsAYqUngcVlctyAs9f1TQqZqbYTfbmyYipYCOaCIHMflnzAneQTbqrQbtBw==","shasum":"c5fd3d81bae4fe710721cd18751b524d974ea38a","tarball":"https://registry.npmjs.org/@bitbaum/design-tokens/-/design-tokens-1.1.0.tgz","fileCount":12,"unpackedSize":246040,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCH0uL82E0bV9a9tXZ7nM5Kr+xy654qMqtRkSSWBgUJqMCIQD068d3ifKM3KTOhlQ7HRvvaA6Cbs3GVEHULFBTY1AKjQ=="}]},"_npmUser":{"name":"maonakamoto","email":"butaeff@gmail.com"},"directories":{},"maintainers":[{"name":"maonakamoto","email":"butaeff@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_1.1.0_1788620428448_0.486528828920183"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-05T15:00:28.299Z","1.1.0":"2026-09-05T15:00:28.602Z","modified":"2026-09-05T15:00:28.891Z"},"maintainers":[{"name":"maonakamoto","email":"butaeff@gmail.com"}],"description":"Design SSOT for OrangeCat, FleetCrown and Solon — tokens, self-hosted faces, and the Tailwind preset that maps them.","repository":{"type":"git","url":"git+https://github.com/bitbaum/design-tokens.git"},"license":"MIT","readme":"# @bitbaum/design-tokens\n\nThe design **single source of truth** for OrangeCat, FleetCrown and Solon.\n\nOne file — [`tokens.css`](./tokens.css) — defines every colour, typeface, weight,\ntracking, radius and shared primitive the three products use. They import it.\nNothing is copied.\n\n## Why\n\nThese tokens used to be hand-copied into three repos, and they drifted. Solon's\n`globals.css` carried a comment claiming its tokens matched OrangeCat's while\nsharing **zero** names or values with it — so the three products looked like\nthree different companies. Copies drift; imports cannot.\n\n## Retheming the entire stack\n\n1. Edit the block marked `▼▼▼ THE KNOBS ▼▼▼` in `tokens.css`. Nothing else.\n2. Tag a release: `git tag v1.2.0 && git push --tags`\n3. Bump `@bitbaum/design-tokens` in the three apps. Their CI auto-merges.\n\nChanging the display typeface is **one line**:\n\n```css\n--font-display: \"Instrument Serif\", Georgia, serif;\n--font-display-weight: 400;   /* the face's weight lives WITH the face */\n--tracking-display: -0.015em; /* and so does its tracking */\n```\n\n## Install\n\n```jsonc\n// package.json\n\"@bitbaum/design-tokens\": \"github:bitbaum/design-tokens#v1.1.0\"\n```\n\n```tsx\n// app/layout.tsx — import BEFORE the app's own globals.css\nimport \"@bitbaum/design-tokens/tokens.css\";\nimport \"./globals.css\";\n```\n\n```js\n// tailwind.config.js (v3)\nmodule.exports = {\n  presets: [require(\"@bitbaum/design-tokens/tailwind-preset\")],\n  content: [\"./src/**/*.{js,ts,jsx,tsx,mdx}\"],\n};\n```\n\nTailwind v4 apps consume `tokens.css` through `@theme`; the variable names are\nidentical, so both paths stay in sync.\n\n## The contract\n\nComponents declare **intent**, never mechanics.\n\n| Do | Don't | Why |\n|---|---|---|\n| `className=\"font-display\"` | `font-['Instrument_Serif']` | the face is not a component's business |\n| `className=\"font-display\"` | `font-display font-bold` | the display face has **one weight**; a synthesized bold looks cheap |\n| `className=\"bg-surface-base\"` | `bg-[#1c1c1c]` | retheming must not require finding hex codes |\n| `className=\"text-accent\"` | `text-[#ff5c00]` | one action colour, one definition |\n| `bg-accent text-on-accent` | `bg-accent text-white` | white on the accent is **3.10:1** and fails AA; the paired ink is 6.10:1 |\n| `className=\"tabular\"` | — | numbers that change in place must not jitter |\n| `font-display` at ≥`text-2xl` | `font-display text-lg` | below 24px the high-contrast serif reads *lighter* than the body sans and hierarchy inverts |\n| `className=\"wordmark\"` | `font-display` on the logo | uppercase + open tracking is the one small size a display serif survives |\n\nEnforce it in each repo's design gate so drift fails the build rather than\nshipping quietly.\n\n## Typefaces\n\nSelf-hosted (latin + latin-ext), no runtime requests to Google:\n\n| Role | Face | Weights | Carries |\n|---|---|---|---|\n| display | Instrument Serif | 400 only | headlines, wordmarks |\n| sans | Inter | 400–700 variable | all UI and body text |\n| mono | IBM Plex Mono | 400, 500 | addresses, signatures, hashes, tallies |\n\nAll three are SIL Open Font License.\n\n### Why a serif\n\nEvery AI and infrastructure company competes inside the same dark-canvas\ngrotesque convention, where the winner is whoever has the largest design budget.\nA high-contrast serif exits that comparison: it reads institutional rather than\nstartup, which is exactly right for a stack whose product is *legitimacy* —\nsigned votes, verifiable treasuries, an append-only audit trail.\n","readmeFilename":"","_rev":"1-c2c2dda1d201eb9844f1a96040cb6d1e"}