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
Storybook local URL	http://localhost:6006
Design tokens	`equa-patternlib-nextjs/src/tokens/design-tokens.json`
Figma index	Figma Design Files
Screenshot galleries	Design System Screenshot Galleries

Design Files

File Group	Reference
Foundations	Foundations
Components	Figma Design Files
Gateway-aligned screens	Command Center Figma frame
Product flows	Screenshot galleries

Component Inventory

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

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

Screens And Flows

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

Platform Architecture

Compliance & Security

Feature Specifications

Releases

Developer Onboarding

Business

Reference & Templates

Design System Reference

Design System Reference

Overview

Metadata

Design Files

Component Inventory

Gateway-Internal Patterns

Screens And Flows

​Design System Reference

​Overview

​Metadata

​Design Files

​Component Inventory

​Gateway-Internal Patterns

​Screens And Flows

Design System Reference

Overview

Metadata

Design Files

Component Inventory

Gateway-Internal Patterns

Screens And Flows