Design system

Typography

Heading 1

Heading 2

Heading 3

Body — The quick brown fox jumps over the lazy dog.

Small — 14px text for secondary content.Caption — Secondary/muted caption text.Label — Form labels, 16px.Link — With href (renders as anchor).Error — Validation or error message.Success — Confirmation or success message.Warning — Caution or warning message.

Button variants & sizes

Theme: neumorphic · light
Google

Variants

Primary, Secondary, Outline, Ghost, Success, Warning, Error. Disabled uses 0.5 opacity; Loading shows spinner.

Sizes

All combinations

TextInput

Switch theme (Standard / Neumorphic) and mode (Light / Dark) above to see input styles change.

Variants

Sizes

States

Please enter a valid email address.
Looks good!
This field is recommended.

Options

0/50
We'll never share this with anyone.

Dropdown

Default, Ghost variant, and no-chevron. All styles use design tokens; override via KezelThemeProvider tokens.

Sidesheet & NavButton

Nav buttons: direct link, selected link, dropdown with submenu. All tokenized; override via tokens.
Main content area

SideMenu

JSON-driven sidebar: sections, links, dropdown groups. Expanded: groups open inline (push down). Collapsed: icons only with tooltips; group icon opens flyout to the right. Toggle collapse below.

Main content. Sidebar uses neumorphic/standard tokens (border, background, shadow).