All designs android-starter / designs
Commerce & marketplace kit

A store that reads like a magazine

The multipurpose commerce kit: retail, marketplace, grocery, tickets, direct-to-consumer. Swap the catalogue and it is a different store. What it is not is another cool-grey template with a blue button — Aurora is ivory paper, espresso ink, one burnt-amber signal and Fraunces, a serif, set big. And it contains no photographs at all: every product is drawn, on a tinted ground, from a system of twelve objects and six category palettes. 43 screens, light and dark, from splash to seller dashboard.

43 screens × 2 modes 412 × 915 dp 86 renders at 2× 0 photographs — 12 drawn objects
43screens, light and dark
86rendered PNGs at 2×
12drawn product objects
412 × 915canvas, dp
How this was drawn Aurora is not a port of a real product — it is the reusable commerce kit, so its catalogue, cast and copy are invented and intern…

Aurora is not a port of a real product — it is the reusable commerce kit, so its catalogue, cast and copy are invented and internally consistent rather than sourced. Everything that can be measured was measured. All 28 status colour pairs were run through a WCAG contrast script against every surface a badge can land on, and the one role that failed at badge size (light --accent, 4.32:1 on its own fill) was moved until it cleared; README.md prints the whole table with both numbers. The product imagery is the part with no shortcut available: there are no photographs and no image assets anywhere in designs/, so all 12 objects are inline SVG on CSS-gradient grounds, six category palettes deep, and the reference sheet they were drawn against ships as screens/_plates.html. The numbers agree with each other: six departments summing to 487 pieces, five star buckets summing to 213 reviews at a mean of 4.69, a 689,00 € subtotal less a 10 % voucher giving 620,10 € including 19 % VAT of 99,01 €. Typography is Fraunces run with its optical-size axis live, which is why one font file carries both the 34px headline and the 10.5px eyebrow.

Getting in

5

A store has to let you in three ways — account, new account, or not at all — and the guest route is never the small grey link at the bottom. Region and currency are chosen here because they decide every price on every later screen.

Splash
001

Splash

The one moment the app is pure brand: the sunrise mark on a burnt-amber plane, white ink, no chrome.

Onboarding
002

Onboarding

Pane two of three, on what Aurora actually sells — the illustration is the plate system at full size.

Sign in
003

Sign in

Email and password, with the guest route given the same weight as the account route.

Create account
004

Create account

A live password meter and the two consents a German storefront has to ask for separately.

Shop as guest
005

Shop as guest

The region and currency sheet: Germany, EUR, prices shown including 19 % VAT.

The storefront

5

Five destinations: Shop, Browse, Saved, Bag, Me. Shop is editorial — an eyebrow, a serif headline and one banner — because a catalogue that opens on a wall of products has already told you it has nothing to say.

Shop
006

Shop

The August storefront: the Flax Edit banner and the first four of 24 new arrivals, second row deliberately cut.

Shop — loading
007

Shop — loading

First paint on a cold cache: plate-shaped skeletons hold the grid's geometry so nothing jumps when the data lands.

Browse
008

Browse

Six departments as drawn plates with live counts — 128 + 74 + 96 + 63 + 85 + 41 = 487 pieces.

Departments drawer
009

Departments drawer

The drawer over Browse: departments with counts, then the account and seller-studio links.

Lighting
010

Lighting

74 pieces sorted by newest, with the sub-type chips that sum to 74 and a sticky filter bar.

Finding things

4

Search is one screen in three states — empty, matched, and matched-nothing. Sort and filter share a single sheet, because on a phone they are the same decision and two sheets is one sheet too many.

Search
011

Search

The empty field: three recent queries, then what Berlin has been looking at this week.

Results
012

Results

18 results for “linen”, with the department split shown as chips that add up to 18.

Sort & filter
013

Sort & filter

One sheet, five sections: sort, price range, colour swatches, material, availability — and a live count on the button.

Nothing found
014

Nothing found

“bouclé sofa” matches nothing; rather than apologising, the screen offers the three nearest departments.

The product

6

The detail page is the screen every other agent will copy, so it carries the most of base.css: plate hero, pager, price with a saving, star rating, material swatches, variant options, a delivery promise and a sticky action bar. No bottom nav — a detail screen never gets one.

Product
015

Product

The Sonnet lounge chair at 449,00 € from 529,00 €: finish, seat, stock, delivery window and specs under one sticky action.

Gallery
016

Gallery

All five drawn views full-bleed, with a thumbnail strip and the counter — the drawings are the photography.

Choose a variant
017

Choose a variant

The sheet: finish × seat as a grid, with the two combinations that are out of stock struck through, not hidden.

Size guide
018

Size guide

A drawn elevation with every dimension called out, plus the doorway clearance the chair actually needs.

Reviews
019

Reviews

213 reviews behind a 4.7: the five bars sum to 213, and reviews can be filtered by star and by finish bought.

Write a review
020

Write a review

Rating first, then title and body; the photo slots are drawn as empty tiles because there is no stock image to fake.

Bag and checkout

7

Four items, 689,00 € before the voucher, 620,10 € after — and every screen in this flow shows a number that can be derived from the one before it. Checkout is three steps with a persistent progress rail, and each step keeps the running total in view.

Bag
021

Bag

Four items across three lines, each with its own stepper and chosen finish; delivery is already free at this subtotal.

Bag — empty
022

Bag — empty

An empty bag that does a job: the last three pieces viewed, and the two departments this account keeps returning to.

Voucher
023

Voucher

The voucher sheet with WELCOME10 accepted — 68,90 € comes off, and the summary behind it has already moved.

Checkout · Address
024

Checkout · Address

Step one: saved addresses as radio cards, with the switch that reveals a separate billing address.

Checkout · Delivery
025

Checkout · Delivery

Step two: three windows priced against the free-over-250 threshold, with the two-person option pre-selected for furniture.

Checkout · Payment
026

Checkout · Payment

Step three: card, PayPal or invoice, with the 19 % VAT (99,01 €) split out of the 620,10 € total.

Order placed
027

Order placed

Order AU-40921: the total, the delivery window and exactly one next action, on a brand plane.

After the sale

6

Where a store keeps its promises. Tracking, returns and the wishlist all pivot on state — which is why the order list's four rows are four different states rather than four different dates.

Orders
028

Orders

Four orders across two months — in transit, delivered, delivered, returned — each row offering what its state allows.

Tracking
029

Tracking

AU-40921 between Hamburg and Berlin: five stages, three done, the courier and the window named.

Start a return
030

Start a return

Choosing what goes back: per-item checkboxes, a reason per item, and the refund the choices add up to.

Saved
031

Saved

Eight saved pieces, two of them flagged for a price drop; the snackbar undoes the last move to the bag.

Saved — selecting
032

Saved — selecting

Selection mode after a long press: three chosen, and the contextual bar takes the bottom nav's place.

Wallet
033

Wallet

39,00 € of store credit from the June return, and the Aurora Circle tier with 260 points left to run.

You

7

The account corner. Settings is deliberately more than one screen — a settings root that only lists labels tells you nothing, so every row here shows its current value and one sub-page is drawn in full.

Me
034

Me

The account hub: orders, wallet and addresses first, everything administrative kept quiet below.

Notifications
035

Notifications

Five notifications in three time buckets; the two unread ones carry the warm tint rather than a dot.

Addresses
036

Addresses

Three addresses with one default, and the dialog that guards deleting the one an open order is shipping to.

Payment methods
037

Payment methods

Cards drawn as gradient plates — no card-scheme logos exist here, so the scheme is set in type instead.

Settings
038

Settings

The root: appearance, region, notifications, privacy — each row showing the value it is currently set to.

Settings · Notifications
039

Settings · Notifications

Eleven switches in four groups, with a quiet-hours window that is off and says what turning it on would do.

Help & legal
040

Help & legal

Contact, the six most-asked questions, and the legal corner: imprint, terms, privacy, and the build number.

Edges

3

The three screens a kit is judged on and usually skips — plus the other half of a marketplace, which is the person selling.

Offline
041

Offline

No connection: the bag survives, and the screen names the three things that still work without one.

Something broke
042

Something broke

A 500 on the storefront, with the request id a support agent will ask for and a retry that is not the only option.

Seller studio
043

Seller studio

The other side of the marketplace: Halden Studio's week, its best piece, and the one line that is nearly out of stock.

No screen matches that.

How this folder is built

One signal, and a claret beside it

Burnt amber is the only thing in Aurora that asks to be pressed. The second brand voice is a deep olive for makers and provenance, and a price drop gets its own claret — never the danger red, because at 11.5px a saving and an error must not be the same colour. Amber sits at hue 21, claret at 338, danger at 6.

Every product is drawn

There are no photographs in this system, so the catalogue is illustrated: two CSS gradients make the ground, inline SVG makes the object, and six category palettes make it a catalogue instead of a set of doodles. Twelve objects cover Furniture, Lighting, Ceramics, Textiles, Kitchen and Plants; screens/_plates.html is the reference sheet.

Fraunces, set big

The display face is a serif with a live optical-size axis — one font file gives a 34px headline real contrast and a 10.5px tracked eyebrow real weight. Prices are Fraunces too, in tabular figures, German locale: 1.298,00 €.

Dark inverts the button

In light, amber is the dark thing and carries white. In dark the hue lifts to #F2A25F, where white would sit at 2.08:1 — so the primary button's ink flips to espresso at 8.19:1. Elevation flips too: four surface steps instead of shadows.