# Foundations

> The decisions every component is built on. Read these once; the components then explain themselves.

URL: https://apogee.avaui.dev/docs/foundations
Last updated: 2026-10-14

The decisions every component is built on. Read these once; the components then explain themselves.

Last updated October 14, 2026

Tokens, colour, type, spacing and motion are generated and checked, so a theme is a token override and never a component rewrite. Accessibility, RTL and content rules apply to every component the same way.

[

Design tokensFive hues times seven roles, generated from three numbers per hue; plus the static scales for radius, type, motion and spacing.

](https://apogee.avaui.dev/docs/tokens)[

![](https://apogee.avaui.dev/thumbs/color.light.webp)![](https://apogee.avaui.dev/thumbs/color.dark.webp)

ColorHow the five hues become a full light and dark palette, and the contrast gate that keeps every pair readable.

](https://apogee.avaui.dev/docs/color)[

![](https://apogee.avaui.dev/thumbs/dark-mode.light.webp)![](https://apogee.avaui.dev/thumbs/dark-mode.dark.webp)

Dark modeHow the page and any subtree pick light or dark, the before-paint script, the toggle helper, and what to watch in dark.

](https://apogee.avaui.dev/docs/dark-mode)[

![](https://apogee.avaui.dev/thumbs/typography.light.webp)![](https://apogee.avaui.dev/thumbs/typography.dark.webp)

TypographyThe fluid type scale, the font stack, Heading/Text/Prose, and tabular numbers for aligned digits.

](https://apogee.avaui.dev/docs/typography)[

![](https://apogee.avaui.dev/thumbs/spacing.light.webp)![](https://apogee.avaui.dev/thumbs/spacing.dark.webp)

Spacing & layoutFluid page/section spacing vs. Tailwind's fixed scale for component internals, plus the layout primitives.

](https://apogee.avaui.dev/docs/spacing)[

![](https://apogee.avaui.dev/thumbs/motion.light.webp)![](https://apogee.avaui.dev/thumbs/motion.dark.webp)

MotionFour durations, three easings, wired as Tailwind's defaults, and the mandatory reduced-motion guard.

](https://apogee.avaui.dev/docs/motion)[

![](https://apogee.avaui.dev/thumbs/accessibility.light.webp)![](https://apogee.avaui.dev/thumbs/accessibility.dark.webp)

AccessibilityThe accessibility commitments every Apogee component ships with, and how to verify them.

](https://apogee.avaui.dev/docs/accessibility)[

![](https://apogee.avaui.dev/thumbs/rtl.light.webp)![](https://apogee.avaui.dev/thumbs/rtl.dark.webp)

RTL & internationalizationHow Apogee components mirror automatically under a right-to-left ancestor, using logical CSS properties.

](https://apogee.avaui.dev/docs/rtl)[

Content & voiceThe writing rules for text inside components — buttons, labels, errors, empty states, and tone.

](https://apogee.avaui.dev/docs/content)[

UtilitiesThe shared helpers every component builds on, and how to use them in your own code.

](https://apogee.avaui.dev/docs/utilities)[

![](https://apogee.avaui.dev/thumbs/skins.light.webp)![](https://apogee.avaui.dev/thumbs/skins.dark.webp)

SkinsAn optional look you switch on with one attribute, built from three variables the components already read.

](https://apogee.avaui.dev/docs/skins)[

![](https://apogee.avaui.dev/thumbs/patterns.light.webp)![](https://apogee.avaui.dev/thumbs/patterns.dark.webp)

PatternsApplication recipes built from existing components — filter bars, inline calls to action, and an index of every recipe on the component pages.

](https://apogee.avaui.dev/docs/patterns)