Design System v1.1

Extended reusable components under src/components/ui with neutral defaults and strict-friendly APIs.

TopNav + AppShell + SidebarNav

App frame primitives with optional sidebar layout.

ACMEStarter Admin

Main panel content area for pages, tables, forms, and charts.

DropdownMenu + Avatar + UserMenu

Simple accessible action menus with keyboard support.

TB
AR

Toast System

ToastProvider + useToast hook + Toast component stack.

EmptyState + Skeleton

Clear empty placeholders and loading placeholders.

DOC

No documents yet

Upload your first spec, invoice, or contract to start collaborating with your team.

Pagination + StatCard

Data-heavy dashboard helpers.

MRR

$42,430

+8.2% vs last month

Churn Rate

1.9%

-0.4% vs last month

Failed Payments

14

+3 this week

Button

Solid, outline, ghost, danger; sm, md, lg.

Form Controls

Input, Textarea, Select, and FormRow with helper/error text.

Used across billing and user invites.

Please keep it under 200 characters.

Card, Badge, Alert

Simple composable primitives for layout and messaging.

NeutralInfoSuccessWarningDanger

Heads up

Token values are defined in src/styles/tokens.ts and mirrored as CSS variables in src/app/globals.css.

Saved

Changes were published to your workspace.

Review required

Billing settings changed and require an admin confirmation.

Action blocked

This API key has expired.

Tabs

Lightweight client-side tabs with controlled/uncontrolled support.

Overview content goes here.

Table

Generic typed table with custom cells and empty state support.

InvoiceCustomerPlanStatusAmount
INV-2107Nexa LabsProPaid$480.00
INV-2108Aster RetailStarterPending$99.00
INV-2109Granite CoBusinessOverdue$1,290.00

Modal (Dialog)

Simple controlled dialog for confirmations and forms.

Tokens

v1 token object exported from TypeScript.

{
  "colors": {
    "bg": "#f7f7f8",
    "surface": "#ffffff",
    "surfaceMuted": "#f1f1f3",
    "text": "#17171a",
    "textMuted": "#5a5f68",
    "border": "#d7d9dd",
    "primary": "#1f2937",
    "primaryText": "#ffffff",
    "success": "#0f766e",
    "warning": "#b45309",
    "danger": "#b91c1c",
    "info": "#2563eb"
  },
  "radius": {
    "sm": "0.375rem",
    "md": "0.5rem",
    "lg": "0.75rem"
  },
  "space": {
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "0.75rem",
    "lg": "1rem",
    "xl": "1.5rem",
    "xxl": "2rem"
  },
  "font": {
    "family": "'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
    "sizeSm": "0.875rem",
    "sizeMd": "1rem",
    "sizeLg": "1.125rem"
  },
  "shadow": {
    "sm": "0 1px 2px rgba(0, 0, 0, 0.06)",
    "md": "0 8px 20px rgba(0, 0, 0, 0.08)"
  },
  "zIndex": {
    "modal": 1000
  }
}