A. Corporate Brand Guideline
Core brand elements that define Acua's identity across all touchpoints
Primary Colors (P1-P10)
P7 (#1E3A8A) is the primary brand color used for logos, primary buttons, and headings.
Semantic Colors (State Colors)
Used only to convey state meanings. Decorative use is prohibited.
Extended Colors
Accent colors for CTAs, charts, and special features.
Royal Blue (CTA)
Teal (AI/Automation)
Violet (AI/Premium)
Gradients
B. Product Design System - Tokens
Design tokens for consistent UI implementation
Typography Scale
Font: Public Sans. Use tabular-nums for numeric data.
Spacing Scale (8px Grid)
Base unit: 4px. Most spacing uses 8px multiples.
Shadows
Border Radius
Animation & Motion
Subtle, purposeful animations. Supports prefers-reduced-motion.
Duration Guide: Hover: 100-150ms | Dropdown: 150-200ms | Modal: 200-300ms | Sheet: 300ms
B. Product Design System - Components
Reusable UI components built on shadcn/ui and Radix UI
Button
Variants
Sizes
States
Form Controls
Input
Please enter a valid value
Select
Textarea
Max 500 characters
Checkbox
Radio Group
Switch
Card
Invoice Settings
Configure your invoice preferences
Badge
Variants
Status Badges
Alert
Toast
Avatar
Sizes
Avatar Group
Tooltip
Appears on hover with 400ms delay. Always add tooltips to icon buttons.
Progress & Skeleton
Progress Bar
Skeleton Loading
Navigation
Tabs
Pagination
Table
| Invoice No | Vendor | Amount | Status | Actions | |
|---|---|---|---|---|---|
| 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
B. Product Design System - Layouts
Page layout patterns for consistent structure
Standard Page Structure
Page Title
Header: 56px fixed | Sidebar: 260px expanded, 80px collapsed | Content: 24-32px padding, max-width 1280px
List Page Pattern
Invoices
| Invoice No ↑↓ | Vendor | Amount ↑↓ | Status | |
|---|---|---|---|---|
| INV-001 | Company A | ฿100,000 | Submitted | |
| INV-002 | Company B | ฿50,000 | Approved |
Detail/Form Page Pattern
Invoice #INV-2024-001
SubmittedBasic Information
Sticky footer for edit/create mode with Cancel, Save Draft, Submit actions
B. Product Design System - Patterns
Common UI patterns for consistent user experience
Approval Workflow
Step Indicator
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
Form Validation
Please enter a valid email address. Example: example@acua.co
Please enter a number greater than 0
Password must be at least 8 characters
Keyboard Shortcuts
Global
Table Navigation