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.
/* 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;
}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