11:52 IST · Newsroom
For the build team
Design system & handoff spec
Every token, component and compliance rule used across the templates. Values here are the source of truth, name Figma variables to match so design and code never drift apart.
1. Colour
11 tokens · WCAG AA verified on --bw-bgBackground
--bw-bg · #0D1B2ABackground deep
--bw-bg-deep · #0A1521Card
--bw-card · #102034Line
--bw-line · #1E3450Bitcoin orange
--bw-orange · #F7931AAccent blue
--bw-blue · #1E88E5Positive
--bw-green · #2ECC71Negative
--bw-red · #E74C3CText primary
--bw-white · #FFFFFFText body
--bw-light · #B4C3DCText secondary
--bw-mid · #8FA1C0Text dim
--bw-dim · #7A8EB0RuleOrange is reserved for editorial authority: live indicators, section rules, key-takeaway blocks and primary actions. Paid inventory never uses it, press release and sponsored chips use
--bw-mid on a neutral wash so the reader can distinguish bought placement from earned coverage at a glance. Do not recolour #F7931A; it matches the logo.2. Typography
Montserrat for interface · Source Serif 4 for reading--fs-5xl · 58pxMontserrat 600 / −0.03em
Newsroom.
--fs-4xl · 46pxLead headline
Korea's first Bitcoin treasury starts mining
--fs-3xl · 36pxArticle H1, page title
Germany's tax rule ends
--fs-xl · 22pxSection heading, pull quote
Exclusive Interviews
17px / 1.72Source Serif 4 400 · body copy
Article body sets in a serif because readers spend minutes here, not seconds. Measure is capped at 38em, roughly 72 characters, which is where reading speed peaks. Interface text stays in Montserrat so the two never blur together.
--fs-2xs · 11pxChips, timestamps, ad labels
Newsroom Press Release Breaking 11:52 IST
RuleTimestamps, prices and any tabular figure use IBM Plex Mono with
font-variant-numeric: tabular-nums, so digits don't jitter when the ticker updates.3. Grid & Spacing
--wrap · 1280px1240px of content inside 20px side gutters. Breakpoints at 1080px (rail collapses) and 720px (single column).
12 columns74px column, 32px gutter
Body · 8 cols · 816px
Rail · 4 · 392px
--rail · 392pxOne rail width on every page. It was 1.55fr/1fr on the homepage and a fixed 320px on articles, so the right-hand edge landed somewhere different on each, now it doesn't. 392px also centres a 300×250 and a 300×600 ad unit comfortably.
--band · 64pxThe single vertical gap between page sections, applied with
.band. Section spacing was previously set with inline margins that drifted between 24px and 64px.4px base scale4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80. Nothing off-scale.
Home leadBody 8 + rail 4. Below 1080px the spine stacks and loses its timeline dots.
ArticleBody 8 + rail 4, identical to the homepage. Rail is sticky at
top: 70px, clearing the sticky nav.Radius3px chips · 6px buttons and thumbnails · 10px cards and rail boxes · 16px feature panels. Hierarchy carries information; don't apply one radius to everything.
4. Signature Components
Key Takeaways
Key Takeaways
- Three to four bullets, one clause each.
- Sits above the body on every news story.
- Doubles as the meta description and the social card copy.
Built from a pattern the newsroom already uses. Promoting it to a component makes stories scannable and gives Google a clean summary block.
Latest Spine
09:04 IST · Newsroom
Hollow Dot = Older Than Two Hours
A vertical time axis rather than another card grid. Recency is the most valuable thing a news homepage can encode, so it gets its own structural device.
Newsflash Entry
11:14 IST
Headline is one line, under 90 characters, and states the fact
One or two sentences of context. Never more. If it needs a third sentence it is a story, not a flash.
| Element | Rule | Why |
|---|---|---|
| Node colour | Orange = markets · Blue = regulation · Red = security · Green = listings | Category is readable at a glance without reading a label |
| Fresh state | Orange halo on the node for the first two hours | Distinguishes new from merely recent |
| Body length | Hard cap at 2 sentences, ~56 characters measure | Anything longer belongs in Newsroom |
| Source | Mandatory primary link on every entry | A flash without a source is a rumour |
| Promotion | Developed flashes link up to the full story | Prevents two URLs competing for the same query |
| Feed height | 620px scroll on desktop, full height on mobile | Keeps the fold usable; mobile scrolling is native anyway |
Disclosure Blocks
PaidOrange left border. Press release and sponsored content.
RiskRed left border. Financial risk and "not advice" warnings.
ContextBlue left border. Editorial independence and methodology notes.
Ad Slot
AdvertisementSlot S1 · 300 × 250 MPUFirst scroll depth, sticky within the rail.
Ten named slots, A1 to N1. The label is mandatory and always reads "Advertisement", never "Sponsored", "Partner" or "Recommended", which are content labels. Height is reserved in CSS before the ad loads so nothing shifts. Full inventory and placement map on the Advertisement page.
5. Google Policy Compliance
Built into the templates, not bolted onTrust & E-E-A-T · Search Quality Rater Guidelines, YMYL
- ✓Named author on every article, linked to an author page with credentials, contact details and a full article list.
- ✓Published and modified timestamps shown separately, both machine-readable via
<time datetime>. - ✓Named reviewer on technical, legal and tax stories, a second human who checked the facts.
- ✓Linked primary sources at the foot of every news story.
- ✓Ownership and funding disclosed on About, including the absence of outside investors.
- ✓Physical address, registration number and role-based emails on Contact, a Google News publisher requirement.
- ✓Public corrections policy and corrections log, with a report link on every article.
Paid content & links · Link Spam and Site Reputation Abuse policies
- ✓All paid links carry
rel="sponsored nofollow"; affiliate links carryrel="sponsored". No exceptions, no price. - ✓Paid content is visually distinct, muted grey chips, never brand orange, and labelled above the fold on card and page.
- ✓Press Release section excluded from the Google News feed and from the primary sitemap.
- ✓No subdomain or subfolder leasing. Third parties never publish under our control.
- ✓Affiliate disclosure above the first affiliate link, not buried in the footer.
AdSense & ad placement · AdSense Program Policies, Better Ads Standards
- ✓Every unit labelled "Advertisement" in a neutral colour that can't be mistaken for a heading.
- ✓Height reserved before load so ads cannot cause layout shift.
- ✓One above-the-fold unit only, the header banner, capped at 90px desktop and 50px mobile, so the lead headline is always visible without scrolling.
- ✓Maximum four display units per page view, none inside the Learn hub, and no more than one per 800 words in-article.
- ✓Mobile anchor is dismissible and capped at 15% of viewport height, per the Better Ads Standards limit on large sticky units.
- ✓No pop-ups, interstitials, auto-play audio or countdown units.
- ✓Ads never adjacent to navigation, the header banner sits above the nav bar, never beside or below it, so no click is ambiguous.
- ✓In-feed units use a solid border and a neutral label, never the card treatment, so a reader can't mistake paid inventory for a story.
Privacy & consent · EU user consent policy, Consent Mode v2
- ✓Consent Mode v2 with
ad_storage,ad_user_data,ad_personalizationandanalytics_storageall defaulting to denied. - ✓Reject is as easy as accept, equal weight, one click, first layer.
- ✓Preferences reopenable from a permanent footer link.
- ✓Certified CMP required for EEA and UK traffic if AdSense or Ad Manager is served.
Technical & Core Web Vitals
- ✓Structured data:
NewsArticleon news,Reviewon reviews,FAQPageon Learn,Eventon events,OrganizationandPersonsitewide,BreadcrumbListeverywhere. - ✓Targets: LCP under 2.5s, INP under 200ms, CLS under 0.1, measured on a mid-range Android over 4G, not on a desktop.
- ✓Images in WebP or AVIF with explicit width and height, lazy-loaded below the fold, eager on the LCP element.
- ✓News sitemap for the last 48 hours, separate from the main sitemap. Press Release excluded from both.
- ✓Accessibility: visible focus rings, skip link, semantic landmarks, AA contrast,
prefers-reduced-motionrespected. - ✓Canonical URLs on every page, self-referencing, with syndication partners pointing back here.