Frontend Design

Pierre Frontend Design Skill

When generating UI components or modifying frontend code, follow these principles.

Design System Quick Reference

Brand Colors (use these, never raw hex)

pierre-violet: #7C3AED  → Primary actions, intelligence, AI
pierre-cyan: #06B6D4    → Data flow, connectivity
gradient-pierre         → Violet to Cyan (hero elements)

Three Pillars (semantic):
pierre-activity: #10B981  → Fitness, movement, energy
pierre-nutrition: #F59E0B → Food, fuel, nourishment
pierre-recovery: #6366F1  → Rest, sleep, restoration

Typography

• Headings: text-pierre-gray-900 font-semibold
• Body: text-pierre-gray-700
• Secondary: text-pierre-gray-500
• Code: font-mono text-sm bg-pierre-gray-100 px-2 py-1 rounded

Spacing Scale

Use only: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (Tailwind units)

Component Requirements

ALWAYS Use Design System Components

Button Variants

• primary - Main actions (purple)
• gradient - Hero/CTA (violet→cyan)
• secondary - Secondary actions (white/gray)
• danger - Destructive actions (red)
• success - Positive actions (green)
• outline - Tertiary actions (transparent)

Badge Variants

• success - Active, connected, healthy
• warning - Pending, attention needed
• error - Failed, disconnected, error
• info - Processing, informational
• trial, starter, professional, enterprise - API tiers

Generation Rules

DO

• Import components from ./ui barrel export
• Use pierre-* color classes
• Apply pierre-spinner for all loading states
• Use Card for any elevated container
• Use Badge for any status text
• Follow spacing scale strictly

NEVER

• Use raw <button> elements
• Use raw <div className="border..."> for card-like content
• Create custom spinners
• Use raw hex colors like bg-[#7C3AED]
• Use non-pierre colors like text-purple-600
• Mix spacing values outside the scale

Code Patterns

Standard Component Structure

import { Button, Card, CardHeader, Badge } from './ui';

export const FeatureComponent: React.FC<Props> = ({ data }) => {
  return (
    <Card>
      <CardHeader title="Title" subtitle="Description" />
      <div className="space-y-4">
        {/* Content */}
      </div>
      <div className="flex justify-end gap-2 mt-6">
        <Button variant="secondary">Cancel</Button>
        <Button variant="primary">Save</Button>
      </div>
    </Card>
  );
};

List Item Pattern

{items.map((item) => (
  <Card key={item.id} className="p-4">
    <div className="flex items-start justify-between">
      <div className="flex-1">
        <h3 className="text-lg font-medium text-pierre-gray-900">{item.name}</h3>
        <Badge variant={item.isActive ? 'success' : 'error'}>
          {item.isActive ? 'Active' : 'Inactive'}
        </Badge>
      </div>
      <Button variant="secondary" size="sm">Edit</Button>
    </div>
  </Card>
))}

Loading State

{isLoading ? (
  <div className="flex items-center justify-center h-64">
    <div className="pierre-spinner" />
  </div>
) : (
  <Content />
)}

Empty State

<div className="text-center py-12 text-pierre-gray-500">
  <p className="text-lg mb-2">No items yet</p>
  <p className="text-sm">Create your first item to get started</p>
  <Button variant="primary" className="mt-4">Create Item</Button>
</div>

Accessibility Requirements

• Focus states: Use .focus-ring utility
• Color contrast: 4.5:1 minimum for text
• Touch targets: 44x44px minimum
• Keyboard navigation: All interactive elements must be focusable
• ARIA labels: Required for icon-only buttons

After Writing UI Code

Always invoke the design-system-guardian agent to validate compliance.