Loading page…
Internal UI Lab
Design system parity route
This page renders the shared surfaces and controls in the real Next.js app environment. It is intentionally parity-first: the goal is to make current patterns discoverable and reusable before any broader visual cleanup.
Shared surfaces
These wrappers are extracted from existing route and landing-page patterns, not newly designed components.
FrostedCard
Reused for marketing cards, fit/counter-fit callouts, and comparison panels.
FrostedCard (highlight)
Keeps the current blue-highlight treatment already used in the product.
ToolPanel
Used for calculator/tool shells and heavier interactive content.
DisclosureCard
Used for the study-place shortlist and directory sections.
NestedDisclosureCard
Reused for nested regional breakdowns and FAQ entries.
InsetPanel
Used for secondary grouped controls, booking notes, and bonus-point blocks in tools.
Shared controls
The current system still exposes most controls as class helpers. This route keeps them visible while migration work continues.
Button treatments
Form controls
Product pattern examples
These are current reusable product-facing patterns mounted on top of the shared surface layer.
FeatureCard
Used for benefit and programme-fit blocks.
FAQItem
Used for simple Q&A blocks where disclosure behavior is not needed.
ComparisonCard
- Shared shell: The current card treatment now comes from one surface wrapper.
- Variants: Highlight and negative states keep existing visual language.
Route family anchors
Phase 1 extracted the study-place family into a shared route shell with route-specific copy and metadata.
Storybook checkpoint
Storybook is deferred for now. The in-app route exists first so primitives and patterns can stabilise inside the real app environment before a second documentation system is added.
Current decision: use this route first, revisit Storybook after more primitives stabilise.