Frontend Design Formulas (2026)
Purpose: Provide production-ready, trend-setting UI patterns for 2026 web applications.
Tech Stack: React 19+, Tailwind CSS v4, CSS Modules (optional), Shadcn/ui.
🎨 1. Aesthetic Formulas (Giao diện)
Formula A: Liquid Glass (Kính Lỏng)
Use for: Modals, Cards, Sticky Headers.
- Core:
backdrop-filter: blur(16px) saturate(180%)
- Surface:
bg-white/10 (Light) or bg-black/20 (Dark)
- Border:
border border-white/20 (Thin, subtle)
- Shadow:
shadow-[0_8px_32px_0_rgba(31,38,135,0.37)] (Soft colored shadow)
- Noise: Add a subtle noise texture overlay
opacity-5.
Formula B: Neo-Brutalism 2.0 (Thô mộc Hiện đại)
Use for: SaaS Dashboards, Developer Tools, Linear-style apps.
- Contrast: High (Black & White base + 1 Neon Accent).
- Border:
border-2 border-slate-900 (Sharp, bold).
- Shadow:
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] (Hard offset shadow).
- Typography: Inter (Tight tracking) or Space Mono.
- Radius:
rounded-md or rounded-none (No pills).
Formula C: Eco-Dark Mode (Tiết kiệm năng lượng)
Use for: Mobile Apps, Constantly-on screens.
- Bg Base:
#000000 (Pure Black for OLED) or #050505.
- Primary Text:
text-slate-200 (Avoid pure white #FFF -> Eye strain).
- Accent: Use OKLCH colors for vibrancy without heavy brightness.
📐 2. Layout Formulas (Bố cục)
Formula D: Bento Grid (Hộp Cơm)
Use for: Feature Showcases, Analytics, Portfolio.
- CSS Grid:
grid-cols-1 md:grid-cols-3 gap-4.
- Spans: Use
col-span-2 or row-span-2 to create hierarchy.
- Content: Visual-heavy (Image/Chart) + Minimal Text.
- Hover: Subtle scale
hover:scale-[1.02] + Border glow.
Formula E: Container Queries (Card thông minh)
Use for: Reusable Components in unknown layouts.
- Parent:
container-type: inline-size.
- Child CSS:
@container (min-width: 400px) { ... }.
- Benefit: Component adapts to slot size, not screen size.
✨ 3. Interaction Formulas (Tương tác)
Formula F: Scroll-Driven Animation
Use for: Landing Pages, Storytelling.
- Tech: Native CSS
animation-timeline: scroll().
- Effect: Elements fade in, slide up, or scale based on scroll position.
- Perf: Runs on Compositor Thread (No JS Jank).
Formula G: Spring Physics (Vật lý)
Use for: Popovers, Drawers, Toggles.
- Feel: Bouncy, snappy, organic.
- Libraries:
framer-motion (presets like type: "spring", stiffness: 300, damping: 20).
- CSS Alternative:
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275).
📜 Agent Instructions for Usage
- Identify Context: Choose Formula based on User Request (e.g., "Modern Dashboard" -> Neo-Brutalism + Bento).
- Apply Tokens: Use Tailwind classes listed in formulas.
- Code Snippets: Check
formulas/ directory for ready-to-use React components. Do NOT reinvent wheels.
Example Request:
"Make a modern landing page for my AI tool."
Agent Action:
Apply Formula A (Liquid Glass) for Header, Formula D (Bento Grid) for Features, and Formula F for animations.
1---2name: frontend-trends-20263description: Collection of 2026 Frontend Design Formulas (Liquid Glass, Bento, Neo-Brutalism, Eco-Dark).4---5
6# Frontend Design Formulas (2026)
7
8> **Purpose**: Provide production-ready, trend-setting UI patterns for 2026 web applications.
9> **Tech Stack**: React 19+, Tailwind CSS v4, CSS Modules (optional), Shadcn/ui.
10
11## 🎨 1. Aesthetic Formulas (Giao diện)
12
13### Formula A: Liquid Glass (Kính Lỏng)
14*Use for: Modals, Cards, Sticky Headers.*
15- **Core**: `backdrop-filter: blur(16px) saturate(180%)`
16- **Surface**: `bg-white/10` (Light) or `bg-black/20` (Dark)
17- **Border**: `border border-white/20` (Thin, subtle)
18- **Shadow**: `shadow-[0_8px_32px_0_rgba(31,38,135,0.37)]` (Soft colored shadow)
19- **Noise**: Add a subtle noise texture overlay `opacity-5`.
20
21### Formula B: Neo-Brutalism 2.0 (Thô mộc Hiện đại)
22*Use for: SaaS Dashboards, Developer Tools, Linear-style apps.*
23- **Contrast**: High (Black & White base + 1 Neon Accent).
24- **Border**: `border-2 border-slate-900` (Sharp, bold).
25- **Shadow**: `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]` (Hard offset shadow).
26- **Typography**: Inter (Tight tracking) or Space Mono.
27- **Radius**: `rounded-md` or `rounded-none` (No pills).
28
29### Formula C: Eco-Dark Mode (Tiết kiệm năng lượng)
30*Use for: Mobile Apps, Constantly-on screens.*
31- **Bg Base**: `#000000` (Pure Black for OLED) or `#050505`.
32- **Primary Text**: `text-slate-200` (Avoid pure white `#FFF` -> Eye strain).
33- **Accent**: Use OKLCH colors for vibrancy without heavy brightness.
34
35## 📐 2. Layout Formulas (Bố cục)
36
37### Formula D: Bento Grid (Hộp Cơm)
38*Use for: Feature Showcases, Analytics, Portfolio.*
39- **CSS Grid**: `grid-cols-1 md:grid-cols-3 gap-4`.
40- **Spans**: Use `col-span-2` or `row-span-2` to create hierarchy.
41- **Content**: Visual-heavy (Image/Chart) + Minimal Text.
42- **Hover**: Subtle scale `hover:scale-[1.02]` + Border glow.
43
44### Formula E: Container Queries (Card thông minh)
45*Use for: Reusable Components in unknown layouts.*
46- **Parent**: `container-type: inline-size`.
47- **Child CSS**: `@container (min-width: 400px) { ... }`.
48- **Benefit**: Component adapts to *slot* size, not screen size.
49
50## ✨ 3. Interaction Formulas (Tương tác)
51
52### Formula F: Scroll-Driven Animation
53*Use for: Landing Pages, Storytelling.*
54- **Tech**: Native CSS `animation-timeline: scroll()`.
55- **Effect**: Elements fade in, slide up, or scale based on scroll position.
56- **Perf**: Runs on Compositor Thread (No JS Jank).
57
58### Formula G: Spring Physics (Vật lý)
59*Use for: Popovers, Drawers, Toggles.*
60- **Feel**: Bouncy, snappy, organic.
61- **Libraries**: `framer-motion` (presets like `type: "spring", stiffness: 300, damping: 20`).
62- **CSS Alternative**: `transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)`.
63
64## 📜 Agent Instructions for Usage
65
661. **Identify Context**: Choose Formula based on User Request (e.g., "Modern Dashboard" -> Neo-Brutalism + Bento).
672. **Apply Tokens**: Use Tailwind classes listed in formulas.
683. **Code Snippets**: Check `formulas/` directory for ready-to-use React components. Do NOT reinvent wheels.
69
70---
71
72**Example Request:**
73> "Make a modern landing page for my AI tool."
74**Agent Action:**
75> Apply **Formula A (Liquid Glass)** for Header, **Formula D (Bento Grid)** for Features, and **Formula F** for animations.
Dokhacgiakhoa