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

# Bauhaus (`bauhaus`)

Ba màu cơ bản, hình khối nguyên thuỷ, lưới vuông

- Hợp với: Hợp khi đang dùng AI để dựng website cho lớp thiết kế và studio muốn biến chính giao diện thành ví dụ thị giác.
- Ngành minh hoạ: Lớp dạy vẽ, studio sáng tạo, tư vấn
- Trang minh hoạ làm việc gì: Workshop bố cục ba hình với các preset tương tác
- Thang (1–10): biến tấu bố cục 7 · chuyển động 2 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/bauhaus/

## Đặc tả

Bauhaus: nền ngà #f4f1ea, đen và ba màu đỏ, vàng, xanh dương. Lưới vuông, đường kẻ đen rõ, chữ sans-serif đậm. Hero dùng một bố cục hình học chủ đạo: lưới 3×3 gồm tròn, vuông, tam giác và nửa tròn, mảng màu đặc, không bóng hoặc chuyển sắc. Đây là minh họa có chủ ý; ảnh lớp học hoặc hoạt động thật vẫn dùng ở mục nội dung phù hợp. Các mục chương trình, cách học và thông tin đăng ký chia hàng rõ khi phù hợp dự án. Màn hẹp giữ hình vuông nhưng đưa chữ và nội dung về một cột.

**Chi tiết cần giữ:** Đúng ba màu, không pha sắc độ trung gian. Hình khối phải là hình học thuần, đừng bo góc cho mềm — bo góc là mất chất của kiểu này.

**Lưu ý khi áp dụng:** Bảng màu này rất dễ nhận ra là mượn. Chỉ dùng khi nội dung của bạn thật sự nói về hình khối và thiết kế.

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

# Design Style: Bauhaus

## 1. Design Philosophy
The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. This is **constructivist modernism**—every element is deliberately composed from circles, squares, and triangles. The aesthetic should evoke 1920s Bauhaus posters: bold, asymmetric, architectural, and unapologetically graphic.

**Vibe**: Constructivist, Geometric, Modernist, Artistic-yet-Functional, Bold, Architectural

**Core Concept**: The interface is not merely a layout—it is a **geometric composition**. Every section is constructed rather than designed. Think of the page as a Bauhaus poster brought to life: shapes overlap, borders are thick and deliberate, colors are pure primaries (Red #D02020, Blue #1040C0, Yellow #F0C020), and everything is grounded by stark black (#121212) and clean white.

**Key Characteristics**:
- **Geometric Purity**: All decorative elements derive from circles, squares, and triangles
- **Hard Shadows**: 4px and 8px offset shadows (never soft/blurred) create depth through layering
- **Color Blocking**: Entire sections use solid primary colors as backgrounds
- **Thick Borders**: 2px and 4px black borders define every major element
- **Asymmetric Balance**: Grids are used but intentionally broken with overlapping elements
- **Constructivist Typography**: Massive uppercase headlines (text-6xl to text-8xl) with tight tracking
- **Functional Honesty**: No gradients, no subtle effects—everything is direct and declarative

## 2. Design Token System (The DNA)

### Colors (Single Palette - Light Mode)
The palette is strictly limited to the Bauhaus primaries, plus stark black and white.
-   `background`: `#F0F0F0` (Off-white canvas)
-   `foreground`: `#121212` (Stark Black)
-   `primary-red`: `#D02020` (Bauhaus Red)
-   `primary-blue`: `#1040C0` (Bauhaus Blue)
-   `primary-yellow`: `#F0C020` (Bauhaus Yellow)
-   `border`: `#121212` (Thick, distinct borders)
-   `muted`: `#E0E0E0`

### Typography
-   **Font Family**: **'Outfit'** (geometric sans-serif from Google Fonts). This typeface's circular letterforms and clean geometry perfectly embody Bauhaus principles.
-   **Font Import**: `Outfit:wght@400;500;700;900`
-   **Scaling**: Extreme contrast between display and body text
    -   Display: text-4xl (mobile) → text-6xl (tablet) → text-8xl (desktop)
    -   Subheadings: text-2xl → text-3xl → text-4xl
    -   Body: text-base → text-lg
-   **Weights**:
    -   Headlines: font-black (900) with uppercase and tracking-tighter
    -   Subheadings: font-bold (700) with uppercase
    -   Body: font-medium (500) for readability
    -   Labels: font-bold (700) with uppercase and tracking-widest
-   **Line Height**: Tight for headlines (leading-[0.9]), relaxed for body (leading-relaxed)

### Radius & Border
-   **Radius**: Binary extremes—either `rounded-none` (0px) for squares/rectangles or `rounded-full` (9999px) for circles. No in-between rounded corners.
-   **Border Widths**:
    -   Mobile: `border-2` (2px)
    -   Desktop: `border-4` (4px)
    -   Navigation/Major divisions: `border-b-4` (4px bottom border)
-   **Border Color**: Always `#121212` (black) for maximum contrast

### Shadows/Effects
-   **Hard Offset Shadows** (inspired by Bauhaus layering):
    -   Small: `shadow-[3px_3px_0px_0px_black]` or `shadow-[4px_4px_0px_0px_black]`
    -   Medium: `shadow-[6px_6px_0px_0px_black]`
    -   Large: `shadow-[8px_8px_0px_0px_black]`
-   **Button Press Effect**: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-none` (simulates physical button press)
-   **Card Hover**: `hover:-translate-y-1` or `hover:-translate-y-2` (subtle lift)
-   **Patterns**: Use CSS background patterns for texture
    -   Dot grid: `radial-gradient(#fff 2px, transparent 2px)` with `background-size: 20px 20px`
    -   Opacity overlays: Large geometric shapes at 10-20% opacity for background decoration

## 3. Component Stylings

### Buttons
-   **Variants**:
    -   **Primary** (Red): `bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
    -   **Secondary** (Blue): `bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
    -   **Yellow**: `bg-[#F0C020] text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
    -   **Outline**: `bg-white text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
    -   **Ghost**: `border-none text-black hover:bg-gray-200`
-   **Shapes**: Either `rounded-none` (square) or `rounded-full` (pill). Use shape variants deliberately.
-   **States**:
    -   Hover: Slight opacity change (`hover:bg-[color]/90`)
    -   Active: Button "presses down" (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
    -   Focus: 2px offset ring
-   **Typography**: Uppercase, font-bold, tracking-wider

### Cards
-   **Base Style**: White background, `border-4 border-black`, `shadow-[8px_8px_0px_0px_black]`
-   **Decoration**: Small geometric shape in top-right corner (8px x 8px):
    -   Circle: `rounded-full bg-[primary-color]`
    -   Square: `rounded-none bg-[primary-color]`
    -   Triangle: CSS clip-path `polygon(50% 0%, 0% 100%, 100% 100%)`
-   **Hover**: `hover:-translate-y-1` (subtle lift effect)
-   **Content Hierarchy**: Large bold titles, medium body text, generous padding

### Accordion (FAQ)
-   **Closed State**: White background, `border-4 border-black`, `shadow-[4px_4px_0px_0px_black]`
-   **Open State**: Red background (`bg-[#D02020]`), white text for header
-   **Expanded Content**: Light yellow background (`bg-[#FFF9C4]`), black text, `border-t-4 border-black`
-   **Icon**: ChevronDown with `rotate-180` when open

## 4. Layout & Spacing
-   **Container Width**: `max-w-7xl` for main content sections (creates poster-like breadth)
-   **Section Padding**:
    -   Mobile: `py-12 px-4`
    -   Tablet: `py-16 px-6`
    -   Desktop: `py-24 px-8`
-   **Grid Systems**:
    -   Stats: 1-column (mobile) → 2-column (tablet) → 4-column (desktop) with `divide-y` and `divide-x` borders
    -   Features: 1-column → 2-column → 3-column with 8px gaps
    -   Pricing: 1-column → 3-column (center elevated on desktop)
-   **Spacing Scale**: Consistent use of 4px, 8px, 12px, 16px, 24px
-   **Section Dividers**: Every section has `border-b-4 border-black` creating strong horizontal rhythm

## 5. Non-Genericness (Bold Choices)

**This design MUST NOT look like generic Tailwind or Bootstrap. The following are mandatory:**

-   **Color Blocking**: Entire sections use solid primary colors as backgrounds:
    -   Hero right panel: Blue (`bg-[#1040C0]`)
    -   Stats section: Yellow (`bg-[#F0C020]`)
    -   Blog section: Blue (`bg-[#1040C0]`)
    -   Benefits section: Red (`bg-[#D02020]`)
    -   Final CTA: Yellow (`bg-[#F0C020]`)
    -   Footer: Near-black (`bg-[#121212]`)

-   **Geometric Logo**: Navigation features three geometric shapes (circle, square, triangle) in primary colors forming the brand identity

-   **Geometric Compositions**: Use abstract compositions of overlapping shapes:
    -   Hero right panel: Overlapping circle, rotated square, and centered square with triangle
    -   Product Detail: Abstract geometric "face" constructed from circles, squares, and diagonal line
    -   Final CTA: Large decorative shapes (circle and rotated square) at 50% opacity in corners

-   **Rotated Elements**: Deliberate 45° rotation on:
    -   Every 3rd shape in repeating patterns
    -   Step numbers in "How It Works" (counter-rotate inner content)
    -   Decorative background shapes

-   **Image Treatments**:
    -   Blog images: Alternate between `rounded-full` and `rounded-none`, grayscale filter with `hover:grayscale-0`
    -   Testimonial avatars: Circular crop with `rounded-full` and grayscale filter

-   **Unique Decorations**: Small geometric shapes (8px-16px) as corner decorations on cards, using the three primary colors in rotation

## 6. Icons & Imagery
-   **Icon Library**: `lucide-react` (Circle, Square, Triangle, Check, Quote, ArrowRight, ChevronDown)
-   **Icon Style**:
    -   Stroke width: 2px (default) or 3px (emphasis)
    -   Size: h-6 w-6 to h-8 w-8
    -   Color: Match section accent color or white on colored backgrounds
-   **Icon Integration**: Icons placed inside bordered geometric containers:
    -   Features: Icon in white bordered box with shadow
    -   Benefits: Check icon in yellow circular badge
    -   Stats: Numbers in geometric shapes (circle/square/rotated square)
-   **Image Treatment**: All images use grayscale filter by default, color on hover

## 7. Responsive Strategy
-   **Mobile-First Approach**: Start with single-column layouts, expand to grids on larger screens
-   **Breakpoints**:
    -   Mobile: < 640px (sm)
    -   Tablet: 640px - 1024px (sm to lg)
    -   Desktop: > 1024px (lg+)
-   **Typography Scaling**: All text uses responsive classes (text-4xl sm:text-6xl lg:text-8xl)
-   **Border/Shadow Scaling**: Reduce border and shadow sizes on mobile (border-2 → border-4, shadow-[3px] → shadow-[8px])
-   **Navigation**: Hamburger menu button on mobile (< 768px), full nav on desktop
-   **Grid Adaptations**:
    -   Stats: 1 col → 2 col (sm) → 4 col (lg)
    -   Features: 1 col → 2 col (md) → 3 col (lg)
    -   How It Works: 1 col → 2 col (sm) → 4 col (md), hide connecting line on mobile

## 8. Animation & Micro-Interactions
-   **Feel**: Mechanical, snappy, geometric (no soft organic movement)
-   **Transition Duration**: `duration-200` or `duration-300` (fast and decisive)
-   **Easing**: `ease-out` (mechanical feel)
-   **Interactions**:
    -   Button press: Translate and remove shadow (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
    -   Card hover: Lift upward (`hover:-translate-y-1` or `hover:-translate-y-2`)
    -   Accordion: ChevronDown rotation (`rotate-180`) and content reveal with max-height transition
    -   Icon hover: Scale up on grouped shapes (`group-hover:scale-110`)
    -   Link hover: Color change to accent color
-   **Background Patterns**: Static (no animation on patterns)

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

CÁCH ÁP DỤNG PHONG CÁCH BAUHAUS
Bố cục và nhận diện: Outfit; nền #F0F0F0, đen #121212, đỏ #D02020, blue #1040C0, yellow #F0C020. Hình học quyết định cấu trúc: chia tỷ lệ, cân bằng và dẫn mắt; không rải hình ngẫu nhiên.

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

**H1:** BA HÌNH. NHIỀU CÁCH NHÌN.

**Lời dẫn:** Thử quan hệ giữa hình tròn, vuông và tam giác trước khi bước vào một buổi thực hành bố cục.

**Hành động chính:** Thử một bố cục

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

### 1. Poster workshop

**Bố cục và hành vi:** Chữ lớn và ba hình khóa vào cùng grid; một hình tròn giữ artwork mẫu.

**Nội dung và đầu ra:** H1 và CTA Thử bố cục phải đọc trước các nhãn trang trí.

### 2. Thử ba bố cục

**Bố cục và hành vi:** Ba preset Cân bằng/Lệch tâm/Nhịp lặp; cùng ba hình chuyển vị trí.

**Nội dung và đầu ra:** Mỗi preset có lời giải thích một câu về quan hệ thị giác, không chấm điểm thẩm mỹ giả.

### 3. Bạn sẽ làm gì

**Bố cục và hành vi:** Ba hoạt động quan sát/cắt ghép/so sánh dưới bố cục 2+1 bất đối xứng.

**Nội dung và đầu ra:** Nêu vật liệu và sản phẩm mang về; không thành tích học viên giả.

### 4. Tác phẩm thực hành

**Bố cục và hành vi:** Bốn composition nguyên bản với chú thích cách tổ chức.

**Nội dung và đầu ra:** Không chép poster lịch sử làm sản phẩm studio.

### 5. Chọn buổi mẫu

**Bố cục và hành vi:** Hai lịch mẫu cùng thời lượng; form xem lại lựa chọn.

**Nội dung và đầu ra:** Không câu còn ba chỗ nếu không có dữ liệu thật.

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

Preset thay vị trí nhưng không thay nội dung hoặc tự tạo animation mới liên tục; reset về Cân bằng. Chọn buổi có nhãn dữ liệu mẫu.

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 hình và type tái bố trí thành poster dọc, không scale nguyên desktop; interaction có nút thay kéo thả; body 16–18 px.

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

Đổi preset 300 ms transform có điểm dừng, reduced-motion chuyển ngay. Hình không xoay mãi che chữ.

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:** Bài tập hình học code-native và ảnh AI vật liệu in; không thêm blob mềm kiểu Playful.

**Cover:** Ba hình và chữ liên hệ chặt, palette nguyên sắc và bố cục có trọng lực; khác Swiss ở vai trò hình học chủ đạo.

**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. Ba preset cho khác biệt bố cục có thể giải thích.
2. Không hình nào che chữ ở390 px.
3. Cover giữ quan hệ hình–chữ, không chỉ biểu tượng tròn/vuông/tam giá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.