--- name: premium-design-system description: Context-first design system — brand personality, typography, color palettes, spacing, and UI patterns for premium web/app design. Use ONLY when designing UI, defining brand identity, picking colors/fonts, or creating design tokens --- # Premium Design System — Context-First Premium ≠ หน้าตาแบบเดียว Premium = perfect fit for the brand **Product UI (Linear/Stripe), fitness brand, yoga studio, designer portfolio — ทุกอย่าง premium ได้ ถ้าทุก choice มีเหตุผลและ consistent กับ brand personality** --- ## Core Framework: Brand Personality Axes ก่อนเริ่มออกแบบ วาง brand บน 5 axes นี้: | Axis | ← Pole | → Pole | |------|--------|--------| | **Tone** | Soft, organic, warm | Hard, industrial, cold | | **Energy** | Calm, slow, intentional | Aggressive, fast, urgent | | **Color** | Earth tones, muted pastels | High contrast, pure B&W, neons | | **Space** | Generous whitespace, airy | Dense, gridded, information-packed | | **Texture** | Smooth, clean, minimal | Raw grain, paper, concrete, grit | **ตัวอย่าง:** - Yoga studio → Soft + Calm + Earth + Airy + Smooth - Fitness brand → Hard + Aggressive + High contrast + Dense + Grit - Product UI (Linear) → Between soft & hard + Calm + High contrast + Airy + Smooth - Designer portfolio → Hard + Calm + B&W + Sparse + Raw **กฏข้อเดียว:** พอเลือก pole แล้วต้อง **consistent ทุก element** — ถ้าเลือก Hard แล้วใช้ border-radius 16px ทุกที่ = inconsistency --- ## Anti-Patterns (ใช้ได้ทุกบริบท) สิ่งเหล่านี้ไม่มีทางดี ไม่ว่า brand จะเป็นอะไร: - Gradients ที่ไม่จำเป็น (purple/blue AI slop) - Glassmorphism / frosted glass ที่ decorative - **Emoji ในงาน client work ทุกประเภท — emoji = AI slop flag เด่นที่สุด ใช้ตุยได้** - Decorative illustrations ที่ไม่สื่อ brand meaning - UI ที่รวมทุก trend โดยไม่มีความ consistent personality - Stock photography ที่ generic (คนยิ้มทำงาน group high-five) --- ## Design Toolbox ### Typography เลือก font ให้ตรงกับ brand personality: | Brand Type | Heading | Body | |------------|---------|------| | Product UI | System sans (SF Pro, Inter) | System sans | | Fitness / Street | Condensed sans (Oswald, Bebas) | Clean sans (Roboto, Inter) | | Yoga / Wellness | Humanist serif (Mrs. Eaves, Lyon) | Lightweight sans (Proxima Nova) | | Portfolio / Editorial | Oversized serif or display | Minimal sans or serif | | Luxury | Elegant serif (Didot, Bodoni) | Thin sans | **กฎ:** - Maximum 2 typefaces ต่อ project - Weight: 2-3 weights ก็พอ (อย่าใช้ทุกตัวที่มี) - Letter-spacing: headings ของ brand ที่ hard/tight-content ใช้ negative tracking, brand ที่ soft/open ใช้ normal หรือ positive ### Color Palettes by Context | Context | Primary | Accent | Vibe | |---------|---------|--------|------| | **Fitness** | Pure black, charcoal | Neon orange, silver | Aggressive, powerful | | **Yoga** | Warm sand, sage | Terracotta, dusk pink | Grounded, warm | | **Portfolio** | High-contrast B&W | Single chromatic accent | Editorial, focused | | **Product UI** | White, #0d0d0d | Blue (#1a73e8) | Clean, trustworthy | | **Luxury** | Cream, charcoal | Gold, deep navy | Refined, exclusive | **กฎสี (สากล):** - 1-2 accent colors max — accent ต้องสื่อ brand identity - Gray scale สำหรับ hierarchy - สีที่เลือกต้องมี contrast ผ่าน AA สำหรับ body - Accent ต้องมี purpose (CTA, hover, active, link) — ไม่ใช่แค่แต่ง ### Border Radius by Context | Context | Buttons | Cards | Overall feel | |---------|---------|-------|-------------| | Product UI | 8px | 8-12px | Rounded, approachable | | Fitness | 0-2px | 0-4px | Sharp, aggressive | | Yoga | 12-16px | 16-24px | Soft, organic | | Portfolio | 0px | 0-8px | Editorial, sharp | | Luxury | 4px | 8-12px | Refined, subtle | **กฎ: radius = brand expression ถ้า brand aggressive / editorial → 0-2px ถ้า brand soft / organic → 12px+** ### Shadows by Context | Context | Shadow style | |---------|-------------| | Product UI | Subtle offset shadow, low opacity — elevation metaphor | | Fitness | No shadow หรือ heavy 1px hard shadow (no blur) — comic-book style | | Yoga | No shadow หรือ very soft (large blur, low opacity) | | Portfolio | No shadow ตกแต่ง → ใช้ ink trap หรือ hard line แทน | | Luxury | Very subtle shadow หรือ no shadow → rely on material quality | **กฎ: shadow ไม่จำเป็นต้องมีทุกที่ fitness brand ที่ aggressive ใช้ hard shadow ได้ดีกว่า offset soft** ### Spacing by Context | Context | Density | |---------|---------| | Product UI | 8pt grid, generous whitespace | | Fitness | Tighter — 4pt grid, high density, minimal whitespace | | Yoga | Very generous — 8pt หรือ 12pt grid, lots of breathing room | | Portfolio | Content-driven — asymmetric, editorial spacing | | Luxury | Symmetrical, generous margins, centered | **กฎ: ถ้า desire = "intense, information-packed" → spacing เล็ก / ถ้า desire = "calm, intentional" → spacing ใหญ่** --- ## Context-Adaptive Patterns ### Navigation - **Product:** Top bar 48-56px, minimal, logo left, links right - **Fitness:** Large bold logo, condensed links, full-width dark strip, mega menu - **Yoga:** Minimal, centered logo, tertiary links, hamburger on desktop OK (soft feel) - **Portfolio:** Hidden nav (hamburger or bottom-right persistent), let content lead ### Hero - **Product:** Value prop + CTA centered, clean bg - **Fitness:** Full-viewport video/image + oversized headline overlaid, low opacity overlay - **Yoga:** Slow-breathing visual, 4-second expand/contract cycle, centered text - **Portfolio:** Oversized typographic name treatment, kinetic animation ### Cards - **Product:** Border-based, subtle, consistent padding - **Fitness:** Dark bg, or no bg, sharp corners, image-led - **Yoga:** Soft radius, generous padding, image + text - **Portfolio:** Full-bleed image spreads, editorial captions ### Buttons / CTAs - **Product:** 3-tier (solid/outline/link), 8px radius, scale feedback - **Fitness:** Solid bold, all-caps, wide tracking, 0-2px radius, pulse glow animation - **Yoga:** Soft solid or ghost, rounded, lowercase or title case, organic easing - **Portfolio:** Text-only (link-style) or bare outline, type-driven --- ## Interaction Principles by Context ### Easing - **Product / Yoga:** `cubic-bezier(0.16, 1, 0.3, 1)` — smooth, natural - **Fitness:** Overshoot or elastic — `cubic-bezier(0.5, 1.5, 0.5, 1)` สำหรับ emphasis moments - **Portfolio:** Variable — kinetic for hero, linear for scroll, stepped for type reveal ### Animation - **Product:** Subtle scale hover, purposeful transitions only - **Fitness:** Bold — section entry with staggered fade+translate, grain texture parallax, pulse on CTA - **Yoga:** Soft fade-up 600ms, slow Ken Burns on image hover, breath cycle - **Portfolio:** Kinetic typography on load, cross-fade spreads, logo build animation ### Cursor - **Product:** Default cursor, pointer on clickable - **Fitness:** Default - **Yoga:** Default - **Portfolio:** Custom cursor — risograph dot trail, cursor-following swatch --- ## Number Input UX (Live Comma Formatting) สำหรับ input ตัวเลขที่ users ต้องกรอกจำนวนเงิน (principal, rate, fee): ### กฎ - **ใช้ `type="text" inputmode="decimal"`** แทน `type="number"` — เพื่อให้รองรับ comma และ mobile keyboard แสดงทศนิยม - **Live formatting ขณะพิมพ์** — เพิ่ม comma ทุก 3 หลักอัตโนมัติ (5000 → 5,000) - **Strip comma ก่อน submit** — ใช้ JS `.replace(/,/g, '')` ก่อนส่งค่าไป backend - **Preview ต้อง parse commas ได้** ก่อนคำนวณ ### Implementation Pattern ```javascript function formatLive(el) { var start = el.selectionStart; var raw = el.value.replace(/,/g, '').replace(/[^\d.]/g, ''); var parts = raw.split('.'); if (parts.length > 2) parts = [parts[0], parts.slice(1).join('')]; var intPart = parts[0].replace(/^0+(\d)/, '$1'); var formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); if (parts.length > 1 && parts[1] !== undefined) formatted += '.' + parts[1]; var rawCursor = start - ((el.value.slice(0, start).match(/,/g) || []).length); if (rawCursor < 0) rawCursor = 0; if (rawCursor > raw.length) rawCursor = raw.length; var newPos = raw.slice(0, rawCursor).replace(/\B(?=(\d{3})+(?!\d))/g, ',').length; el.value = formatted; el.setSelectionRange(Math.min(newPos, formatted.length), Math.min(newPos, formatted.length)); } ``` ### Strip on Submit ```javascript function stripCommas() { document.querySelectorAll('input[inputmode="decimal"]').forEach(function(el) { if (el.value) el.value = el.value.replace(/,/g, ''); }); } ``` ### เมื่อใดควรใช้ - จำนวนเงิน, เปอร์เซ็นต์, ตัวเลขที่มีโอกาสเกิน 1,000 - **ไม่ใช้** สำหรับ ID, phone, postal code, หรือเลขที่ไม่มี comma significance --- ## Modal Scrolling (Fixed Header + Footer) เมื่อ modal มีเนื้อหาเยอะจนเกิน viewport (จอเล็ก, ฟิลด์เยอะ): ### โครงสร้าง ```html ``` ### กฎ - **ห้าม** ใช้ `overflow-y-auto` ครอบ modal ภายนอก (ทำให้ backdrop เลื่อนไม่ติดที่) - ใช้ `flex flex-col` + `max-h-[85vh]` บน card แทน - ส่วนหัว + ปุ่ม = `shrink-0` - ส่วนเนื้อหา = `overflow-y-auto` - backdrop = `fixed inset-0` (ไม่เกี่ยวข้องกับ scroll) - `85vh` เป็นค่าที่ safe ที่สุดสำหรับ mobile + desktop --- ## Split Input (Input + Display Group) เมื่อต้องการ input ที่แบ่งเป็น 2 ส่วน: ด้านซ้ายกรอกค่า, ด้านขวาแสดงผลลัพธ์/หน่วย ### โครงสร้าง ```html
ผลลัพธ์
``` ### CSS สำรอง (กัน browser ตก)\nถ้า Tailwind ไม่จัดการ border-radius หรือ box-shadow ของ `` ให้เพิ่ม CSS นี้: ```css .split-input input { border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } ``` แล้วเพิ่ม class `split-input` ที่ flex container ### กฎ - Input: `border-0 rounded-none appearance-none` + `bg-white` (เท่ากับพื้นหลัง card) - Display: `border-l` เส้นแบ่ง | `bg-black/[0.02]` ตัดพื้นให้ต่างนิด - Container: `rounded-xl border overflow-hidden` ตัดมุมทั้งหมดด้วย container เดียว - `flex-1 min-w-0` ให้ input ยืดเต็มที่, `shrink-0` ให้ display ไม่หด - `!important` ใน CSS สำรอง จำเป็นเพราะ browser บางตัวมี `border-radius` ติดมากับ `` ตาม default - ใช้ `focus:ring-2 focus:ring-inset` แทน `outline` เพราะ `overflow-hidden` ตัด outline ได้ --- ## Flatpickr Premium Calendar Custom month/year dropdown selectors สำหรับ flatpickr — รองรับไทย, ปี พ.ศ., dark mode, glassmorphism ### Files | File | Description | |------|-------------| | `examples/flatpickr-premium.html` | Standalone reference page (see it live) | | (copy CSS + JS จาก HTML นั้นไปใช้ใน project) | | ### Key Features - **Premium header** — ซ่อน default flatpickr header, ใช้ custom dropdown แทน - **ภาษาไทย** — ใช้ `flatpickr/dist/l10n/th.js`, แสดงชื่อเดือนไทย + วัน "จ อ พฤ ศ ส อา" - **ปี พ.ศ.** — แสดง `ค.ศ. + 543` (2026 → 2569) - **Navigation arrows** — `< prev` / `next >` ปุ่มเปลี่ยนเดือน - **Glassmorphism** — backdrop-blur, rounded-2xl, apple-style shadow - **Dark mode** — `.dark` class support - **ปรับ accent color** — เปลี่ยน `#007AFF` และ `rgba(0,122,255,...)` เป็นสีธีมคุณ ### Implementation Steps **1. CDN:** ```html ``` **2. Input:** ```html ``` **3. CSS:** ก็อป `/* FLATPICKR PREMIUM — START COPY HERE */` block จาก `examples/flatpickr-premium.html` **4. JavaScript:** ก็อป `createPremiumSelect` helper + `flatpickr(...)` init จาก example ### Accent Color Cheatsheet | Theme | CSS values | |-------|-----------| | Apple Blue | `#007AFF`, `rgba(0,122,255,...)` | | Apple Green | `#34C759`, `rgba(52,199,89,...)` | | Apple Red | `#FF3B30`, `rgba(255,59,48,...)` | | Purple | `#AF52DE`, `rgba(175,82,222,...)` | ### Variants ```javascript // Single date (default) flatpickr('.js-date', { onReady: premiumOnReady }); // Date range flatpickr('#date-range', { mode: 'range', maxDate: new Date(), onReady: premiumOnReady }); // Disable future dates flatpickr('.js-date', { maxDate: new Date(), onReady: premiumOnReady }); ``` --- ## UI Components Components ready-to-use ใน `examples/components.html`: | Component | Description | JS | |-----------|-------------|----| | **Custom Select** | Dropdown แทน native `