Brand Guidelines
One small move. Every single day.
HabitsCube · 2026
One small move. Every single day.
HabitsCube is built on three pillars that define every design decision, every word, and every interaction in the app.
To make the daily practice of self-improvement feel achievable, joyful, and worth returning to — one small move at a time.
Every tap moves you forward. Progress is always visible. You will always be able to see how far you have come.
Playful discipline. Visible progress. Earned celebration. Quiet encouragement. We never lecture — we celebrate.
The HabitsCube logo is a 2×2 diamond grid referencing a Rubik's Cube face. Two solid diamond tiles represent completed habits in vibrant colour. Two dashed outlines represent habits yet to be done — the day is still in progress. Three colour variants are available for different contexts.
The colour system draws directly from the six faces of a Rubik's Cube. Each habit is assigned one of six vivid tile colours. Undone habits appear in dark grey and transform into their assigned colour upon completion.
Primary Brand Colours
The primary logo uses red and blue. Two alternate colour schemes — orange & blue, and pink & yellow — are available for campaigns and seasonal contexts.
Alternate A — Orange & Blue
Alternate B — Pink & Yellow
Habit Tile Palette
Structural Palette
Two typefaces create a deliberate contrast: a warm, expressive serif for emotional moments and a precise, modern sans-serif for all UI text.
Used for motivational quotes, the hero slogan, and empty-state messages. Its warmth and personality create moments of genuine encouragement.
Used for all interface text: labels, buttons, navigation, captions, and the wordmark. Clean, legible, and highly versatile across all weights.
| Token | Size / Weight | Typeface | Sample | Usage |
|---|---|---|---|---|
| --type-quote | 22sp / Italic | DM Serif Display | "Every day counts." | Motivational quotes |
| --type-headline | 28sp / 800 | Inter | Full Face! | Celebration headlines |
| --type-badge | 17sp / 700 | Inter | Weekly Solver | Badge names |
| --type-tile | 15sp / 500 | Inter | Morning Run | Habit tile labels |
| --type-badge-sub | 13sp / 400 | Inter | 7 consecutive days | Badge descriptions |
| --type-section | 13sp / 600 ALL CAPS | Inter | Done · 3 of 6 | Section headers |
| --type-caption | 11sp / 400 | Inter | Tap to mark complete | Captions, fine print |
The HabitsCube interface is built from modular components that work together to create a cohesive user experience. Below are the four primary screens showing the app in action.
All icons follow the Solar Linear style: 1.5px stroke width, rounded caps and joins, geometric curves. No fills, no gradients, no shadows. Icons are legible from 16px to 64px.
No gradients, shadows, or 3D effects. Solid strokes only.
Consistent stroke weight across the entire icon set.
stroke-linecap: round; stroke-linejoin: round throughout.
Orange, blue, green, yellow, or red — never grey or white alone.
Designed on a 28×28 viewBox. Scale to 16px–64px without quality loss.
All icons delivered as inline SVG. No PNG, no icon fonts.
Badges are earned as the user progresses. Each uses a flat SVG icon inside a solid-colour rounded square — zero gradients, zero 3D effects, zero shadows. Locked badges are shown at reduced opacity.
Completed your first habit
A full week of focus
30 days consistent
All habits in one day
7 consecutive days
Added 5 habits
14-day streak
Locked
All animations use spring physics for a natural, physical feel. Celebrations are brief and always dismissible. The Reduce Motion system setting replaces all spring animations with 250ms crossfades.
Habit Completion Sequence
Tile scales to 0.94 on touch down.
80ms · springRadial fill from tap point, grey → vibrant colour.
220ms · ease-outTile arcs upward to Done section with spring physics.
380ms · spring(0.6, 0.8)Tile settles with 8% overshoot.
180ms · springMedium-weight haptic at colour reveal moment.
UIImpactFeedbackGeneratorCelebration Timings
| Trigger | Effect | Duration |
|---|---|---|
| 1st habit done | Confetti burst | 2.5s |
| 3rd habit done | Tile stack animation | 2.0s |
| All habits done | Rainbow shimmer | 3.0s |
| Badge earned | Badge flip reveal | 2.5s |
When the system Reduce Motion setting is enabled, all spring animations are replaced with 250ms opacity crossfades. No content is lost — only the motion changes.
HabitsCube speaks in short, direct sentences. Warm and encouraging — never lecturing, never sycophantic. We celebrate without being loud about it.
| Context | ✓ Say this | ✕ Not this |
|---|---|---|
| Empty state | "Your day is a blank canvas. Add your first habit." | "You haven't added any habits yet. Please get started." |
| First completion | "First one down. The rest will follow." | "Great job! You completed your first habit! Keep it up!" |
| All habits done | "Full Face. Every tile, every colour. Perfect day." | "Congratulations! You've completed all your habits today!" |
| Streak reminder | "You're on a 5-day streak. Don't break the cube." | "Don't forget to complete your habits to maintain your streak!" |
| Badge earned | "Weekly Solver — 7 consecutive days." | "Achievement Unlocked: Weekly Solver! You did it!" |
Accessibility is not an afterthought. Every design decision is validated against WCAG AA standards, and the app supports Dynamic Type, Reduce Motion, and full screen reader navigation.
All tile label text meets WCAG AA (4.5:1 minimum). Dark text on yellow and white tiles; white text on all others.
Minimum 44×44dp for all interactive elements, including the undo zone in the top-left corner of completed tiles.
All text uses scalable sp units. Layouts reflow gracefully up to 200% text size. Tile labels truncate with ellipsis at extreme sizes.
All spring animations replaced with 250ms crossfades when the system Reduce Motion setting is enabled. No content is lost.
Tiles announce: "[Habit name], [done/not done], double-tap to [complete/undo]." Sections announce progress counts.
Tile labels and checkmarks ensure distinguishability. Colour is never the sole means of conveying information.
All spacing is based on an 8dp grid. Tiles are always perfect squares — their width and height are equal. The 3-column tile grid maintains equal gaps on all sides.
All spacing tokens are multiples of 8dp. Never use odd values.
Equal gap between all tiles in the 3-column grid.
Horizontal padding on all screens. Consistent edge-to-edge spacing.
Vertical space between Done and To Do sections.