Design Tokens

Foundational design decisions — colors, typography, spacing, and radius — defined as CSS custom properties and mapped to Tailwind utilities.

Brand Colors

Primary

--primary

#00009C

Brand Secondary

--brand-secondary

#954EDA

Accent

--accent

#FF5800

Semantic Colors

Background

--background

#F9FAFB

Foreground

--foreground

#353839

Card

--card

#FFFFFF

Card Foreground

--card-foreground

#353839

Primary

--primary

#00009C

Primary Foreground

--primary-foreground

#FAF9FE

Secondary

--secondary

#E5E5F5

Secondary Foreground

--secondary-foreground

#00007D

Muted

--muted

#E5E5F5

Muted Foreground

--muted-foreground

#6A7282

Accent

--accent

#FF5800

Accent Foreground

--accent-foreground

#FFFFFF

Destructive

--destructive

#F87171

Border

--border

#CCCCEB

Input

--input

#9CA3AF

Ring

--ring

#00009C

State Colors

Danger

Background

--danger-bg

#FEE2E2

Main

--danger

#F87171

Dark

--danger-dark

#DC2626

Warning

Background

--warning-bg

#FEF9C3

Main

--warning

#FDE047

Dark

--warning-dark

#FACC15

Success

Background

--success-bg

#DCFCE7

Main

--success

#86EFAC

Dark

--success-dark

#22C55E

Info

Background

--info-bg

#EFF6FF

Main

--info

#60A5FA

Dark

--info-dark

#2563EB

Blue Scale — Brand Primary Family

025

#EEEEFF

100

#DCDEFF

200

#BBBEF5

300

#9A9DEF

400

#7575E5

500

#3333B0

600

#00009C

700

#00007D

800

#00005E

900

#000041

Violet Scale — Brand Secondary Family

025

#E9E3E9

100

#D4C7D4

200

#C0ACC0

300

#AD91AD

400

#9C769C

500

#954EDA

600

#7E3C7E

700

#612B61

800

#431E43

900

#271227

Sidebar Colors

Sidebar

--sidebar

#FAF9FE

Foreground

--sidebar-foreground

#353839

Primary

--sidebar-primary

#00009C

Accent

--sidebar-accent

#E5E5F5

Border

--sidebar-border

#CCCCEB

Brand Gradients

brand-gradient

270deg — Navy → Purple (horizontal)

brand-gradient-v

180deg — Navy → Purple (vertical)

brand-gradient-200

90deg — Light purple → Soft violet

brand-gradient-900

90deg — Deep purple → Dark navy

Border Radius

sm

0.5rem / 8px

md

0.75rem / 12px

lg

1rem / 16px

pill

9999px

Typography — Noto Sans Thai

Weight Scale

Regular (400)

AppBuddy AI · แอปบัดดี้ เอไอ

Medium (500)

AppBuddy AI · แอปบัดดี้ เอไอ

Semibold (600)

AppBuddy AI · แอปบัดดี้ เอไอ

Bold (700)

AppBuddy AI · แอปบัดดี้ เอไอ

Size Scale

text-xs

12px

AppBuddy AI

text-sm

14px

AppBuddy AI

text-base

16px

AppBuddy AI

text-lg

18px

AppBuddy AI

text-xl

20px

AppBuddy AI

text-2xl

24px

AppBuddy AI

text-3xl

30px

AppBuddy AI