Skip to main content

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

SurfaceReference
Patternlib repoEQUAStart/equa-patternlib-nextjs
Storybook local URLhttp://localhost:6006
Design tokensequa-patternlib-nextjs/src/tokens/design-tokens.json
Figma indexFigma Design Files
Screenshot galleriesDesign System Screenshot Galleries

Design Files

File GroupReference
FoundationsFoundations
ComponentsFigma Design Files
Gateway-aligned screensCommand Center Figma frame
Product flowsScreenshot galleries

Component Inventory

Source: equa-patternlib-nextjs/stories/ (47 Equa-owned Storybook story files verified)
ComponentStory FilePurpose
EquaAccordionequa-patternlib-nextjs/stories/EquaAccordion.stories.tsxExpandable disclosure groups for dense settings, FAQ, and supporting-detail panels.
EquaAlertequa-patternlib-nextjs/stories/EquaAlert.stories.tsxInline status, error, warning, success, and notification messaging.
EquaAvatarequa-patternlib-nextjs/stories/EquaAvatar.stories.tsxUser and organization identity images with initials and status fallbacks.
EquaBadgeequa-patternlib-nextjs/stories/EquaBadge.stories.tsxCompact labels for status, lifecycle, count, beta, and channel states.
EquaBreadcrumbequa-patternlib-nextjs/stories/EquaBreadcrumb.stories.tsxHierarchical navigation trail for organization and product sub-routes.
EquaButtonequa-patternlib-nextjs/stories/EquaButton.stories.tsxPrimary, secondary, danger, warning, cancel, icon, grouped, and loading actions.
EquaCardequa-patternlib-nextjs/stories/EquaCard.stories.tsxReusable content containers with header, body, footer, and action regions.
EquaChatBubbleequa-patternlib-nextjs/stories/EquaChatBubble.stories.tsxGateway-aligned chat message bubbles and transcript rows.
EquaChatComposeequa-patternlib-nextjs/stories/EquaChatCompose.stories.tsxGateway-aligned composer controls for prompt entry and send actions.
EquaCheckboxequa-patternlib-nextjs/stories/EquaCheckbox.stories.tsxBoolean input controls for forms, filters, and settings.
EquaChipequa-patternlib-nextjs/stories/EquaChip.stories.tsxCompact tag-style selections and metadata labels.
EquaCodeBlockequa-patternlib-nextjs/stories/EquaCodeBlock.stories.tsxMonospace code and command output surfaces for AI and developer flows.
EquaCollapsibleequa-patternlib-nextjs/stories/EquaCollapsible.stories.tsxControlled and uncontrolled expandable regions.
EquaCommandCenterequa-patternlib-nextjs/stories/EquaCommandCenter.stories.tsxFull command-center shell reference for gateway-aligned operations UI.
EquaConfigSearchequa-patternlib-nextjs/stories/EquaConfigSearch.stories.tsxGateway-aligned search input for configuration and settings surfaces.
EquaConfigSectionequa-patternlib-nextjs/stories/EquaConfigSection.stories.tsxGateway-aligned configuration section cards and section heroes.
EquaDatePickerequa-patternlib-nextjs/stories/EquaDatePicker.stories.tsxDate selection controls for legal, finance, and equity workflows.
EquaDropdownequa-patternlib-nextjs/stories/EquaDropdown.stories.tsxOption menus, selects, and compact menu surfaces.
EquaEquabotzSettingsequa-patternlib-nextjs/stories/EquaEquabotzSettings.stories.tsxCanonical settings surface for the Equabotz route family.
EquaExecApprovalequa-patternlib-nextjs/stories/EquaExecApproval.stories.tsxApproval card and overlay surface for command execution review.
EquaFileUploadequa-patternlib-nextjs/stories/EquaFileUpload.stories.tsxDrag-and-drop and browse-based file upload surfaces.
EquaFormLayoutequa-patternlib-nextjs/stories/EquaFormLayout.stories.tsxForm field rows, labels, helper text, and gateway-aligned input composition.
EquaInputequa-patternlib-nextjs/stories/EquaInput.stories.tsxText, password, numeric, validation, icon, and grouped input controls.
EquaKeyValueRowequa-patternlib-nextjs/stories/EquaKeyValueRow.stories.tsxKey/value display rows for config review and settings summaries.
EquaLogEntryequa-patternlib-nextjs/stories/EquaLogEntry.stories.tsxStructured log lines for gateway and command-center output.
EquaMenuequa-patternlib-nextjs/stories/EquaMenu.stories.tsxContext, overflow, and navigation menus.
EquaModalequa-patternlib-nextjs/stories/EquaModal.stories.tsxDialog overlays for forms, confirmations, and focused workflows.
EquaPaginationequa-patternlib-nextjs/stories/EquaPagination.stories.tsxPaged-list navigation controls.
EquaPluginsDashboardequa-patternlib-nextjs/stories/EquaPluginsDashboard.stories.tsxFigma-mirrored plugin dashboard surface and subcomponents.
EquaProfileDetailsequa-patternlib-nextjs/stories/EquaProfileDetails.stories.tsxProfile completion, verification, Equa ID, and account detail surface.
EquaProgressequa-patternlib-nextjs/stories/EquaProgress.stories.tsxProgress bars, circular progress, and loading indicators.
EquaProgressBarequa-patternlib-nextjs/stories/EquaProgressBar.stories.tsxLinear progress indicators for completion and loading states.
EquaRadioequa-patternlib-nextjs/stories/EquaRadio.stories.tsxSingle-choice radio groups.
EquaRatingequa-patternlib-nextjs/stories/EquaRating.stories.tsxRating display and input controls.
EquaRolesPermissionsequa-patternlib-nextjs/stories/EquaRolesPermissions.stories.tsxRoles and permissions role cards, permission matrices, and edit states.
EquaSidebarequa-patternlib-nextjs/stories/EquaSidebar.stories.tsxNavigation sidebar layouts, including command-center brand alignment.
EquaSkeletonequa-patternlib-nextjs/stories/EquaSkeleton.stories.tsxLoading placeholders for text, cards, avatars, and tables.
EquaSliderequa-patternlib-nextjs/stories/EquaSlider.stories.tsxRange slider inputs.
EquaSpinnerequa-patternlib-nextjs/stories/EquaSpinner.stories.tsxSpinner-only loading indicator.
EquaStepperequa-patternlib-nextjs/stories/EquaStepper.stories.tsxMulti-step progress and form sequence indicators.
EquaSwitchequa-patternlib-nextjs/stories/EquaSwitch.stories.tsxBinary switch controls for settings and preferences.
EquaTableequa-patternlib-nextjs/stories/EquaTable.stories.tsxData table display for operational and equity-management records.
EquaTabsequa-patternlib-nextjs/stories/EquaTabs.stories.tsxTab navigation for switching related panels.
EquaToastequa-patternlib-nextjs/stories/EquaToast.stories.tsxTransient notification messages.
EquaToggleequa-patternlib-nextjs/stories/EquaToggle.stories.tsxToggle controls for settings and two-state choices.
EquaToolCardequa-patternlib-nextjs/stories/EquaToolCard.stories.tsxGateway-aligned tool cards for command and AI-operation surfaces.
EquaTooltipequa-patternlib-nextjs/stories/EquaTooltip.stories.tsxHover and focus explanatory text.

Gateway-Internal Patterns

These patterns remain gateway-only unless a second product surface needs them.
PatternDocs Page
Gateway Chat Split ContainerReference
Gateway Config DiffReference
Gateway Compaction IndicatorReference
Gateway QR Code DisplayReference

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.