skills/tocbien-ui-ux/references/styles/sketch.md

# Sketch (`sketch`)

Giấy kẻ ly, nét vẽ tay, viền đứt đoạn

- Hợp với: Hợp khi đang dùng AI để dựng website cho đồ thủ công và lớp thực hành cần kể rõ quá trình làm bằng tay.
- Ngành minh hoạ: Cửa hàng thủ công, sản phẩm, cà phê
- Trang minh hoạ làm việc gì: Xưởng gốm đi từ nét phác tới chiếc chén hoàn thiện
- Thang (1–10): biến tấu bố cục 6 · chuyển động 2 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/sketch/

## Đặc tả

Sketch: nền giấy ngà #fdfcf7, mực chì #2b2b26, đất nung #c96a3f làm điểm nhấn. Tiêu đề serif, đường gạch chân và viền gợi nét tay nhưng chữ bài vẫn ngay ngắn. Hero là ký họa bút chì đơn giản trên giấy trống; ảnh xưởng hoặc sản phẩm thật ở các mục sau. Danh mục, câu chuyện thủ công và cách đặt hàng theo nội dung dự án. Đường nền rất nhạt, độ xoay trang trí dưới 2 độ và không xoay thân bài. Không thay toàn bộ ảnh bằng nét phác họa. Điện thoại xếp dọc, giữ lề và độ rõ của chữ.

**Chi tiết cần giữ:** Xoay nghiêng chỉ được dưới hai độ, quá tay là trông như lỗi chứ không như vẽ tay. Đường kẻ nền phải nhạt hơn chữ nhiều lần, không thì rối mắt khi đọc.

**Lưu ý khi áp dụng:** Đừng dùng cho hàng sản xuất loạt. Nét vẽ tay hứa hẹn thủ công, hàng công nghiệp mà dùng là nói dối.

## Đặc tả gốc chi tiết (giữ đầy đủ)

# Design Philosophy

The Hand-Drawn design style celebrates authentic imperfection and human touch in a digital world. It rejects the clinical precision of modern UI design in favor of organic, playful irregularity that evokes sketches on paper, sticky notes on a wall, and napkin diagrams from a brainstorming session.

**Core Principles:**
- **No Straight Lines**: Every border, shape, and container uses irregular border-radius values to create wobbly, hand-drawn edges that reject geometric perfection
- **Authentic Texture**: The design layer paper grain, dot patterns, and subtle background textures to simulate physical media (notebook paper, post-its, sketch pads)
- **Playful Rotation**: Elements are deliberately tilted using small rotation transforms (-2deg to 2deg) to break rigid grid alignment and create casual energy
- **Hard Offset Shadows**: Reject soft blur shadows entirely. Use solid, offset box-shadows (4px 4px 0px) to create a cut-paper, layered collage aesthetic
- **Handwritten Typography**: Use exclusively handwritten or marker-style fonts (Kalam, Patrick Hand) that feel human and approachable, never corporate or sterile
- **Scribbled Decoration**: Add visual flourishes like dashed lines, hand-drawn arrows, tape effects, thumbtacks, and irregular shapes to reinforce the sketched aesthetic
- **Limited Color Palette**: Stick to pencil blacks, paper whites, correction marker red, and post-it yellow for bold but cohesive simplicity
- **Intentional Messiness**: Embrace overlap, asymmetry, and visual "mistakes" that make the design feel spontaneous and creative rather than manufactured

**Emotional Intent:**
This style should feel approachable, creative, human-centered, and fun. It lowers barriers and invites interaction by appearing unfinished and work-in-progress, making users feel like collaborators rather than consumers. Perfect for creative tools, brainstorming platforms, educational content, or any product that wants to emphasize human creativity over corporate polish.

# Design Token System

## Colors (Single Palette - Light Mode)
- **Background**: `#fdfbf7` (Warm Paper)
- **Foreground**: `#2d2d2d` (Soft Pencil Black - never pure black)
- **Muted**: `#e5e0d8` (Old Paper / Erased Pencil)
- **Accent**: `#ff4d4d` (Red Correction Marker)
- **Border**: `#2d2d2d` (Pencil Lead)
- **Secondary Accent**: `#2d5da1` (Blue Ballpoint Pen)

## Typography
- **Headings**: `Kalam` (wght 700) - Looks like a thick felt-tip marker.
- **Body**: `Patrick Hand` (wght 400) - Legible but distinctly handwritten.
- **Scale**: Large and readable. Headings should vary in size dramatically to look like emphasized notes.

## Radius & Border
- **Wobbly Borders**: CRITICAL. Do NOT use standard `rounded-*` classes alone.
- **Technique**: Use inline `style={{ borderRadius: ... }}` with multiple values to create irregular organic ellipses.
  - Example: `border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;`
  - Store reusable radius values in config as `wobbly` and `wobblyMd`
- **Border Width**: Thick and variable. `border-2` is the minimum. Use `border-[3px]` or `border-4` for emphasis.
- **Style**: `border-solid` is default for most elements. Use `border-dashed` for secondary elements, dividers, and sketchy overlays.

## Shadows/Effects
- **Hard Offset Shadows**: No blur. Just a solid offset to create a cut-paper, layered collage aesthetic.
  - Standard: `box-shadow: 4px 4px 0px 0px #2d2d2d;`
  - Emphasized: `box-shadow: 8px 8px 0px 0px #2d2d2d;`
  - Hover State: Reduce offset `2px 2px` or `6px 6px` to create "lifting" effect
- **Paper Texture**: Use `radial-gradient` dot pattern on body background to simulate notebook paper grain
  - `backgroundImage: radial-gradient(#e5e0d8 1px, transparent 1px)`
  - `backgroundSize: 24px 24px`
- **Subtle Animations**: Gentle bounce (3s duration) for decorative elements, rotation on hover for playful interaction

# Component Stylings

## Buttons
- **Shape**: Irregular wobbly oval using custom border-radius from config
- **Normal State**:
  - White background, `border-[3px]` black border, black text
  - Hard offset shadow: `shadow-[4px_4px_0px_0px_#2d2d2d]`
  - Font: Patrick Hand (body font)
- **Hover State**:
  - Background fills with Accent red `#ff4d4d`, text turns white
  - Shadow reduces to `shadow-[2px_2px_0px_0px_#2d2d2d]`
  - Subtle translate: `translate-x-[2px] translate-y-[2px]`
- **Active State**:
  - Shadow disappears completely (button "presses flat")
  - Translate increases: `translate-x-[4px] translate-y-[4px]`
- **Secondary Variant**: Uses muted background `#e5e0d8`, hovers to blue `#2d5da1`

## Cards/Containers
- **Base Style**: White background (`#ffffff`) with wobbly black border (`border-2`)
- **Border Radius**: Use `wobblyMd` radius from config for medium containers
- **Shadow**: Subtle `3px 3px 0px 0px rgba(45, 45, 45, 0.1)` for depth
- **Decoration Options**:
  - `decoration="tape"`: Translucent gray bar positioned at top center with slight rotation
  - `decoration="tack"`: Red circular thumbtack at top center
  - No decoration for minimal aesthetic
- **Special Treatments**:
  - Post-it yellow background `#fff9c4` for feature cards
  - Speech bubble style for testimonials with geometric tail using border-based triangle
  - Sticky-note tags for section labels

## Inputs
- **Style**: Full box with wobbly borders (not just underline)
- **Border**: `border-2` with wobbly radius matching button aesthetic
- **Font**: Patrick Hand (body font) for authentic hand-written feel
- **Background**: White with placeholder text in muted color `#2d2d2d/40`
- **Focus State**:
  - Border changes to blue `#2d5da1`
  - Ring effect: `ring-2 ring-[#2d5da1]/20`
  - No standard outline, maintains wobbly aesthetic

# Layout Strategy
- **Grid System**: Use Tailwind's responsive grid (`md:grid-cols-2`, `md:grid-cols-3`) but add visual irregularity
- **Rotation**: Apply small rotations (`rotate-1`, `-rotate-2`) to cards, images, and decorative elements
- **Breaking Alignment**:
  - Stats: Organic shapes with varied border-radius instead of perfect circles
  - Cards: Slight rotation on hover (`hover:rotate-1` or `hover:-rotate-1`)
  - Pricing: Scale up highlighted card slightly on desktop (`md:scale-105`)
- **Overlap & Layering**:
  - Overlapping avatar circles with negative margin (`-space-x-4`)
  - Decorative elements positioned absolutely outside parent bounds
  - Speech bubble tails extending beyond card borders
- **Whitespace**:
  - Consistent section padding (`py-20`) for rhythm
  - Generous gap in grids (`gap-8`) to prevent crowding
  - Max-width containers (`max-w-5xl`, `max-w-3xl`) for focused content
- **Z-Index Layering**: Decorative SVG backgrounds at low z-index, step numbers elevated with `z-10`

# Non-Genericness (Bold Choices)

**Unique Visual Signatures:**
- **NO STRAIGHT LINES**: Every container, button, card, and frame uses irregular border-radius values—never standard Tailwind rounded classes
- **Hand-Drawn SVG Decorations**:
  - Arrow pointing to hero CTA with dashed path
  - Squiggly connecting line between "How It Works" steps
  - Corner frame marks on hero image placeholder
- **Authentic Paper Effects**:
  - Tape strips (translucent gray rectangles) on feature cards
  - Thumbtack pins (colored circles) for card decoration
  - Dashed circle overlay highlighting popular pricing tier
  - Speech bubble geometric tails on testimonials
- **Playful Typography Treatments**:
  - Rotating exclamation mark in hero headline
  - Wavy underline decoration on navigation links and footer headers
  - Drop-cap first letter treatment in Product Detail section
  - Post-it yellow sticky-note tag on Product Detail card
- **Scribbled Accents**:
  - Bouncing decorative circle near hero image (desktop only)
  - Dashed borders on secondary elements and dividers
  - Emoji sketches in blog post placeholders
  - Line-through hover effect on footer links
- **Interactive Personality**:
  - Buttons "press flat" by eliminating shadow on active state
  - Cards rotate slightly on hover
  - Blog cards increase shadow offset on hover for "lift" effect
  - Grayscale-to-color transition on blog images (removed in final implementation for simplicity)

# Effects & Animation
- **Hover**: "Jiggle" effect. `hover:rotate-1` or `hover:-rotate-2`.
- **Transition**: `transition-transform duration-100` (Fast and snappy).

# Spacing, Layout & Iconography
- **Max Width**: `max-w-5xl` (Keep it contained like a sketchbook).
- **Icons**: `lucide-react` icons with `stroke-width={2.5}` or `3`.
- **Icon Style**: Enclose key icons in rough circles.

# Responsive Strategy

**Mobile-First Approach:**
- **Typography Scaling**:
  - Headings: `text-4xl md:text-5xl` or `text-5xl md:text-6xl`
  - Body text: `text-lg md:text-xl` or `text-base md:text-xl`
  - Buttons: `text-lg md:text-2xl`
- **Layout Stacking**:
  - All grids collapse to single column on mobile, expand to 2-3 columns on `md:` breakpoint
  - Hero switches from 2-column to stacked with `md:grid-cols-2`
  - Stats: 2-column grid on mobile (`grid-cols-2`), 4-column on desktop (`md:grid-cols-4`)
- **Hide Decorative Elements**:
  - Hand-drawn arrow near CTA: `hidden md:block`
  - Bouncing decorative circle: `hidden md:block`
  - Squiggly connecting line in "How It Works": `hidden md:block`
  - Dashed circle on pricing card: `hidden md:block`
- **Maintain Core Aesthetic**:
  - Keep wobbly borders and handwritten fonts on all screen sizes
  - Reduce rotation slightly if needed (`-rotate-1` instead of `-rotate-2`)
  - Maintain hard offset shadows (never add blur)
  - Preserve playful personality and irregular shapes
- **Touch-Friendly Targets**:
  - Buttons use minimum `h-12` (48px) for accessibility
  - Adequate spacing between interactive elements with `gap-8`
- **Spacing Adjustments**:
  - Section padding remains `py-20` for vertical rhythm
  - Reduce horizontal padding when needed: `px-6`
  - Stats scale down: `h-24 w-24 md:h-32 md:w-32`
  - Pricing cards: `p-6 md:p-8` for better mobile fit

## Đặc tả áp dụng chi tiết

CÁCH ÁP DỤNG PHONG CÁCH SKETCH
Bố cục và nhận diện: Kalam/Patrick Hand theo nguồn, giấy #fdfbf7, chì #2d2d2d, đỏ #ff4d4d, bút xanh #2d5da1. Nét viền không đều có hệ thống; body dài cần kiểm glyph tiếng Việt, không ép font thiếu dấu.

## 3. Nội dung mở đầu

**H1:** Từ nét phác tới chiếc chén.

**Lời dẫn:** Một buổi làm gốm bắt đầu bằng điều bạn muốn cầm trên tay.

**Hành động chính:** Xem quá trình / Chọn mẫu gốm

## 4. Đặc tả từng vùng nội dung và tác vụ

### 1. Trang sổ mở

**Bố cục và hành vi:** Một bản phác bên trái, vật thể hoàn thiện bên phải; mũi tên vẽ tay nối ý.

**Nội dung và đầu ra:** H1 56–72 px và CTA Xem quá trình.

### 2. Bốn bước làm

**Bố cục và hành vi:** Phác/Nặn/Sửa/Nung thành trang sổ có ghi chú ngắn.

**Nội dung và đầu ra:** Mỗi bước dùng ảnh cùng chiếc chén; không ghép bốn sản phẩm khác nhau.

### 3. Chọn dáng

**Bố cục và hành vi:** Ba hình dáng chén/cốc/đĩa thay bản phác và mô tả.

**Nội dung và đầu ra:** Không giả 3D tùy chỉnh nếu chỉ có ảnh mẫu.

### 4. Buổi thực hành

**Bố cục và hành vi:** Thông tin thời lượng/vật liệu/phần đã bao gồm như tờ ghi chú gắn băng dính.

**Nội dung và đầu ra:** Không thiết kế ticket nghiêng khiến đoạn dài khó đọc.

### 5. Sổ ý tưởng

**Bố cục và hành vi:** Textarea ghi điều muốn làm và chọn dáng; xem tờ brief mẫu.

**Nội dung và đầu ra:** Không đặt cọc hoặc hứa giao sản phẩm thật.

## 5. Dữ liệu và trạng thái tương tác

selectedShape cập nhật preview và alt; note có giới hạn mềm và không mất khi đổi dáng. Show process giữ vị trí bước đang xem.

Phân biệt rõ dữ liệu dựng sẵn với hành động thực: chức năng thử trong mẫu không gửi tin, tạo đơn, đặt lịch hoặc thực thi workflow bên ngoài. Nếu phiên bản khách sau này kết nối dịch vụ thật, đó là phần tích hợp riêng cần quyền và kiểm lỗi phù hợp.

## 6. Responsive và thứ tự đọc

Mobile các trang sổ xếp dọc, tilt tối đa 1 deg ở trang trí và 0 deg ở body; body 18 px, line-height 1.6; mũi tên ngắn không văng ra document.

Kiểm thêm 320 px và 1280×720 để phát hiện cắt chữ/đáy panel. Thứ tự DOM phải theo việc người xem cần làm, không chỉ sắp lại bằng CSS rồi khiến Tab đi lộn. Bảng/log dài cuộn bên trong vùng có nhãn.

## 7. Chuyển động và phản hồi

Nét vẽ reveal 400 ms, giấy hover xoay 1 deg 180 ms; reduced-motion hiện đầy đủ ngay, không lặp nét vẽ mãi.

Không để motion làm chậm thao tác hoặc che lỗi. Lưu trạng thái pause trong phiên khi có vòng lặp; reduced-motion phải giữ toàn bộ thông tin và thứ tự nội dung.

## 8. Art direction và ảnh đại diện

**Tài sản nội dung:** Cặp ảnh AI phác thảo/thành phẩm có cùng hình dáng, macro chất men.

**Cover:** Cặp phác/thành phẩm với đường nối vẽ tay; texture giấy thấy vừa đủ, không toàn chữ viết tay nhỏ.

**Bộ xuất:** cover 1200×750; cover dọc 900×1200; OG 1200×630; screenshot QA riêng ở viewport thực. Chụp/compose từ đúng phiên bản đã dựng, không ảnh hero hứa một thiết kế khác trang thật.

## 9. Trường hợp nghiệm thu riêng

1. Bốn ảnh mô tả cùng một vật thể.
2. Đổi dáng không mất ghi chú.
3. Tiếng Việt dấu đầy đủ, nét vẽ không làm nhãn khó đọc.

Ngoài ba trường hợp này, chạy bộ kiểm chung của kế hoạch: tải ảnh/font lỗi, focus, reduced-motion, zoom200%, trạng thái trống và quay lại/reset. Không ghi đạt nếu chưa có bằng chứng.

Các tên, ngành và tác vụ ở trên là ví dụ có thể chuyển sang dự án của người dùng. Giữ ngôn ngữ thị giác gốc; không ép dự án thật thành nội dung của trang minh họa.