Live updates use red dots and a quiet vertical rule
Urgency stays small, precise and unmistakable.
LiveA catalog for a Times-like system: black-on-white pages, serif story gravity, Franklin utility labels, hairline grids, measured blue actions, breaking-red signals, and compact Games modules.
The system creates authority through type hierarchy and editorial density, with color reserved for signals and action.
Urgency stays small, precise and unmistakable.
LiveThe playful product lives inside a restrained Times frame.
GamesCheltenham prose and white Franklin links create the premium close.
Offer#121212Main ink and institutional action.
#346EB7Links, focus and conversion action.
#205493Blue hover response.
#1B4E8APressed blue state.
#FFFFFFDefault editorial background.
#F8F8F8Quiet secondary band.
#EBEBEBMedia skeleton blocks.
#333333Compact raised notice.
#363636Secondary dense copy.
#5A5A5ADecks and summaries.
#727272Credits and metadata.
#DFDFDFDefault hairline rule.
#D0021BLive and urgent news.
#E85D04Developing/warning signal.
#FBD300Puzzle tile signature.
#B4A8FFGames category accent.
A headline-first editorial module with rules instead of a box shadow.
Continue readingSmall cards keep metadata tight and let the headline carry visual weight.
4 min readA little radius and brighter color are allowed inside puzzle contexts.
Dark, confident and typographic, with white Franklin links.
View plansAn error occurred, please try again.
Rectangular image placeholders preserve editorial rhythm.
Horizontal taxonomy uses Franklin labels and understated scroll behavior.
A compact story stack with a square thumbnail.
2pxsnackbar
3pxbuttons, inputs
6pxGames cards
8pxproduct strips
9999pxpills and icons
This brand uses flat surfaces. Depth comes from rules, contrast and type hierarchy, with shadows reserved for small notices and Games buttons.
No shadow. 1px border or rule.
0 1px 2px rgba(0,0,0,.25)
0 7px 0 0 games blue.
:root {
--brand-primary: #121212;
--brand-accent: #346EB7;
--brand-ink: #121212;
--brand-body: #363636;
--brand-muted: #5A5A5A;
--brand-canvas: #FFFFFF;
--brand-surface-alt: #F8F8F8;
--brand-border: #DFDFDF;
--brand-border-strong: #121212;
--brand-breaking: #D0021B;
--brand-games-blue: #2860D8;
--brand-games-yellow: #FBD300;
--font-display: Georgia, "Times New Roman", Times, serif;
--font-sans: Arial, Helvetica, sans-serif;
--radius-sm: 2px;
--radius-md: 3px;
--radius-lg: 6px;
--radius-pill: 9999px;
--space-md: 16px;
--space-section: 40px;
--shadow-snackbar: 0 1px 2px rgba(0,0,0,0.25);
--shadow-games: 0 7px 0 0 var(--brand-games-blue);
}