AugustCn is a set of eight UI primitives, box, stack, grid, text, surface, field, motion and token, that people and AI agents compose into interfaces.

How do AI agents use AugustCn?

Agents read the rules and tokens instead of your CSS, so they compose screens that match the design system.

Does AugustCn work with my framework?

One composition works across renderers, so the same primitives and tokens render in any framework.

How much does AugustCn cost?

AugustCn is open source under MIT and free forever.

design primitive framework · v1.0

Primitives for the AI era.

Eight strict building blocks that people and AI agents compose into any interface. Every spacing, token and state is decided once. Scroll to assemble one.

fig. 02 · assembled by an agent in 1.4 s

Eight parts. One interface. Zero guesswork.

The agent never touched CSS. It chose primitives, and the primitives enforced the rest.

fig. 01 · disassembled

sheetAC-001

scale1 : 1 · 8pt

parts8 / 8

rev2026-10

Eight primitives. Infinite screens.

Each primitive has one job, a typed contract and no opinion it can't defend. Everything else in your system is a composition.

P-01 · layout

Box

The atom. Padding, surface and radius come from tokens only.

<Box p="4" surface="raised"/>

P-02 · layout

Stack

One axis, one gap. Wraps, aligns and mirrors for RTL.

<Stack gap="2"/>

P-03 · layout

Grid

Tracks that collapse by content, not by breakpoint.

<Grid min="12rem"/>

P-04 · content

Text

A fixed scale with real line lengths and optical sizes.

<Text role="title"/>

P-05 · material

Surface

Elevation, blur and border as one decision.

<Surface level="2"/>

P-06 · input

Field

Label, control, hint and error, with accessibility wired in.

<Field label="Email"/>

P-07 · time

Motion

Four springs, three durations. Reduced motion respected.

<Motion enter="rise"/>

P-08 · system

Token

Colour, space, type and radius, with semantic names.

token("space.4") → 16px

for agents

Agents read the rules, not your CSS.

Every primitive ships a machine-readable contract. Models produce valid UI on the first try because invalid UI can't be expressed.

contract · stack.august.jsoninput

// constraints, not suggestions
{
  "primitive": "Stack",
  "props": {
    "gap":   { "enum": ["1","2","3","4","6"] },
    "dir":   { "enum": ["x","y"] },
    "align": { "enum": ["start","center","end"] }
  },
  "children": "Box | Text | Field | Stack",
  "a11y": "reading order = DOM order"
}

PricingCard.tsxoutput

<Surface level="2">
  <Stack gap="4">
    <Text role="title">Pro</Text>
    <Text role="display">$24</Text>
    <Stack gap="2">{features}</Stack>
    <Field label="Work email" />
    <Box as="button" surface="accent">
      Start trial
    </Box>
  </Stack>
</Surface>

✓ schema valid✓ contrast AA✓ focus order✓ 8pt grid✓ 0 raw CSS

One composition. Every renderer.

Write it once. AugustCn renders the same tree natively on the web, phones, terminals and voice.

Reactweb · rsc

Nativeios · android

SwiftUIapple

Composeandroid

Terminalink · tui

Voicereading order

8primitives, in total

0runtime dependencies

3.4×fewer invalid generations

AAcontrast enforced at the token

Draw less.
Decide once.

Open source under MIT. Free forever.

npx augustcn init