soft white · melon · azure

Warmth where it matters. Precision where you point.

Pomelo is a consumer product language built on quiet soft-white surfaces — a melon bloom carries the moment, an azure cue marks exactly what you've chosen.

two-hue discipline

Most of the page is nothing but soft white. Color is rationed: melon for the warm moment that matters, azure for the precise thing you selected. Two hues, used like highlighters — never confetti, never rails.

2signature hues, used with intent
1azure cue marks the active path
0decorative stripes, rails, or grids
the signature mechanic

The melon well

A warm bloom held inside a rounded module makes color structural and content-bearing — never a swatch collage. Each well carries one moment.

Warm hero moments

Melon lives in broad hero surfaces and the card that holds today's most important task — a glow, not a stripe.

melon · structural

Azure interaction cues

Selection capsules, focus rings, and the current path read cool and precise inside neutral trays.

azure · precision

Translucent depth

Cards earn their depth from opacity and soft shadow — frosted glass on soft white, not hard outlines.

opaline · material
progress & onboarding

Both hues, tied to meaning

Progress is a melon fill; the checkpoint at the head of it is azure. Vivid color only ever means something the product is doing.

Melon carries progress

Fills, warm content, and the day's headline moment.

Azure marks the cue

Checkpoints, focus rings, and selected controls.

morning readiness
family surfaces
Kitchen glow

selected · warms on motion

Backpack check

cue at the door · 07:45

calm material

Quiet surfaces, real depth

Translucent gray-white panels stack over soft white with backdrop blur and soft downward shadow. Depth comes from opacity, not from an extra hue or a hard border.

Frosted glass cards

Broad radii, soft shadow, no grey outline.

Breathing margins

Generous white keeps every color moment quiet.

how Pomelo behaves

Four rules it never breaks

01Rare colorMelon and azure are highlighters — most of every screen is soft white.
02Color meansWarm marks the moment; cool marks the choice. Nothing decorative.
03Depth, not linesOpacity and shadow build hierarchy. No rails, no grey borders.
04Calm motionControls lift 2px, tints brighten, progress expands without bounce.
ready to build

A warmer, quieter product surface.

Take the tokens, the wells, and the two-hue discipline into your own consumer app.