Moonieful Designs

The system the studio runs on

The homepage is the storefront. Behind it is the system Miki runs her studio on, built in Django and developed across more than 240 commits since 2023.

• Client portal with project stages, tasks, meetings, versioned files, approvals, change requests and page-by-page website feedback with screenshots.
• Intake forms Miki builds herself, including questions that take file uploads.
• A shop for her book, Brand Fog: an embedded Stripe payment form, sales tax calculated by Stripe Tax, and every buyer’s PDF stamped with their name.
• Paid vendor listings billed quarterly through Stripe, with a self-service billing portal.
• An email outbox that retries failed sends on a back-off schedule, across 21 email types.
• A signed sync bridge to Aspired Websites, so a client handed over for a website arrives with their brand work intact.

Light where it counts

The homepage loads in 17 requests and 224 KB in total, measured on a phone.

• Homepage styles are written into the page itself, so there is no separate stylesheet to wait for.
• The hero photo is a 41 KB WebP marked as the page’s first priority; images further down load only as they scroll into view.
• Every homepage image carries its width and height, so the browser reserves the space before it arrives.
• One 2 KB script, deferred until the page has rendered.
• Static files are fingerprinted, pre-compressed and cached by browsers for a year.

Built for a thumb, not a mouse

• Type and spacing scale fluidly with the screen instead of jumping between fixed sizes.
• A phone-only sticky booking bar that stays clear of the iPhone home indicator; tap targets are at least 44 px.
• The mobile menu announces its state to screen readers, and Escape closes it and returns focus.
• Layouts and contrast checked at 1440, 1024, 768 and 390 px wide, with a headless phone audit in the repo.

Findable, and clean for search engines

Lighthouse scores the homepage 100 for SEO, 100 for accessibility and 100 for best practices on mobile.

• Unique titles, meta descriptions, canonical URLs and Open Graph tags on the public pages.
• A generated sitemap and robots.txt; the client portal and admin are kept out of search results.
• One H1 per page and proper landmarks (header, nav, main, footer) so the structure reads the same to Google as it does to a person.
• Retired pages redirect instead of returning errors, so old links never dead-end.

Locked down by default

• A content security policy on the homepage and shop: scripts may load only from the site itself and two named partners, and plugins are blocked outright.
• HTTPS only, with HSTS, TLS 1.3, and headers that stop the site being framed or content-type sniffed.
• File uploads are checked against an allowlist, capped in size, verified as real images, and stored outside the public web folder behind permission checks.
• Payment webhooks are verified by signature, and card details are handled by Stripe, never by the server.

Usable by everyone

• A skip-to-content link and a visible 3 px focus outline, measured at 6.3:1 contrast.
• Animation switches off for visitors who ask their device to reduce motion.
• Text colors are measured against their backgrounds (body text at 13:1).
• Alt text on every meaningful image; decorative images are hidden from screen readers.