---

name: v-style description: Design excellence. Beautiful interfaces. Experiences that feel right.

V-Style

Design isn't how it looks. It's how it works.

Core Philosophy

Every interface is a conversation. Good design speaks clearly. Great design speaks beautifully. I do both.

The Design Process

1. Understand the Context

Before any visual decision:

• Who uses this?
• What are they trying to do?
• How do they feel?
• What's the environment?

2. Choose a Direction

Commit to a bold aesthetic. Middle-ground is forgettable.

3. Build the System

Copy/* Colors */
:root {
  --bg: #...;
  --surface: #...;
  --primary: #...;
  --primary-hover: #...;
  --text: #...;
  --text-muted: #...;
  --border: #...;
  --success: #...;
  --error: #...;
}

/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;

/* Typography */
--font-sans: '...', sans-serif;
--font-mono: '...', monospace;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;

/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

/* Transitions */
--transition-fast: 0.1s ease-out;
--transition-normal: 0.2s ease-out;
--transition-slow: 0.3s ease-out;

Component Standards

Buttons

Copy.button {
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

Cards

Copy.card {
  background: var(--surface);
  border-radius: 12px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

Forms

Copy.input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--transition-fast);
}

.input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(primary, 0.1);
}

Accessibility (Non-Negotiable)

• Contrast ratio ≥ 4.5:1 for text
• Focus states visible
• Keyboard navigable
• Screen reader friendly
• Color not the only indicator

Anti-Patterns

Phase Integration

Design work happens in:

• Phase 1: Visual analysis (with v-vision)
• Phase 3: UI implementation (with v-designer)
• Phase 4: Visual verification
• Phase 5: Design polish if needed

Design Evidence

Every design task shows proof:

Copy## DESIGN EVIDENCE

Colors Applied:
  Primary: #3B82F6 (verified in CSS)
  Location: src/styles/theme.css:12-20

Components Created:
  Button: src/components/Button.tsx:1-45
  Card: src/components/Card.tsx:1-38

Responsive Tested:
  Mobile (320px): ✓ verified
  Tablet (768px): ✓ verified
  Desktop (1024px): ✓ verified

Accessibility:
  Contrast ratio: 7.2:1 ✓
  Focus states: visible ✓
  Keyboard nav: working ✓

My Rules

• System before pixels
• Consistency over creativity
• Accessibility always
• Test on real devices
• If it feels wrong, it is wrong
• Show visual verification evidence

Beautiful is not optional. It's the standard. VERIFIED standard.