This page is the visual-identity foundation that grounds the DomiDo design system. The identity is the result of a structured selection: ten user-interface style concepts were developed in detail, each was evaluated against the six personas on appeal, trust, and clarity, and the concepts were scored against five weighted criteria. The winning direction is a Garden Modern foundation with Organic Flow warmth and a Regency Gold premium accent. The sections below summarise the ten candidate concepts, the persona testing that revenue-weighted the scoring, the five-criterion scoring that selected the top concept, the hybrid that combines three styles into the production identity, and how that identity appears across light and dark modes, status colours, iconography, and the 3D-viewer chrome.
Garden Modern is described as "Nature meets minimalism — where clean design grows": sage green primary, warm wood secondary, soft gold accent, clean white background, linen mist surface, DM Sans headings, Inter body, Phosphor light icons with leaf motifs, rounded corners, gentle shadows. Industrial Play is "Precision meets play — built to build": steel grey, construction orange, concrete neutrals, Space Grotesk headings, IBM Plex Sans body, sharp corners, duotone icons, dark navigation bar. British Heritage is "Crafted with care, designed to endure": deep navy, cream, Regency gold, Playfair Display headings, Source Sans body, tweed-pattern accents, conservative button radii, classical hierarchy. Scandi Minimal is "Space to think, room to create": off-white, charcoal, a single accent blue, Inter throughout, flat design without shadows, generous whitespace. Bold Builder is "No pretence. Just building": black, neon yellow, electric red, condensed sans serif, zero border radii, dark-mode only. Organic Flow is "Grown from earth, shaped by hand": terracotta, olive, sand, Fraunces headings, Source Sans body, flowing organic shapes, spring-physics animations, generous radii. Tech Forward is "Precision engineering, digital craft": cyan accent on black, futuristic geometric icons, glow effects, dark-mode only, ambient-light brightness adjustment. Artisan Craft is "Made by hand, designed with soul": linen, navy ink, ochre, Lora headings, Source Sans 3 body, hand-drawn icons, paper-grain texture, light-only. Playground Pop is "Snap. Stack. Smile.": bold primary colours, white background, Poppins throughout, bouncy spring animations, building-block metaphors. Quiet Luxury is "Understated quality, considered design": muted sage and stone with cream, Cormorant Garamond headings, Inter body, hairline icons, editorial whitespace.
Each concept was evaluated through each of the six personas on three weighted dimensions: Appeal (thirty-five per cent), Trust (thirty-five per cent), and Clarity (thirty per cent). The scoring was revenue-weighted so concepts that worked for the high-revenue personas (Geoff, Alex, Ben) carried more weight than those that worked only for low-revenue ones. The top five revenue-weighted concepts were Garden Modern, British Heritage, Organic Flow, Artisan Craft, and Scandi Minimal. Garden Modern stood out as the only concept where no persona scored below an acceptable floor — the only concept that did not actively alienate any segment. This floor is critical for a two-sided marketplace where losing any segment undermines network effects.
Five weighted criteria evaluated each concept overall. Brand alignment (twenty-five per cent) measured how well the concept matched the outdoor-garden context, the United Kingdom market feel, and the platform's mission. Accessibility (twenty per cent) measured whether the concept could achieve Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, was readable across ages, and worked in outdoor lighting. Target demographic appeal (twenty-five per cent) used the revenue-weighted persona scores. Competitor differentiation (fifteen per cent) measured whether the concept would be confused with LEGO, IKEA, Etsy, or generic construction. Implementation feasibility (fifteen per cent) measured how cleanly the concept could be built in React Native and React Three Fiber on mid-range hardware.
| Rank | Concept | Total |
|---|---|---|
| 1 | Garden Modern | 8.10 |
| 2 | British Heritage | 7.55 |
| 3 | Organic Flow | 7.40 |
| 4 | Artisan Craft | 7.40 |
| 5 | Scandi Minimal | 7.05 |
Garden Modern scored highest on brand alignment, demographic appeal, and feasibility. Its only weakness was differentiation — at six out of ten it risked feeling generic in the "eco brand" visual space.
Garden Modern forms the foundation (roughly seventy per cent). Organic Flow contributes around twenty-five per cent: the terracotta accent that distinguishes the palette from the increasingly common "sage and white" eco look; more generous border radii that warm up the geometry; and a touch of spring-physics motion on social interactions. British Heritage contributes the final five per cent: a single Regency Gold accent used for the premium subscription tier and upgrade badges. The result is a three-note colour signature distinct in the marketplace and construction categories: sage green primary, terracotta accent, regency gold premium, on a warm-white background. The typography is Inter for headings and the system body fonts for legibility across a wide age range without paying a font-loading cost. The radii pattern uses a twenty-four-pixel pill on primary buttons, sixteen-pixel rounding on cards and modals, and twelve-pixel rounding on smaller elements — generous but not playful. Motion is restrained: most transitions are two-hundred-millisecond ease-out, with three-hundred-millisecond emphasis transitions for major moves.
The brand colours appear consistently across light and dark modes. In dark mode the background becomes a forest-tinted dark neutral; the brand sage, terracotta, and gold stay the same so the identity holds. Status indicators use a separate semantic palette — green for final positive, blue for active, amber for waiting, red for negative, purple for social — each triple-coded with colour, icon, and text. Iconography uses two Phosphor sets: light weight for customer-facing surfaces, regular weight for admin. Key navigation icons carry subtle leaf motifs that reinforce the garden context without becoming decorative noise. The 3D-viewer chrome and the pipeline stepper carry their own visual treatments grounded in the same tokens: translucent overlays for viewer controls, soft sage progress for the pipeline, terracotta highlights on the current stage indicator. The Assembly Viewer's full-screen mode hides every chrome element except the bottom navigation bar, letting the model occupy the entire viewport.
Light mode is the default because the product is used outdoors in sunlight. Dark mode is available through auto-detection of the operating-system preference or a manual override in Settings. The dark palette uses forest-tinted neutrals (a forest-toned dark background, a slightly lighter forest surface, a desaturated text scale) rather than pure black to preserve the garden aesthetic. Every brand colour stays the same; only the neutrals and the semantic backgrounds shift. Ten key screens (Home, AI Prompt, Design Review, Assembly Viewer, Catalogue, Gallery Browse, Gallery Detail, My Designs, Settings, and Admin Overview) have explicit dark-mode renders that confirm the palette holds.