Brand and style guide
One language for the app and the site.
Everything here is generated from the same sources the iPhone app uses: design/tokens.json for color, type, space and motion, and the piece and mark builders in design/. Change a token there and both platforms follow.
Mark
The queen from our own piece set. It is one compound path, so the line across her crown is a real cut-out that works on any background. Keep clear space of half the mark's height on every side, and don't use it smaller than 16 px.
- • Don’t redraw, outline, rotate or add effects to the queen.
- • Don’t put the mark on a busy photo; use a solid field.
- • The wordmark is outlined Archivo Expanded. Never retype it.
- • Coach blue for the mark, ink for the type, bone on dark.
Color
A near-monochrome interface of ink on chalk, so color can carry meaning. Coach blue is the brand and the color of good moves. Vermilion is danger. Every text pair meets WCAG AA in both themes. Left half of each swatch: light theme. Right half: dark.
Surfaces and ink
canvas
#F2F2EF / #0F1014
App and page background
surface
#FBFBFA / #17181D
Panels, cards, sheets
surfaceSunken
#E9E9E5 / #0B0C0F
Wells, inputs, track backgrounds
line
#DCDCD6 / #2A2B32
Hairline rules and borders
ink
#16171B / #EDECE7
Primary text
ink2
#4A4B52 / #B4B4BA
Secondary text
ink3
#66676E / #85868F
Tertiary text, placeholders, meta
Coach and meaning
coach
#2347D6 / #7B93FF
Brand and coach ink: primary actions, best moves, links
coachTint
#E3E8FB / #1C2448
Coach-tinted backgrounds
danger
#B83E0B / #FF7A45
Blunders, threats, refutations (text-safe vermilion)
dangerFill
#D1450E / #FF6A33
Vermilion for arrows, badges and meter fills
mistake
#A45805 / #FFA94D
Mistake (?) glyphs and labels
inaccuracy
#886700 / #E8C35A
Inaccuracy (?!) glyphs and labels
success
#0B785F / #43D3A8
Found the better move, good results
alt
#E69F00 / #F2B33D
Alternative-move arrows (drawn hollow)
plan
#0E9F7E / #3CCFA6
Plan arrows (drawn dashed)
weak
#A64D99 / #D488C8
Weak-square marks
Boards
heather · default#EAE9EE / #A29FB1
ash#ECEAE5 / #A8A39B
contrast#FFFFFF / #7E7C8C
Default board. Chosen because both coach-blue and vermilion arrows stay distinct from the squares under protanopia and deuteranopia simulation.
Type
Two families, both SIL Open Font License, self-hosted on the web and bundled in the app. Newsreader is the coach's voice and our headlines. Archivo does the work: interface text, numbers and notation, with its expanded cut for the wordmark and small labels. Moves use figurines from our own pieces instead of letters.
display
Newsreader 500 · 56
title
Newsreader 500 · 26
coach
Newsreader 400 · 18
title3
Archivo 600 · 19
body
Archivo 400 · 16
label
Archivo 600 · 14
notation
Archivo 500 · 15, tabular
eyebrow
Archivo Expanded 650 · 11.5
Pieces: Classic Soft
The heads of the classic pieces on slim bands, with no stands, every piece about as tall as the knight. White pieces have a thin grey outline and black pieces none; both have a soft top-to-bottom fill, a few fine detail lines and a soft shadow.
6 shapes × 2 colors, generated by design/pieces/build_pieces.py. The knight is adapted from Colin M.L. Burnett's knight under the BSD license (notice); every other piece is our own.
Board language
One timeline at a time: every arrow and mark belongs to the position on the board. Meaning is always carried by shape and glyph as well as color, so nothing depends on telling red from green.
Best move
Coach blue, solid. The move you should play.
Threat or refutation
Vermilion, with a ring around the attacker.
Plan
Dashed: an idea, not a forcing move.
Alternative
Hollow: also playable.
Target
Tint plus a dashed frame: a piece under attack.
Key square
Blue tint: where the idea happens.
Verdict badges
Blunder Mistake Inaccuracy Best move Book move
Browsing
Looking at the past is neither good nor bad, so it uses neutral ink, never blue or vermilion. Every cue has a shape: a dashed ring, a dashed chip, a fork.
Earlier position
After 3…Nf6 · the game is at 9…e4
Dashed ring and step chip
Ink 3 on the canvas, outside the board, so it stays readable on dark squares. The chip counts the move shown; tapping it goes back to live.
Dashed origin square
A move played on an earlier position waits for Play from here: the square it left is outlined.
Side lines
Taken back
10.Nd4?? c5 11.Nb5
Moves cut from the game stay in the list under the move that replaced them, view only, with their verdict glyphs.
My games
A quiet scoresheet archive and a review on the play screen's board. The review's coach card is the live card, rebuilt from the saved mistake, and Try again from here stays the primary action.
List rows
One link per row, named by a sentence. Results are words, never colors; vermilion only on the ?? glyph; blue only on the accuracy bar. Under 768 px the row drops to result and opponent over time and moves.
The Unfinished chip
A dashed ink 3 border, like the browsing ring: dashed means not settled. No result (or *): closed, abandoned or still being played.
5.Nxf7 was a blunder
Move 5 · White · winning chances down 65 points
This line ends in checkmate against you.
Your marks
Players can draw on the board while they play. Their marks are pencil, not coach: graphite or olive, an open-headed line and a square ring, so they never read as a best move or a threat.
Pencil arrow
A stroked line with an open head and a light halo. Coach arrows are always solid shapes.
Square ring
A solid rounded border, no fill. Coach targets are dashed and tinted; threats get a circle.
Two pencils
Graphite by default, olive with Shift, Alt or Cmd. The color is the player's own; it carries no meaning.
Gestures
Web: right-click and drag for an arrow, right-click a square for a ring, the same mark again removes it. Any left click, the next move or Escape clears them. iPhone: the Draw button in the Play toolbar, then drag for an arrow and tap for a ring.
Local and decorative
Marks are never saved or sent, are hidden from screen readers, and clear when the coach stops you: the coach owns the board then.
Opening practice
Pick an opening and NRV Coach steers into it, then plays what people at its level play. Opening is a main setup field and blank means Random. In the game a quiet book line says where you are: an open book while on the line, a closed book once out. Leaving the line is never danger, so it never turns vermilion.
- Sicilian Defense
On the line, Sicilian Najdorf
On the line: open book, coach blue
In book
In book, with NRV Coach’s share at its level
Out of book after 6 h3
Out of book: closed book, ink3, never vermilion
2 d4 avoids the Najdorf
Avoided before the target position
Book unavailable. NRV Coach plays on its own.
No book data (explorer down)
Opening practice
You left the line · 6.h3
Not a mistake: the coach stopped you because you asked to stay on the line. Try the book move, or play on from here.
At ~1500, players usually play , or .
The Najdorf goes here.
- 1e4c5
- 2Nf3d6
- 3d4cxd4
- 4Nxd4Nf6
- 5Nc3a6
- 6h3e5
Components
Few components, used the same way everywhere. One primary action per view, and on the coach card it is always Try again.
The coach stopped you
Mistake · Bb5
Motion and space
Motion explains what changed on the board; it is never decoration. Space follows a 4-point scale, corners stay small.
Piece move
180 ms
Ease out. Fast enough to never wait on, slow enough to follow.
Coach panel
260 ms
Rises 8 px and fades in. Never covers the board.
Line step
650–900 ms
Autoplay pace when stepping through a line.
Reduced motion
1 ms
Animations collapse to cuts when the system asks for less motion.
Voice
The coach talks like a strong friend at the board: specific, calm, brief. It names the move and the squares, says what changes, and never scolds. No hype, no emoji, no engine jargon unless you ask for it.
Say
That drops your bishop: Nxa6 simply takes it.
Oops! That move might not be optimal. 😅
Find a better move.
Unlock your potential with a smarter move!
Your winning chances went from 63% to 44%.
Evaluation: −0.84 (depth 18).
That’s it: Nxd4. Back to the game.
Amazing!!! You’re a genius! 🎉