Foundations
Typography
Editorial serif reading and operational sans-serif controls have different jobs.
On this page
Source families
| Role | Stack | Application |
|---|---|---|
| Public copy | kepler-std, Georgia, serif | Reading text and editorial voice. |
| Public display | kepler-std-display with serif fallbacks | Prominent editorial headings. |
| Public small | pacaembu-light, Arial, sans-serif | Supporting interface text and metadata. |
| Admin copy/display/small | Inter and system sans-serif fallbacks | Compact forms, lists and publishing controls. |
| Admin mono | SFMono-Regular and monospace fallbacks | Technical identifiers and code-like values. |
Hierarchy and writing
- Keep one page-level h1; use h2 for sections and h3 for list-item titles when nested below a section.
- Use title size to express importance, not to compensate for overly long copy.
- Test long story names in list rows and phone layouts; allow natural wrapping.
- A short label belongs on a control. Longer explanation belongs in the field description or adjacent help.
Font delivery and fallback
The source root loads the vkk5agl Adobe Typekit stylesheet. A team must verify the intended families are actually available in the deployed environment; a CSS family declaration alone does not guarantee delivery. Captures wait for font readiness, but fallback behavior still needs a separate slow-network review.
Source references
| File | Responsibility |
|---|---|
| app/layout.tsx | Audited Townwell implementation; use this file when extending this interface. |
| app/globals.css | Audited Townwell implementation; use this file when extending this interface. |
| components/site-shell.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin-ui.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1