Foundations
Spacing and target sizes
Use the measured spacing of the new workspace, editor, and learning surfaces.
On this page
Observed dimensions
| Area | Source measurement | Purpose |
|---|---|---|
| Workspace rail | 272px shared --sidebar-width | Align content, banners, and fixed navigation. |
| Top bar | 76px minimum height; 28px desktop side padding | Room for brand, context, appearance, and actions. |
| Section content | 32px desktop padding; 20px below 768px | Group a settings task. |
| Lesson editor | 28px; 22px below 1201px; 18px below 521px | Match available width without shrinking type. |
| Primary UI button | 44px minimum height; 9px 16px padding | Comfortable named actions. |
| Appearance switch | 60px minimum width, 44px minimum height | Large hit target around a compact track. |
| Email-code input | 58px high; 52px on narrow phones | One digit per comfortably sized field. |
| Action checklist | 36px square control | Smaller than the 44px house target; inspect practical touch spacing. |
Rhythm and exceptions
Use the source section, editor, resource, and toolbar wrappers first. Not every legacy control has moved to the same target dimensions: compact reorder arrows, review stars, and ToggleField need separate inspection. Do not infer a universal spacing-token package from repeated numeric values.
Source references
| File | Responsibility |
|---|---|
| src/app/globals.css | Layout and target dimensions |
| src/components/ToggleField.tsx | Compact switch dimensions |
| src/components/courses-public/logged-in/ActionChecklist.tsx | Action target |
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