Tokens and styling

Pathfinder owns its tokens in packages/pathfinder/src/foundations, reviewed against The System. The existing application token package remains unchanged.

Consume without TailwindCopy Anchor Link

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.

.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);
}

ReferenceCopy Anchor Link

• Colors and avatar tones
• Typography and playground
• Spacing, sizing, borders and elevation
• Motion tokens and reduced-motion guidance

Machine-readable sourceCopy Anchor Link

@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 compatibilityCopy Anchor Link

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+.