# Foundations

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

Start with the foundation that matches your decision. Each reference combines visual examples, usage guidance, and the exact values available in the package.

<div className="pathfinder-foundation-links not-prose">
  <a href="/docs/foundations/color-reference">
    <strong>Color</strong>
    <span>Compare scales, background surfaces, and avatar pairs.</span>
  </a>
  <a href="/docs/foundations/typography">
    <strong>Typography</strong>
    <span>
      Try the 17 Inter styles and choose between headings, labels, and copy.
    </span>
  </a>
  <a href="/docs/foundations/sizing-elevation">
    <strong>Dimensions and elevation</strong>
    <span>
      See spacing, corner radius, control sizes, borders, and surface shadows.
    </span>
  </a>
  <a href="/docs/foundations/motion">
    <strong>Motion</strong>
    <span>
      Choose durations and spring presets, with input and accessibility
      guidance.
    </span>
  </a>
</div>

## Read the design rules [#read-the-design-rules]

[Design principles](/docs/foundations/design-rules) captures guidance from all six Figma foundation sheets, including motion recipes and layout guidance. Read it before implementing a component. [Layout guidance](/docs/foundations/layout) covers the app shell, columns and intended overlay sizes, with their current implementation status.

## Use in your application [#use-in-your-application]

Import the compiled stylesheet once. Inter is available as a separate, optional font import.

```tsx
import '@commenda/pathfinder/styles.css';
import '@commenda/pathfinder/fonts.css';
```

Use `pf-txt-*` classes for complete text styles and `--pf-*` variables in your CSS. Your application does not need Tailwind to consume them. [Tokens and styling](/docs/foundations/tokens) covers imports, overrides, and compatibility.

## How to use these references [#how-to-use-these-references]

- **Preview first.** Compare actual colors and dimensions before choosing a token. Scaled diagrams are labeled.
- **Check the context.** A color step alone does not guarantee contrast; control heights must accommodate enlarged text and wrapping labels.
- **Look up the exact value.** Expand the reference tables for token names and CSS variables. These tables also remain in the Markdown version for AI tools.

The current foundations describe the light theme. Color previews stay on a light surface so their meaning does not change with the documentation theme.