Foundations
Shape, borders and emphasis
Document TeachKit’s existing rounded controls while keeping the portfolio shell consistent with its own square geometry.
On this page
Observed treatments
| Treatment | Where it appears | Usage |
|---|---|---|
| rounded-2xl | CourseCard, sidebar content, tabs | Large content containers |
| rounded-xl | Input, textarea, media region, phone section selector | Smaller editable or media surfaces |
| rounded-full | Save actions, resource links, progress bars | Compact actions and progress |
| rounded-md | Checklist controls and connection panels | Utility interaction surfaces |
| border and shadow-sm / hover:shadow-lg | Navigation panels and discovery cards | Subtle grouping or hover emphasis |
Interaction hierarchy
Use dark Save controls for committing an edit and turquoise for learning or connection emphasis as the source does. Avoid making a whole container appear actionable when only a child button can be activated. Preserve visible focus independently of decorative hover shadows.
These are source measurements. A reusable radius-token layer, elevation contract and complete focus specification are future consolidation work, not an existing exported package.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1