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

# Minimal Dark (`minimal-dark`)

Ba tầng nền tối, điểm nhấn hổ phách

- Hợp với: Hợp khi đang dùng AI để dựng website cho tiện ích cá nhân cần giao diện tĩnh, ít nhiễu và trạng thái thật rõ.
- Ngành minh hoạ: Ứng dụng, công cụ cá nhân
- Trang minh hoạ làm việc gì: Công cụ tập trung một việc với đồng hồ và lịch sử phiên
- Thang (1–10): biến tấu bố cục 4 · chuyển động 3 · mật độ 3
- Xem mẫu: https://tocbien.cloud/phong-cach/minimal-dark/

## Đặc tả

Ba tầng nền slate tối, hổ phách #F59E0B; Space Grotesk, Inter, JetBrains Mono. Hero giữa trang, quầng sáng mờ, nhãn nhỏ, trình chọn không gian âm thanh minh hoạ, các hàng giản dị, đường nhấn mảnh 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: Minimalist Dark

## Design Philosophy

### Core Principle

**Atmospheric Depth.** Minimalist Dark creates visual interest not through color saturation or complex patterns, but through carefully orchestrated layers of darkness. Multiple shades of slate and charcoal stack upon each other, with warm amber accents that glow like embers in the night. The design breathes—generous whitespace (or rather, "darkspace") gives every element room to exist.

### Visual Vibe

**Emotional Keywords**: Atmospheric, Sophisticated, Calm, Premium, Nocturnal, Refined, Spacious, Warm-cool contrast, Ethereal, Grounded

This is the visual language of:
- Premium dark mode applications (Linear, Raycast, Arc)
- High-end developer tools (Vercel, Railway)
- Luxury tech products at night
- A beautifully designed app you'd use at 2am
- The quiet confidence of well-crafted software

The design feels like working in a perfectly lit room at night—everything is visible, nothing strains the eyes, and there's a sense of calm focus.

### What This Design Is NOT

- ❌ Pure black (uses rich slate tones instead)
- ❌ Harsh or high contrast
- ❌ Colorful or vibrant
- ❌ Cold or sterile
- ❌ Flat or shadowless
- ❌ Similar to Minimalist Modern (no blue gradients, no rounded-lg everywhere)
- ❌ Similar to Minimalist Monochrome (has color accent, softer edges, not editorial)

### The DNA of Minimalist Dark

#### 1. Layered Slate Palette
Not pure black—rich slate tones (#0A0A0F as the deepest, #12121A as card backgrounds, #1A1A24 as elevated surfaces). Each layer is subtly different, creating depth through darkness itself.

#### 2. Warm Amber Accent
A single warm accent color (#F59E0B / amber-500) creates beautiful contrast against cool dark tones. Used sparingly for interactive elements, highlights, and focal points. The warmth prevents the design from feeling cold.

#### 3. Ambient Glow Effects
Soft, blurred glows behind key elements create atmospheric depth. Not harsh drop shadows—think ambient light bleeding through darkness. Applied to buttons on hover (0_0_20px with 0.4 opacity), hero badges, testimonial accent lines, and decorative orbs. The glows are subtle but critical to the atmospheric quality—they create that "light in the darkness" feeling.

#### 4. Glass-Effect Cards
Cards use semi-transparent backgrounds with subtle backdrop blur. Border opacity is low (10-15%). This creates a layered, floating effect without harsh edges.

#### 5. Geometric Sans Typography
Space Grotesk for display, Inter for body. Clean, geometric letterforms that feel modern and technical. Strong hierarchy through size and weight, not color variation.

#### 6. Generous Breathing Room
Extremely spacious layouts. Large section padding. Content doesn't crowd—it floats in space. This breathing room is essential to the premium feel.

#### 7. Subtle Borders
Borders exist but are very subtle—usually 1px at 10-20% opacity. They define edges without drawing attention. No thick, heavy borders.

### Differentiation from Other Minimalist Styles

| Aspect | Minimalist Modern | Minimalist Monochrome | Minimalist Dark |
|--------|-------------------|----------------------|-----------------|
| Mode | Light | Light | **Dark** |
| Background | Off-white | Pure white | Deep slate (#0A0A0F) |
| Accent | Blue gradients | None (black only) | Warm amber (#F59E0B) |
| Typography | Sans + Display serif | Serif throughout | Geometric sans |
| Corners | Rounded (lg, xl) | Sharp (0px) | Soft rounded (md, lg) |
| Depth | Shadows + glows | Flat, no shadows | Ambient glows + glass |
| Feel | Energetic, contemporary | Editorial, austere | Atmospheric, calm |
| Borders | Subtle | Heavy black lines | Very subtle, low opacity |

---

## Design Token System

### Colors (Dark Slate + Amber)

```
background:       #0A0A0F (Deep slate - almost black but warmer)
backgroundAlt:    #12121A (Slightly elevated surfaces)
foreground:       #FAFAFA (Near-white text)
muted:            #1A1A24 (Card backgrounds, elevated surfaces)
mutedForeground:  #71717A (Secondary text - zinc-500)
accent:           #F59E0B (Amber-500 - warm, glowing)
accentForeground: #0A0A0F (Dark text on amber)
accentMuted:      rgba(245, 158, 11, 0.15) (Amber glow backgrounds)
border:           rgba(255, 255, 255, 0.08) (Very subtle borders)
borderHover:      rgba(255, 255, 255, 0.15) (Borders on hover)
card:             rgba(26, 26, 36, 0.6) (Semi-transparent cards)
cardSolid:        #1A1A24 (Solid card background)
ring:             #F59E0B (Focus ring)
```

### Typography

**Font Stack**:
- **Display/Headlines**: `"Space Grotesk", system-ui, sans-serif` - Geometric, technical, distinctive
- **Body**: `"Inter", system-ui, sans-serif` - Clean, highly readable
- **Mono**: `"JetBrains Mono", monospace` - For code, labels, metadata

**Type Scale**:
```
xs:   0.75rem   (12px)
sm:   0.875rem  (14px)
base: 1rem     (16px)
lg:   1.125rem (18px)
xl:   1.25rem  (20px)
2xl:  1.5rem   (24px)
3xl:  2rem     (32px)
4xl:  2.5rem   (40px)
5xl:  3.5rem   (56px)
6xl:  4.5rem   (72px)
7xl:  6rem     (96px)
```

**Tracking**:
- Headlines: `tracking-tight` (-0.025em)
- Body: `tracking-normal` (0)
- Labels/Mono: `tracking-wide` (0.025em)

### Border Radius

```
sm:   0.375rem (6px)
md:   0.5rem   (8px) - Default for most elements
lg:   0.75rem  (12px) - Cards, larger containers
xl:   1rem     (16px) - Hero elements, large cards
2xl:  1.5rem   (24px) - Special decorative elements
full: 9999px   - Pills, avatars
```

Softer than sharp corners, but not as dramatically rounded as Modern.

### Shadows & Glows

```
// Subtle elevation shadows
sm:   0 1px 2px rgba(0, 0, 0, 0.3)
md:   0 4px 6px rgba(0, 0, 0, 0.3)
lg:   0 10px 15px rgba(0, 0, 0, 0.3)
xl:   0 20px 25px rgba(0, 0, 0, 0.4)

// Ambient glows (the signature effect)
glowSm:   0 0 20px rgba(245, 158, 11, 0.15)
glowMd:   0 0 40px rgba(245, 158, 11, 0.2)
glowLg:   0 0 60px rgba(245, 158, 11, 0.25)

// Border glow for highlighted elements
borderGlow: 0 0 0 1px rgba(245, 158, 11, 0.3), 0 0 20px rgba(245, 158, 11, 0.15)
```

### Textures & Patterns

**Subtle Noise Overlay** (very low opacity):
```css
background-image: url("data:image/svg+xml,...noise...");
opacity: 0.02;
```

**Radial Gradient Ambience** (for section backgrounds):
```css
background: radial-gradient(ellipse at top, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
```

**Subtle Grid** (optional, for specific sections):
```css
background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 40px 40px;
```

---

## Component Stylings

### Buttons

**Primary Button**:
```
- Background: #F59E0B (amber)
- Text: #0A0A0F (dark)
- Border: none
- Radius: rounded-lg (12px)
- Padding: px-6 py-3 (h-11 for default size)
- Font: font-medium, no uppercase
- Hover: brightness-110, shadow-[0_0_20px_rgba(245,158,11,0.4)]
- Active: scale-[0.98] (subtle press effect)
- Focus-visible: ring-2 ring-[var(--accent)] ring-offset-2
- Transition: all 200ms ease-out
```

**Secondary/Outline Button**:
```
- Background: transparent
- Text: #FAFAFA
- Border: 1px solid rgba(255,255,255,0.15)
- Hover: bg-white/5, border-white/25
- Active: scale-[0.98]
- Focus-visible: Same as primary
```

**Ghost Button**:
```
- Background: transparent
- Text: #FAFAFA
- Border: none
- Hover: bg-white/5
- Active: scale-[0.98]
- Focus-visible: Same as primary
```

### Cards (Glass Effect)

**Standard Card**:
```css
background: rgba(26, 26, 36, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: all 300ms ease-out;
```

**Hover State** (when interactive):
```css
border-color: rgba(255, 255, 255, 0.15);
background: rgba(26, 26, 36, 0.8);
transform: scale(1.02);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
```

**Highlighted Card** (e.g., featured pricing tier):
```css
/* Same as standard plus: */
border: 1px solid rgba(245, 158, 11, 0.2);
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 0 30px rgba(245, 158, 11, 0.15);
/* On desktop, can also use scale(1.05) and translate-y for emphasis */
```

### Inputs

```
- Background: rgba(26, 26, 36, 0.6)
- Backdrop-filter: blur(8px)
- Border: 1px solid rgba(255,255,255,0.08)
- Radius: rounded-lg
- Height: h-11 (44px for proper touch target)
- Text: #FAFAFA
- Placeholder: #71717A
- Focus: border-amber-500/50, ring-2 ring-amber-500/20, shadow-[0_0_20px_rgba(245,158,11,0.1)]
- Transition: all 200ms
```

---

## Layout Strategy

### Container
```
max-width: max-w-6xl (72rem)
padding: px-6 md:px-8 lg:px-12
```

### Section Spacing
```
padding: py-24 md:py-32 lg:py-40
```
Very generous—let the dark space breathe.

### Grid System
- Prefer simple grids: 2-col, 3-col
- Gap: gap-6 or gap-8
- Items don't need to touch—floating in space is fine

---

## Effects & Animation

**Motion Philosophy**: Smooth and subtle with delightful micro-interactions

- **Transitions**: 200-300ms, ease-out (cards use 300ms for smoother feel)
- **Hover effects**:
  - Cards: Subtle scale (scale-[1.02]), border brightening, glow increase
  - Buttons: Glow increase (shadow intensity up to 0.4), brightness boost
  - Links: Color shift to accent on focus-visible
- **Active states**: Buttons have subtle press effect (scale-[0.98])
- **Animations**:
  - Hero badge pulse dot (animate-pulse with glow)
  - FAQ accordion smooth height transition (max-h with opacity fade)
- **No**: Bouncy animations, dramatic transforms
- **Yes**: Gentle fades, soft glows, smooth state changes, subtle scales

```css
/* Cards */
transition: all 300ms ease-out;

/* Buttons & Quick Interactions */
transition: all 200ms ease-out;
```

**Ambient Orbs** (decorative background elements):
- Large blurred circles with amber glow
- Very low opacity (0.02-0.04)
- Positioned strategically (top center, bottom right as fixed backgrounds)
- Blur values: 100px-150px for soft, diffused light
- Responsive: Smaller dimensions on mobile for performance (h-[400px] on mobile vs h-[600px] on desktop)

---

## Iconography

**Style**: Clean, thin strokes

```tsx
<Icon size={20} strokeWidth={1.5} className="text-zinc-400" />
// Active/accent state:
<Icon size={20} strokeWidth={1.5} className="text-amber-500" />
```

Icons should be subtle, not attention-grabbing. They support content, not dominate it.

---

## Responsive Strategy

**Mobile Adaptations**:
- Maintain dark palette and warm accent - no compromises on aesthetic
- Scale typography smoothly: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl`
- Stack columns vertically (`lg:grid-cols-2` for two-column layouts)
- Reduce ambient glow orb sizes for performance (but keep them!)
- Generous vertical spacing maintained (`py-24 md:py-32 lg:py-40`)
- Touch targets: minimum 44px height (buttons use h-11 or h-12)
- Navigation hidden on mobile (`hidden md:flex`), hamburger menu implied
- All hover states also work as active states on touch devices
- Glass effects maintained (backdrop-blur is performant on modern mobile)

**Key Principle**: The atmospheric quality must survive on mobile. This isn't a "mobile-simplified" version—it's the same premium experience, just adapted to screen size.

---

## Accessibility

**Contrast**:
- Primary text (#FAFAFA) on background (#0A0A0F): 18.4:1 ratio (exceeds AAA)
- Muted text (#71717A) on background: 4.9:1 ratio (meets AA)
- Amber accent readable on both dark and light contexts

**Focus States**:
All interactive elements have clear, accessible focus states using `focus-visible`:

**Buttons**:
```css
focus-visible:outline-none
focus-visible:ring-2
focus-visible:ring-[var(--accent)]
focus-visible:ring-offset-2
focus-visible:ring-offset-[var(--background)]
```

**Links** (nav, footer, etc.):
```css
focus-visible:text-[var(--accent)]
focus-visible:outline-none
```

**Inputs**:
```css
focus:border-[var(--accent)]/50
focus:outline-none
focus:ring-2
focus:ring-[var(--accent)]/20
```

The amber accent color is used consistently for all focus indicators, maintaining brand coherence while ensuring visibility.

---

## Bold Choices (Non-Negotiable)

1. **Layered darkness**: At least 3 distinct dark tones visible (#0A0A0F → #12121A → #1A1A24)
2. **Warm amber accent**: No cold blues—#F59E0B amber creates the signature warmth
3. **Ambient glow effects**:
   - Hero badge: subtle glow + pulsing dot
   - Buttons on hover: 0_0_20px glow at 0.4 opacity
   - Testimonial accent lines: soft glow
   - Background ambient orbs: massive blur (100-150px)
4. **Glass-effect cards**: Semi-transparent (0.6 opacity) with backdrop blur (8px)
5. **Generous spacing**: py-24 md:py-32 lg:py-40 sections feel spacious, not cramped
6. **Subtle borders**: rgba(255,255,255,0.08) - just 8% opacity, never harsh
7. **Geometric typography**: Space Grotesk for headlines, Inter for body, JetBrains Mono for labels
8. **Atmospheric background**: Fixed ambient orbs + subtle noise texture (0.015 opacity)
9. **Micro-interactions**:
   - Cards scale up on hover (1.02)
   - Buttons scale down on active (0.98)
   - Smooth FAQ accordion with height + opacity transitions
   - All focus states use amber accent

---

## What Success Looks Like

A successfully implemented Minimalist Dark design should feel like:
- Using Linear or Raycast at night
- A premium developer tool's marketing site
- Software designed for focus and calm
- Warm light glowing in a dark room

It should NOT feel like:
- A generic dark theme with colors inverted
- Harsh or high-contrast
- Cold or unwelcoming
- A copy of Minimalist Modern with dark colors
- Just "dark mode"—it should have its own personality

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

CÁCH ÁP DỤNG PHONG CÁCH MINIMAL-DARK
Bố cục và nhận diện: Không landing dài: vùng làm việc gọn đặt giữa không gian tối. Space Grotesk/Inter/JetBrains Mono từ nguồn; amber là điểm nhấn; max-width 960 px, điều khiển 560 px, H1 48–64 px.

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

**H1:** Một việc. Một khoảng tập trung.

**Lời dẫn:** Chọn việc cần làm, đặt thời lượng và bắt đầu. Mọi thay đổi chỉ lưu trong phiên thử.

**Hành động chính:** Bắt đầu phiên tập trung

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

### 1. Chọn việc

**Bố cục và hành vi:** Input tên việc với nhãn thật và ví dụ Viết bản giới thiệu dự án; không icon trang trí dư.

**Nội dung và đầu ra:** Headline ngắn phía trên, việc cụ thể ngay dưới.

### 2. Thời lượng

**Bố cục và hành vi:** Ba lựa chọn 15/25/45 phút và lựa chọn tự nhập trong giới hạn demo.

**Nội dung và đầu ra:** Hiện rõ phút; giá trị sai có lỗi, không dùng slider không thấy số.

### 3. Phiên đang chạy

**Bố cục và hành vi:** Timer tabular lớn, tên công việc vẫn hiện; một nút chính thay đổi Bắt đầu/Tạm dừng/Tiếp tục.

**Nội dung và đầu ra:** Reset là hành động phụ, hỏi lại chỉ khi mất tiến độ đang chạy.

### 4. Kết thúc phiên

**Bố cục và hành vi:** Hiện Đã hết thời gian và ghi chú ngắn Bạn đã làm được gì.

**Nội dung và đầu ra:** Không tự tuyên bố năng suất tăng hoặc tự phát âm thanh.

### 5. Lịch phiên thử

**Bố cục và hành vi:** Danh sách tối đa ba phiên trong bộ nhớ, có xóa dữ liệu thử.

**Nội dung và đầu ra:** Không thêm chart và streak làm mất sự yên tĩnh của style.

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

idle→running↔paused→finished; tính thời gian bằng mốc thời gian chứ không trừ một giây theo số lần render. Reset không tạo phiên hoàn thành; rời trang có thể mất dữ liệu được nói rõ.

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

390 px giữ một cột, nút chính full-width; timer 64–80 px; input không bị bàn phím che nút. Màn thấp cho phép cuộn tự nhiên, không khóa chiều cao viewport.

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

Chuyển trạng thái opacity 160 ms; ambient glow rất nhẹ 12 s nếu giữ, có reduced-motion. Không số nhảy gây layout shift nhờ tabular-nums.

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:** Không bắt buộc ảnh; dùng trạng thái timer thật, sóng âm chỉ khi có tài sản âm thanh hợp lệ.

**Cover:** Timer và tên việc làm điểm nhìn; amber chỉ ở nút/trạng thái. Không thêm ảnh người làm việc để lấp khoảng tối.

**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. Pause 5 giây rồi tiếp tục không mất thêm thời gian.
2. Reset giữa phiên không tăng số hoàn thành.
3. Timer vẫn đúng sau đổi tab trình duyệt.

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.