Design System/Application UI

Application UI

Interface patterns for web applications. Shells, forms, navigation, data lists, overlays, and full-page layouts — adapted to the brand.

11 section types

357 variants total

How To Use This Page

Application UI focuses on full product workflows rather than isolated controls, so the examples are grouped by the job the interface is doing.

Use these sections when you are laying out dashboards, settings, internal tools, or multi-step product surfaces.

How The Content Is Grouped

  • The top-level Application UI page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
  • Use the highlighted links below to start with the highest-signal areas of the section.
Layout24 variants

Application Shells

Full-page app layout shells — sidebar, stacked, and multi-column arrangements.

Input74 variants

Forms

Input groups, radio groups, select menus, checkboxes, toggles, form layouts, and sign-in forms.

Navigation56 variants

Navigation

Navbars, sidebar nav, tabs, steps, breadcrumbs, command palettes, and pagination.

Data34 variants

Lists

Tables, stacked lists, grid lists, and activity feeds.

Overlay24 variants

Overlays

Modals, notifications, and slide-over panels.

Data16 variants

Data Display

Calendars, stats cards, and description lists.

Layout27 variants

Headings

Card headings, page headings, and section headings with actions and metadata.

Layout39 variants

Layout

Panels, media objects, dividers, containers, and list containers.

UI35 variants

Elements

Avatars, badges, button groups, buttons, and dropdown menus.

Feedback12 variants

Feedback

Alert banners and empty state placeholders.

Pages16 variants

Page Examples

Complete page layouts — home screens, detail views, and settings screens.