Design System

NextDeals visual language, tokens, and components

Color Palette

Semantic Tokens

Background

--background

Foreground

--foreground

Surface

--surface

Surface 2

--surface-2

Card

--card

Muted

--muted

Border

--border

Primary

--primary

Accent (AI)

--accent

AI Soft

--ai-soft

Success

--success

Warning

--warning

Destructive

--destructive

Typography

Inter + JetBrains Mono
H1 — Page TitleClient Portfolio
H2 — Section TitleActive Policies
H3 — Card TitlePolicy Overview
BodyPremium coverage details and renewal dates.
Mono / DataHKD 1,240,000 / IA-HK-208841
LabelMonthly Premium

Spacing & Radius

4px base unit

sm

4px

md

6px

lg

8px

xl

12px

2xl

16px

3xl

24px

Shadows

2 elevation levels

shadow-card

0 1px 2px 0 color-mix(in oklab, fg 4%, transparent)

shadow-ai (AI Glow)

0 0 24px -4px color-mix(in oklab, ai 20%, transparent)

Components

Reusable primitives

KpiCard

Total Clients

128

+4 this month

AI Insights

12

3 new today

Pending Tasks

5

Overdue

Tag

NeutralAI PoweredApprovedPendingRejected

Button

StandardSearchInput — canonical search field for all list pages (clients, policies, tasks…)

import { StandardSearchInput } from "@/components/standard-search-input"

ClientAvatar

AL
CT
MK
JL

Gradient v1 · Violet Mist · #7C3AED → #A78BFA → #EDE9FE

AL
CT
MK
JL

Gradient v2 · Orchid Bloom · #6D28D9 → #F5D0FE → #C4B5FD

AL
CT
MK
JL

DatePicker · react-datepicker

2026-06-13

—

read-only

Animation

CSS keyframes

animate-reveal

slideUp + fade 0.5s cubic-bezier(0.16,1,0.3,1)

animate-pulse

opacity 1 → 0.5 → 1

animate-pulse-soft

subtle 50% opacity cycle

Usage Guidelines

Mobile-first: All layouts start at 320px and scale up. Touch targets are min 44px.

Color: Never use raw hex in components. Always reference semantic tokens via Tailwind classes.

AI elements: Use accent color (#7c3aed) and ai-glow shadow for AI-powered features.

Spacing: Prefer 4px multiples. Page padding: 24px desktop, 16px mobile.

Bilingual: Components support EN + 繁中 via the I18nProvider context.