Live preview

Components and sections

Every governed library file stays selectable through one responsive component catalog and one live preview shell.

Open catalog Open components Open styleguide Back to library

UI catalog

Selective live preview of the shared UI through one navigation, one filter surface, and one real library directory in the main workspace.

Showroom task

Choose whether you need the library catalog, individual building blocks, or token truth.

Catalog Components Styleguide

Catalog control

The showroom remains a documentation and verification surface for shared UI, not a second product frontend.

Atoms

Filter bar

Search, family, surface, and status stay controlled through the same governed catalog toolbar.

Reset
ATOMS STABLE CORE atoms/avatar

Avatar

Small primitives for input, status, and micro interactions.

Theme
Viewport
Category Media
Surface Core
Status Stable
Source file resources/ui/atoms/avatar/avatar.php
System points
  • Token-based states
  • Shared focus and disabled rules
  • No raw palette drift
Series 01 Foundation STABLE Current

Avatar

Small primitives for input, status, and micro interactions.

Media Core resources/ui/atoms/avatar/avatar.php
Live preview Desktop
ATOMS-AVATAR 5 references Min 5

Avatar examples

Avatar previews render the real shared atom with governed size, image, and default states.

01 INITIALS initials-sm avatar-01

Initials small

Small initials avatar for dense lists and tables.

Lena Hoffmann
02 INITIALS initials-md avatar-02

Initials medium

Default initials avatar for navigation and author rows.

Core UI
03 INITIALS initials-lg avatar-03

Initials large

Large initials avatar for profile and card headers.

Shared Design System
04 INITIALS initials-xl avatar-04

Initials extra large

Extra large avatar for hero and identity surfaces.

Nora Patel
05 INITIALS initials-alt avatar-05

Initials alternate

Alternate initials avatar for lists, comments, and activity feeds.

Mira Schmidt
Category Media
Surface Core
Status Stable
Source file resources/ui/atoms/avatar/avatar.php
System points
  • Token-based states
  • Shared focus and disabled rules
  • No raw palette drift

Filter state and count truth

One library total, one filter pool, one active family result count.

The showroom keeps global library count separate from the current filter pool and the active family result set.

Library total 77
Filter pool 77
Active family 17

Current state

Family: Atoms Surface: All surfaces Status: All statuses

Stateful navigation

Show all matching families Reset showroom filters