Style Guide
A living reference of the colors, typography, components and primitives that make up the Clever Prep brand. Use this page as the source of truth when designing new screens.
Color palette
The full token set used across the site. Each swatch shows its CSS variable, hex value, and a usage hint.
Brand
Text
Pastels
Borders
Type scale
Every text style on the site, with the CSS variable that drives its size and the typeface in use.
Supercharge your prep
Effective guidance, real results
Built for committed students
How our process works
A small heading sitting above body copy
Personalized tutoring from the 99th percentile. Built for human beings, not algorithms.
Standard paragraph copy used across most prose blocks on the site.
Small supporting copy for captions and helper text.
Buttons
Four button styles. All share a text-swap hover effect — hover any button to see the label slide up out, replaced by an identical copy slide-in from below.
Reforma-derived shared sections
Five pure-CSS recipes that any future page can call. Live smoke test of bricks_recipes.py.
Adaptive QBank
5,000+ NBEO-style questions with explanations.
Topic mastery
Per-domain confidence scores.
Mock exams
Full-length, timed.
Personalized study plan
Tuned to your baseline and exam date.
Generic prep
One-size-fits-all study plan ignoring your weak areas.
EyeQ®
Adaptive, per-topic plan tuned to your baseline.
Right after sign-up. The diagnostic takes 30 minutes and you have a study plan the same day.
Most students hit their target percentile after 8–12 weeks of daily 60-minute sessions.
Yes. Full refund within 14 days, no questions asked.
"EyeQ® rebuilt my study habits from scratch."
"It's the only NBEO prep that respects my time."
"Hit 90th percentile after 10 weeks."
"The diagnostic alone is worth the price."
Take the diagnostic
30-minute adaptive assessment maps your strengths and weak areas.
Get your personalized plan
A daily plan tuned to your exam date and weak areas.
Study with proven tools
Adaptive QBank, content review, spaced retrieval — the three highest-leverage techniques.
Walk in confident
Full-length timed mocks under NBEO conditions.
For pre-med students
Build the foundational vision-science knowledge that wins OD-school interviews.
For optometry students
NBEO Part I prep with adaptive practice and per-topic mastery tracking.
For tutors & study groups
Cohort tracking, shared QBank, and per-student progress dashboards.
Content vetted by ODs
Every flashcard and explanation is reviewed by practicing optometrists.
Adaptive at every level
Item difficulty, study plan, and review schedule all rebalance daily.
Measured against real exams
Mock exams mirror NBEO scoring so you know exactly where you stand.
Outcomes you can predict
Published pass-rate data from real student cohorts, not vendor claims.
Component patterns
Live instances of the recurring patterns used across the site.
students helped this year
4 tutors matched in 24 hrs
I went from a 503 to a 519 in twelve weeks. My tutor met me where I was and gave me a plan I could actually stick to.
Book a free consult and we'll talk through your target score, weak areas and timeline. We typically match you with a tutor in 24 hours.
Card styles
Common surface treatments — orange CTA, ghost, navy and pastel.
Form components
Every input type with default, focused, filled, error, and disabled states. All controls share the same border, radius and focus ring.
Text input — states
Textarea & select
Selection controls
Badges, pills & ribbons
Compact status, tag and emphasis chips.
Status pills
Tag chips
Score pills & ribbons
Shadows
Four elevation levels, applied to surfaces. Use sparingly — the brand leans on borders + cream backgrounds first.
Border radii
Six radius tokens, applied to cards, buttons, badges and overlays.
Spacing scale
Spacing tokens used across containers, gaps and stacks. Bars are drawn to scale.