Layer 2

Termizen is three layers, and only the top one is React. Tokens are framework-free CSS. On top of them, termizen.css carries every primitive that needs no behavior as a semantic class — so a Django, Flask, or Go html/template surface links one file and gets the system. Only the components that carry real behavior require React on Base UI.

<link rel="stylesheet" href="termizen.css"><button class="tz-btn tz-btn--primary">  run job</button>

import '@termizen/tokens/termizen.css';import { Button } from '@termizen/react';<Button variant="primary">run job</Button>

Everything below is plain markup with a class attribute and nothing else. No component, no script.

Same classes as the React form. Native form and fieldset, a hairline hr, named checks. .tz-switch is a button — native submit cannot read it, so a posted flag is a named checkbox. Buttons write type on the markup: primary is submit, cancel is button. This page only stops the navigation.

Both layers read the same tier-3 component tokens, so a class and its React counterpart cannot drift apart visually — changing --btn-primary-bg moves both.