Dark Mode Isn't a Feature, It's a Vibe

How Flott's design language went from 'material design clone' to something that actually feels like a training companion — and the design decisions behind it.

Most training apps look the same. White background. Blue accent. Cards with rounded corners. Material Design defaults. Functional? Sure. Memorable? Not even close.

I didn’t want Flott to look like a settings page with fitness data. I wanted it to feel like a tool that belongs in your training kit — next to your watch, your shoes, your foam roller. Something with texture.

Here’s how the design language came together.

Start with dark

The first decision was the easiest: dark mode is the default. Not an option. Not a toggle. The default.

Why? Because training apps are checked at two times of day: early morning (before a run) and late evening (reviewing the day). Both of those moments have something in common — you don’t want a white screen blasting your retinas.

🌅

6am check

🌙

10pm review

Dark

Both want this

But dark mode isn’t just “make the background black.” The worst dark themes use #000000 backgrounds with stark white text — high contrast that’s more fatiguing than light mode. Flott uses a deep navy (#0D0D1A) with layered surface tones that create depth without harshness.

lightbulb Depth without borders

Instead of 1px borders to separate sections, Flott uses background tone shifts — subtle changes from surface to surface-container to surface-container-high. Your eye reads the hierarchy without conscious effort. No dividers needed.

Three colours, three sports

The colour palette came from a single constraint: each sport needs its own identity at a glance.

Sport	Colour	Hex	Feel
Running	Hot pink	`#FF2D78`	Energy, urgency, heartbeat
Cycling	Cyan	`#00E5FF`	Speed, flow, open road
Strength	Violet	`#B47AFF`	Control, power, focus

palette The three sport accent colours on dark background

These aren’t arbitrary. Pink reads as “active, intense” — it’s your primary colour, your running colour. Cyan is cool and fast — it’s the cycling accent. Violet is controlled and deliberate — strength work.

When you glance at your weekly load chart, you can instantly see the composition of your week by colour. No labels needed.

Flotti

I'm the only character who uses all three colours. My mood bubble border? Depends on the context. Running analysis? Pink. Ride review? Cyan. General coaching? Violet. I'm versatile like that.

Typography: Nunito for drama, Jakarta for clarity

Two typefaces. That’s it. No type soup.

Nunito (weight 900) handles headlines and big display numbers — the stuff you read from across the room. It’s round, bold, and friendly without being childish.

Plus Jakarta Sans handles everything else — body text, labels, captions. Clean, professional, excellent at small sizes.

tips_and_updates One underrated detail

All numbers use tabular figures — fixed-width digits that align vertically. When your pace shows 5:12 next to 4:58, the colons and digits line up perfectly. It sounds trivial. It makes charts and data cards look 10x cleaner.

Sharp corners, soft feelings

The border radius in Flott is deliberately tight — 0.125rem default, 0.25rem for larger elements. Almost sharp. This was a conscious rejection of the “everything is a rounded pill” trend in modern mobile apps.

Why? Because training data is precise. Your pace was 4:52/km. Your heart rate peaked at 171. Your training load was 67. The visual language should match — clean edges, controlled spacing, no unnecessary softness.

phone_iphone Flott card components — tight radius, clean edges

The only rounded-full elements are status dots and pill chips — small, functional elements where a circle is the natural shape.

The glass header

Every screen has a fixed header that uses a backdrop-blur glass effect — a translucent dark surface that lets content scroll behind it. This serves two purposes:

Anchors the screen. You always know where you are.
Creates depth. The blur layer sits above the content, creating a real sense of spatial hierarchy.

warning Performance note

backdrop-filter: blur() can be expensive on older Android devices. Flott limits the blur to the header area only and uses a semi-transparent fallback if the device can't handle it. Glass effects are great until they make the app stutter.

Designing for one user

Here’s the biggest luxury of building for yourself: you don’t need to A/B test anything. No focus groups. No committee reviews. No “but what if the user prefers light mode?”

I use this app at 6am with bleary eyes and sweaty hands. I use it at 10pm lying on the couch. The design serves those moments. Hot pink on dark navy pops in both conditions. The touch targets are big enough for post-run fingers. The information hierarchy puts today’s training status front and centre.

Flotti

I live inside this design. My mood bubble, my chat overlay, my dashboard card — they all feel like they belong here. Not pasted on top. Try putting me in a white Material Design app and I'd look lost.

That said — light mode exists. It’s there for outdoor use when the screen needs to compete with sunlight. But it’s the backup, not the main event.

The takeaway

Design isn't decoration — it's how the app feels when you use it half-awake at 6am. Dark navy, sport-coded colours, tight radii, and no visual clutter make Flott feel like a precision training tool, not another generic fitness dashboard.