Product Design System

A comprehensive rulebook for building Acua's product UI. This design system ensures consistency, development speed, quality assurance, and AI enablement across all products.

Product Design System - Tokens

Design tokens for consistent UI implementation

Typography Scale

Font: Public Sans. Use tabular-nums for numeric data.

text-4xl (36px)Page Title

text-3xl (30px)Section Title

text-2xl (24px)Card Title

text-xl (20px)Modal Title

text-lg (18px)Large Text

text-base (16px)Body Text

text-sm (14px)Form Labels, Table Text

text-xs (12px)Helper Text, Badges

text-2xs (11px)Micro Text

Spacing Scale (8px Grid)

Base unit: 4px. Most spacing uses 8px multiples.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

space-16

64px

Shadows

none

shadow-none

shadow-sm

shadow-md

shadow-lg

shadow-xl

Border Radius

none (0)

sm (4px)

md (6px)

lg (10px)

xl (16px)

full (pill)

Animation & Motion

Subtle, purposeful animations. Supports prefers-reduced-motion.

Hover Effect (150ms)

Loading Pulse

Duration Guide: Hover: 100-150ms | Dropdown: 150-200ms | Modal: 200-300ms | Sheet: 300ms

Product Design System - Components

Reusable UI components built on shadcn/ui and Radix UI

Button

Variants

Sizes

States

Form Controls

Input

Email *

With Error

Please enter a valid value

Disabled

Select

Status

Textarea

Description

Max 500 characters

Card

Invoice Settings

Configure your invoice preferences

Default Currency

Badge

Variants

DefaultSecondaryOutlineDestructive

Status Badges

DraftSubmittedApprovedRejectedReturned

Alert

Information

Your session will expire in 10 minutes.

Success

Invoice has been submitted successfully.

Warning

This action cannot be undone.

Error

Failed to save changes. Please try again.

Toast

Saved successfully

Your changes have been saved.

Save failed

Please check your connection and try again.

Avatar

Sizes

Avatar Group

Tooltip

Edit this item

Appears on hover with 400ms delay. Always add tooltips to icon buttons.

Progress & Skeleton

Progress Bar

25%

60%

100%

Skeleton Loading

Navigation

Tabs

Pagination

Table

Invoice No	Vendor	Amount	Status
INV-2024-001	ABC Corporation Ltd.	฿125,000.00	Submitted
INV-2024-002	XYZ Trading Co.	฿89,500.00	Approved
INV-2024-003	Office Supplies Inc.	฿12,350.00	Draft

Dialog & Sheet

Dialog (Centered Modal)

Delete Invoice?

This action cannot be undone. Invoice INV-2024-001 will be permanently deleted.

Sheet (Side Panel)

Invoice Details

Invoice Number

Vendor

Product Design System - Layouts

Page layout patterns for consistent structure

Standard Page Structure

Header (h=56px, sticky)

Logo

Dashboard

Invoices

Vendors

Settings

Breadcrumb / Context Bar

Page Title

Main Content Area (scrollable)

Header: 56px fixed | Sidebar: 260px expanded, 80px collapsed | Content: 24-32px padding, max-width 1280px

List Page Pattern

Invoices

Status: Submitted ×

	Invoice No ↑↓	Vendor	Amount ↑↓	Status
	INV-001	Company A	฿100,000	Submitted
	INV-002	Company B	฿50,000	Approved

1 selected

Detail/Form Page Pattern

Invoice #INV-2024-001

Submitted

Basic Information

Invoice Number

Vendor

Amount

Due Date

Sticky footer for edit/create mode with Cancel, Save Draft, Submit actions

Product Design System - Patterns

Common UI patterns for consistent user experience

Approval Workflow

Step Indicator

✓

Submitted

✓

Manager Review

Finance Approval

Processed

Action Buttons

Empty States

No invoices yet

Get started by uploading your first invoice.

No results found

Try adjusting your search or filter criteria.

Loading & Error States

Button Loading

Inline Spinner

Progress

Uploading file...60%

Form Validation

Email *

Please enter a valid email address. Example: example@acua.co

Amount *

Please enter a number greater than 0

Password *

Password must be at least 8 characters

Keyboard Shortcuts

Global

Open command palette⌘ K

Toggle sidebar⌘ .

Close modalEsc

Table Navigation

Next/Previous rowj/k

Select rowx

Open detailsEnter