Lunar Drop
Signal-driven brand platform built ground-up — design systems over pages, scarcity encoded into the data layer, commerce-ready architecture without platform lock-in.
Brand platform UX — dark mode default, composable sections, drop-lifecycle-aware product grid, gesture-native on mobile.
A brand launch that needed architecture, not a template
Lunar Drop required a platform that could communicate identity and scarcity simultaneously — without relying on heavy copy or large product catalogs. The brand needed to feel deliberate and premium before a single drop went live, and be ready to scale into commerce without a rebuild.
Standard templates or CMS-based platforms would constrain the design system and introduce operational overhead the brand didn't need. The architecture had to own the brand's content model, control its own theme system, and be extensible into commerce on the brand's timeline.
Design systems over pages
Instead of designing pages, Lunar Drop was engineered as a system of composable sections. Each section is independently styled, reorderable, and reusable across future routes without side effects. The content layer is typed local configuration — version-controlled, build-time validated, and impossible to misconfigure through a third-party editor. The result is a platform that can add routes, drop pages, and story sections without touching the design system.
- ✓Static-first — no runtime CMS, no client-side content fetching
- ✓Composable sections — reorderable, no inter-section dependencies
- ✓Typed config — content is version-controlled and build-validated
- ✓Edge-cached delivery — consistent sub-200ms TTFB
- ✓Zero content drift — no database, no editorial pipeline
Scarcity encoded in the system, not in copy
A formal drop state system drives UI behavior across every surface simultaneously. The state determines visual emphasis, purchase path availability, and content display — not the other way around. When a drop transitions states, every component that references it updates automatically.
LIVE
Active drop — full product visibility, purchase path enabled
COMING
Upcoming — teaser content, countdown, no purchase path
ARCHIVED
Closed drop — visible for brand history, marked sold out
This is the central architectural decision that separates a brand platform from a product catalog. Scarcity is a structural property of the system — not marketing language applied to a generic layout.
Dark and light — one component system, two expressions
Both themes are implemented via CSS custom properties — no component duplication, no conditional class logic per theme, and no hydration mismatch on switch. The Lunar Drop mark functions as a reusable design primitive embedded across navigation, interaction states, and iconography. Every component works in both modes by design, not by override.
- ✓CSS variable-driven — single component tree, two themes
- ✓No hydration mismatch on client-side theme switch
- ✓Brand mark as a reusable primitive across all surfaces
- ✓Dark default — consistent with brand identity and drop context
Ready to transact — without platform commitment
Structured product metadata, drop detail routes, and checkout extensibility are built in from the start. Transactions currently route through an external provider — but the brand owns its data model. When the business is ready for native commerce, the architecture adds a payment layer; it doesn't require a platform migration. No Shopify theme. No Webflow lock-in. No rebuild.
- ✓Structured product metadata — typed, owned, portable
- ✓Drop detail routes — each drop has its own URL and state
- ✓Checkout extensibility — payment layer is additive, not structural
- ✓No platform dependency — brand data model is not held by a SaaS
What was chosen — and what was ruled out
A brand platform built on scarcity and identity doesn't need editorial workflows — it needs performance, predictability, and zero drift. Typed local configuration means content is version-controlled, build-time validated, and impossible to accidentally misconfigure through a CMS UI. Adding a CMS buys you an editor and costs you a build dependency.
State encoded in the system cannot contradict itself. A formal LIVE | COMING | ARCHIVED type drives UI state, visual emphasis, purchase path availability, and content rhythm simultaneously. Manual copy requires every surface to be updated in sync — and eventually, one gets missed.
Premature platform decisions constrain brand architecture. Structured product metadata, drop detail routes, and checkout extensibility are designed in from the start — when the business is ready to transact natively, the architecture doesn't require a rebuild. The brand owns its data model regardless of which commerce layer is eventually added.