The sx-* / ui-* grammar

Semitexa UI composes interfaces with an attribute-based CSS grammar instead of bespoke class names. There are two namespaces:

• sx-* — layout and composition, applicable to any element.
• ui-* — primitive identity and its modifiers, used with primitives.

The grammar is deliberately small and regular, which makes it both readable for a human and easy for a language model to emit correctly. The CSS that each attribute resolves to is the stable contract; the Twig macros are optional developer convenience.

Nine domains

v1 ships 9 attributes across 43 slices. The vocabulary is intentionally finite:

Every value that touches colour, surface, or radius resolves through the active skin's --ui-* tokens — sx-surface="panel" reads --ui-surface-panel and --ui-border-subtle, so the same markup re-skins itself when the skin changes (see Token-driven UI).

Composition example

A panel that stacks a header row above its body, with the header spread between a title and an action, reads like its own description:

1<section sx-layout="stack" sx-gap="4" sx-surface="panel" sx-padding="4" sx-radius="lg">2    <header sx-layout="cluster" sx-justify="between" sx-align="center">3        <h2 ui-text="title">Revenue</h2>4        <button ui="button" ui-tone="brand">Export</button>5    </header>6    <p ui-text="muted">Quarter-to-date, all regions.</p>7</section>

sx-layout="stack" makes the section a vertical flex column with a 1rem gap; the panel surface, 1rem padding, and lg radius come straight from skin tokens; the header is a centered cluster justified between so the title and the button sit at opposite ends. There is not a single bespoke class or colour literal in the markup — and the preview on this page is exactly this kind of composition.

ui-* and the primitives

While sx-* arranges any element, ui-* carries primitive identity and modifiers. ui="button" declares a button primitive; ui-variant, ui-tone, and ui-size modify it; ui="field-shell" with ui-state="invalid" cascades danger styling to a descendant label, input, and error text. The primitives and the grammar are two halves of the same idea: identity and modifiers in attributes, resolution in tokens. (See Primitives & tokens for the primitive vocabulary.)

Per-route CSS, compiled from usage

Because the grammar is a fixed vocabulary, Semitexa can scan a template, see exactly which slices it uses, and compile a per-route CSS bundle containing only those slices — typically under 3KB gzipped. platform-ui:css:inspect <template> reports the slices a template uses and the resulting bundle size; platform-ui:css:explain sx-gap:4 shows the CSS a single slice emits and the tokens it references. You never ship CSS for slices a page does not use.

Why it matters

A small, regular grammar is the difference between composition that a person (or a model) can write fluently and a sprawl of one-off class names that only their author understands. The vocabulary stays finite by design — sx-shadow, sx-density, sx-border, responsive switches and explicit grid column counts are deliberately deferred to v1.1+ rather than bloating the v1 surface. Declarative composition, token-resolved styling, and usage-compiled CSS are one coherent story: you describe structure in attributes, and the active skin decides what it looks like.