A hard-news editorial system on flat paper: dense Roboto headline stacks, hairline rules instead of shadows, and photography doing the visual work. One saturated orange signs the masthead logo block and every section-eyebrow bar; a dedicated live-red marks breaking coverage with badges, bands, and timeline dots; actions are compact black pills. The corporate network pages carry the same identity onto a near-black canvas with royal-indigo panels, gold rules, amber links, and teal and crimson section rails.
Roboto carries the entire system — news and corporate alike — with a deliberately wide weight spread: 300-weight uppercase eyebrows, 700-weight headline tiers, and 900-weight urgent labels. Letter-spacing stays at 0 everywhere.
8px base with tight 2/4px steps. News density keeps gaps small; the newsletter card pads at xl (20px); network sections breathe at xxl (24px) and beyond.
A bimodal scale: imagery and badges stay near-square (2-10px) while every control is a capsule (18-22px, full circles for icons).
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 480px | Full-width media; pills persist at compact size |
| Mobile-lg | 600px | Single column; thumbnails shift beside headlines |
| Tablet | 768–992px | Nav condenses; carousels show fewer cards |
| Laptop | 1024px | Rail folds under; grids step to 2-up |
| Desktop | 1280px | Full news grid with right rail |
Touch targets: pills pad 6×17 around 16px labels — keep row spacing so targets clear 44×44; timeline items and ranked rows are full-width tap zones. Collapsing: the nav collapses to hamburger while the logo block and LIVE pill persist; news grids collapse column-by-column to the mobile feed; the live timeline keeps its dot rail at every width; network portrait grids step 4 → 2 → 1 with rails moving above the grid.