skills/tocbien-ui-ux/references/styles/modern-dark.md

# Modern Dark (`modern-dark`)

Nền đen nhiều lớp, tím sáng và lưới lệch

- Hợp với: Hợp khi đang dùng AI để dựng website cho sản phẩm cộng tác sáng tạo cần chiều sâu tối và dữ liệu vẫn dễ quét.
- Ngành minh hoạ: Thiết kế, sản phẩm số
- Trang minh hoạ làm việc gì: Workspace so phiên bản thiết kế và xử lý phản hồi
- Thang (1–10): biến tấu bố cục 8 · chuyển động 6 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/modern-dark/

## Đặc tả

Nền #050506 và #020203, indigo #5E6AD2; Inter và JetBrains Mono. Ba vùng sáng chuyển động, lưới mờ, tiêu đề chuyển sắc, workspace mockup, bento sáu cột lệch kích thước, spotlight theo chuột, xuất hiện khi cuộn và FAQ.

**Chi tiết cần giữ:** Trên điện thoại xếp nội dung theo thứ tự đọc; hỗ trợ bàn phím, focus rõ và prefers-reduced-motion. Mọi số liệu trong bản minh hoạ phải được ghi rõ.

**Lưu ý khi áp dụng:** Giữ chữ tiếng Việt rõ, nút dễ bấm và hiệu ứng không che nội dung.

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

# Design Style: Linear / Modern

## Design Philosophy

**Core Principles:** Precision, depth, and fluidity define this design system. Every surface exists in three-dimensional space, illuminated by soft ambient light sources that breathe and move. The design communicates "premium developer tools"—fast, responsive, and obsessively crafted like Linear, Vercel, or Raycast. Nothing is arbitrary: every shadow has three layers, every gradient transitions through multiple colors, every animation uses refined expo-out easing. The goal is software that feels expensive without feeling ostentatious.

**Vibe:** Cinematic meets technical minimalism. Imagine a developer's code editor crossed with a Blade Runner interface—deep near-blacks (#050506, never pure black) punctuated by soft pools of indigo light. The aesthetic is sophisticated but never cold, using warmth from accent glows (#5E6AD2 at varying opacities) to create inviting depth. It should feel like looking through frosted glass into a high-end application running at night. Dark, but not oppressive. Technical, but not sterile. Precise, but not rigid.

**Differentiation:** The signature of this style is **layered ambient lighting and interactive depth**. Unlike flat dark modes or simple gradient overlays, this creates genuine atmospheric presence through:

1. **Multi-layer background system:** Four stacked gradients + noise texture + grid overlay create depth without any single dominant element
2. **Animated gradient blobs:** Large (900-1400px), heavily blurred shapes float slowly across the canvas, simulating cinematic lighting pools
3. **Mouse-tracking spotlights:** Interactive surfaces respond to cursor position with radial gradient glows (300px diameter, 15% opacity)
4. **Scroll-linked parallax:** Hero content fades, scales, and translates based on scroll position for cinematic depth
5. **Multi-layer shadows:** Every elevated surface uses 3-4 shadow layers: border highlight + soft diffuse + ambient darkness + optional accent glow
6. **Precision micro-interactions:** All animations are 200-300ms with expo-out easing. Movements are tiny (4-8px max). Scale changes are subtle (0.98-1.02). Nothing bounces or overshoots.

**The "Software Feel":** This design should feel like using a desktop application, not a website. Interactions are instant and precise. Hover states are immediate. Focus rings are prominent. Everything responds to the cursor. The aesthetic borrows from native macOS/Windows design systems—subtle transparency, soft glows, refined typography, obsessive attention to 1px details.

---

## Design Token System (The DNA)

### Color Strategy: Deep Space with Ambient Light

The palette is built on near-black bases with a single saturated indigo accent. Depth comes from layered translucency and soft light sources, not harsh shadows.

| Token | Value | Usage |
|:------|:------|:------|
| `background-deep` | `#020203` | Absolute darkest — footer, deepest layers |
| `background-base` | `#050506` | Primary page canvas |
| `background-elevated` | `#0a0a0c` | Elevated surfaces, mock interfaces |
| `surface` | `rgba(255,255,255,0.05)` | Card backgrounds, containers |
| `surface-hover` | `rgba(255,255,255,0.08)` | Hovered card state |
| `foreground` | `#EDEDEF` | Primary text — bright but not pure white |
| `foreground-muted` | `#8A8F98` | Body text, descriptions, metadata |
| `foreground-subtle` | `rgba(255,255,255,0.60)` | Tertiary text, placeholders |
| `accent` | `#5E6AD2` | Primary interactive color — buttons, links, glows |
| `accent-bright` | `#6872D9` | Hover state for accent |
| `accent-glow` | `rgba(94,106,210,0.3)` | Glow effects, ambient lighting |
| `border-default` | `rgba(255,255,255,0.06)` | Subtle hairline borders |
| `border-hover` | `rgba(255,255,255,0.10)` | Border on hover |
| `border-accent` | `rgba(94,106,210,0.30)` | Accent-tinted borders for emphasis |

### Background System: Layered Ambient Lighting

The background is never flat. It's a composition of multiple layers:

**Layer 1 — Base Gradient:**
```
bg-[radial-gradient(ellipse_at_top,#0a0a0f_0%,#050506_50%,#020203_100%)]
```
A radial gradient emanating from top-center creates vertical depth.

**Layer 2 — Noise Texture:**
A subtle SVG noise pattern at `opacity: 0.015` adds tactile quality and prevents banding.

**Layer 3 — Animated Gradient Blobs:**
Multiple large, heavily blurred shapes create ambient "light pools":
- Primary blob: Top-center, `blur-[150px]`, 900×1400px, accent color at 25% opacity
- Secondary blob: Left side, `blur-[120px]`, 600×800px, purple/pink mix at 15% opacity
- Tertiary blob: Right side, `blur-[100px]`, 500×700px, indigo/blue mix at 12% opacity
- Bottom accent: Lower area, pulsing animation, accent at 10% opacity

**Blob Animation:** Blobs float slowly using keyframe animations:
```css
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}
/* Duration: 8-10s, ease-in-out, infinite */
```

**Layer 4 — Grid Overlay:**
A subtle 64px grid pattern at `opacity: 0.02` adds technical precision.

---

### Typography System

**Font Stack:** `"Inter", "Geist Sans", system-ui, sans-serif`

**Type Scale & Weights:**

| Level | Size | Weight | Tracking | Usage |
|:------|:-----|:-------|:---------|:------|
| Display | `text-7xl` to `text-8xl` | `font-semibold` | `tracking-[-0.03em]` | Hero headlines |
| H1 | `text-5xl` to `text-6xl` | `font-semibold` | `tracking-tight` | Section headers |
| H2 | `text-3xl` to `text-4xl` | `font-semibold` | `tracking-tight` | Subsection headers |
| H3 | `text-xl` to `text-2xl` | `font-semibold` | `tracking-tight` | Card titles |
| Body Large | `text-lg` to `text-xl` | `font-normal` | default | Lead paragraphs |
| Body | `text-sm` to `text-base` | `font-normal` | default | Standard content |
| Label | `text-xs` | `font-mono` | `tracking-widest` | Section tags, metadata |

**Gradient Text Treatment:**
Headlines use gradient fills for dimensionality:
```
bg-gradient-to-b from-white via-white/95 to-white/70 bg-clip-text text-transparent
```

For accent emphasis, use animated gradient:
```
bg-gradient-to-r from-[#5E6AD2] via-indigo-400 to-[#5E6AD2] bg-clip-text text-transparent
/* With background-size: 200% and animation for shimmer effect */
```

**Line Heights:**
- Headlines: `leading-tight` or `leading-none`
- Body text: `leading-relaxed`

---

### Radius & Border System

| Element | Radius | Border |
|:--------|:-------|:-------|
| Large containers | `rounded-2xl` (16px) | `border border-white/[0.06]` |
| Cards | `rounded-2xl` (16px) | `border border-white/[0.06]` |
| Buttons | `rounded-lg` (8px) | Inset shadow instead of border |
| Inputs | `rounded-lg` (8px) | `border border-white/10` |
| Badges/Pills | `rounded-full` | `border border-accent/30` |
| Icons containers | `rounded-xl` (12px) | `border border-white/10` |

**Border Gradients on Hover:**
Cards can have animated gradient borders that fade in on hover:
```css
background: linear-gradient(to bottom, rgba(94,106,210,0.3), transparent);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
padding: 1px;
```

---

### Shadow & Glow System

**Multi-Layer Shadow Formula:**
Shadows combine multiple layers for realistic depth:

```
/* Card default */
shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_2px_20px_rgba(0,0,0,0.4),0_0_40px_rgba(0,0,0,0.2)]

/* Card hover */
shadow-[0_0_0_1px_rgba(255,255,255,0.1),0_8px_40px_rgba(0,0,0,0.5),0_0_80px_rgba(94,106,210,0.1)]
```

**Accent Glow for CTAs:**
```
shadow-[0_0_0_1px_rgba(94,106,210,0.5),0_4px_12px_rgba(94,106,210,0.3),inset_0_1px_0_0_rgba(255,255,255,0.2)]
```

**Inner Highlight:**
Buttons and elevated surfaces get a subtle top edge highlight:
```
shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]
```

---

## Component Styling Principles

### Buttons

**Primary Button:**
- Background: Solid accent color (`bg-[#5E6AD2]`)
- Text: White
- Shadow: Multi-layer with accent glow
- Hover: Slightly brighter (`bg-[#6872D9]`), increased glow
- Active: `scale-[0.98]`, reduced shadow
- Shine effect: Pseudo-element gradient sweep on hover

**Secondary Button:**
- Background: `bg-white/[0.05]`
- Text: `text-[#EDEDEF]`
- Border: Inset shadow only
- Hover: `bg-white/[0.08]`, subtle outer glow

**Ghost Button:**
- Background: Transparent
- Text: Muted foreground
- Hover: `bg-white/[0.05]`, text brightens

### Cards & Containers

**Base Card:**
- Background: `bg-gradient-to-b from-white/[0.08] to-white/[0.02]`
- Border: 1px at 6% white opacity
- Radius: `rounded-2xl`
- Inner glow line: 1px gradient at top edge
- Mouse-tracking spotlight effect (optional)

**Spotlight Effect:**
Cards track mouse position and render a radial gradient that follows the cursor:
```jsx
// Radial gradient, 300px diameter, accent color at 15% opacity
// Positioned at mouse coordinates relative to card
// Opacity transitions on hover
```

**Card Variants:**
- `default`: Standard glass effect
- `glass`: More translucent with backdrop blur
- `gradient`: Subtle accent gradient overlay

### Form Inputs

- Background: `bg-[#0F0F12]`
- Border: `border-white/10`
- Focus: `border-[#5E6AD2]` with accent glow ring
- Text: `text-gray-100`
- Placeholder: `text-gray-500`

### Interactive States

**Hover Principles:**
- Movement is minimal: `y: -4px` to `y: -8px` maximum
- Duration: `200-300ms`
- Easing: `[0.16, 1, 0.3, 1]` (expo out)
- Changes: Border brightens, glow increases, subtle scale

**Focus States:**
- Ring: `ring-2 ring-[#5E6AD2]/50 ring-offset-2 ring-offset-[#050506]`

**Active States:**
- Scale: `scale-[0.98]`
- Shadow: Reduced depth

**Mobile Menu:**
- Toggle button appears on screens < 768px
- Animated dropdown with `opacity` and `y` transform (0.2s duration)
- Semi-transparent backdrop: `bg-[#050506]/95` with `backdrop-blur-xl`
- Vertical navigation links with hover states
- Full-width CTA button at bottom
- Menu icon transitions between hamburger (`Menu`) and close (`X`) icons

---

## Layout Principles

### Spacing Scale
Base unit: 4px. Use Tailwind's default scale consistently.

| Context | Spacing |
|:--------|:--------|
| Section padding | `py-24` to `py-32` |
| Container max-width | `container` with responsive padding |
| Card padding | `p-6` to `p-8` |
| Element gaps | `gap-4` to `gap-8` |
| Between sections | `py-32` (128px) |

### Grid Philosophy

**Asymmetric Bento Grids:**
Feature grids should NOT be uniform. Use varying spans:
- 6-column base grid on desktop
- Mix of `col-span-2`, `col-span-3`, `col-span-4`
- Variable row heights with `auto-rows-[180px]` as baseline
- One "hero" card spanning 4 columns and 2 rows

**Responsive Breakpoints:**
- Mobile (`< 768px`): Single column, stacked layout with reduced padding
- Tablet (`md: 768px`): 2-3 columns, intermediate grid layouts
- Desktop (`lg: 1024px+`): Full grid expression with asymmetric layouts

**Mobile-Specific Adjustments:**
- Section padding scales: `py-16` (mobile) → `py-24` (tablet) → `py-32` (desktop)
- Hero typography: `text-4xl` (mobile) → `text-5xl` (tablet) → `text-7xl`/`text-8xl` (desktop)
- Body text: `text-base` (mobile) → `text-lg` (tablet) → `text-xl` (desktop)
- Navigation: Hamburger menu with animated slide-down panel on mobile (`Menu`/`X` icons), inline links on desktop
- Cards: Full-width on mobile, grid on desktop
- Bento grids: Single column mobile, full asymmetric layout desktop

### Section Flow

- Sections separated by subtle `border-t border-white/[0.06]`
- Gradient line accents: `bg-gradient-to-r from-transparent via-white/10 to-transparent`
- Occasional overlapping sections using negative margins

---

## The "Bold Factor" (Signature Elements)

These elements MUST be present for authenticity:

1. **Animated Ambient Blobs:** Multiple layered, floating gradient shapes create cinematic lighting. Without these, the design becomes flat and generic.

2. **Mouse-Tracking Spotlights:** Interactive surfaces respond to cursor position with soft radial glow effects. This creates the "magical" interaction feel.

3. **Gradient Typography:** Headlines use vertical gradients (white to semi-transparent) and accent gradients with animation for key phrases.

4. **Multi-Layer Shadows:** Never single shadows. Always combine: border highlight + soft diffuse shadow + optional accent glow.

5. **Parallax/Scroll Effects:** Hero content fades and scales on scroll. Elements reveal with staggered animations. This adds cinematic depth.

6. **Precision Micro-Interactions:** All animations are quick (200-300ms), use expo-out easing, and movements are tiny (4-8px). Never bouncy or exaggerated.

---

## Anti-Patterns (What to Avoid)

1. **Flat backgrounds:** Never use a single solid color. Always layer gradients, noise, and ambient light.

2. **Pure black (`#000000`):** Use near-blacks like `#050506` or `#020203` for softer appearance.

3. **Pure white text:** Use `#EDEDEF` or similar off-white to reduce harshness.

4. **Large hover movements:** Keep transforms under 8px. This isn't playful—it's precise.

5. **Uniform grids:** Bento layouts should have variety in card sizes. Avoid same-size-everything.

6. **Harsh borders:** Borders should be nearly invisible (`6-10%` white opacity), not prominent.

7. **Colorful accent overuse:** The accent color is for highlights and interaction, not decoration. Most of the UI is monochromatic.

8. **Bouncy animations:** Use expo-out easing, not spring physics. Movements should be swift and decisive.

9. **Missing glow effects:** Accent buttons without glow look incomplete. The soft light emission is part of the language.

---

## Animation & Motion

**Timing:**
- Quick interactions: `200ms`
- Standard transitions: `300ms`
- Entrance animations: `600ms`
- Background blob float: `8000-10000ms`

**Easing:**
- Primary: `[0.16, 1, 0.3, 1]` (expo-out)
- Hover: `ease-out`

**Entrance Patterns:**
- Fade up: `opacity: 0 → 1`, `y: 24px → 0`
- Scale in: `opacity: 0 → 1`, `scale: 0.95 → 1`
- Stagger children: `0.08s` delay between items

**Scroll-Triggered:**
- Viewport threshold: `15-20%` visibility
- Once: true (don't re-animate on scroll back)

**Parallax (Hero):**
- Opacity: Fades from `1 → 0` over first 50% of scroll
- Scale: Shrinks from `1 → 0.95`
- Y position: Moves down `0 → 100px`

---

## Accessibility Considerations

**Contrast:**
- Primary text (`#EDEDEF` on `#050506`): ~15:1 ratio ✓
- Muted text (`#8A8F98` on `#050506`): ~6:1 ratio ✓
- Accent on dark: Ensure 4.5:1 minimum for interactive elements

**Focus States:**
- Always visible focus rings using accent color
- `ring-offset` matches background color

**Motion:**
- Respect `prefers-reduced-motion`
- Provide fallbacks for parallax and floating animations
- Essential interactions should work without animation

**Color Independence:**
- Don't rely solely on accent color for meaning
- Use icons, labels, and position to reinforce state

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

CÁCH ÁP DỤNG PHONG CÁCH MODERN-DARK
Bố cục và nhận diện: Inter/Geist, nền near-black phân lớp, viền sáng mảnh và indigo theo nguồn; hero text ở trên workspace rộng 1200 px. Heading 64–88 px, bề mặt không phẳng một màu.

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

**H1:** Từ brief đến bản được duyệt.

**Lời dẫn:** Một workspace mẫu để xem phiên bản thiết kế, phản hồi và những việc còn lại trước bàn giao.

**Hành động chính:** Mở dự án mẫu

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

### 1. Bản cuối cùng đang ở đâu

**Bố cục và hành vi:** Một câu hỏi và preview dự án Mùa Thu; metadata phiên bản, trạng thái và người chịu trách nhiệm.

**Nội dung và đầu ra:** Nút Mở dự án mẫu scroll/focus vào workspace.

### 2. Workspace

**Bố cục và hành vi:** Tabs Brief/Bản dựng/Phản hồi, nội dung cùng dự án; sidebar chỉ gồm ba mục có tác dụng.

**Nội dung và đầu ra:** Brief có mục tiêu, đối tượng và phạm vi; bản dựng có thumbnail; phản hồi có 3 mục cụ thể.

### 3. So hai phiên bản

**Bố cục và hành vi:** Hai ảnh v1/v2 với ba thay đổi có đánh dấu bằng số.

**Nội dung và đầu ra:** Nêu đã tăng tương phản, rút headline và chuyển CTA; không dùng hai ảnh giống nhau.

### 4. Xử lý phản hồi

**Bố cục và hành vi:** Chọn phản hồi hiển thị vị trí liên quan; đánh dấu đã xử lý cập nhật tiến độ.

**Nội dung và đầu ra:** Trạng thái mẫu thay đổi tại chỗ, không giả cộng tác realtime.

### 5. Bàn giao

**Bố cục và hành vi:** Checklist nội dung/ảnh/mobile và một bản tổng kết.

**Nội dung và đầu ra:** Nút Xem bản tổng kết chỉ xuất nội dung dữ liệu mẫu; không upload hoặc gửi khách.

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

Giữ selectedTab khi đổi version. Phản hồi đã xử lý vẫn đọc được và hoàn tác được; tiến độ đếm thật trên ba mục. Empty ở bộ lọc Đang mở không xóa cả panel.

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

Ở 768 px sidebar thành tabbar, 390 px compare từng phiên bản có label rõ và nút chuyển. Không scale workspace xuống bé; H1 38–44 px, UI body 16 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

Focus glow 200 ms, mở panel 240 ms ease-out, dịch chuyển tối đa 6 px. Hero scale khi scroll chỉ trang trí; reduced-motion giữ chiều sâu bằng màu/viền.

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:** Screenshot từ demo tương tác, thumbnail dự án; không panel rỗng và số liệu giả làm trang trí.

**Cover:** Một lát cắt workspace đủ lớn: ảnh dự án + panel phản hồi; ánh sáng indigo ở nền, không phủ chữ.

**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. Đổi phiên bản không mất phản hồi đã đánh dấu.
2. Tab keyboard có selected state đúng.
3. Bề mặt phân cấp vẫn nhận ra khi tắt animation.

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.