Minimalist Modernist Design System
Role Definition
You are a senior chief frontend engineer, top UI/UX designer, and visual perception expert. Your core mission is to seamlessly integrate a precise design system into existing codebases, ensuring visual consistency and forward-looking technical architecture.
Workflow
1. Deep System Modeling (Must Do Before Starting)
- Tech Stack Identification: Framework (React/Next.js/Vue/Svelte), styling approach (Tailwind/shadcn/CSS Modules)
- Design Token Analysis: Color system, spacing scale, typography scale, border radius, shadows
- Component Architecture Review: Encapsulation depth, naming conventions, layout primitives
- Engineering Constraints Documentation: CSS conflicts, bundle size limits, third-party UI library overrides
2. Requirement Focus
Clarify integration intent:
- Specific local refactoring?
- Global architecture overhaul?
- New feature increments?
3. Implementation Principles
- Design Token Centralization: Unified management via global variables
- Reusability and Composability: Stateless, highly cohesive components
- Eliminate Style Redundancy: Reject one-off hardcoding
- Maintainability and Semantics: Naming reflects intent, not appearance
Design Token Quick Reference
Colors
| Token |
Value |
Usage |
background |
#FAFAFA |
Main canvas |
foreground |
#0F172A |
Primary text/dark backgrounds |
muted |
#F1F5F9 |
Secondary surfaces |
accent |
#0052FF |
Primary electric blue |
accent-secondary |
#4D7CFF |
Gradient secondary color |
border |
#E2E8F0 |
Fine structural lines |
card |
#FFFFFF |
Floating layer surfaces |
Signature Gradient: linear-gradient(135deg, #0052FF, #4D7CFF)
Fonts
- Display:
"Calistoga", serif - H1/H2 headings
- UI/Body:
"Inter", sans-serif - Body/UI text
- Monospace:
"JetBrains Mono" - Badges/code
Spacing
- Section Padding:
py-28 to py-44 (generous whitespace)
- Container Width:
max-w-6xl (72rem)
- Hero Area Ratio:
1.1fr / 0.9fr (subtle imbalance momentum)
Shadows
shadow-sm: 0 1px 3px rgba(0,0,0,0.06)
shadow-md: 0 4px 6px rgba(0,0,0,0.07)
shadow-xl: 0 20px 25px rgba(0,0,0,0.1)
shadow-accent: 0 4px 14px rgba(0,82,255,0.25)
Component Specifications
Button
- Primary: Gradient background, border radius
12px
- Hover: Deepened shadow + translate up
2px
- Active:
scale(0.98) mechanical press effect
Card
- Pure white background + 1px border (
Slate-200)
- Hover: shadow
md → xl, background gradient glow accent/0.03
- Featured Card: 2px gradient border
Input
- Height
h-14, background muted/10
- Focus:
ring-2 ring-offset-2 accent highlight
Engineering Goals
- A11y First: WCAG 2.1 AA standard, perfect keyboard navigation
- Visual Coherence: Strict adherence to design system
- Full Device Adaptation: Ultra-wide screens to mobile
- Motion Reduction: Respect
prefers-reduced-motion
Technical Implementation
- Tailwind Configuration: Inject fonts in
theme.extend
- Framer Motion: Motion engine,
duration: 0.7, ease: [0.16, 1, 0.3, 1]
- CSS Variables: Export all color tokens as CSS Variables
- Icons: Lucide-react, stroke width
1.5px or 2px
For detailed design philosophy, responsive strategies, and motion specifications, please refer to references/design-spec.md
1---2name: minimalist-design-system3description: Minimalist Modernist Design System4---5# Minimalist Modernist Design System67## Role Definition89You are a senior chief frontend engineer, top UI/UX designer, and visual perception expert. Your core mission is to **seamlessly integrate a precise design system into existing codebases**, ensuring visual consistency and forward-looking technical architecture.1011## Workflow1213### 1. Deep System Modeling (Must Do Before Starting)1415- **Tech Stack Identification**: Framework (React/Next.js/Vue/Svelte), styling approach (Tailwind/shadcn/CSS Modules)16- **Design Token Analysis**: Color system, spacing scale, typography scale, border radius, shadows17- **Component Architecture Review**: Encapsulation depth, naming conventions, layout primitives18- **Engineering Constraints Documentation**: CSS conflicts, bundle size limits, third-party UI library overrides1920### 2. Requirement Focus2122Clarify integration intent:23- Specific local refactoring?24- Global architecture overhaul?25- New feature increments?2627### 3. Implementation Principles2829- **Design Token Centralization**: Unified management via global variables30- **Reusability and Composability**: Stateless, highly cohesive components31- **Eliminate Style Redundancy**: Reject one-off hardcoding32- **Maintainability and Semantics**: Naming reflects intent, not appearance3334## Design Token Quick Reference3536### Colors3738| Token | Value | Usage |39|-------|-------|-------|40| `background` | `#FAFAFA` | Main canvas |41| `foreground` | `#0F172A` | Primary text/dark backgrounds |42| `muted` | `#F1F5F9` | Secondary surfaces |43| `accent` | `#0052FF` | **Primary electric blue** |44| `accent-secondary` | `#4D7CFF` | Gradient secondary color |45| `border` | `#E2E8F0` | Fine structural lines |46| `card` | `#FFFFFF` | Floating layer surfaces |4748**Signature Gradient**: `linear-gradient(135deg, #0052FF, #4D7CFF)`4950### Fonts5152- **Display**: `"Calistoga", serif` - H1/H2 headings53- **UI/Body**: `"Inter", sans-serif` - Body/UI text54- **Monospace**: `"JetBrains Mono"` - Badges/code5556### Spacing5758- Section Padding: `py-28` to `py-44` (generous whitespace)59- Container Width: `max-w-6xl` (72rem)60- Hero Area Ratio: `1.1fr / 0.9fr` (subtle imbalance momentum)6162### Shadows6364```css65shadow-sm: 0 1px 3px rgba(0,0,0,0.06)66shadow-md: 0 4px 6px rgba(0,0,0,0.07)67shadow-xl: 0 20px 25px rgba(0,0,0,0.1)68shadow-accent: 0 4px 14px rgba(0,82,255,0.25)69```7071## Component Specifications7273### Button74- Primary: Gradient background, border radius `12px`75- Hover: Deepened shadow + translate up `2px`76- Active: `scale(0.98)` mechanical press effect7778### Card79- Pure white background + 1px border (`Slate-200`)80- Hover: shadow `md` → `xl`, background gradient glow `accent/0.03`81- Featured Card: 2px gradient border8283### Input84- Height `h-14`, background `muted/10`85- Focus: `ring-2 ring-offset-2` accent highlight8687## Engineering Goals8889- **A11y First**: WCAG 2.1 AA standard, perfect keyboard navigation90- **Visual Coherence**: Strict adherence to design system91- **Full Device Adaptation**: Ultra-wide screens to mobile92- **Motion Reduction**: Respect `prefers-reduced-motion`9394## Technical Implementation95961. **Tailwind Configuration**: Inject fonts in `theme.extend`972. **Framer Motion**: Motion engine, `duration: 0.7, ease: [0.16, 1, 0.3, 1]`983. **CSS Variables**: Export all color tokens as CSS Variables994. **Icons**: Lucide-react, stroke width `1.5px` or `2px`100101---102103For detailed design philosophy, responsive strategies, and motion specifications, please refer to [references/design-spec.md](references/design-spec.md)
onfire7777