Brand
Midnight Navy
#071a35header, hero, dark surfacesNavy 2
#0e2747subnav, dark cards, footersNavy 3
#173458active tab on navyDeep Navy
#0f2a52logo colorwayTeal
#22c7c7the accent: buttons, active, progressTeal text
#0c6f6flinks and teal words on lightTeal tint
#e6f8f8selected rows, tile 1Garnish and status
Copper
#c96a2afill or large typeCopper text
#a8531csmall text, 5.4:1Gold
#d4af37favorite star onlyGood
#15803dmic listeningWarn
#b45309no inputBad
#dc2626muted, errorNeutrals
Canvas
#f4f6f8page backgroundSurface
#ffffffcardsInk
#0f1f38headings, primary textBody
#4b5d78body text, 6.7:1Muted
#5f7291meta and kickers, 4.9:1Inactive
#8d9db3unchecked borders, inputsTrack
#cfd6e0progress trackNav text
#9db2ceon navy, 8:1Light
#f5f7fatext on navyLevels
Beginner
#237a58on #e3f4ecIntermediate
#a8531con #fbeadfAdvanced
#5b52c9on #ebe8faTile pastels
Tile 1
#e6f8f8Tile 2
#fbeadfTile 3
#ebe8faTile 4
#e3f4ecTile 5
#fdf3d6Tile 6
#e8eef6Rules
DoAt most two dark values per screen. Navy for the frame, white for the work.
DoText is at least 4.5:1. Muted
#5f7291 is the floor; the lighter #7d8ea8 is for dividers and decoration only.DoReserve teal for things you can press or that show state. Copper never does interactive work.
Don'tUse gradients, glows, or textures on brand surfaces. Flat color only.
Don'tPut teal text on navy for body copy; teal on navy is for the active nav item and controls.
Don'tUse gold anywhere except the favorite star.
Approximate Pantone matches; confirm with your printer: Midnight Navy 282 C, Teal 3252 C, Copper 7579 C. Use Black for one-color jobs.
Tokens
All values ship as CSS custom properties in Design System/tokens/colors.css, with semantic aliases (--accent, --text-muted, --level-beginner) that components read.
@import "Design System/styles.css";
.button { background: var(--accent); color: var(--on-accent); }
.meta { color: var(--text-muted); }