---
version: 1.0
name: SME-OmniStore
description: "A warm, trustworthy B2C e-commerce store with a terracotta primary brand color, clean white canvas, and subtle earth-tone surfaces. The design prioritizes clarity, product photography, and frictionless checkout. Aesthetic: premium boutique meets modern SaaS — not flashy, not corporate, just confidently curated."
---

## 1. Visual Theme & Atmosphere

SME-OmniStore is a **warm light canvas** — white surfaces with terracotta (#6f5349) as the dominant brand anchor, soft cream backgrounds for sections, and copper/amber accents for interactive moments. The overall mood is *trusted boutique*: clean enough to feel professional, warm enough to feel human. No gradients, no dark mode by default, no aggressive saturation.

Product photography is the hero. The UI chrome is deliberately minimal so products can breathe. Rounded corners (12-16px) signal approachability and softness. The brand feels like a well-lit independent design store — not Amazon, not a startup landing page.

**Key Characteristics:**
- **Light canvas with warm terracotta brand** — white (#FFFFFF) page, terracotta (#6f5349) brand, warm cream sections
- **Subtle 3-step surface system**: white → warm-gray (#fafaf9) → soft-surface (#f5f5f4)
- **Copper accent** (#c4895a) for CTAs, interactive highlights, and price emphasis
- **12px / 16px border radius** — soft but not bubble-gum
- **Lucide icons** throughout — 1.5px stroke, 20px default size
- **Typography**: DM Sans (Latin) + PingFang SC (Chinese) — geometric, warm, highly readable
- **Card shadows**: subtle warm-tinted (`rgba(111,83,73,0.08)`) — elevation feels brand-adjacent, not generic gray

## 2. Color Palette & Roles

### Brand & Primary
| Token | Hex | Role |
|-------|-----|------|
| `brand` | `#6f5349` | Primary brand, logo, primary buttons |
| `brand-light` | `#bfa094` | Hover states, secondary brand elements |
| `brand-dark` | `#4a3228` | Active/pressed states, deep emphasis |
| `brand-50` | `#fdf8f6` | Tinted backgrounds, brand sections |
| `brand-100` | `#f2e8e5` | Hover backgrounds, brand cards |

### Accent
| Token | Hex | Role |
|-------|-----|------|
| `accent` | `#c4895a` | Price, CTA buttons, discount badges |
| `accent-light` | `#d4a574` | Hover accent |
| `accent-dark` | `#a66b3c` | Active accent |

### Surface & Background
| Token | Hex | Role |
|-------|-----|------|
| `surface-50` | `#fafaf9` | Page background (warm white) |
| `surface-100` | `#f5f5f4` | Section backgrounds |
| `surface-200` | `#e7e5e4` | Card backgrounds on hover |
| `surface-300` | `#d6d3d1` | Borders, dividers |

### Text
| Token | Hex | Role |
|-------|-----|------|
| `ink` | `#1c1917` | Headings, primary text (warm black) |
| `ink-muted` | `#78716c` | Secondary text |
| `ink-subtle` | `#a8a29e` | Tertiary text, placeholders |
| `ink-disabled` | `#d6d3d1` | Disabled states |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `success` | `#16a34a` | In stock, success states |
| `warning` | `#d97706` | Low stock, warnings |
| `error` | `#dc2626` | Out of stock, errors, destructive |
| `info` | `#2563eb` | Informational badges |

## 3. Typography Rules

### Font Family
- **Primary**: `"DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif`
- **Display**: `"Playfair Display", "PingFang SC", serif` — for hero headlines only
- **Mono**: `"JetBrains Mono", "Fira Code", monospace` — for prices, codes

### Scale
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|----------------|-----|
| `display` | 48px | 600 | 1.10 | -1.5px | Hero headline |
| `headline` | 32px | 600 | 1.20 | -0.8px | Section titles |
| `title` | 24px | 600 | 1.25 | -0.4px | Card headings |
| `subtitle` | 18px | 500 | 1.40 | -0.2px | Sub-headings |
| `body-lg` | 16px | 400 | 1.50 | 0 | Body text |
| `body` | 14px | 400 | 1.50 | 0 | Default text |
| `caption` | 12px | 400 | 1.40 | 0 | Meta, timestamps |
| `button` | 14px | 500 | 1.20 | 0 | Button labels |
| `label` | 12px | 500 | 1.20 | 0.2px | Form labels, uppercase |

### Principles
- **Hero display**: Playfair Display at 48px/600 — editorial warmth on hero
- **UI/body**: DM Sans — geometric, highly legible at small sizes
- **Price**: JetBrains Mono — tabular figures for aligned prices
- **Chinese text**: PingFang SC fallback for all sans-serif; system-ui for display

## 4. Component Stylings

### Buttons

**Primary (Brand Fill)**
- Background: `#6f5349` → hover: `#4a3228` → active: `#4a3228`
- Text: `#ffffff`
- Border-radius: `12px`
- Padding: `10px 20px`
- Font: `button` token (14px / 500)
- Icon size: 16px, gap 6px from text
- Focus: `2px solid brand` ring, offset 2px
- Transition: `all 200ms ease`

**Secondary (Outline)**
- Background: transparent
- Text: `#6f5349`
- Border: `1.5px solid #6f5349`
- Border-radius: `12px`
- Padding: `10px 20px`
- Hover: fill `#fdf8f6` (brand-50)

**Ghost (Text only)**
- Background: transparent
- Text: `#78716c` → hover: `#6f5349`
- Border-radius: `8px`
- Padding: `8px 12px`
- Hover: `bg-surface-100`

**Danger**
- Background: `#dc2626`
- Text: `#ffffff`
- Same radius/padding as primary

### Cards

**Product Card**
- Background: `#ffffff`
- Border: `1px solid #e7e5e4` (surface-200)
- Border-radius: `16px`
- Shadow: `0 2px 12px rgba(111,83,73,.06)`
- Hover shadow: `0 8px 24px rgba(111,83,73,.10)`
- Image: `border-radius: 12px`, aspect 1:1
- Hover: translateY(-2px) + shadow upgrade, 200ms ease
- Badge: top-left `accent` pill, white text, 10px font

**Category Card**
- Background: `#ffffff`
- Border-radius: `16px`
- Padding: `20px 16px`
- Icon: 32px Lucide in brand/20 bg circle
- Hover: border → brand-200, shadow-hover

### Form Inputs
- Background: `#ffffff`
- Border: `1.5px solid #d6d3d1`
- Border-radius: `10px`
- Padding: `10px 14px`
- Font: `body` token
- Focus: border `brand`, ring `rgba(111,83,73,.15)` 2px
- Error: border `error`, ring `rgba(220,38,38,.15)` 2px

### Badges & Tags
- Discount badge: `bg-accent`, white text, `border-radius: 8px`, padding `2px 8px`, 11px font
- Status badge: `bg-surface-100`, `ink-muted` text, pill shape
- Category label: uppercase, `label` token, `ink-subtle`, letter-spacing 0.5px

### Navigation
- Header: white bg with `backdrop-filter: blur(8px)` + 50% opacity for sticky glass effect
- Height: 64px
- Border-bottom: `1px solid #e7e5e4`
- Nav links: 14px/500, `ink-muted` → hover: `ink` + `bg-surface-50`
- Active nav: `ink` color, no underline

### Toast Notifications
- Border-radius: `12px`
- Shadow: `modal` shadow
- Success: left border `4px solid success`
- Error: left border `4px solid error`
- Position: bottom-right, 24px from edges

## 5. Layout Principles

### Spacing System (8px base)
| Token | Value |
|-------|-------|
| `xxs` | 4px |
| `xs` | 8px |
| `sm` | 12px |
| `md` | 16px |
| `lg` | 24px |
| `xl` | 32px |
| `2xl` | 48px |
| `section` | 80px |

### Grid
- Max width: 1280px
- Gutter: 24px
- Columns: 12
- Product grid: `2 columns (mobile)` → `3 columns (sm)` → `4 columns (lg)`

### Container
- Horizontal padding: `16px` mobile, `24px` tablet, `48px` desktop
- Cards use full container width with internal padding

### Whitespace Philosophy
- Sections: minimum 64px top/bottom padding
- Card internal: 16px padding
- Related elements: 8px gap
- Section headings: 32px bottom margin

## 6. Depth & Elevation

| Level | Shadow | Use |
|-------|--------|-----|
| Resting | `0 2px 12px rgba(111,83,73,.06)` | Product cards, category cards |
| Hover | `0 8px 24px rgba(111,83,73,.10)` | Hovered cards |
| Modal | `0 20px 60px rgba(0,0,0,.15)` | Drawer, modal |
| Button | `0 1px 3px rgba(111,83,73,.20)` | Buttons on white |
| Nav | `0 1px 0 #e7e5e4` | Header bottom border |

## 7. Do's and Don'ts

### DO
- Use Lucide icons (stroke-width 1.5, size 20px default)
- Use DM Sans for UI, Playfair Display for hero headlines only
- Warm shadows with brand-tinted rgba
- 12px border-radius on cards, 10px on inputs, 12px on buttons
- Price in `JetBrains Mono` for tabular alignment
- Consistent 8px spacing grid

### DON'T
- Use emoji anywhere — use Lucide SVGs only
- Use Inter or system defaults — use DM Sans + PingFang SC
- Use pure black (`#000000`) for text — use warm `ink` `#1c1917`
- Use gray-only shadows — warm-tint all shadows
- Use harsh border-radius (0px or 20px+) on cards
- Mix icon styles (Heroicons + Lucide in same component)

## 8. Responsive Behavior

| Breakpoint | Columns | Nav | Card Grid |
|------------|---------|-----|-----------|
| `< 640px` (mobile) | 4 | Hamburger | 2 cols |
| `640px – 1024px` (tablet) | 8 | Horizontal scroll | 3 cols |
| `> 1024px` (desktop) | 12 | Full nav | 4 cols |

- Touch targets: minimum 44px
- Icon buttons: 40px minimum tap area
- Card image aspect: 1:1 (square)

## 9. Component Inventory

| Component | States | Notes |
|-----------|--------|-------|
| `ProductCard` | default, hover (lift + shadow), loading | Skeleton: gray animated rect |
| `AppHeader` | scrolled (blur), mobile (hamburger) | Sticky with blur backdrop |
| `CartDrawer` | open, empty, with-items | Slide from right, 300ms cubic |
| `ToastContainer` | success, error, info | Bottom-right, auto-dismiss 4s |
| `CategoryCard` | default, hover (border + shadow) | Icon circle + label |
| `SearchInput` | default, focus (brand ring), filled | Lucide Search icon |
| `QuantitySelector` | default, min (minus disabled) | Plus/minus buttons |
| `CheckoutButton` | default, loading (spinner), disabled | Full-width, prominent |

## 10. Agent Prompt Guide

When building pages for SME-OmniStore:

```
Use the SME-OmniStore design system:
- Colors: brand #6f5349, accent #c4895a, surface-50 #fafaf9, ink #1c1917
- Font: DM Sans + PingFang SC, price in JetBrains Mono
- Border radius: 12px cards, 10px inputs, 12px buttons
- Shadow: warm brand-tinted (rgba(111,83,73,.06))
- Icons: Lucide Vue Next, stroke 1.5
- Spacing: 8px grid base
- No emoji — use Lucide icons only
```

---

*DESIGN.md for SME-OmniStore — based on VoltAgent/awesome-design-md format*