Foundations
Layout and scaffold
The layer between tokens and components. Tailwind with a spacing lint for primitives, and one app shell every page sits in.
Foundation 06
Layout and scaffold
The layer between tokens and components. Tailwind with a spacing lint for primitives, and one app shell every page sits in.
Role
Use
Rule
Primitives
Box, Stack, Inline
Containers and gaps
Tailwind flex and grid
Gaps and padding from the space scale only. The lint rejects anything off 2 to 32px. No wrapper components.
Text and heading
Size, line, weight, tracking
text-heading-large · text-heading-small · text-body · text-body-small
One class sets all four properties. TruncatedText for clamps.
Pressable, anchor
Unstyled clickables with focus
Button ghost and link variants
Nothing new. Ghost covers pressable, link covers anchor.
Page scaffold
App shell
The regions every page sits in
SideNav, Main, Aside, Panel
Sidebar 200px (172 compact, 52 rail), main, details rail, Flo panel. No top nav.
Page header
Crumb, title, views, actions
page-header.tsx
The only page header. 56px: crumb, title, tabs, info, actions.
Rules
1. Tailwind, no wrapper components. A lint rule rejects gap and padding outside space.025 to space.400 and arbitrary values.
2. Text uses the four type utilities defined in @theme.
3. Every page uses the app shell and page-header.tsx. Templates are on the Page templates page.