# Foundations

The principles and conventions every Roadie component builds on.

## Visual

- [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md): OKLCH color system with intent-based semantic tokens for consistent theming.
- [Elevation](https://ticketsolutionsptyltd.github.io/roadie/foundations/elevation.md): Intent-tinted shadow scale for depth and hierarchy in light and dark modes.
- [Iconography](https://ticketsolutionsptyltd.github.io/roadie/foundations/iconography.md): Icon library, weight conventions, sizing scale, and import patterns for Phosphor Bold icons.
- [Shape](https://ticketsolutionsptyltd.github.io/roadie/foundations/shape.md): Border-radius scale for consistent, soft corners across all components.
- [Theming](https://ticketsolutionsptyltd.github.io/roadie/foundations/theming.md): ThemeProvider, dynamic accent colour, dark mode, and pre-hydration bootstrap: everything you need to theme a Roadie app at runtime or at build time.

## Content

- [Date and time](https://ticketsolutionsptyltd.github.io/roadie/foundations/date-and-time.md): One scale, seven rules, and one implementation for every date and time we show.
- [Layout](https://ticketsolutionsptyltd.github.io/roadie/foundations/layout.md): Layout principles, spacing scale, and best practices for building resilient layouts.
- [Prose styles](https://ticketsolutionsptyltd.github.io/roadie/foundations/prose.md): The .prose class: typeset raw HTML from a CMS, Markdown, or MDX with Roadie type, rhythm, and a readable measure.
- [Typography](https://ticketsolutionsptyltd.github.io/roadie/foundations/typography.md): Fluid type scale, pre-composed text styles, and semantic text colors.

## Behaviour

- [Accessibility](https://ticketsolutionsptyltd.github.io/roadie/foundations/accessibility.md): Accessibility principles and testing guidance for building inclusive Oztix applications.
- [Interactions](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md): Interaction design principles and CSS utilities for building accessible, responsive UI.
- [Motion](https://ticketsolutionsptyltd.github.io/roadie/foundations/motion.md): Duration, easing, and animation tokens for purposeful, accessible motion.
- [View transitions](https://ticketsolutionsptyltd.github.io/roadie/foundations/view-transitions.md): Patterns for using the CSS View Transitions API with Roadie layouts. Covers z-index layering, named groups, keyframes, and search-param navigation.

## Building apps

- [Forms](https://ticketsolutionsptyltd.github.io/roadie/foundations/forms.md): Assembling forms from Field, Fieldset and Roadie controls: labels, required and invalid states, helper and error text.
- [Linking](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md): A single href prop, automatic external-link safety, and one-line client routing through next/link via RoadieLinkProvider, across every link-bearing Roadie component.
- [Navigation](https://ticketsolutionsptyltd.github.io/roadie/foundations/navigation.md): How Navigator and Pane fit together: four parts, one pane per URL level, and nested layouts that render them
- [Performance](https://ticketsolutionsptyltd.github.io/roadie/foundations/performance.md): Frontend performance principles for building fast, responsive Oztix applications.
- [Records model](https://ticketsolutionsptyltd.github.io/roadie/foundations/records.md): Fields describe a list once, and a view saves its search, filters, sort, and layout as JSON that means the same in the browser, on a server, in Meilisearch or Elasticsearch, and in a URL.
- [Tables](https://ticketsolutionsptyltd.github.io/roadie/foundations/tables.md): Which table fits the job, and how common Oztix records look in a pane, on a phone, in a dashboard, on a detail page, and in a PDF.

Docs updated 9 Oct 2026.