Design system
Rubric
CodePrepped's shared visual and interaction criteria — so the product feels consistent the same way prep makes interviews less random. One system. Built to make you interview-ready.
Toggle light / dark in the header to preview tokens in both themes.
Foundations
What is Rubric?
A rubric is a scoring guide: shared criteria for what “good” looks like. Rubric is that idea applied to UI — tokens, type, and components that keep every screen evaluated against the same standard.
Mission fit
CodePrepped turns the unwritten interview scorecard into a daily system. Rubric does the same for the product: visible standards, fewer surprises.
What it covers
Color and type tokens in globals.css, primitives in @/components/ui, and this living page at /rubric.
Foundations
How we use it
Build product UI from Rubric primitives and tokens — don’t invent one-off styles when a token or component already exists.
- Prefer semantic tokens (
bg-primary,text-muted-foreground) over raw hex. - Compose from
@/components/ui/*— Button, Card, NativeSelect, and the rest documented below. - Readable UI uses
text-body/text-ui(≥16px). Only section eyebrows may stay smaller. - Native
<select>must useNativeSelectso the caret stays inset. - When you add or change a UI primitive, update this page in the same change.
Foundations
Logo
Two assets: the full wordmark for spacious layouts, and the R mark for mobile or condensed chrome.
Wordmark
/brand/rubric-wordmark.png— transparent PNG; desktop hero, docs headers, wide nav.
Mark
/brand/rubric-mark.png— transparent PNG; mobile, condensed layouts, favicon-adjacent uses.
Use RubricLogo (@/components/rubric/rubric-logo) to switch mark ↔ wordmark at the md breakpoint. Assets are transparent — place them on a near-black plate so the gradient stays readable in light and dark themes.
Foundations
Colors
Semantic HSL tokens in globals.css, mapped to Tailwind via @theme. Values shift with light / dark theme.
background
foreground
card
primary
secondary
muted
accent
destructive
brand-blue
brand-purple
border
ring
.brand-gradient
Interview-ready
.brand-gradient-text
Foundations
Typography
Outfit for UI (sans). JetBrains Mono for code and eyebrows (mono). Readable copy stays at ≥16px.
| Utility | Size | Use | Sample |
|---|---|---|---|
| text-body | 16px | Descriptions, paragraphs | Body copy sample |
| text-ui | 16px | Nav, chrome, controls | UI label sample |
| text-label | 12px | Rare status chips only | Soon |
| text-eyebrow | 11px | Section labels only | Foundations |
Outfit — The quick brown fox
JetBrains Mono — const ready = true;
Foundations
Accessibility pledge
We aim for WCAG 2.2 Level AA so everyone can access CodePrepped information and complete core flows.
- Contrast & color — Semantic tokens are tuned for readable contrast; don't rely on color alone to convey meaning.
- Readable type — Primary UI copy stays at ≥16px (
text-body/text-ui). - Keyboard & focus — Interactive controls expose visible focus rings (
ring). - Motion — Loading and decorative motion respect
prefers-reduced-motionwhere implemented (e.g. BrandSpinner). - Inclusive by default — Labels, accessible names, and semantic HTML on primitives so assistive tech can use the same criteria sighted users see.
Questions or gaps? Reach us via product updates — we treat accessibility as part of the rubric, not an afterthought.
Components
Primitive showcase
Live demos of every primitive in src/components/ui. New primitives belong here in the same PR.
Component
Card
Surface for grouped content. CardTitle accepts as={h1–h4}; CardDescription uses text-body.
Daily prep loop
Finish today's goal, keep your streak, earn XP.
Cards hold interactive or related content without competing with the page hierarchy.
Component
Input, Textarea & Label
Native form controls with consistent height, radius, and focus rings.
Component
NativeSelect
Prefer NativeSelect over raw select so the caret stays inset from the border.
Component
Switch
Binary preference control. Uses primary when checked.
Component
Tabs
In-page mode switching without route changes.
Component
Accordion
Radix accordion for sectioned content. Supports single or multiple open panels.
Component
Table
Tabular data with a scroll wrapper for overflow.
| Skill | Track | Stars |
|---|---|---|
| React hooks | Frontend | 3 / 5 |
| SQL joins | Fullstack | 2 / 5 |
| Prompt design | AI | 4 / 5 |
Component
Separator
Horizontal or vertical divider for grouping related content.
Above the line
Below the line
Component
Spinner & BrandSpinner
Inline Spinner for buttons; BrandSpinner for branded loading states — mark breathes while a blue→purple arc orbits (respects reduced motion).
Component
Toaster
Sonner-based toasts, themed with the app. Root layout mounts Toaster once.
Component
VideoPlayer
Mux-backed player with Rubric custom controls — seek, volume, speed, fullscreen, and keyboard shortcuts. Pass null playbackId for the coming-soon shell. Optional pause overlay (eyebrow / title / description) fades out while playing; fill stretches edge-to-edge in a sized parent. playButtonSize accepts sm | md | lg.
With playback
0:00 / 0:00
Space / K play-pause · ← → seek · ↑ ↓ volume · M mute · F fullscreen
Pause overlay
Intro
How your personal plan works
A quick tour of phases, next steps, and how to move through your plan.
0:00 / 0:00
Coming soon shell
Lesson placeholder
Video coming soon
Component
WistiaVideoPlayer
Wistia-backed player in the Rubric video shell. Player branding and controls are configured in Wistia; showCodePreppedBranding adds the approved CodePrepped badge treatment.
Wistia embed