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

# Enterprise (`enterprise`)

Bề mặt sáng, tím chàm và bảng công việc

- Hợp với: Hợp khi đang dùng AI để dựng website cho phần mềm doanh nghiệp cần làm rõ vai trò, trạng thái và lịch sử xử lý.
- Ngành minh hoạ: Nhóm làm việc, phần mềm doanh nghiệp
- Trang minh hoạ làm việc gì: Không gian duyệt yêu cầu nội dung cho một nhóm làm việc
- Thang (1–10): biến tấu bố cục 5 · chuyển động 4 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/enterprise/

## Đặc tả

Nền slate sáng, chữ slate đậm, indigo/violet; Plus Jakarta Sans. Hero có bảng công việc nghiêng phối cảnh, tiêu đề chuyển sắc, số liệu có nhãn minh hoạ, các phần xen kẽ, ba lựa chọn và CTA nền tím đậm.

**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: Corporate Trust

## 1. Design Philosophy
This style embodies the **modern enterprise SaaS aesthetic** — professional yet approachable, sophisticated yet friendly. It draws inspiration from tech unicorns and high-growth startups that have successfully humanized the corporate experience. The design rejects the cold, sterile formality of traditional corporate websites in favor of a warm, confident, and inviting presence.

**Core Principles:**
- **Trustworthy Yet Vibrant**: Establishes credibility through clean structure and professional typography while maintaining visual energy through vibrant gradients and colorful accents
- **Dimensional Depth**: Uses isometric perspectives, soft colored shadows, and subtle 3D transforms to create visual interest and break free from flat design
- **Refined Elegance**: Every element is polished with attention to micro-interactions, smooth transitions, and sophisticated hover states
- **Purposeful Gradients**: Indigo-to-violet gradients serve as the visual signature, used strategically in headlines, buttons, and decorative elements
- **Professional Polish**: Generous white space, consistent spacing rhythms, and crisp typography create a premium, enterprise-ready feel

**Keywords**: Trustworthy, Vibrant, Polished, Dimensional, Modern, Approachable, Enterprise-Ready, Elegant

**Visual DNA**: The unmistakable signature of this style comes from:
1. **Colored Shadows**: Soft shadows with blue/purple tints instead of neutral grays
2. **Isometric Elements**: Subtle 3D transforms (rotate-x, rotate-y) on decorative cards and visualizations
3. **Gradient Text**: Strategic use of gradient text for emphasis in headlines
4. **Soft Blobs**: Large, blurred gradient orbs in the background for atmospheric depth
5. **Elevated Cards**: White cards that lift on hover with enhanced shadows
6. **Dual-Tone Palette**: Indigo (primary) + Violet (secondary) creating a cohesive gradient spectrum

## 2. Design Token System

### Colors (Light Mode)
*   **Background**: `#F8FAFC` (Slate 50) - A very subtle cool grey/white base.
*   **Foreground (Surface)**: `#FFFFFF` (White) - For cards and raised elements.
*   **Primary**: `#4F46E5` (Indigo 600) - The core brand color. Vibrant blue-purple.
*   **Secondary**: `#7C3AED` (Violet 600) - For gradients and accents.
*   **Text Main**: `#0F172A` (Slate 900) - High contrast, sharp.
*   **Text Muted**: `#64748B` (Slate 500) - For supporting text.
*   **Accent/Success**: `#10B981` (Emerald 500) - For positive indicators.
*   **Border**: `#E2E8F0` (Slate 200) - Subtle separation.

### Typography
*   **Font Family**: `Plus Jakarta Sans` — A geometric sans-serif with friendly rounded terminals that perfectly balances professional authority with modern approachability. Its clean letterforms ensure excellent readability while maintaining visual warmth.
*   **Scaling**: Major Third (1.250) scale provides substantial hierarchy without overwhelming the layout
*   **Font Weights**:
    *   **Display/Headings**: ExtraBold (800) for hero headlines, Bold (700) for section headings
    *   **Subheadings**: SemiBold (600) for card titles and emphasis
    *   **Body Text**: Regular (400) for paragraphs, Medium (500) for navigation and labels
*   **Line Heights**:
    *   Headlines: 1.1 (tight tracking for impact)
    *   Body Text: 1.6-1.7 (relaxed for readability)
*   **Letter Spacing**: Tight tracking (-0.02em) on large headlines for modern polish
*   **Responsive Type Scale**:
    *   Mobile: text-2xl to text-4xl for h1
    *   Desktop: text-4xl to text-6xl for h1
    *   Progressive scaling ensures legibility across all devices

### Radius & Border
*   **Radius**: `rounded-xl` (12px) for cards and `rounded-lg` (8px) for inputs. Buttons are `rounded-full` or `rounded-lg`.
*   **Borders**: Thin, 1px borders using the `Border` token.

### Shadows & Effects
This is where the design truly shines. **Colored shadows** replace neutral grays to reinforce the brand palette:

*   **Default Card Shadow**: `0 4px 20px -2px rgba(79, 70, 229, 0.1)` — Soft blue-tinted base elevation
*   **Hover Card Shadow**: `0 10px 25px -5px rgba(79, 70, 229, 0.15), 0 8px 10px -6px rgba(79, 70, 229, 0.1)` — Multi-layer depth on interaction
*   **Button Shadow**: `0 4px 14px 0 rgba(79, 70, 229, 0.3)` — Strong presence for primary CTAs
*   **Glow Effects**: Numbered badges use `shadow-[0_0_20px_rgba(79,70,229,0.5)]` for ethereal glow
*   **Background Blobs**: Large gradient orbs with 3xl blur create atmospheric depth without distraction
    *   `blur-3xl filter` combined with low opacity (20-50%)
    *   Positioned absolutely to create layered depth
*   **Gradients**:
    *   **Primary Gradient**: `from-indigo-600 to-violet-600` — Used for buttons and active states
    *   **Text Gradient**: Combined with `bg-clip-text text-transparent` for striking headlines
    *   **Background Gradients**: Subtle `from-indigo-100 to-violet-100` for container backgrounds
    *   **Final CTA Background**: `from-indigo-900 to-indigo-950` for dramatic dark section

## 3. Component Stylings

### Buttons
*   **Primary**: Gradient background (Indigo to Violet). `rounded-full` or `rounded-lg`. White text. Slight shadow. Transition: Lift (`-translate-y-0.5`) and increase shadow on hover.
*   **Secondary**: White background, Border `E2E8F0`, Text `Slate 700`. Hover: `bg-slate-50` and darker border.

### Cards
*   **Base**: White background, `rounded-xl`, `border border-slate-100`, `shadow-soft`.
*   **Behavior**: On hover, slight lift and increased shadow intensity.
*   **Feature Cards**: May feature an icon in a soft-colored circle (bg-indigo-50 text-indigo-600).

### Inputs
*   **Style**: `bg-white`, `border-slate-200`, `rounded-lg`.
*   **Focus**: `ring-2 ring-indigo-500 ring-offset-1` and `border-indigo-500`.
*   **Label**: `text-sm font-semibold text-slate-700`.

## 4. Non-Generic Bold Choices

The Corporate Trust aesthetic stands out through deliberate, sophisticated design decisions:

### Isometric Depth & 3D Transforms
*   **Hero Card**: `perspective-[2000px]` parent with `rotate-x-[5deg] rotate-y-[-12deg]` child creates subtle isometric effect
*   **Hover Transforms**: `hover:rotate-x-[2deg] hover:rotate-y-[-8deg]` — Subtle 3D movement on interaction
*   **Feature Cards**: Alternating `rotate-y-[6deg]` and `rotate-y-[-6deg]` based on layout position
*   **Benefit Visualization**: `rotate-x-6 rotate-y-12 transform` on gradient container for dramatic depth

### Strategic Gradient Usage
*   **Split Headlines**: First 3 words in standard color, remaining words in gradient for visual hierarchy
*   **Gradient Buttons**: Full background gradient with hover lift (`-translate-y-0.5`)
*   **Badge Elements**: NEW badge with solid indigo background inside gradient-ringed container
*   **Final CTA**: White button on dark gradient background creates dramatic contrast

### Atmospheric Background Elements
*   **Blur Orbs**: Large (400-600px) circular gradients with heavy blur positioned absolutely
*   **Layered Positioning**: Multiple blobs at different z-indexes create depth
*   **Subtle Animation**: `animate-pulse duration-[4000ms]` on floating cards for gentle movement

### Elevated Card System
*   **Default State**: Soft colored shadow with subtle border
*   **Hover State**: Lift effect (`-translate-y-1`) combined with enhanced shadow
*   **Transition**: Smooth `duration-200` for professional polish
*   **Pricing Highlight**: Center card uses `md:scale-105` with special ring styling

### Micro-Interactions
*   **Arrow Icons**: `transition-transform group-hover:translate-x-1` for directional feedback
*   **Image Zoom**: `group-hover:scale-105` on blog images with overlay fade-in
*   **Chevron Rotation**: `group-open:rotate-180` for FAQ accordions
*   **Button Lift**: Subtle upward movement on hover reinforces clickability

## 5. Spacing & Layout
*   **Container**: `max-w-7xl` (1280px) provides spacious, enterprise-appropriate width
*   **Padding**: Responsive padding with `px-4 sm:px-6` pattern for consistent gutters
*   **Vertical Rhythm**:
    *   Mobile: `py-16` (64px)
    *   Tablet: `sm:py-20` (80px)
    *   Desktop: `lg:py-24` (96px)
*   **Section Spacing**: Generous white space between sections creates breathing room
*   **Grid Strategy**:
    *   Hero: Two-column `lg:grid-cols-2` with text-first approach
    *   Features: Alternating zig-zag with `lg:flex-row` and `lg:flex-row-reverse`
    *   Pricing: Three-column `md:grid-cols-3` with center emphasis
    *   Stats: Four-column `md:grid-cols-4` for metric display
*   **Responsive Breakpoints**:
    *   Mobile-first approach with progressive enhancement
    *   sm: 640px, md: 768px, lg: 1024px, xl: 1280px
*   **Text Width Constraints**: `max-w-xl` or `max-w-2xl` on paragraphs to maintain 60-75 character line lengths

## 6. Animation & Transitions
*   **Philosophy**: "Refined Motion" — Smooth, professional, never jarring
*   **Base Transition**: `transition-all duration-200` for general interactive elements
*   **Long Transitions**: `duration-500` for image zooms and complex animations
*   **Hover Effects**:
    *   Cards: Combine `hover:-translate-y-1` with shadow enhancement
    *   Buttons: `hover:-translate-y-0.5` for subtle lift
    *   Icons: `transition-transform group-hover:translate-x-1` for directional cues
*   **Easing**: Default `ease-out` for natural deceleration
*   **Pulse Animation**: `animate-pulse duration-[4000ms]` on decorative floating elements for gentle breathing effect
*   **State Changes**: Smooth color transitions on links and buttons reinforce interactivity

## 7. Iconography
*   **Library**: `lucide-react` for consistent, modern icon system
*   **Style**:
    *   Default stroke width: `2px` (standard)
    *   Size: `h-4 w-4` for inline icons, `h-5 w-5` or `h-6 w-6` for featured icons
    *   Joins: Rounded for friendliness
*   **Color Treatment**:
    *   **Badge Icons**: Icon in `text-indigo-600` on `bg-indigo-100` container
    *   **Navigation Icons**: Inherit text color, transition on hover
    *   **Social Icons**: `text-slate-400 hover:text-indigo-400`
*   **Icon Containers**:
    *   Small badges: `h-12 w-12 rounded-xl` with soft background
    *   Large features: `h-14 w-14 rounded-xl` for prominent sections
    *   Circular: `rounded-full` for avatars or status indicators
*   **Accessibility**: Icons are decorative with proper text alternatives or hidden from screen readers when paired with text

## 8. Responsive Strategy
*   **Mobile-First Philosophy**: Design begins at 375px width, progressively enhances
*   **Touch Targets**: Minimum 44x44px for all interactive elements (buttons, links)
*   **Typography Scaling**:
    *   Headlines reduce from `text-6xl` (desktop) to `text-4xl` (mobile)
    *   Body text maintains readability at `text-base` with responsive line heights
*   **Layout Adaptations**:
    *   Two-column layouts stack to single column on mobile
    *   Navigation collapses to essential items (login hidden on mobile)
    *   Pricing cards stack vertically with equal width
    *   Footer columns stack progressively (4 col → 2 col → 1 col)
*   **Spacing Compression**: Padding and margins reduce proportionally on smaller screens
*   **Image Optimization**: Aspect ratios maintained, sizes adapt to container width
*   **Horizontal Scrolling**: Never required; all content fits viewport width
*   **Visual Hierarchy Preserved**: Even on mobile, clear distinction between heading levels maintained

## 9. Accessibility & Best Practices
*   **Color Contrast**: All text meets WCAG AA standards
    *   Slate 900 on Slate 50 background: AAA compliant
    *   White text on Indigo 900 background: AAA compliant
    *   Link colors tested for 4.5:1 minimum ratio
*   **Focus States**:
    *   Visible ring on all interactive elements: `focus-visible:ring-2 focus-visible:ring-indigo-500`
    *   Ring offset for clarity: `focus-visible:ring-offset-2`
    *   Never remove focus indicators
*   **Semantic HTML**:
    *   Proper heading hierarchy (h1 → h2 → h3)
    *   Native `<button>` elements for interactive actions
    *   `<nav>` for navigation, `<footer>` for footer
    *   Details/summary for FAQ accordions
*   **Image Alt Text**: Descriptive alternatives for all images
*   **Interactive States**:
    *   Hover: Visual feedback on all clickable elements
    *   Active: Subtle state change on click
    *   Disabled: Reduced opacity with `pointer-events-none`
*   **Motion Preferences**: Consider `prefers-reduced-motion` for users sensitive to animation
*   **Screen Reader Support**: Proper ARIA labels where semantic HTML insufficient

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

CÁCH ÁP DỤNG PHONG CÁCH ENTERPRISE
Bố cục và nhận diện: Plus Jakarta Sans, nền slate sáng #F8FAFC, indigo #4F46E5 và các tầng trắng theo brief. Lưới 12 cột, hero 5/7; phối cảnh nhẹ chỉ trên hình giới thiệu, giao diện đang thao tác phải thẳng.

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

**H1:** Một nơi để biết nội dung đang chờ ai.

**Lời dẫn:** Nhịp Work gom yêu cầu, phản hồi và bước duyệt của một chiến dịch vào cùng một hồ sơ.

**Hành động chính:** Thử duyệt một yêu cầu

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

### 1. Giá trị và mẫu thật

**Bố cục và hành vi:** Headline 56–72 px, bên cạnh yêu cầu Chiến dịch mùa thu có ba trạng thái và một người phụ trách.

**Nội dung và đầu ra:** Không dùng 12 KPI để chứng minh sản phẩm; cho người xem mở ngay một yêu cầu.

### 2. Bảng yêu cầu

**Bố cục và hành vi:** Toolbar có search và lọc Chờ duyệt/Đang sửa/Đã duyệt; mỗi hàng hiện tên, phụ trách, hạn và trạng thái.

**Nội dung và đầu ra:** Sáu bản ghi hư cấu nhất quán; đếm trạng thái tính từ dataset thay hardcode.

### 3. Chi tiết và phản hồi

**Bố cục và hành vi:** Bảng trái 7 cột, panel chi tiết phải 5 cột; timeline phản hồi trong cùng hồ sơ.

**Nội dung và đầu ra:** Bản Banner mùa thu đang chờ duyệt có một lỗi thiếu ngày; demo cho chọn Duyệt hoặc Yêu cầu sửa và ghi chú.

### 4. Vai trò trong nhóm

**Bố cục và hành vi:** Ma trận đọc/nhận xét/duyệt theo ba vai trò, không bảng giá.

**Nội dung và đầu ra:** Đây là mô tả mô hình quyền mẫu, không giả vờ thiết lập quyền tài khoản thật.

### 5. Lịch sử xử lý

**Bố cục và hành vi:** Sau thao tác, dòng lịch sử thêm hành động có nhãn Trong phiên thử.

**Nội dung và đầu ra:** CTA Đặt lại bản mẫu đưa dataset về ban đầu; giải thích đầu ra của tác vụ.

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

selectedRequest, filter, query và history tách biệt. Yêu cầu sửa cần lý do; không cho trạng thái đã duyệt bị duyệt lần hai; empty search có nút xóa lọc.

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 panel xuống dưới; 390 px list→detail có nút Trở về danh sách và giữ bộ lọc. Trạng thái phải bằng chữ, badge đủ tương phản; không thu bảng desktop thành ảnh.

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

Panel mở 200 ms ease-out, hàng đổi trạng thái 180 ms highlight rồi ổn định. Không cho card rung/nhảy trong dữ liệu nghiệp vụ.

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:** Một bộ dữ liệu chiến dịch mẫu nhất quán; ảnh chụp từ chính demo hoạt động.

**Cover:** Một yêu cầu lớn và ba bước duyệt, màu indigo, typography rõ; chỉ dùng góc phối cảnh khi vẫn đọc được trạng thái chí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. Lọc Chờ duyệt sau khi duyệt làm bản ghi rời bộ lọc và cập nhật số đếm.
2. Trở về list giữ query.
3. Ghi chú trống không tạo lịch sử giả.

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.