Foundations
Tokens & Standards
One source of truth for the newsroom interface. Editorial restraint set in Anek Latin and Anek Malayalam, with the MediaOne blue as the single accent. Every token here lives in src/styles/app.css — change it there and it propagates everywhere.
Typography
Two metrically matched faces carry the whole system. Latin leads the stack; Malayalam falls through per-glyph, so mixed lines stay on one baseline. Size, line-height, and weight are fixed per token — never set ad hoc in markup.
Anek Latin
AaBbGg 0123
The press guards democracy.
Anek Malayalam
അആഇ ൦൧൨൩
മാധ്യമം ജനാധിപത്യത്തിന്റെ കാവലാൾ.
3.5rem · 1.06 · 700
Cover splash, system hero
വാർത്ത ലോകത്തെ മാറ്റുന്നു
2.75rem · 1.12 · 700
Lead story headline
വാർത്ത ലോകത്തെ മാറ്റുന്നു
1.875rem · 1.2 · 700
Section feature
വാർത്ത ലോകത്തെ മാറ്റുന്നു
1.5rem · 1.27 · 600
Section heading
വാർത്ത ലോകത്തെ മാറ്റുന്നു
1.125rem · 1.34 · 600
Card / list headline
വാർത്ത ലോകത്തെ മാറ്റുന്നു
1.1875rem · 1.62 · 400
Article lead paragraph
വാർത്ത ലോകത്തെ മാറ്റുന്നു
1.0625rem · 1.72 · 400
Long-form body
വാർത്ത ലോകത്തെ മാറ്റുന്നു
0.875rem · 1.4 · 600
Navigation, links
വാർത്ത ലോകത്തെ മാറ്റുന്നു
0.8125rem · 1.5 · 500
Timestamps, bylines
0.75rem · 1.45 · 400
Fine print, captions
വാർത്ത ലോകത്തെ മാറ്റുന്നു
Category Eyebrow
Color
Cool navy and slate neutrals matched to mediaoneonline.com, never pure black or white. The MediaOne blue (#166bc0) over a navy ink (#2e4164) is the only chromatic voice, reserved for eyebrows, links, hover, and the masthead rule. Values are OKLCH so lightness and chroma stay perceptually even.
Neutrals
0.376 0.065 262
Headlines, body, footer — navy #2e4164
0.52 0.018 256
Secondary text
0.555 0.013 256
Timestamps, captions
0.905 0.006 250
Hairline dividers
0.965 0.004 250
Soft bands, hovers
0.988 0.002 250
Page canvas
Accent & Dark
0.43 0.123 254
Hover / pressed
0.527 0.153 253
MediaOne blue #166bc0 — accent
0.68 0.125 245
Blue on dark
0.145 0.018 262
Dark-mode canvas — Radix-style near-black
0.195 0.022 262
Dark-mode cards / placeholders
0.245 0.026 262
Dark-mode hover / overlay
Do
Don't
Space & Geometry
A 4px base unit, a 1280px editorial measure, square corners, and no shadows. Elevation is a single hairline. Surfaces meet with rules, not drop-shadows.
Spacing — 4px base
Vary rhythm by hierarchy. Uniform padding everywhere reads as monotony.
Geometry & Elevation
Square, hairline
Components
The newsroom's working parts, built only from the tokens above. Cards are the exception, not the default — most content is hairline-separated rows.
Category Labels
Section Header
Kerala
View allFeature Lockup · StoryListItem
size="lg" leads a listing;
size="md" runs denser. The kicker takes an optional
href — a programme, a sub-section, whatever published it.
Ad Slot
Composition
The interface is built in three layers. Atoms set a single decision (a kicker, a timestamp, one headline size). Blocks compose atoms into a story unit. Patterns arrange blocks into a page. Build by composing these — never re-style markup ad hoc. The full set is rendered live in the kitchen sink →
Atoms · ui/
Kicker · MetaRow · Headline · Media · Badge · Pulse · SectionHeading
ഒരു തലക്കെട്ട് ആറ്റം
Blocks · news/
StoryCard · StoryRow · OverlayStory · NumberedList · Timeline · PromoGrid
Video: VideoThumb · VideoCard · VideoGrid · ShortsRail · VideoHero · VideoFeature · VideoPlayer
Patterns · pages
Hero + rail · Featured band · Most read + live
Anatomy · StoryCard = Media + Kicker + Headline + meta
Pattern · Hero + rail (as used on /home/ideal)
Pattern · Editorial Shelf — Columns Variant (as used for /shelf)
Shelf
In DepthPattern · Editorial Shelf — Lists Variant (as used for /kerala)
Kerala
Kerala News
കെപിസിസി പ്രസിഡന്റ് സ്ഥാനം ലക്ഷ്യമിട്ട് ജോസഫ് വാഴക്കൻ
പൂർണ്ണമായും പാർട്ടിക്ക് വേണ്ടി പ്രവർത്തിക്കാൻ കഴിയുന്ന ഒരു സമയമാണിത്. മറ്റ് ചുമതലകളൊന്നുമില്ലെന്നും ഡൽഹിയിലെത്തിയ ജോസഫ് വാഴക്കൻ പറഞ്ഞു
വീര്യം കുറഞ്ഞ മദ്യത്തിന്റെ നികുതി കുറച്ച തീരുമാനം പിൻവലിക്കണം -കാന്തപുരം
ഫാസ്ടാഗിൽ തർക്കം; വെട്ടിച്ചിറ ടോൾപ്ലാസയിൽ ജീവനക്കാരും യാത്രക്കാരും ഏറ്റുമുട്ടി
Pattern · Asymmetric Shelf — Magazine Variant
Top News
Featured Featuresകെപിസിസി പ്രസിഡന്റ് സ്ഥാനം ലക്ഷ്യമിട്ട് ജോസഫ് വാഴക്കൻ
പൂർണ്ണമായും പാർട്ടിക്ക് വേണ്ടി പ്രവർത്തിക്കാൻ കഴിയുന്ന ഒരു സമയമാണിത്. മറ്റ് ചുമതലകളൊന്നുമില്ലെന്നും ഡൽഹിയിലെത്തിയ ജോസഫ് വാഴക്കൻ പറഞ്ഞു
1:15 PM
വീര്യം കുറഞ്ഞ മദ്യത്തിന്റെ നികുതി കുറച്ച തീരുമാനം പിൻവലിക്കണം -കാന്തപുരം
ഫാസ്ടാഗിൽ തർക്കം; വെട്ടിച്ചിറ ടോൾപ്ലാസയിൽ ജീവനക്കാരും യാത്രക്കാരും ഏറ്റുമുട്ടി
16കാരന്റെ മുഖത്തടിച്ച സംഭവം; ഞാറക്കൽ എസ്ഐഐക്കെതിരെ കൂടുതൽ പരാതി
സെക്രട്ടേറിയേറ്റ് മാർച്ചിനിടെ ബ്ലേഡ് കൊണ്ടുവന്ന എസ്എഫ്ഐ പ്രവർത്തകനെ തിരിച്ചറിഞ്ഞെന്ന് പോലീസ്
Pattern · Category Columns Shelf — 4-Column Category Grid
Pattern · Top Videos Shelf — Full-Bleed Video Grid
Do
Don't