# Tokens and styling

Package: @commenda/pathfinder@0.1.0
Page: /docs/foundations/tokens

Pathfinder owns its tokens in `packages/pathfinder/src/foundations`, reviewed
against [The System](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=164-2).
The existing application token package remains unchanged.

## Consume without Tailwind [#consume-without-tailwind]

```tsx
import '@commenda/pathfinder/styles.css';
import '@commenda/pathfinder/fonts.css'; // Optional local Inter fonts.
import {
  colors,
  typography,
  spacing,
  spring,
} from '@commenda/pathfinder/tokens';
```

CSS variables, all typography classes, and component styles are already compiled.
A consumer does not scan source files or install Tailwind. Arbitrary Tailwind
utility strings are not a public contract: use the documented typography classes,
components and CSS variables in your own CSS.

```css
.summary {
  color: var(--pf-color-soft-pearl-1000);
  background: var(--pf-color-background);
  padding: var(--pf-spacing-xl);
  border: var(--pf-stroke-hairline) solid var(--pf-color-soft-pearl-300);
  border-radius: var(--pf-radius-xl);
}
```

## Reference [#reference]

- [Colors and avatar tones](/docs/foundations/color-reference)
- [Typography and playground](/docs/foundations/typography)
- [Spacing, sizing, borders and elevation](/docs/foundations/sizing-elevation)
- [Motion tokens and reduced-motion guidance](/docs/foundations/motion)

## Machine-readable source [#machine-readable-source]

`@commenda/pathfinder/tokens.json` exports the values with schema version, Figma
node IDs, snapshot date, units and aliases. `/tokens` provides the same data as
ESM and readonly TypeScript types. The Markdown tables above are generated from
those exports; `check-types` checks they are current. Edit source tokens, build
Pathfinder, then run `pnpm --filter @commenda/pathfinder-docs generate:foundations`.

## Isolation and compatibility [#isolation-and-compatibility]

Variables use `--pf-*`; utilities use `pf:`; typography recipes use `pf-txt-*`.
Internal Tailwind variables use `--pf-tw-*`. No global Preflight is included.
Import the stylesheet after your application's base styles.

The initial Button override variables remain supported: `--pf-color-primary`,
`--pf-color-primary-hover`, `--pf-color-on-primary`, `--pf-color-disabled` and
`--pf-color-on-disabled`. They reference Blue 700/800, Background and Soft Pearl
300/600. New components should use the Figma scale names rather than introduce
another semantic color layer. Set Button overrides directly on a theme container
when needed and verify contrast for every state.

Inter replaces the bootstrap Mulish fallback. The Button now uses Label/13 Strong
at 13px/16px and weight 500, with wrapping retained. Font loading is opt-in.
`className` is additive; conflicting utilities follow the cascade and are not
merged. Dark-mode values have not been defined by the design system yet.

The Tailwind v4 browser baseline remains Safari 16.4+, Chrome 111+, Firefox 128+.