Design System v6
QR MENU โ Design System
Premium SaaS design language, inspired by Stripe, Linear and Toast POS. Deep emerald + warm amber accent, FiraGO typography for Georgian/Latin/Cyrillic, restraint over decoration.
1. Colors
แแ แแแแ โ Deep Emerald (แแแแขแแแ, แกแแแแแแ, แแแแแแแฃแ แ), warm Amber accent (แ แแกแขแแ แแแก แขแแแแแ แแขแฃแ แ). Neutrals โ warm off-white โ true black.
Brand
Primary
#0F7A5C
Buttons, links, focus
Primary Deep
#0A5A44
Hover, active
Primary Soft
#DCEFE6
Backgrounds, tints
Accent Amber
#D97706
Highlights, CTAs
Accent Deep
#B45309
Hover, active
Accent Soft
#FEF3C7
Warnings tint
Neutrals
Background
#FBFAF7
Page background
Surface
#FFFFFF
Cards, panels
Surface 2
#F7F5F0
Inset, subtle
BG Soft
#F3F1EC
Hover states
Line
#E6E2D9
Borders, dividers
Ink 2
#383C3A
Secondary text
Semantic
Success
#0F7A5C
Confirmed, positive
Warning
#D97706
Caution, pending
Danger
#C32828
Errors, destroy
2. Typography
FiraGO โ แฃแคแแกแ OSS แคแแแขแ Fira-แก แแฏแแฎแแแแ, แกแ แฃแแ แฅแแ แแฃแแ + แแแแแแฃแ แ + แแแ แแแแชแ แแฎแแ แแแญแแ แแ. แกแฃแแแ แแแแแฎแแแ แแแ แแแแ, แแแ แแ แแแ แแแชแแ (400โ800), professional feel.
แแฅแแแแ แแแแแฃ
แแ แแ แแแแขแคแแ แแ
แ แแแแ แแฃแจแแแแก
แฎแแแแแแ แฎแแ แชแแแแ
แจแแฅแแแแแ แชแแคแ แฃแแ แแแแแฃ, แแแแแญแแแ QR แแแแ แแ แแแแฆแแ แจแแแแแแแแ แแแ แแแแแ แกแแแแแ แแฃแแแจแ. แกแขแฃแแแ แ แแแแแแแก แกแแแแแ แก โ แแแแแฃ แแฎแกแแแแ แแแแแแฃแ แจแ.
14 แแฆแแแแ แฃแคแแกแ แกแแชแแแแ โ แแแ แแแ แแ แกแแญแแ แ
แคแแกแแแ ยท แคแฃแแฅแชแแแแ
order_id: #GK-2847 ยท amount: 342.50โพ
3. Spacing (4px base)
4px แแแแฃแแฃแ แ แกแแกแขแแแ โ sp-1=4, sp-2=8, sp-3=12, sp-4=16, sp-5=20, sp-6=24, sp-7=32, sp-8=40, sp-9=56, sp-10=72, sp-11=96, sp-12=128.
4
8
12
16
20
24
32
40
56
72
4. Border radius
XS
SM
MD
LG
XL
2XL
FULL
5. Shadows
Warm-toned shadows โ แแแแแแงแแแแแ แ แแแแ elevation-แแกแแแแก. Brand shadow โ แแฎแแแแ แฆแแแแแแแแ hover-แแกแแก.
8. Cards
Default card v6
Standard card with border and light shadow. Used everywhere in the admin dashboard.
Elevated card
No border, uses shadow-2 for elevation. Suggests interactivity.
Interactive card
Hover to see the lift. Cursor becomes pointer.
9. Badges
Neutral
Brand
Accent
Success
Warning
Danger
Info
Solid
Live
Pending
10. Tables
# แแแแแแ แแแ แซแ แแแแฎแ แกแขแแขแฃแกแ
#001 โ7 แฎแแแแแแ ร 2, แแแแแแแแ 32โพ แแแแแแแแ #002 โ3 แชแแแแ แ, แฉแฃแ แฉแฎแแแ 27โพ แแฎแแแ #003 โ12 แคแแฎแแ, แกแแคแแ แแแ 61โพ แแแแแแ #004 โ5 แแแแ แฃแแ แงแแแแ ร 2 54โพ แแแกแ แฃแแแแฃแแ
11. Tabs & Navigation
Overview
Orders
Menu
Analytics
Settings
Tab content goes here.
12. Alerts
โน QR แแแแ แจแแแชแแแก slug + table โ แแ แ แแแแแแก. แแแแ แแชแแ แแ แกแแญแแ แแแแก แฎแแแแฎแแ แแแญแแแแก.
โ แชแแแแแแแแแ แฌแแ แแแขแแแแ แจแแแแแฎแ. แแแแแฃ แแแแแฎแแแ 2 แฌแแแจแ.
โ แกแแชแแแแ แแแ แแแแ แแแแแ แแแแ 3 แแฆแแจแ. แแแแแแฎแแ แแแ แแแ.
โ แแแแแฎแแ แแแ แแแแฎแแ แชแแแแแ. แกแชแแแ แฎแแแแฎแแ แแ แจแแชแแแแ แแแ แแแ.
13. Modals & Toasts
Modal preview
แแแ แฌแแฃแแแแฃแแ แฎแแ ?
แแ แแแฃแฅแขแ แฌแแแจแแแแ. แแก แฅแแแแแแ แแแ แแแแ แฃแแแแแ.
แแแฃแฅแแแแ
แฌแแจแแ
Toast (test it!)
Success toast
Warning toast
Error toast
14. Empty / Loading / Error states
๐ฝ
แฏแแ แแ แแแฅแแก แแ แแแฃแฅแขแ
แแแแแแขแ แแแ แแแแ แแแ แซแ โ แแแแแฃ แชแแชแฎแแแแแแ แแแจแแแแ. แแแขแแแแ แแ, แคแแกแ, แคแแขแ.
+ แแ แแแฃแฅแขแแก แแแแแขแแแ
๐ฆ
แจแแแแแแ แฏแแ แแ แแ แแก
แแฎแแแ แจแแแแแแ แแแขแแแแขแฃแ แแ แแแแแฉแแแแแ แแฅ แชแแชแฎแแ แแ แแจแ.
โ
แ แแฆแแช แจแแคแแ แฎแแ
แแแ แแแฎแแ แฎแแแ แกแแ แแแ แแแ แแแแแแจแแ แแแแก. แกแชแแแ แฎแแแแฎแแ แ แแแแแแแแ แฌแแแจแ.
โป แแแแแแแ แชแแ
15. Motion & Micro-interactions
3 แกแแฉแฅแแ แ: --t-fast (120ms) hover/press, --t-med (220ms) modals/drawers, --t-slow (380ms) hero transforms. Easing โ cubic-bezier(.2,.8,.2,1) (natural feel, Stripe-style).
Progress dot Live update
Tooltip ๐ Delete
16. Accessibility
โ Contrast: WCAG AA โ Ink/BG = 20.5:1
โ Focus rings: 4px focusring on all interactive
โ Font size: 14px min body, 12px min captions
โ Touch targets: 44ร44px min on mobile
โ Keyboard: Tab, Enter, Escape all work
โ Reduced motion: Respects prefers-reduced-motion
โ Semantic HTML: nav, main, section, article
โ ARIA labels: On icon buttons
Design System v6 ยท updated 2026-08-27 ยท QR MENU