Best practices for building beautiful and consistent BooApps that match the Peqaboo experience.
BooApps run inside a mobile webview. Design for small screens first and scale up.
Respect device safe areas. Use CSS env() for notch and home indicator spacing.
Minimum touch target size of 44×44 points. Add adequate spacing between interactive elements.
Use vertical scrolling. Avoid complex nested scrollable areas. Support pull-to-refresh patterns.
Safe area is not all-or-nothing
env(safe-area-inset-*), otherwise users tap into the notch or read text behind the home indicator.viewport-fit=cover in your viewport meta, iOS WKWebView returns 0 for every env(safe-area-inset-*) — your CSS will look correct but silently do nothing. Always set it.<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><body>
<!-- Layer 1: full-bleed background. Edge-to-edge by design. -->
<div class="bg" style="
position: fixed; inset: 0;
background: url(/hero.jpg) center / cover;
"></div>
<!-- Layer 2: content. Padded by safe-area insets. -->
<main style="
position: relative;
min-height: 100svh;
padding-top: max(env(safe-area-inset-top), 16px);
padding-bottom: max(env(safe-area-inset-bottom), 16px);
padding-left: max(env(safe-area-inset-left), 16px);
padding-right: max(env(safe-area-inset-right), 16px);
">
<h1>Readable, tap-safe content goes here</h1>
<button>Tap target — clear of the home indicator</button>
</main>
</body>/* Sticky top header — push down by inset-top instead of 0 */
.header-sticky {
position: sticky;
top: env(safe-area-inset-top);
}
/* Fixed bottom action bar — push up by inset-bottom */
.cta-fixed {
position: fixed;
left: 0; right: 0; bottom: 0;
padding-bottom: max(env(safe-area-inset-bottom), 12px);
}
/* Minimum touch target */
button, a {
min-height: 44px;
min-width: 44px;
}System Font Stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifUse 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
Always support both light and dark mode. Use CSS media query prefers-color-scheme to detect the system setting.
/* 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;
}
}Keep animations subtle (200-300ms). Always respect prefers-reduced-motion. Avoid auto-playing media.
/* 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 States
Error Handling
<button>, <nav>, <main>)alt text for all imagesaria-label to icon-only buttons