Foundation primitives

Layout

Layout is the spine of Foundry. These primitives define width, rhythm, alignment, responsive grids, surfaces, and spacing before higher-level components enter the page.

Next: Avatar

Page composition

Section

Content rhythm

Use Section, Surface, and Stack for the basic page rhythm.

sectionsurfacestack

Grid item

Alignment

Flex

Center is for empty states, auth panels, and focused messages.

Container

Controls page max width and horizontal padding.

<Container max="xl">
  <Slot />
</Container>

Grid

Creates responsive columns for cards, stats, forms, and dashboards.

<Grid cols="3" gap="lg">
  <Card />
  <Card />
  <Card />
</Grid>

Stack

Defines vertical rhythm. Use it before adding one-off margins.

<Stack gap="xl">
  <PageHeader />
  <ContentGrid />
</Stack>

Flex and Cluster

Flex handles rows; Cluster handles wrapping inline groups.

<Flex align="center" justify="between">
  <Cluster gap="sm">
    <Button />
  </Cluster>
</Flex>

Box and Inset

Use Box for small surfaces, Inset for controlled inner spacing.

Inset content

Bleed

Use Bleed when media or panels need to escape local padding.

Bleed surface

Useful for hero media and docs examples.

Rule

If a page needs custom CSS only to place components on a grid, the missing capability probably belongs in `axonyx-ui`, not in the site stylesheet.