LearnRep brand system
Tokens, surface rules, and product components for the CLI, docs, landing page, and signed-in app.
Canonical palette
01 / Product UI system
Good morning, Thomas
Workbook mode / focused review
12
Day streak
Daily review loop
84%
Avg score
+9 pts this week
31
Saved slips
Library ready
Today
Practice slips
React hooks recall
SavedTypeScript generics
PrivateWhich hook prevents stale closures in this callback?
Actions
01
Notebook is the app canvas, not a decorative backdrop.
02
Teal owns persistent navigation and product framing.
03
Paper panels hold workbook tasks, quiz rows, and dense lists.
04
Yolk is an action and reward color, not the whole page.
05
Blue and cobalt can carry quiz previews or focused demo areas.
02 / Logo system
Wordmark
SVGUsage rules
- XNever stretch, skew, or rotate. Scale proportionally only.
- XMinimum height: 24 px for the icon mark.
- XMaintain clear space equal to 1x the icon height on all sides.
- XDo not recolor. Use one of the approved variants above.
- XDo not apply drop shadows, glows, gradients, or extra effects.
03 / Colors
Core brand
Supporting accents
Semantic darks
04 / Typography
Aa Bb Gg Qq 01
Geist Sans
UI and body text
lr generate "hooks"
Geist Mono
Code, terminal, labels
Rr Oo Uu 0123
Space Grotesk
Product headings
$ npm install -g
Space Mono
Dense mono labels
LearnRep
Bowlby One SC
Display moments only
Display
48 / 700 / 1.1lh
Learning reps
Heading
24 / 700 / 1.25lh
React Hooks Deep Dive
Subhead
16 / 700 / 1.4lh
Generated 5 questions
Body
14 / 400 / 1.6lh
Paste the URL in your browser to start the quiz.
Caption
12 / 400 / 1.5lh
TOPIC / MEDIUM / 5 QUESTIONS
05 / Voice and tone
Direct
Do
“lr generate "react hooks"”
Do not
“Please consider utilizing our generate command for the React Hooks topic”
Curious
Do
“What's your weakest topic? Find out.”
Do not
“Our AI-powered platform provides comprehensive learning insights”
No hype
Do
“A live quiz URL in seconds.”
Do not
“Revolutionary AI-powered learning transformation engine”