📋 MVP Design Guidelines

Core Principles

1. Use shadcn-svelte - Don't build custom components
2. Tailwind only - No custom CSS
3. Mobile-first - Especially for WhatsApp flows
4. Ship fast - Perfect is the enemy of done

Essential Components

1. Onboarding Card

<Card class="max-w-lg mx-auto p-6">
  <!-- Progress -->
  <Progress value={step * 25} class="mb-4" />
  <p class="text-sm text-gray-600 mb-4">Step {step} of 4</p>

  <!-- Content -->
  <h2 class="text-xl font-semibold mb-4">{title}</h2>
  <slot />

  <!-- Actions -->
  <div class="flex justify-between mt-6">
    <Button variant="outline" on:click={back} disabled={step === 1}>
      Back
    </Button>
    <Button on:click={next}>
      {step === 4 ? 'Complete' : 'Next'}
    </Button>
  </div>
</Card>

2. Simple Dashboard

<!-- Executive view - one number that matters -->
<div class="p-6">
  <Card class="p-6 text-center">
    <h1 class="text-4xl font-bold text-green-600">85%</h1>
    <p class="text-gray-600 mt-2">Compliance Score</p>
  </Card>

  <!-- Quick actions -->
  <div class="grid grid-cols-2 gap-4 mt-4">
    <Button variant="outline" class="w-full">
      📊 View Report
    </Button>
    <Button variant="outline" class="w-full">
      👥 Delegate Tasks
    </Button>
  </div>
</div>

3. WhatsApp Templatest

# Keep under 1024 chars, use emojis
welcome: |
  Welcome to GetCimple! 👋

  I'll help you set up compliance in 5 minutes.

  What's your company name?

completion: |
  ✅ Done! Your dashboard is ready:

  {link}

  (Expires in 15 min)

4. Auth Flow

<!-- Kinde auth - one button -->
<div class="min-h-screen flex items-center justify-center">
  <Card class="w-full max-w-md p-6">
    <h1 class="text-2xl font-bold text-center mb-6">
      Sign in to GetCimple
    </h1>
    <Button
      on:click={() => window.location.href = kindeLoginUrl}
      class="w-full"
    >
      Continue with secure login
    </Button>
  </Card>
</div>

Design System

Colors (Use Tailwind defaults)

const colors = {
  primary: 'blue-600',
  success: 'green-600',
  warning: 'orange-600',
  danger: 'red-600',
  text: 'gray-900',
  muted: 'gray-600',
}

Spacing

/* Use Tailwind spacing scale */
.card {
  @apply p-4 md:p-6;
}
.section {
  @apply mb-6 md:mb-8;
}
.compact {
  @apply space-y-2;
}
.comfortable {
  @apply space-y-4;
}

Typography

/* Keep it simple */
.heading {
  @apply text-2xl font-bold;
}
.subheading {
  @apply text-lg font-semibold;
}
.body {
  @apply text-base;
}
.small {
  @apply text-sm text-gray-600;
}

Mobile Patterns

Touch Targets

<!-- Minimum 44px -->
<Button class="min-h-[44px] w-full md:w-auto">
  Tap me
</Button>

Responsive Grid

<!-- Stack on mobile, grid on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <Card>...</Card>
  <Card>...</Card>
</div>

Common Patterns

Loading State

{#if loading}
  <div class="flex justify-center p-8">
    <Loader2 class="h-8 w-8 animate-spin" />
  </div>
{:else}
  <Content />
{/if}

Error Display

{#if error}
  <Alert variant="destructive">
    <AlertCircle class="h-4 w-4" />
    <AlertDescription>{error}</AlertDescription>
  </Alert>
{/if}

Empty State

<div class="text-center py-12 text-gray-500">
  <FileX class="mx-auto h-12 w-12 mb-4" />
  <p>No data yet</p>
</div>

MVP Checklist

Before shipping:

• Works on iPhone Safari
• Touch targets ≥ 44px
• Loading states everywhere
• Error messages are helpful
• Form validation works
• WhatsApp messages < 1024 chars

What to Skip

Save these for post-MVP:

• Custom animations
• Dark mode
• Advanced charts
• Custom icons
• Keyboard shortcuts
• Offline support

---

Status: Ready to implement Components: Use shadcn-svelte catalog Testing: Real phones only