Visual Style Guide

Không phải mọi sản phẩm đều nên trông giống nhau. Guide này giúp bạn chọn hướng thiết kế dựa trên tính cách thương hiệu và mục tiêu sản phẩm.

Ba “Dial” Điều Khiển

Mỗi phong cách thiết kế có 3 tham số chính:

Dial	1-3	4-7	8-10
Design Variance	Đối xứng, kỷ luật	Bất đối xứng, scale hỗn hợp	Poster-like, scene-led
Motion Intensity	Tĩnh, hover/focus thôi	Transition mượt, stagger nhẹ	Cinematic, scroll storytelling
Visual Density	Gallery mode, nhiều whitespace	App mode, cân bằng	Cockpit mode, dày đặc

14 Phong Cách

Swiss System

Tín hiệu: Lý trí, grid-led, typographic clarity, cấu trúc mạnh

Màu: Trắng, off-white, đen, một signal color
Type: Grotesk/neo-grotesk, uppercase labels với tracking, tabular numerals
Layout: Grid 12 cột, rational splits, rule systems
Motion: Gần như vô hình — exact fades, clip reveals, grid-aware slides
Tránh: Soft blobs, random collage, gradient noise, luxury haze

Chọn khi: thiết kế-forward brands, portfolios, institutional confidence

Minimalism

Tín hiệu: Kiềm chế, bình tĩnh, document-like, cao cấp tĩnh lặng

Màu: Paper, bone, chalk, ash, warm gray — accent cực hiếm và nhỏ
Type: Serif+sans pairing cho editorial; sans system cho software
Layout: Long vertical rhythm, narrow measures, 1 ý tưởng/section
Motion: Gần như vô hình — quiet reveals, subtle hover tightening
Tránh: Glassmorphism, loud gradients, endless card stacks, fake luxury

Chọn khi: startups, consulting, quiet product pages, high-clarity

Warm Modern

Tín hiệu: Đương đại, nhân văn, ấm áp, lịch sự — không lạnh, không vô trùng

Màu: Warm neutrals, một accent rõ ràng, surface hierarchy tinh tế
Type: Sans chính với personality, body dễ đọc, scale intentional
Layout: Cấu trúc rõ ràng, section pace xen kẽ, media-led
Motion: Calm stagger, gentle lifts, soft highlight shifts, friendly hover
Tránh: Biến thành generic clean landing page với peach accent

Chọn khi: agencies, service brands, consumer products, modern company sites

Editorial Premium

Tín hiệu: Tinh tế, typographic, magazine-like, story-led

Màu: Muted tones, deep ink, warm paper — không flashy
Type: Display serif headlines + refined sans body
Layout: Full-bleed images, chapter openers, paced rhythm
Motion: Paced và elegant — section fades, text reveals
Tránh: Dashboardy modules, gadget-heavy hero scenes

Chọn khi: studios, fashion, hospitality, premium service brands

Dashboards

Tín hiệu: Dense software UI, metrics, operator tools, data-heavy

Màu: Semantic color system, đủ role: success/warning/error/info
Type: Tabular numerals, mono cho data, readable sans cho UI
Layout: High density với hierarchy mạnh, row highlights
Motion: Utility motion — live-state transitions, count-up reveals
Tránh: Nested scrollbars trong cards, dashboard chỉ toàn metric cards lặp

Chọn khi: SaaS, analytics, control panels, B2B software

Brutalism

Tín hiệu: Raw, bold, confrontational, poster-like, industrial

Soft Brutalism

Tín hiệu: Cấu trúc mạnh với góc cạnh ấm hơn, fashion-tech energy

Cinematic Product

Tín hiệu: Immersive launches, dramatic reveals, product-as-hero

Dark Luxe

Tín hiệu: Moody premium, dark polished, sensual atmosphere

Gallery Minimal

Tín hiệu: Image-led, exhibition pacing, portfolio-style

Monochrome Modern

Tín hiệu: Black/white hệ thống chặt chẽ, modern product clarity

Premium Bento

Tín hiệu: Modular premium sections, advanced feature storytelling

Quiet Luxury

Tín hiệu: Understated wealth, premium calm, soft refinement

Soft

Tín hiệu: Approachable, friendly, optimistic, rounded, gentle warmth

Cách chọn phong cách

Trả lời các câu hỏi sau:

Loại sản phẩm — SaaS dashboard? Landing page? Portfolio?
Tâm trạng thương hiệu — Premium? Friendly? Technical? Bold?
Đối tượng — Developer? Executive? Consumer?
Mức năng lượng — Calm? Energetic? Cinematic?
Mật độ nội dung — Thưa (gallery) hay dày (cockpit)?
Cảm giác — Editorial? Technical? Premium? Soft? Cinematic? Strict? Experimental?

Quick Map

Nếu bạn muốn…	Chọn
Lý trí, cấu trúc, grid rõ ràng	Swiss System
Bình tĩnh, sang trọng tối giản	Minimalism
Ấm áp, chuyên nghiệp, không lạnh	Warm Modern
Sang trọng, editorial, storytelling	Editorial Premium
Dashboard, data-dense, công cụ	Dashboards
Mạnh mẽ, khác biệt, experimental	Brutalism
Tối, premium, quyến rũ	Dark Luxe
Thân thiện, tròn trịa, lạc quan	Soft
Hình ảnh dẫn dắt, portfolio	Gallery Minimal

Áp dụng vào 1thay Design System

Dù chọn phong cách nào, bạn vẫn dùng chung bộ design tokens của 1thay. Sự khác biệt nằm ở cách bạn kết hợp chúng:

Swiss System → --rounded-sm, --space-10, --fontweight-700 headings uppercase
Soft → --rounded-xl, --space-4 tight, --color-teal accent, Inter weight 400-500
Dark Luxe → Dark mode, --color-gray-950 background, --color-indigo-400 accent
Dashboards → --space-2 tight, --fontsize-xs UI, --font-mono data, semantic status colors