@findagent/tokens
v0.1.0
Published
FindAgent design tokens — the single source of the brand palette, typography, borders and shadows, shared across the app, landing, bot and status page as a Tailwind preset + CSS + raw JS values.
Maintainers
katateamReadme
@findagent/tokens — the FindAgent design tokens
The single source of truth for the FindAgent brand: palette, typography,
borders, shadows, and shadcn aliases. Consumed by the app (apps/web, via
workspace source → instant, no publish) and — once published to public npm —
by the landing, the bot, and the status page, so every surface renders
identically. Pairs with @findagent/ui (the shared React components), which
assumes these tokens are present in the consumer's Tailwind theme.
Build-free: three static entry points, no compile step.
Entry points
| Import | Kind | Use it for |
|---|---|---|
| @findagent/tokens/tokens.css | CSS | the token values — light (:root) + dark ([data-theme='dark']) custom properties + shadcn aliases |
| @findagent/tokens/tailwind | Tailwind preset (CJS) | maps bg-bg, text-fg-muted, shadow-pop, rounded-2xl, tracking-display, … to the CSS vars |
| @findagent/tokens | JS/TS | TOKENS, light, dark, cssVars, cssVar(), fonts, radii, tracking — for non-CSS contexts (Workers, OG images, charts, emails) |
Consumer setups
1. A Tailwind app (app / landing / bot)
// tailwind.config.js
const findagent = require('@findagent/tokens/tailwind')
module.exports = {
presets: [findagent],
content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], // consumer-specific
plugins: [require('tailwindcss-animate')], // consumer-owned
}/* the global stylesheet — @import ONCE, before @tailwind, so PostCSS inlines
the CSS vars ahead of the generated utilities */
@import '@findagent/tokens/tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;Set data-theme="dark" (or class="dark") on <html> to flip themes. Override
--font-sans / --font-mono if you ship your own webfont (e.g. Next.js
next/font); otherwise the fallback chain renders a correct system face.
2. A plain page (no Tailwind)
<link rel="stylesheet" href="/tokens.css" />
<body data-theme="dark" style="background: var(--bg); color: var(--fg)">…</body>3. A non-CSS context (Cloudflare Worker, OG image, email)
const { dark, fonts, cssVar } = require('@findagent/tokens')
const style = `body{background:${dark.bg};color:${dark.fg};font-family:${fonts.sans}}`
// or reference the themed variable by name:
const border = cssVar('border') // → 'var(--border)'Token reference
Every token carries a light + dark value, a group, and a purpose (see TOKENS).
| Token | CSS var | Light | Dark | Purpose |
|---|---|---|---|---|
| Surfaces |
| bg | --bg | #ffffff | #0a0a0a | base page background |
| bgElevated | --bg-elevated | #ffffff | #161618 | cards, popovers, menus |
| bgSubtle | --bg-subtle | #fafafa | #111113 | recessed panels / bands |
| bgMuted | --bg-muted | #f4f4f5 | #1f1f23 | muted fills — chips, code |
| bgHover | --bg-hover | #f4f4f5 | #1f1f23 | hover surface |
| bgActive | --bg-active | #e4e4e7 | #2a2a2f | pressed surface |
| bgInverse | --bg-inverse | #0a0a0a | #ffffff | tooltip / toast |
| Foreground |
| fg | --fg | #18181b | #fafafa | primary text/icon |
| fgStrong | --fg-strong | #0a0a0a | #ffffff | headings, key figures |
| fgMuted | --fg-muted | #71717a | #a1a1aa | labels, captions |
| fgSubtle | --fg-subtle | #6b7280 | #8b8b94 | hints, timestamps (≥4.5:1) |
| fgOnAccent | --fg-on-accent | #ffffff | #0a0a0a | text on a brand fill |
| Borders |
| border | --border | #e4e4e7 | #27272a | hairline divider |
| borderStrong | --border-strong | #d4d4d8 | #3f3f46 | focus ring, active outline |
| Brand (Industry lens) |
| brandAccent | --brand-accent | #18181b | #fafafa | primary accent |
| brandAccentHover | --brand-accent-hover | #27272a | #ffffff | accent hover |
| brandAccentSoft | --brand-accent-soft | #f4f4f5 | #1f1f23 | selected background |
| brandAccentFg | --brand-accent-fg | #0a0a0a | #ffffff | fg on the soft tint |
| Discipline lens |
| accent2 | --accent-2 | #4f46e5 | #818cf8 | discipline accent (indigo) |
| accent2Hover | --accent-2-hover | #4338ca | #a5b4fc | discipline hover |
| accent2Soft | --accent-2-soft | #eef2ff | #1e1b3a | unselected tile tint |
| accent2Fg | --accent-2-fg | #ffffff | #0a0a0a | fg on the discipline accent |
| Status |
| success | --success | #16a34a | #4ade80 | success / operational |
| warning | --warning | #f59e0b | #fbbf24 | warning / degraded |
| danger | --danger | #dc2626 | #f87171 | danger / down |
| Shadows |
| shadowSm … shadowPop | --shadow-sm … --shadow-pop | rgba(10,10,10,·) | rgba(0,0,0,·) | elevation ramp |
The Tailwind preset also ships the non-var scales: radii (rounded-sm…rounded-3xl,
6→16px), tracking (tracking-tight / tighter / display), and the sans / mono
font families.
Accessibility
Contrast is baked into the values: fgSubtle clears WCAG 1.4.3 (4.5:1) for text on
both themes; the two lens accents each clear AA + AAA against their paired text
(accent2 indigo 7.0:1 light / 8.6:1 dark). Keep secondary text on fgMuted /
fgSubtle — never on border (decorative).
Source of truth
tokens.css and index.cjs carry the same values; edit a token in both (the
JS TOKENS array is the reference; the CSS mirrors it). Origin: the app's
globals.css design-token block, extracted 2026-08-15 (FC-2125). Publishing is a
private npm release (owner OTP) — the app rides the workspace source regardless,
so intra-repo edits are live without a publish.