UI Design · Brand System · 2026

Conserva

AI image generation only stays consistent when the person directing it thinks like a designer. Conserva is what that looks like: a structured prompting framework producing a coherent visual library across an entire premium product, paired with a system-first design language built to hold its point of view as it scales.

Explore interactive prototype

Role

End-to-end. Brand definition, design system, prototype, AI image generation methodology.

Context

Self-initiated, no external client. Eight-week BrainStation project.

Tools

Figma, Atomic Design methodology, structured AI prompting framework (Sora, Adobe Photoshop).

Deliverable

High-fidelity multi-platform prototype and design system.

Conserva UI — hero screen showing the gourmet food experience

The Problem

Food apps that feel clinical, or ones that feel chaotic. Neither is right.

Food platforms tend to fall into two patterns. Some are purely functional: structured, efficient, and difficult to browse with any sense of pleasure. Others lean heavily into visual richness, but lose clarity under the weight of it.

Neither serves the discerning home cook. What that user wants is a platform that feels like it has an opinion, on what's worth eating, how food should be described, what's worth showing and what's worth leaving out. And critically, that opinion has to hold. A platform that's expressive on the discovery screen and transactional three taps in doesn't feel curated. It feels inconsistent. In a premium context, inconsistency reads as carelessness and a user who stops trusting the curation stops using the platform.

Design challenge: How do you build a product that feels expressive and opinionated at every touchpoint, without that expression collapsing into inconsistency as it grows?


Key Insight

Structure doesn't limit creativity. It protects it.

Early exploration made one thing clear: a distinct visual voice only stays distinct if it's anchored by rules: colour, typography, composition, and how those elements relate to each other across screens. Without that, the system fragments as content is added.

The instinct

Build the brand first, then figure out the system later.

The reframe

The system is the brand. Build both together.

View brand and UI moodboards
Conserva brand and UI design moodboards
Brand and UI moodboards: The visual language established before a single component was built.

Design System

Built from the atom up.

The system was built using Atomic Design methodology: colour tokens and type scales defined first, spacing rules locked next, then components assembled from those foundations. Nothing was designed in isolation. Every component inherits from the system rather than overriding it.

This allows the product to scale across iOS, Android, and web while maintaining a consistent point of view.

Explore the Conserva Design System
Conserva accessibility contrast standards
Accessibility contrast standards: Every colour combination tested and documented before use in components.

Design Decisions

Four decisions that kept the brand honest

01

AI image generation as a design system problem

Product photography was produced through an AI image generation workflow built around a structured prompting framework. The framework specifies lighting conditions, texture qualities, compositional relationships, and colour constraints before any prompt is submitted. Without those constraints, AI-generated images produce variety where the product needs coherence. The prompting framework is, in effect, a visual brief applied to a new medium — design thinking about what the system needs, expressed as a specification for the tool.

Tradeoff The framework adds upfront work before any image is generated. The payoff is that the output stays brand-coherent across an entire library, without per-image policing. AI image generation only stays consistent when the person directing it thinks like a designer.
02

Photography as navigation

Full-bleed imagery anchors categories and product views. Rather than competing with type or icons, photography does the cognitive work, reducing the need for labels and making visual richness the navigation mechanism, not decoration.

Tradeoff Photography-first design is only sustainable if the image quality is consistent. The AI prompting framework above is what makes that sustainable.
03

Colour as structure, never decoration

Colour appears sparingly and with purpose—calls to action, category anchors, key modules. It is never ambient.

Tradeoff This restraint reduces visual noise, but it also makes the interface feel quieter than competitors. That tradeoff is intentional.
04

Sensory language before specifications

Product descriptions open with sensory cues, Bright. Softened. Gently saline, before any technical detail. This sequence reflects how people actually decide whether they want something: feeling first, then fact.

Tradeoff Leading with sensory language assumes a certain kind of reader: one who has time to browse rather than search. For users who want quick answers, this sequence may slow them down. A future iteration would test a more scannable layer without losing the tone.
Conserva home screen — editorial statement, category grid, and community event module
Home: An editorial statement, a structured category grid, and a community module that reads as part of the brand, not an interruption.
Conserva shop and product detail screens
Shop and product detail: Browsing structured, not chaotic, sensory description first, provenance second, specs last.

Outcome

A high-fidelity product where the point of view and the system that sustains it were designed as one thing, not two.

The prototype covers the full purchase flow—discovery, browsing, product detail, and cart—across platforms. The system defines tokens, components, and patterns at a level that can be carried into development without dilution. The AI prompting framework produced a visually coherent image library across product categories without manual policing of each output.

Conserva AI-generated product photography — structured visual prompt system
AI-generated product photography: By defining lighting, texture, composition, and colour relationships upfront, every image stays aligned with the brand.
Interactive prototype: home, category, product detail, and cart flows.

What I'd Do Differently

Two things the system doesn't cover yet.

Test the sensory-first copywriting with actual users. The editorial logic (sensory cues before technical detail) is defensible, but it was never validated. Does "Bright. Softened. Gently saline." create confidence in a purchase, or does it create confusion about what the product actually is? I'd want to test comprehension and conversion intent against a more descriptive alternative before committing the pattern at scale.

Design for personalization within system constraints. The current system is deliberately consistent: the same tone, the same visual logic, everywhere. A more developed version might allow personalization (preferred categories surfaced differently, copywriting emphasis adjusted for return users) while maintaining the system's coherence. That's the harder design problem: how do you let a system adapt to individuals without losing the editorial point of view that makes it trustworthy?

Next Project

Aurafact: Archiving the acoustic memory of place