Go Business Design System
Centralized UI foundation, brand typography hierarchy, accessible form controls, interactive buttons, icon suites, and surface containers designed for enterprise dashboard experiences.
Brand Colors & Palette System
Core enterprise palette: Primary #007AFF, Primary Dark / Black #0A0F2C, customized Gray Range, and brand accents.
Exact grayscale steps defining card surfaces, dividers, placeholders, and deep dark canvas.
Success confirmation, positive margins & active status
Cautionary alerts, pending reviews & thresholds
Failed transactions, validation errors & critical danger
Sky accent, informational notes & interactive focus
Iris purple tier badges, elevated plans & specials
Headings (H1 to H6), Labels, Spans & Copy
Brand typography hierarchy: MDNichrome-Black for titles H1 to H3, and BricolageGrotesque weights across H4-H6, labels, and copy (with BricolageGrotesqueRegular for <p>).
MDNichrome Black
Display headline typeface reserved for primary executive page titles, section hero headings, and key numeric milestones (H1, H2, H3).
Bricolage Grotesque
Enterprise body copy using Regular (400) for <p>, Medium (500) for captions and H6, SemiBold (600) for H4/H5/labels, and Bold (700) for emphasis.
Heading 1: Enterprise Performance Overview
Heading 2: Operational Metrics & Revenue Growth
Heading 3: Quarterly Departmental Breakdown
Heading 4: Customer Acquisition Channel Performance
Heading 5: Active Integrations & API Endpoints
Heading 6: Security Audit Log Summary & Timestamps
Used for section headers, metric categories, and table headers.
Used above inputs and controls with clean font-weight.
This is standard body copy featuring a highlighted brand span to draw reader attention.
const balance = computeTotal() Inputs, Selects, Checkboxes & Form Fields
Standard input elements with icon adornments, validation states, password toggles, and composite controls.
Enter the legal operating company name
Automatic Reconciliation
Sync daily bank statements automatically
Email Alerts for Large Payments
Receive alerts on invoices exceeding $10,000
Require hardware token or OTP app on sign-in
Enter the 4-digit code sent to your mobile device
Lucide Icons & Simple Icons
Integrated via Nuxt Icon with Lucide (i-lucide-*) and Simple Icons (i-simple-icons-*).
App Favicon (/favicon.png)Containers, Cards & KPI Metric Surfaces
Consistent containers, responsive grids, metric widgets, and structural separators.
Composite UCard Structure with Header & Actions
Demonstrating header, body content, and footer slots.
The card container provides automated borders, rounded radiuses, background surface handling, and flexible slot composition for complex dashboard modules.
Badges, Alerts, Progress & Avatars
Status communication, user avatars, loading skeletons, and interactive modal dialogs.
Progress Indicator (75% Complete)
Modal windows and overlays for confirmations, forms, and workflows.
Money & Currency Formatting Helpers
Centralized helpers powered by formatMoney(amount, currency, options) with full ISO-4217 currency support, international locales, compact notation, and decimal controls.
Compact Notation
e.g. $1.2M, $450K
Show '+' for Positive
e.g. +$12,450.75
// Function Invocation
formatMoney(12450.75, 'USD', {
locale: 'en-US',
decimals: 2,
compact: false,
showPositiveSign: false
})
Enterprise Table Component
Enterprise-grade data table featuring customizable column visibility, real-time cross-field search, multi-status filters, custom row actions, bulk selection with batch actions, and per-page pagination controls.
Invoices & Transactions
Real-time ledger with pagination, multi-column search, column toggles, and bulk operations
Invoice # | Customer | Amount | Status | Category | Date | Actions | |
|---|---|---|---|---|---|---|---|
| INV-2026-001 | AC Acme Corporationbilling@acme.com | $14,250.00 | paid | Enterprise SaaS | 2026-10-24 | ||
| INV-2026-002 | NO Nova Dynamicsfinance@novadynamics.io | $8,900.50 | pending | Custom Integration | 2026-10-25 | ||
| INV-2026-003 | ST Starlight Retailersaccounts@starlight.eu | €3,200.00 | paid | Annual Subscription | 2026-10-25 | ||
| INV-2026-004 | AP Apex Global Logisticsops@apexlogistics.com | $26,500.00 | failed | API High Volume | 2026-10-26 | ||
| INV-2026-005 | HO Horizon Media Grouppayments@horizonmedia.co | $4,750.25 | paid | Content Cloud | 2026-10-26 |