Control Design System

All --hz-* CSS custom properties — colors, typography, spacing, border radii. Source of truth for every component.

Visual catalog of every component — buttons, toggles, pills, badges, form controls, dirty-section, modal, tabs, empty state, tooltip, post card, and more.

Material Symbols Outlined reference grid with click-to-copy. Note: the live product uses a custom stroke icon set — see shell/nav-rail.html for real SVGs.

Complete page shell with icon rail, Settings flyout nav, topbar, and content area. Reference for the overall layout structure.

Single CSS file with all component + shell layout styles. Link this in every prototype instead of inlining styles.

HTML includes (data-include), nav toggle, tabs, toggle switch, modals, and kebab menus. One script tag handles all shared behavior.

Copy this file to start any new screen. Includes all shared links and commented setup instructions.

Bulk-select table with real toolbar, pagination, avatar cells, and row selection state.

Settings card pattern with toggle switches, BETA badge, select triggers, and AI panel gradient border.

Topic thread view with card-wrapper pattern and sidebar moderation panels.

Settings table with status pills, color swatches, and inline edit actions.

AI moderation settings with ON/OFF section badge, behaviour, code of conduct textarea, excluded roles tag-field, and notification toggles.

Generic overview table with bulk-select, filter row, search, action bar, and pagination. Copy to start any new table screen.

All dirty-section field types: vertical inputs/textareas, horizontal toggle switches, and dropdown triggers. AI nav panel pre-wired.

Two-column moderation layout with collapsible sidebar panels (m-section), breadcrumb header, post card, reply thread, and composer.