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:

• Analyze current token usage

• Map to new preset tokens

• Update component styling

• Maintain functionality

• Update documentation

Preset Selection Guide

Use Case Recommended Preset

SaaS Dashboard Minimalist Modern or Glass Aesthetic

Health/Wellness App Soft Neumorphic or Timeless Classic

Creative Portfolio Bold Brutalist or Bleeding Edge

Enterprise Software Timeless Classic or Minimalist Modern

Fintech App Glass Aesthetic or Minimalist Modern

E-commerce Minimalist Modern or Timeless Classic

Social Media Glass Aesthetic or Bleeding Edge

Productivity Tool Minimalist Modern or Timeless Classic

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