A warm, editorial, founder-led design language. Body type is DM Sans; display headlines use Playfair Display — both self-hosted variable fonts (latin subset, metric-matched fallbacks for zero layout shift). The signature accent is a refined terracotta.
A warm minimal palette built on cream surfaces, near-black warm text, and a terracotta accent. All values are CSS custom properties and flip automatically in dark mode.
Editorial display headings paired with a clean sans body.
Large lead paragraph used for introductions and subtitles. Optimized for relaxed reading.
--font-size-lg / DM Sans regularBase body text. The default for most content — clean, warm-neutral, and comfortable over long passages.
--font-size-basePrimary buttons carry a warm gradient, a pointer-following ripple (--x/--y), and a subtle magnetic pull on desktop. All effects respect reduced motion.
Soft, raised surfaces. Hover applies a 3D tilt to an inner .card-tilt wrapper, so the CSS lift and JS tilt never fight over transform.
Standard container for features and grouped content, with a hover lift.
Category badge, rating proof, and a Play Store CTA.
Add .card-static to opt out of tilt (used on legal/compliance pages).
Interactive rows in the homepage hero. Selecting a row (click / Enter / Space) updates a live detail panel. Keyboard accessible with role="button" and aria-pressed.
Category filters for the apps grid (.app-filter-bar / .app-filter-btn). Rendered as an ARIA tablist; supports hash state like #apps?filter=finance.
The marquee testimonials become a controllable, scroll-snapping carousel with prev/next buttons, arrow-key support, and focus/hover pause. Under reduced motion the auto-scroll is disabled entirely.
App icons and screenshots open in an accessible lightbox: aria-modal="true", focus moved to the close button, Esc to close, and focus returned to the trigger.
.lightbox-trigger
Every mailto: link gets a one-tap copy button that writes the address to the clipboard and shows an “Email copied” toast (--z-index-toast).
Reach us at care@doopstudio.com or saransh@doopstudio.com.
Token-driven warning/error surfaces (used on the account-deletion page) instead of hardcoded colors.
Animations use only transform and opacity. When a visitor sets prefers-reduced-motion: reduce, the site disables parallax, the hero spotlight, magnetic buttons, card tilt, marquee auto-scroll, and reveal animations — content appears immediately and fully legible.
@media (prefers-reduced-motion: reduce)