Inter and readable hierarchy

The redesigned app and marketing site share a locally hosted variable font, with different scales for tasks and storytelling.

On this page

Native font contract

Both repositories declare the local Inter variable TTF with weights 100–900. The app body uses Inter, ui-sans-serif, system-ui, sans-serif at 16px with 1.6 line height. Marketing uses Inter, Arial, sans-serif. Existing Geist-related variables do not override these body declarations. Font Awesome faces are for glyph icons, not prose.

Observed hierarchy

Observed hierarchy
Context	Implementation	Guidance
Workspace heading	28–36px clamp; 1.25 line height	Name the current task or collection.
Builder title	26–34px clamp, 700 weight, −.03em tracking	Preserve the course identity above the editor.
Lesson heading	24px/600 in editor; 26–34px/650 in player	Allow wrapping without fixed-height truncation.
Eyebrow	12px/700, uppercase, .1em tracking	Short contextual label, never the only page title.
Supporting copy	14–15px in controls; 18px/1.75 in course introduction	Keep instructions close to the action they explain.
Marketing hero	text-5xl → text-7xl, 900 weight, 1.05 line height	Use the source responsive heading rather than app typography.

Content and font checks

Await the actual local font before screenshots; do not silently accept a fallback.
Use complete, concrete course and lesson names. Check long titles at phone widths.
Keep numerals readable in duration, analytics, and code inputs; email-code digits use tabular numerals.
Specimen padding belongs to documentation framing and does not change the product type scale.

Source references

Source references
File	Responsibility
src/app/globals.css	App typography
marketing/src/app/globals.css	Marketing font face
marketing/src/components/HomeHero.tsx	Marketing heading scale

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.