A voxel sculpture, in pastel.
Monument Valley palette. Nunito 600 throughout. Every panel is warm glass floating above a live 3D field — the scene is the screen, and the chrome never wins.
Brand
A voxel heart built from dark + red cubes, with a single pink "cubelet" off-centre — the merge gameplay reduced to one frame. The icon is the brand statement; everything else stays quiet.
One frame of gameplay, scaled to a tile.
A heart shape made of red cubes, dark anti-cubes on the
outside, and one pink cube — the "cubelet" that gives
the game its name and its merge mechanic. Source:
public/icon-512.png.
App icon · sizes
Color
Monument Valley Pastel. Three warm-cream backgrounds, two levels of warm glass, three tiers of espresso text, and a seven-stop cube swatch. No grey, ever — even shadows are warm brown.
Backgrounds
Glass surfaces
Text — warm espresso
The seven cube colours
Gradients
Palette variants
Three full palettes ship in code, swapped at runtime via
body[data-palette="…"]. Adding a variant only
requires re-binding the tokens you want to change — usually
the three backgrounds and one or two cube hues.
base — daytime warm cream · dusk — rose plum evening · neon — misty mint (named before the aesthetic settled; cool sister of base).
Typography
Nunito at weight 600, applied on :root so every
element inherits it. Display weight (800) is reserved for
the score and titles. The rounded letterforms match the
rounded cubes.
Spacing
Friendly base-4 scale. Generous on the wide end — glass cards breathe.
Radius
Soft on glass, soft on chips — never sharp.
Shadow
All warm brown. Grey shadows turn the cream into beige — these shadows make the chrome feel like it's sitting in the same world as the cubes.
Glass card
The base primitive. Warm-tinted translucent fill, 1px hairline, radius 18, soft-warm shadow, plus a 1px white inset highlight at the top edge to fake the reflection.
Lightweight
glass-bg, sits over the field
Settings-strength
glass-bg-strong, full panels
Buttons
Primary uses the g-prism gradient (coral →
magenta → violet). Glass for secondary, ghost for tertiary.
Pill variant for big "Play" CTAs.
Variants
Pill (start-screen CTA)
Score HUD
The floating pill at the top of the screen. Strong glass for
legibility over the busy 3D field, score in display-800, the
multiplier in g-warm.
Modifier picker
Three glass tiles between game phases — pick a perk before
the next wave. Hover/tap glow uses sh-glow-violet.
Multiplier
2× scoring for the next 30 cubes.
Clear row
Wipe the bottom row and reset combo.
Slow time
Halve drop speed for 15 seconds.
Awards
Earned badges fill with g-warm; locked badges
sit as desaturated glass discs. Names in micro-11 caps.
Cube colours · in 3D
These are the actual cubes dropped onto the field, with the watercolour shading recipe: a 135° light gradient on top, a soft inset shadow at the bottom, and a warm drop shadow beneath.
Start screen — assembled
The system composed into the actual start screen. Logo, primary "Start" pill, score HUD floating top, glass nav buttons below.
Doing it wrong
Things that will look out of place in Cubelets.
Cover the play field with a solid panel. Glass only — the player must always see the cubes behind the menu.
Use grey or cool shadows. All drop shadows are warm brown (rgba(140,80,60,…)); grey turns the cream into beige.
Use saturated UI fills. Saturated colour belongs to the cubes. Even the primary CTA uses the prism gradient, not a flat hue.
Switch font weight inside body copy. Nunito 600 everywhere; only Display (800) is a separate weight.
Reach for --c-* tokens — never raw hex. A new screen must work in base, dusk, and neon.
Use the prism gradient for "this is the brand" moments — the logotype, the primary play button, the loading hero.