Peqaboo

Design Guidelines

Best practices for building beautiful and consistent BooApps that match the Peqaboo experience.

Layout Principles

Mobile First

BooApps run inside a mobile webview. Design for small screens first and scale up.

Safe Areas

Respect device safe areas. Use CSS env() for notch and home indicator spacing.

Touch Targets

Minimum touch target size of 44×44 points. Add adequate spacing between interactive elements.

Scrolling

Use vertical scrolling. Avoid complex nested scrollable areas. Support pull-to-refresh patterns.

Safe area handling
css
/* Handle safe areas */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Minimum touch target */
button, a {
  min-height: 44px;
  min-width: 44px;
}

Typography

Heading 124px / bold
Heading 220px / semibold
Heading 316px / semibold
Body Text14px / regular
Caption / Meta12px / regular

System Font Stack

Use the system font stack for the best native feel: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Color Guidelines

Use Peqaboo brand colors sparingly. Your BooApp should have its own identity while remaining visually consistent with the host app.

Brand

#6366F1

Success

#10B981

Warning

#F59E0B

Error

#EF4444

Dark Mode Support

Always support both light and dark mode. Use CSS media query prefers-color-scheme to detect the system setting.

Dark mode support
css
/* Light mode (default) */
body {
  background: #FFFFFF;
  color: #1F2937;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #1A1A1A;
    color: #F3F4F6;
  }
  .card {
    background: #2A2A2A;
    border-color: #333;
  }
}

Animation Recommendations

Keep animations subtle (200-300ms). Always respect prefers-reduced-motion. Avoid auto-playing media.

Respecting motion preferences
css
/* Subtle transitions */
.button { transition: transform 0.2s ease, opacity 0.2s ease; }
.button:active { transform: scale(0.96); }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Loading & Error States

Loading States

Always show a loading indicator when performing async operations. Use skeleton screens for content loading rather than spinners when possible.

Error Handling

Handle bridge errors gracefully. If an action fails, show a user-friendly message and offer a retry option. Never show raw error messages to users.

Accessibility

  • Use semantic HTML elements (<button>, <nav>, <main>)
  • Provide alt text for all images
  • Ensure minimum contrast ratio of 4.5:1 for text
  • Support dynamic font sizing
  • Add aria-label to icon-only buttons
  • Test with screen readers (VoiceOver on iOS, TalkBack on Android)