Brand sheet
Stronger you. Better everyday.
Your brand, written down as a system. Every colour, weight and rule on this page was read off your own flyer and your own words, not chosen for you. This is the set of parts anything built for you gets made from.
Near-black ground, bone for contrast, one bronze accent. Read off your flyer. The bronze is the only colour that is allowed to shout, which is exactly why it works.
Ink
#0A0908
--ink
The ground. Everything sits on this. Warmer than pure black, which is what stops it feeling like a template.
Ink 2
#100E0C
--ink-2
Raised surfaces: cards, panels, rows.
Ink 3
#16130F
--ink-3
Inset: inputs, wells, anything recessed.
Bronze
#B4884F
--bronze
Buttons, focus rings, ticks, the number that matters. Used sparingly on purpose. A second loud colour would halve the impact of both.
Bronze light
#D9B47E
--bronze-hi
Hover, italic emphasis, peak moments.
Bronze deep
#6E5230
--bronze-lo
Pressed states, gradient shadow.
Bone
#F2EFE9
--bone
Body text on dark, and the ground of the credentials band. The cream strip on your flyer is this exact move.
Bone 2
#D8D2C6
--bone-2
Secondary copy. Present, not shouting.
Mute
#8E867A
--mute
Labels, captions, small print.
A Didone display over a geometric sans. High contrast serif for anything that carries weight, a quiet workhorse for everything else. Two faces, never a third.
Bodoni Moda
Display · headlines · numbers
AaBbCc 0123
Stronger you.
Jost
Interface · body · labels
AaBbCc 0123
Light 300 · Regular 400 · Medium 500
An RB monogram in a bronze keyline square. It works because it is the same geometry as the rest of the system: sharp corners, one hairline, nothing rounded. Clear space is one stroke width on every side, minimum size 24px.
On ink
On bone
Wordmark
Riley Boertien Fit
Bodoni Moda 500, the "Fit" in bronze italic. Use this wherever the square mark would be too small to read.
The brand doing actual work. Every corner is square, every border is one hairline, and the bronze only appears where something is done or something needs pressing.
Buttons
Hover wipes the fill in from the left. Hover one.
Input
Focus turns the hairline bronze. No glow, no rounding.
Numbers
Progress
Named steps, never a percentage. Bronze means done, the ring means you are here.
Chips
List
Personalised training plan
Diet and nutrition guidance
Weekly check-ins
Ticks are CSS-drawn, never emoji. Emoji render differently on every device and break the brand.
The bit that stops a dark palette feeling flat. Four effects, used quietly. This whole page has the grain on it, which is why the black does not look like a screen that is switched off.
Film grain
Fixed overlay at 5% opacity, overlay blend. On every surface, always.
Bronze sheen
A 115° gradient through the three bronzes. Dividers, the wordmark, a hero rule.
Hairlines
Bronze at 24% for structure, bone at 9% for quiet separation. Never a solid grey.
Ember glow
A soft radial behind one thing per screen. Saved for the moment that matters.
Taken from how you already write, on your form and your flyer. Direct, second person, no hype. The rule is simple: if you would not say it to someone in the gym, it does not go on the screen.
Speak to one person
Yours
Coaching built around you.
Not this
Empowering clients to achieve their goals.
Say the thing, then stop
Yours
Stronger you. Better everyday.
Not this
Unlock your potential and transform your life today!
Your words, not industry words
Yours
Diet and nutrition. Habits. Mental wellbeing.
Not this
Holistic lifestyle optimisation protocols.
Never claim a number you have not got
Yours
Real clients. Real results.
Not this
Lose 10kg in 6 weeks, guaranteed.
Same parts, different places. This is what the system buys you: something new can be made next week and it already looks like you.
Home screen
Under the icon: RB Fit
Notification
Check-in due
Sunday's numbers, whenever you are ready.
Email header
Riley Boertien Fit
Stronger you. Better everyday.
Everything above collapses into these. Anyone making anything for you should be able to read them in a minute and get it right.
One accent. Bronze earns its place by being rare, so never add a second bright colour.
Square corners everywhere. No rounding, on anything.
Two typefaces. Bodoni Moda and Jost. A third face breaks it.
Hairlines, not boxes. One-pixel bronze or bone lines do the structure.
Nothing invented. No client names, no timeframes, no numbers you have not actually got.