Components

Product-ready pieces composed from SWSHD primitives. Every color comes from a semantic role through a component token map, so a component looks the same on every platform it supports.

All components

Each page covers a component's variants, behavior, accessibility, and API.

The gesture-driven menu behind the Create picker and album options.

iOS · Android · Web

An image or initials. Circles for people, squares for organizations and albums.

iOS · Android · Web

A small mono pill that classifies the thing beside it, like a plan tier.

iOS · Android · Web

A dismissible message with optional actions, circular visuals, and swipeable stacks.

iOS · Android · Web

One pill, four variants, and three sizes for every action.

iOS · Android · Web

Grouped sections and rows for preferences, actions, and short lists.

iOS · Android · Web

A count or a dot pinned to a glyph when something needs attention.

iOS · Android · Web

A one-time-code field: one hidden input under drawn cells, with feedback for verifying and wrong codes.

iOS · Android · Web

The dashboard rail. It collapses to icons and becomes a drawer on small screens.

Web

A quiet placeholder that reserves space while content loads.

iOS · Android · Web

A two-state toggle that looks the same on iOS, Android, and web.

iOS · Android · Web

A label beside a control on hover or focus, for icon-only controls.

Web