Foundations
Choose the colors, text styles, dimensions and motion behind Pathfinder interfaces.
Start with the foundation that matches your decision. Each reference combines visual examples, usage guidance, and the exact values available in the package.
Try the 17 Inter styles and choose between headings, labels, and copy.
Dimensions and elevationSee spacing, corner radius, control sizes, borders, and surface shadows.
MotionChoose durations and spring presets, with input and accessibility guidance.
Read the design rules
Design principles captures guidance from all six Figma foundation sheets, including motion recipes and layout guidance. Read it before implementing a component. Layout guidance covers the app shell, columns and intended overlay sizes, with their current implementation status.
Use in your application
Import the compiled stylesheet once. Inter is available as a separate, optional font import.
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 covers imports, overrides, and compatibility.
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.