> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System Reference

> Pattern library components, design tokens, themes, Figma files, screenshots, and Storybook usage

# Design System Reference

> **Last Verified:** 2026-05-20 | **Repository:** `equa-patternlib-nextjs` | **Storybook:** `http://localhost:6006` | **Token source:** `equa-patternlib-nextjs/src/tokens/design-tokens.json`

## Overview

Equa's design system is maintained in `equa-patternlib-nextjs` and consumed by `equa-web`, Storybook, and gateway-aligned UI. This hub links the design-token foundations, Figma files, component pages, gateway-only patterns, and product screenshot galleries.

## Metadata

| Surface              | Reference                                                                               |
| -------------------- | --------------------------------------------------------------------------------------- |
| Patternlib repo      | [EQUAStart/equa-patternlib-nextjs](https://github.com/EQUAStart/equa-patternlib-nextjs) |
| Storybook local URL  | [http://localhost:6006](http://localhost:6006)                                          |
| Design tokens        | `equa-patternlib-nextjs/src/tokens/design-tokens.json`                                  |
| Figma index          | [Figma Design Files](/architecture/design-system/figma)                                 |
| Screenshot galleries | [Design System Screenshot Galleries](/architecture/design-system/screenshots)           |

## Design Files

| File Group              | Reference                                                                                                         |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------- |
| Foundations             | [Foundations](/architecture/design-system/foundations)                                                            |
| Components              | [Figma Design Files](/architecture/design-system/figma)                                                           |
| Gateway-aligned screens | [Command Center Figma frame](https://www.figma.com/design/Dp3LmaW5KsM2C0YDU4Lzs3/Command-Center---SO?node-id=1-2) |
| Product flows           | [Screenshot galleries](/architecture/design-system/screenshots)                                                   |

## Component Inventory

Source: `equa-patternlib-nextjs/stories/` (47 Equa-owned Storybook story files verified)

| Component                                                                             | Story File                                                        | Purpose                                                                             |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [EquaAccordion](/architecture/design-system/components/equa-accordion)                | `equa-patternlib-nextjs/stories/EquaAccordion.stories.tsx`        | Expandable disclosure groups for dense settings, FAQ, and supporting-detail panels. |
| [EquaAlert](/architecture/design-system/components/equa-alert)                        | `equa-patternlib-nextjs/stories/EquaAlert.stories.tsx`            | Inline status, error, warning, success, and notification messaging.                 |
| [EquaAvatar](/architecture/design-system/components/equa-avatar)                      | `equa-patternlib-nextjs/stories/EquaAvatar.stories.tsx`           | User and organization identity images with initials and status fallbacks.           |
| [EquaBadge](/architecture/design-system/components/equa-badge)                        | `equa-patternlib-nextjs/stories/EquaBadge.stories.tsx`            | Compact labels for status, lifecycle, count, beta, and channel states.              |
| [EquaBreadcrumb](/architecture/design-system/components/equa-breadcrumb)              | `equa-patternlib-nextjs/stories/EquaBreadcrumb.stories.tsx`       | Hierarchical navigation trail for organization and product sub-routes.              |
| [EquaButton](/architecture/design-system/components/equa-button)                      | `equa-patternlib-nextjs/stories/EquaButton.stories.tsx`           | Primary, secondary, danger, warning, cancel, icon, grouped, and loading actions.    |
| [EquaCard](/architecture/design-system/components/equa-card)                          | `equa-patternlib-nextjs/stories/EquaCard.stories.tsx`             | Reusable content containers with header, body, footer, and action regions.          |
| [EquaChatBubble](/architecture/design-system/components/equa-chat-bubble)             | `equa-patternlib-nextjs/stories/EquaChatBubble.stories.tsx`       | Gateway-aligned chat message bubbles and transcript rows.                           |
| [EquaChatCompose](/architecture/design-system/components/equa-chat-compose)           | `equa-patternlib-nextjs/stories/EquaChatCompose.stories.tsx`      | Gateway-aligned composer controls for prompt entry and send actions.                |
| [EquaCheckbox](/architecture/design-system/components/equa-checkbox)                  | `equa-patternlib-nextjs/stories/EquaCheckbox.stories.tsx`         | Boolean input controls for forms, filters, and settings.                            |
| [EquaChip](/architecture/design-system/components/equa-chip)                          | `equa-patternlib-nextjs/stories/EquaChip.stories.tsx`             | Compact tag-style selections and metadata labels.                                   |
| [EquaCodeBlock](/architecture/design-system/components/equa-code-block)               | `equa-patternlib-nextjs/stories/EquaCodeBlock.stories.tsx`        | Monospace code and command output surfaces for AI and developer flows.              |
| [EquaCollapsible](/architecture/design-system/components/equa-collapsible)            | `equa-patternlib-nextjs/stories/EquaCollapsible.stories.tsx`      | Controlled and uncontrolled expandable regions.                                     |
| [EquaCommandCenter](/architecture/design-system/components/equa-command-center)       | `equa-patternlib-nextjs/stories/EquaCommandCenter.stories.tsx`    | Full command-center shell reference for gateway-aligned operations UI.              |
| [EquaConfigSearch](/architecture/design-system/components/equa-config-search)         | `equa-patternlib-nextjs/stories/EquaConfigSearch.stories.tsx`     | Gateway-aligned search input for configuration and settings surfaces.               |
| [EquaConfigSection](/architecture/design-system/components/equa-config-section)       | `equa-patternlib-nextjs/stories/EquaConfigSection.stories.tsx`    | Gateway-aligned configuration section cards and section heroes.                     |
| [EquaDatePicker](/architecture/design-system/components/equa-date-picker)             | `equa-patternlib-nextjs/stories/EquaDatePicker.stories.tsx`       | Date selection controls for legal, finance, and equity workflows.                   |
| [EquaDropdown](/architecture/design-system/components/equa-dropdown)                  | `equa-patternlib-nextjs/stories/EquaDropdown.stories.tsx`         | Option menus, selects, and compact menu surfaces.                                   |
| [EquaEquabotzSettings](/architecture/design-system/components/equa-equabotz-settings) | `equa-patternlib-nextjs/stories/EquaEquabotzSettings.stories.tsx` | Canonical settings surface for the Equabotz route family.                           |
| [EquaExecApproval](/architecture/design-system/components/equa-exec-approval)         | `equa-patternlib-nextjs/stories/EquaExecApproval.stories.tsx`     | Approval card and overlay surface for command execution review.                     |
| [EquaFileUpload](/architecture/design-system/components/equa-file-upload)             | `equa-patternlib-nextjs/stories/EquaFileUpload.stories.tsx`       | Drag-and-drop and browse-based file upload surfaces.                                |
| [EquaFormLayout](/architecture/design-system/components/equa-form-layout)             | `equa-patternlib-nextjs/stories/EquaFormLayout.stories.tsx`       | Form field rows, labels, helper text, and gateway-aligned input composition.        |
| [EquaInput](/architecture/design-system/components/equa-input)                        | `equa-patternlib-nextjs/stories/EquaInput.stories.tsx`            | Text, password, numeric, validation, icon, and grouped input controls.              |
| [EquaKeyValueRow](/architecture/design-system/components/equa-key-value-row)          | `equa-patternlib-nextjs/stories/EquaKeyValueRow.stories.tsx`      | Key/value display rows for config review and settings summaries.                    |
| [EquaLogEntry](/architecture/design-system/components/equa-log-entry)                 | `equa-patternlib-nextjs/stories/EquaLogEntry.stories.tsx`         | Structured log lines for gateway and command-center output.                         |
| [EquaMenu](/architecture/design-system/components/equa-menu)                          | `equa-patternlib-nextjs/stories/EquaMenu.stories.tsx`             | Context, overflow, and navigation menus.                                            |
| [EquaModal](/architecture/design-system/components/equa-modal)                        | `equa-patternlib-nextjs/stories/EquaModal.stories.tsx`            | Dialog overlays for forms, confirmations, and focused workflows.                    |
| [EquaPagination](/architecture/design-system/components/equa-pagination)              | `equa-patternlib-nextjs/stories/EquaPagination.stories.tsx`       | Paged-list navigation controls.                                                     |
| [EquaPluginsDashboard](/architecture/design-system/components/equa-plugins-dashboard) | `equa-patternlib-nextjs/stories/EquaPluginsDashboard.stories.tsx` | Figma-mirrored plugin dashboard surface and subcomponents.                          |
| [EquaProfileDetails](/architecture/design-system/components/equa-profile-details)     | `equa-patternlib-nextjs/stories/EquaProfileDetails.stories.tsx`   | Profile completion, verification, Equa ID, and account detail surface.              |
| [EquaProgress](/architecture/design-system/components/equa-progress)                  | `equa-patternlib-nextjs/stories/EquaProgress.stories.tsx`         | Progress bars, circular progress, and loading indicators.                           |
| [EquaProgressBar](/architecture/design-system/components/equa-progress-bar)           | `equa-patternlib-nextjs/stories/EquaProgressBar.stories.tsx`      | Linear progress indicators for completion and loading states.                       |
| [EquaRadio](/architecture/design-system/components/equa-radio)                        | `equa-patternlib-nextjs/stories/EquaRadio.stories.tsx`            | Single-choice radio groups.                                                         |
| [EquaRating](/architecture/design-system/components/equa-rating)                      | `equa-patternlib-nextjs/stories/EquaRating.stories.tsx`           | Rating display and input controls.                                                  |
| [EquaRolesPermissions](/architecture/design-system/components/equa-roles-permissions) | `equa-patternlib-nextjs/stories/EquaRolesPermissions.stories.tsx` | Roles and permissions role cards, permission matrices, and edit states.             |
| [EquaSidebar](/architecture/design-system/components/equa-sidebar)                    | `equa-patternlib-nextjs/stories/EquaSidebar.stories.tsx`          | Navigation sidebar layouts, including command-center brand alignment.               |
| [EquaSkeleton](/architecture/design-system/components/equa-skeleton)                  | `equa-patternlib-nextjs/stories/EquaSkeleton.stories.tsx`         | Loading placeholders for text, cards, avatars, and tables.                          |
| [EquaSlider](/architecture/design-system/components/equa-slider)                      | `equa-patternlib-nextjs/stories/EquaSlider.stories.tsx`           | Range slider inputs.                                                                |
| [EquaSpinner](/architecture/design-system/components/equa-spinner)                    | `equa-patternlib-nextjs/stories/EquaSpinner.stories.tsx`          | Spinner-only loading indicator.                                                     |
| [EquaStepper](/architecture/design-system/components/equa-stepper)                    | `equa-patternlib-nextjs/stories/EquaStepper.stories.tsx`          | Multi-step progress and form sequence indicators.                                   |
| [EquaSwitch](/architecture/design-system/components/equa-switch)                      | `equa-patternlib-nextjs/stories/EquaSwitch.stories.tsx`           | Binary switch controls for settings and preferences.                                |
| [EquaTable](/architecture/design-system/components/equa-table)                        | `equa-patternlib-nextjs/stories/EquaTable.stories.tsx`            | Data table display for operational and equity-management records.                   |
| [EquaTabs](/architecture/design-system/components/equa-tabs)                          | `equa-patternlib-nextjs/stories/EquaTabs.stories.tsx`             | Tab navigation for switching related panels.                                        |
| [EquaToast](/architecture/design-system/components/equa-toast)                        | `equa-patternlib-nextjs/stories/EquaToast.stories.tsx`            | Transient notification messages.                                                    |
| [EquaToggle](/architecture/design-system/components/equa-toggle)                      | `equa-patternlib-nextjs/stories/EquaToggle.stories.tsx`           | Toggle controls for settings and two-state choices.                                 |
| [EquaToolCard](/architecture/design-system/components/equa-tool-card)                 | `equa-patternlib-nextjs/stories/EquaToolCard.stories.tsx`         | Gateway-aligned tool cards for command and AI-operation surfaces.                   |
| [EquaTooltip](/architecture/design-system/components/equa-tooltip)                    | `equa-patternlib-nextjs/stories/EquaTooltip.stories.tsx`          | Hover and focus explanatory text.                                                   |

## Gateway-Internal Patterns

These patterns remain gateway-only unless a second product surface needs them.

| Pattern                      | Docs Page                                                                        |
| ---------------------------- | -------------------------------------------------------------------------------- |
| Gateway Chat Split Container | [Reference](/architecture/design-system/components/gateway-chat-split-container) |
| Gateway Config Diff          | [Reference](/architecture/design-system/components/gateway-config-diff)          |
| Gateway Compaction Indicator | [Reference](/architecture/design-system/components/gateway-compaction-indicator) |
| Gateway QR Code Display      | [Reference](/architecture/design-system/components/gateway-qr-code-display)      |

## Screens And Flows

Use [Design System Screenshot Galleries](/architecture/design-system/screenshots) for product-area captures. User-facing Platform Guides link back to these galleries through Design References sections instead of duplicating design-system details.