Introduction - ouroboros-ui

Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Auto

Light

Rust

Coal

Navy

Ayu

ouroboros-ui

ouroboros-ui — Documentation

Token-first design system for egui — the<br>shadcn/ui design language reimplemented natively in Rust.<br>Not a web port: same vocabulary (semantic tokens, neutral zinc aesthetic, 4px scale),<br>egui-native immediate-mode rendering.

This is the full documentation set: how the system is built, how to use it, and a<br>reference page for every component.

▶ Live storybook — every<br>component and token, running in your browser (WebAssembly). Source:<br>examples/storybook.rs.

Start here

DocWhat it covers

ArchitectureThe layered model (core → semantic → component → atoms → cells → molecules → organisms), dependency direction, the primordial atomic-design law.<br>GovernanceThe law — use first, extend second, create last: the decision ladder, what is forbidden in studio chrome, the escapes, the component contribution pipeline, enforcement.<br>UsageInstall, bootstrap the theme, the builder pattern, common recipes, how to consume the crate.<br>Guards & conventionsThe two enforcement tests (no_raw_values, no_painter_in_molecules), what they forbid, how to add a component without tripping them.

Foundation reference

DocWhat it covers

Tokens (core)Raw primitives: color ramps, spacing, radius, shadows, sizing, motion, opacity.<br>Theming (semantic)The Theme struct, the four palettes (dark / light / zinc-dark / zinc-light), Mode, install/apply/get.<br>TypographyIosevka faces, weights, the named type styles (display…kbd), icon fonts.<br>Layout & auto-layoutPanel/grid/breakpoint tokens, the Layer z-order, and the Figma-style AutoLayout flow engine.

Component reference

Every component has its own page under components/, grouped by layer:

Atoms — 23 leaf components that paint with tokens only.

Cells — 7 row/item building blocks.

Molecules — 14 compositions of atoms.

Organisms — 14 full UI sections.

Graph — the node-editor peer layer (reactflow-style on egui::Scene).

See the component catalog for the complete index.

Run the storybook

The storybook is the living visual reference — every token and component rendered, with<br>a Dark/Light mode toggle.

cd ouroboros-ui<br>cargo run --example storybook

At a glance

egui / eframe 0.34.1 · egui_extras 0.34 · egui-phosphor 0.12 (Light variant)

Rust pinned to 1.92.0 (rust-toolchain.toml)

Standalone crate — zero coupling to the Ouroboros monorepo workspace

License: MIT © Type Zero Labs