Foundations
Shape, borders, and elevation
The new app favors small radii and quiet borders; marketing keeps more expressive framing.
On this page
Observed geometry
| Family | Treatment |
|---|---|
| UI buttons, navigation items, selected lesson rows | 8px radii |
| Settings panels, builder frame, video player | 12px radii |
| Public course media | 16px radius and soft shadow |
| Email authentication card | 20px radius |
| Status badge | 6px radius with explicit status text |
| Theme track / thumb | 8px / 5px radii |
| Remaining legacy controls | Pill ToggleField and course progress; larger course-information tab wrapper |
| Marketing | Rounded feature panels, pill CTAs, and offset color backdrops |
Use geometry in context
Reuse the actual component’s treatment rather than flattening every radius into a new token. The documentation shell remains in the portfolio’s square-cornered visual language. App radii and marketing colors appear inside specimens and token documentation.
Borders are not sufficient state indicators
The subtle surface border has less than 3:1 contrast against adjacent surfaces in both app themes. Active rows also use a fill, accent border, stronger text, and programmatic current/pressed state. New controls should not rely on the quiet border alone.
Source references
| File | Responsibility |
|---|---|
| src/app/globals.css | App geometry and active treatments |
| marketing/src/components/FeatureBlock.tsx | Marketing framing |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0