Design Preset System

Design Preset System

Overview

Modular design preset system enabling seamless style switching while maintaining consistency and quality across any React Native or Next.js application.

When to Use

• Starting new project and choosing design direction
• Switching design style for existing project
• Applying consistent aesthetic across components
• Exploring different design approaches
• Presenting design options to stakeholders

When NOT to Use

• Creating custom design system from scratch (use design-system-foundation instead)
• Just refactoring code (use ui-refactoring-workflow instead)
• Need documentation only (use design-documentation-generator instead)

Available Presets

1. Minimalist Modern (Timeless) ⚪

Philosophy: Less is more. Clear hierarchy, generous spacing, purposeful color.

Best For: SaaS products, productivity tools, professional applications

Characteristics:

• Clean, spacious layouts
• Monochromatic + single accent color
• Subtle shadows (0-10% opacity)
• Generous white space (16-24px minimum)
• Sans-serif typography (Inter, SF Pro)

See: presets/minimalist-modern/ for complete implementation

2. Bold Brutalist (Bleeding Edge) ⚫

Philosophy: Raw, honest, high-impact. Geometric forms, stark contrasts, unapologetic.

Best For: Creative agencies, portfolios, bold brands, art-focused apps

Characteristics:

• High contrast (black/white/red/yellow)
• Sharp corners (0 border radius)
• Bold typography (700-900 weight)
• Harsh shadows (solid, offset)
• Geometric layouts

See: presets/bold-brutalist/ for complete implementation

3. Soft Neumorphic (Subtle) 🌫️

Philosophy: Tactile, soft, approachable. Subtle depth through shadows and highlights.

Best For: Health apps, meditation apps, wellness products

Characteristics:

• Soft shadows and highlights
• Low contrast backgrounds
• Rounded corners (12-20px)
• Tactile appearance
• Pastel color palette

See: presets/soft-neumorphic/ for complete implementation

4. Glass Aesthetic (Modern) 💎

Philosophy: Depth through transparency. Layered, blurred, ethereal.

Best For: Premium apps, fintech, modern dashboards, iOS-style apps

Characteristics:

• Transparency with backdrop blur
• Layered depth
• Soft glows and halos
• Semi-transparent surfaces
• Apple-inspired design

See: presets/glass-aesthetic/ for complete implementation

5. Timeless Classic (Professional) 📘

Philosophy: Balanced, accessible, proven. Professional and trustworthy.

Best For: Enterprise software, government apps, accessibility-first products

Characteristics:

• High accessibility (WCAG AAA)
• Conservative colors
• Proven UI patterns
• Clear information hierarchy
• Readable typography (16px minimum)

See: presets/timeless-classic/ for complete implementation

6. Bleeding Edge Experimental (Innovative) 🚀

Philosophy: Push boundaries. Latest trends, experimental interactions, forward-thinking.

Best For: Tech showcases, innovation labs, cutting-edge products

Characteristics:

• Latest 2025 design trends
• Experimental interactions
• Cutting-edge animations
• Unconventional layouts
• Gradient-heavy designs

See: presets/bleeding-edge-experimental/ for complete implementation

Applying a Preset

For New Projects

When using design-system-foundation, specify preset:

"Set up design system foundation using glass-aesthetic preset"

Tokens automatically configured to match preset.

For Existing Projects

When using ui-refactoring-workflow, specify preset:

"Refactor this component using minimalist-modern preset"

Component styling updated to match preset while preserving functionality.

Switching Presets

"Convert my app from minimalist-modern to bold-brutalist preset"

Process:

1. Analyze current token usage
2. Map to new preset tokens
3. Update component styling
4. Maintain functionality
5. Update documentation

Preset Selection Guide

Token Mapping

Each preset includes complete token definitions:

• Colors: Brand, UI, feedback colors
• Typography: Font families, sizes, weights
• Spacing: Consistent scale
• Shadows: Elevation system
• Border Radius: Rounding scale
• Animations: Timing and easing

Usage Examples

React Native

import { glassAesthetic } from '@/theme/presets'

const Card = () => {
  return (
    <View style={{
      backgroundColor: glassAesthetic.colors.surface,
      padding: glassAesthetic.spacing.lg,
      borderRadius: glassAesthetic.radius.xl,
      ...glassAesthetic.shadows.md,
    }}>
      <Text style={{
        fontSize: glassAesthetic.typography.scale.lg,
        fontWeight: glassAesthetic.typography.weights.semibold,
        color: glassAesthetic.colors.text.primary,
      }}>
        Glass Card
      </Text>
    </View>
  )
}

Next.js with Tailwind

// tailwind.config.ts - configured with minimalistModern
const Card = () => {
  return (
    <div className="bg-surface p-lg rounded-md shadow-md">
      <h2 className="text-lg font-semibold text-primary">
        Minimalist Card
      </h2>
    </div>
  )
}

Mixing Presets (Advanced)

You can mix elements from different presets:

const hybridTokens = {
  // Glass aesthetic surfaces
  colors: glassAesthetic.colors,

  // Brutalist typography
  typography: boldBrutalist.typography,

  // Minimalist spacing
  spacing: minimalistModern.spacing,
}

Warning: Only recommended for experienced designers. Can create inconsistent UX.

Quality Checklist

When applying preset, verify:

• ✓ All tokens from preset applied
• ✓ Colors maintain WCAG AA contrast (minimum)
• ✓ Typography remains readable
• ✓ Spacing feels consistent
• ✓ Shadows appropriate for preset
• ✓ Animations match preset philosophy
• ✓ Components feel cohesive

Common Mistakes

❌ Mixing incompatible preset elements

// BAD: Brutalist shadows + Neumorphic colors
style={{
  backgroundColor: softNeumorphic.colors.surface,
  ...boldBrutalist.shadows.lg // Harsh shadow on soft surface
}}

✅ Stick to one preset

// GOOD: Consistent preset usage
style={{
  backgroundColor: softNeumorphic.colors.surface,
  ...softNeumorphic.shadows.sm // Soft shadow matches
}}

❌ Ignoring preset philosophy

// BAD: Minimalist preset with excessive decoration
<View style={minimalistModern}>
  <GradientBackground />
  <ParticleEffect />
  <AnimatedBorder />
</View>

✅ Honor preset principles

// GOOD: Minimalist stays minimal
<View style={minimalistModern}>
  <Text>Simple, Clean</Text>
</View>

Real-World Impact

Teams using preset system report:

• 80% faster design decisions
• Consistent aesthetic across app
• Easy style exploration
• Faster stakeholder approval
• Seamless design migrations

Integration with Other Skills

• Use with design-system-foundation for new projects
• Use with ui-refactoring-workflow for existing projects
• Use with component-modernization for component updates
• Use with aesthetic-excellence for fine-tuning