01
Brand Personality
Every visual decision flows from who we are — and who we're not. This is the compass for every design choice.
We Are
- Modern
- Minimal
- Confident
- Precise
- Motivating
- Welcoming
We Are Not
- Childish
- Loud
- Cluttered
- Generic
- Overwhelming
- Pastel
The litmus test: If a design could belong to any app, it's too generic. If it feels like a children's game, it's too playful. If a conservatory student and a 16-year-old drummer would both feel at home — that's TempoTaps.
02
Colour Palette
Dark-first. High contrast. One accent that hits. Built from the app's existing visual language.
Core Palette
Void
Primary Background
#000000
Depth
Deep Background
#0A0A0F
Surface
Cards & Containers
#1C1C1E
Elevated
Elevated Surfaces
#2C2C2E
Accent & Signal
Pulse
Primary Accent — CTAs, highlights, brand
#0A84FF
Pulse Soft
Accent backgrounds, glows, hover states
#0A84FF @ 15%
Hit
Success, perfect timing, correct
#30D158
Miss
Error, missed beat, alerts
#FF453A
Text & UI
Pure
Primary text, headlines
#FFFFFF
Mist
Body text, descriptions
#AEAEB2
Ghost
Secondary text, captions, metadata
#8E8E93
Border
Dividers, outlines, separators
#38383A
Brand Gradient
Icon gradient — #2D3561 → #1F2544 — Use for icon contexts and branded backgrounds when pure black needs more depth.
Pulse gradient — #0A84FF → #0066CC — For buttons, CTAs, and energetic accent moments.
Ratio rule: Backgrounds should be 80-90% dark tones. Pulse blue is the 10-15% that makes everything pop. When in doubt, darken. The blue should feel like a precise accent, not a flood.
03
Typography
One family. All weights. Inter — modern, geometric, available everywhere including Canva. Precision in every letterform.
Type Scale
Your Rhythm. Measured.
Sub-millisecond precision
Real songs. Real feedback. Real progress.
TempoTaps is rhythm training that actually sticks. Play the rhythm of real songs — pop, jazz, metal, classical — and receive instant, precise feedback with scores and star ratings.
BeatPoints: 2,847 · Accuracy: 98.3% · 4 Bars · 120 BPM
Availability
Google Fonts, Canva, system
Fallbacks
SF Pro, -apple-system, sans-serif
Why Inter
Geometric precision, excellent at small sizes, free & universal
Weight Scale
Light 300
The rhythm never lies
Regular 400
The rhythm never lies
Medium 500
The rhythm never lies
Semi 600
The rhythm never lies
Bold 700
The rhythm never lies
Extra 800
The rhythm never lies
Black 900
The rhythm never lies
Typography hierarchy: Headlines use Extra Bold (800) with tight letter-spacing (-1px). Subheadings use Bold (700). Body uses Regular (400) at comfortable line-height (1.6-1.7). Captions/data use Medium (500) with wide letter-spacing. The contrast between heavy headlines and light body creates visual rhythm — fitting for a rhythm app.
04
Visual Principles
Six rules that govern every design decision. If a design breaks one of these, it needs a very good reason.
01
Dark & Bold
TempoTaps lives in a dark visual world. Pure black or near-black backgrounds. High contrast elements. This isn't a choice — it's the brand. Dark backgrounds signal seriousness, focus, and premium quality. They also make our blue accent and white typography impossible to ignore.
02
Precise & Clean
No clutter. No unnecessary decoration. Every element earns its place. This mirrors the app's core promise — precision. Generous whitespace (or "darkspace"), strict alignment, consistent spacing. If the grid is off, the brand is off.
03
Musical DNA
Subtle rhythm and music references woven into the visual language. The X-O notation pattern from the icon. Beat grids. Waveform textures. Timing data visualisations. Never cheesy clip-art instruments — abstract, sophisticated, structural references to rhythm and sound.
04
Confident Typography
Text should hit as hard as a downbeat. Bold headlines, generous letter-spacing for labels, tight tracking for display type. Words are a design element — not just information delivery. Every heading should feel like it belongs on a poster.
05
Mobile-First
Everything is designed for a phone screen first. Readability at small sizes. Thumb-stopping visuals. High contrast that works on OLED. If it doesn't look incredible on a 6.1" iPhone, it's not done.
06
Consistent but Not Monotonous
The feed should be instantly recognisable as TempoTaps. But every post should feel fresh. Consistency comes from the system — colours, typography, spacing, principles. Variety comes from the content, layout, and creative execution within that system.
05
Logo & Icon
The X-O-O-X pattern is our visual signature. The app icon is the primary brand mark. Here's how to use it.
✗ ○ ○ ✗
TempoTaps
On Black
✗ ○ ○ ✗
TempoTaps
On Surface
✗ ○ ○ ✗
TempoTaps
On Pulse
Work in progress: The logo and icon shown here are conceptual representations. A professionally designed version is yet to be produced.
The X-O-O-X pattern is unique to TempoTaps. It represents the rhythm notation system at the heart of the app — taps (○) and rests (✗). Use it as a subtle brand element in headers, dividers, patterns, and backgrounds. It's our visual DNA.
Wordmark Style
TempoTaps
Primary wordmark — "Taps" in Pulse blue creates visual interest and highlights the action word.
TempoTaps
Mono wordmark — All white. Use when the blue accent is already present elsewhere in the design.
06
Do's & Don'ts
Quick reference for what's on-brand vs off-brand. When in doubt, check here.
Do
- Use dark backgrounds as default — black or near-black
- Let the blue accent be the star — use sparingly for maximum impact
- Keep generous negative space — let designs breathe
- Use the X-O pattern as a subtle brand texture
- Make typography bold and confident for headlines
- Show real app UI and gameplay in content
- Use data and precision as visual elements (scores, BPM, accuracy %)
- Reference rhythm visually — grids, patterns, waveforms
- Design for mobile first — always check at phone size
- Maintain consistent spacing and alignment
Don't
- Use light or white backgrounds (ever, for social content)
- Add pastel colours, warm tones, or rainbow gradients
- Use more than 2-3 colours in any single design
- Add cheesy music clip art (cartoon instruments, music notes flying around)
- Use rounded bubbly fonts or handwriting styles
- Create cluttered layouts with too many elements
- Use neon colours or "gamer aesthetic" (aggressive gradients, sharp angles)
- Make anything that looks like it's for children under 12
- Use stock photos of people playing instruments
- Add unnecessary decorative elements that don't serve the message
07
Content Formats
Standard sizes for every platform. All designs start from these dimensions.
08
Visual Voice
How TempoTaps should "feel" when someone encounters it in their feed.
👁️
First Impression
"That looks clean." "That looks serious." "That looks like a real app." — The immediate reaction should be credibility and quality. Not "fun" first. The fun reveals itself when they play.
🛑
Scroll-Stopping Moment
Bold white text on dark backgrounds stops thumbs. A flash of electric blue catches peripheral vision. Data-driven visuals ("98.3% accuracy") create curiosity. The X-O-O-X pattern is unlike anything else in the feed.
🎯
The Feeling We Want
Premium but accessible. Technical but not intimidating. Like a high-end studio tool that anyone can pick up. Think: the feeling of a well-designed instrument, not a toy.