Brand & design system
The single source for how NextPrep looks. Every screen uses these tokens and components.
Logo
The mark
Three solid steps, each leaning forward and set one up and to the right of the last. A staircase and an arrow in one shape: progress, one step at a time. It reads at 16px and stands alone as the app icon.
The word
“NextPrep” in Rethink Sans semibold, sentence case, set tight. Rethink Sans is the only typeface used anywhere in NextPrep. The horizontal lockup is for bars and headers, the stacked lockup (left aligned) is for covers and large formats.
Colour
Cobalt on white or frost. White on cobalt or navy. Ink navy for single-colour print. One colour per logo, never a gradient, never a tint of cobalt over a photo.
Clear space and size
- Keep clear space equal to the height of one step (a quarter of the mark) on every side.
- Minimum sizes: mark 16px, horizontal lockup 96px wide, stacked lockup 72px wide.
- The tile (rounded cobalt square) is for app icons, favicons and avatars only.
Don't
- Redraw, rotate, stretch, outline or add effects.
- Set the word in any typeface other than Rethink Sans, or in all caps.
- Change the proportions of the steps or recolour them separately.
- Place it on busy imagery or low-contrast backgrounds.
Colour
#2449C6
Primary actions, active states, progress
#172033
Primary text
#596274
Secondary text
#E2E6ED
Borders, dividers
#F7F8FA
Secondary background
#FFFFFF
Main background
#DDF5E8
Correct (text #14683A)
#FCE8E6
Incorrect (text #A42A20)
#0B1426
Navigation, footer, dark panels
Cobalt on white measures about 7:1 and white on cobalt the same, passing WCAG AA for all text sizes. Blue is reserved for action and progress. Dark theme lifts cobalt text to #8FA8F5 on ink navy for contrast.
Typography
Rethink Sans is the only typeface, with tabular figures for numbers and timers. One scale across the product.
Spacing, radius and layout
- Spacing on a 4px base: 4, 8, 12, 16, 24, 32, 48, 64.
- Radii: 6px small controls, 10px buttons and inputs, 14px cards, 20px for marketing panels. No oversized pill cards.
- Borders 1px in Line; shadow only for floating layers (dialogs, popovers).
- Touch targets at least 44px. Content max width 64rem; reading text 42rem.
- Breakpoints: mobile first; sidebar navigation from 768px.
Components
A 24-year-old man falls on his shoulder and fractures the surgical neck of the humerus. Which nerve is most at risk, and what would you expect on examination?
Not quite. The answer is A.
Original practice item · editorial review pendingThe idea
The axillary nerve (C5–C6) wraps around the surgical neck of the humerus together with the posterior circumflex humeral vessels. It supplies deltoid and teres minor and the skin over the lower deltoid, the 'regimental badge' area.
Why each option
AAxillary nerve: weak abduction and numbness over the lateral shoulder
Correct answer. Correct. This nerve hugs the surgical neck, so the fracture or a dislocation can stretch or tear it.
BMusculocutaneous nerve: weak elbow flexion and numbness of the lateral forearm
Your answer, and why it is wrong. The musculocutaneous nerve runs through coracobrachialis, well away from the surgical neck.
CRadial nerve: wrist drop and numbness of the first dorsal web space
Why not. The radial nerve lies in the spiral groove on the shaft, so it is the nerve to think of in mid-shaft fractures.
DUlnar nerve: claw hand and numbness of the medial one and a half fingers
Why not. The ulnar nerve passes behind the medial epicondyle at the elbow, far from the shoulder.
Source: Original NextPrep sample item — pending expert review · v1
Accessibility
- Correct and incorrect are never signalled by colour alone: icons and text accompany them.
- Visible 2px cobalt focus ring on every interactive element; full keyboard use, including 1–4 or A–D for answers.
- Timers are announced as timers; dialogs take focus and close with Escape; reduced motion is respected.
- No animation in timed tests beyond a colour change.