Indiatimes Brand Design System Deep Dive

1. Brand Overview

Indiatimes is a mass-market news and lifestyle destination. It’s loud without being chaotic, modern without losing its familiarity. The design language leans heavily into functional clarity — this is a site meant to be scanned quickly, not slowly savored. The audience is broad: from casual readers catching up on headlines to deep-divers into opinion pieces and lifestyle trends.

The visual vibe is utilitarian with bursts of color. The primary blue (#1976d2) is the anchor — instantly recognizable, used for key interactive elements and branding cues. This is paired with a neutral-heavy base to keep the content front and center: lots of white (#ffffff), dark charcoal (#32383e), and mid-grey (#666666). Links and accents break from this with a bright link blue (#0000ee) and an orange hover (rgb(242, 157, 56)), which adds a punch of warmth to an otherwise cool palette.

Typography is system-native — no custom Google or Adobe fonts here. The stack starts with -apple-system and falls back to Segoe UI, Roboto, Helvetica, Arial. That choice screams pragmatism: no font downloads, maximum speed, consistent rendering on every device. It’s the same philosophy you see in large-scale, high-traffic news sites — minimal overhead, global compatibility.

The layout grid is built on an 8px mental model, but it’s flexible — you see 4px, 5px, 11px, 15px, 30px. Not dogmatic, but consistent enough to keep things aligned. Breakpoints are exhaustive, covering everything from 320px mobile up to 1614px wide screens. They’re clearly tuned for a mix of mobile-first content and desktop feature layouts.

Borders are minimal, radii are small and functional (4px, 6px), with occasional full rounds (100%) for avatars/social buttons. Shadows are almost nonexistent — one low-opacity shadow found in the data. This is mostly a flat design system, relying on color and borders for depth cues.

Indiatimes’ design prioritizes clarity, speed, and adaptability — it’s a workhorse system, not a boutique aesthetic exercise. The audience, the content, and the scale explain every choice.

2. Color System

2.1 Primary Colors

The main brand color is Primary Blue #1976d2 (rgb(25, 118, 210)). It’s bold, saturated, and functional. Blue is a safe choice in news media: trust, authority, and neutrality. Compared to competitors like NDTV (red, urgency) or The Hindu (deep blue, tradition), #1976d2 feels modern but still grounded.

It appears in link states, borders, and key interactive elements. It’s paired with white text for contrast, meeting accessibility requirements for large text and UI elements.

2.2 Complete Palette

2.3 Color Relationships

The palette is cool-leaning with the exception of the orange hover state (rgb(242, 157, 56)). That orange is a functional accent — used in hover states for links. The blue–orange combination is high-contrast, visually arresting, and draws the eye to interactive elements.

Contrast ratios:

• #1976d2 on #ffffff — strong contrast, passes WCAG AA easily.
• #0000ee on #ffffff — also passes, but the bright blue can be harsh for long text.
• Orange hover on white — adequate contrast, but borderline for small text accessibility. Works fine for hover cues.

Dark mode isn’t apparent in the data. The palette is tuned for a light background environment.

2.4 Usage Guide

Works well:

• Primary Blue with white text — main buttons, CTAs.
• Charcoal text on white — body copy readability.
• Orange hover on blue or black — strong interactive cue.

Avoid:

• Orange text on white for long-form — low accessibility.
• Using both #1976d2 and #0000ee in the same context — they fight each other.
• Pale greys (#adadad, #979797) as primary text — too low contrast for readability.

3. Typography

3.1 Font Families

Primary stack: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial. This is a pure system font approach — no Google Fonts, no Adobe Fonts, no variable fonts. The only outlier is Arial used explicitly for certain button contexts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy here is utilitarian. Large headings at 24px are bold (600 or 700), sometimes uppercase for emphasis. Links at 16px and 24px depending on context, often capitalized. Captions dip to 11px and 14px — readable but compact.

No decorative display fonts — everything is about clarity and speed. Headings stand out via weight and case change, not ornate typefaces. This keeps the system visually coherent across devices and avoids load-time penalties.

4. Spacing & Layout

4.1 Spacing Scale

The scale is loosely 8px-based, but with exceptions. Values and frequency:

4.2 Layout

Breakpoints are numerous — 40+ entries from 320px up to 1614px. Clearly designed for fluid responsiveness across a huge range of devices.

No max-content width is specified in the data, but the sheer number of breakpoints suggests the layout adapts in small increments rather than fixed jumps. This is typical in editorial sites where text line length needs careful control.

5. Visual Elements

Border Radius

Small radii dominate — 4px and 6px give subtle rounding without losing a rectangular feel. Full rounds (100%) are for avatars/social icons.

Shadows

Only one shadow found: rgba(0, 0, 0, 0.25) 0px 1px 4px 0px. Low opacity, small offset. Flat design is the default — shadows are rare.

Borders

Borders are thin, usually 1px solid. Colors: primary blue #1976d2, charcoal #32383e, light grey rgb(213, 213, 213). Often used only on one side (e.g., bottom borders for list items).

6. Components

6.1 Buttons

Two button variants in data:

Variant 1:

• Default: background-color: #000000, color: transparent, padding 5px, border-radius 10px, no border, no shadow.
• Hover: background transparent, text color #000000.
• Focus: outline none, opacity 1.

Variant 2:

• Default: background-color: rgb(191, 191, 191), transparent text, padding 5px, border-radius 100%.
• Hover: background transparent, text color black.
• Focus: outline none.

Both have font-size set to 0px in data — likely icon-only buttons.

6.2 Links

Five link styles:

1. Grey #727272 — hover orange rgb(242, 157, 56).
2. White #ffffff — hover orange.
3. Primary blue #1976d2 — hover orange.
4. Link blue #0000ee — hover orange.
5. Black #000000 — bold, hover orange.

No underlines in any state — purely color change on hover.

6.3 Forms

No input styles found — likely browser defaults or loaded dynamically.

6.4 Cards

Card specifics not in data — likely using muipaper-root with white background and 6px radius.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary-blue: #1976d2;
  --color-white: #ffffff;
  --color-charcoal: #32383e;
  --color-link-blue: #0000ee;
  --color-mid-grey: #666666;
  --color-light-grey: #dfdfdf;
  --color-black: #000000;
  --color-menu-bg: #f6f6f6;
  --color-text-pale: #adadad;
  --color-text-color: #979797;
  --color-bg-r: #000;
  --color-hover-orange: rgb(242, 157, 56);

  /* Typography */
  --font-family-system: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  --font-family-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-44: 44px;
  --space-50: 50px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-round: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 1px 4px 0px;
}

8. AI Coding Assistant Prompt

# Indiatimes Design System Specification

You are an Indiatimes design expert. Build UIs matching their visual language exactly.

## Brand Context
Indiatimes is a high-traffic news and lifestyle site. The design is flat, fast-loading, and functional. Colors are bold for interactivity, neutrals dominate content areas. Typography is system-native for speed and consistency.

## Color Palette
- Primary Blue: #1976d2 — Brand color, CTAs, borders
- White: #ffffff — Page background, card surfaces
- Charcoal: #32383e — Text, button backgrounds
- Link Blue: #0000ee — Inline hyperlinks
- Mid Grey: #666666 — Metadata, timestamps
- Light Grey: #dfdfdf — Dividers, subtle backgrounds
- Black: #000000 — Text, icons, focus outlines
- Menu BG: #f6f6f6 — Navigation bar background
- Text Pale: #adadad — Disabled text
- Text Color: #979797 — Secondary body text
- Background R: #000 — Hero section background
- Hover Orange: rgb(242, 157, 56) — Link hover state

## Typography
Font families:
- Primary: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial
- Buttons (some): Arial

Type sizes:
| Level     | Size      | Weight | Line Height | Use For |
|-----------|-----------|--------|-------------|---------|
| H1        | 24px      | 600    | 1.50        | Page titles |
| H1 Upper  | 24px      | 700    | 1.20        | Section headings |
| Link LG   | 24px      | 700    | 1.20        | Nav links |
| H2        | 18px      | 600    | 1.56        | Subheadings |
| Body LG   | 18px      | 400    | —           | Body text |
| Link MD   | 16px      | 400-600| 1.13-1.50   | Inline links |
| Caption   | 14px      | 400-600| 1.50        | Metadata |
| Caption SM| 11px      | 500-600| 1.55        | Footnotes |

## Spacing & Grid
Base: 8px mental model with mixed increments
Scale: 1px, 4px, 5px, 7px, 8px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 30px, 40px, 44px, 50px
Use:
- 4px/5px: tight padding in buttons
- 15px: card padding
- 30px+: section spacing

## Border Radius
- sm: 4px — small UI elements
- md: 6px — cards, images
- lg: 10px — buttons
- round: 50% — avatars, icon buttons
- full: 100% — social share buttons

## Shadows & Depth
Mostly flat. One shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px 0px — used sparingly.

## Components

### Primary Button
Default:
- bg: #000000
- color: transparent
- padding: 5px
- radius: 10px
- border: none
Hover:
- bg: transparent
- color: #000000
Focus:
- outline: none
Disabled: reduce opacity

### Secondary Button
Default:
- bg: rgb(191, 191, 191)
- color: transparent
- padding: 5px
- radius: 100%
Hover:
- bg: transparent
- color: #000000
Focus: outline none

### Navigation Links
Default: no underline, color per context (grey, white, blue, black)
Hover: color rgb(242, 157, 56)

### Cards
bg: #ffffff
radius: 6px
padding: 15px
border: 1px solid #dfdfdf

## Layout & Responsive Rules
Breakpoints: 320px to 1614px, many intermediate steps
Mobile: < 600px
Tablet: 600px–992px
Desktop: > 992px

## Interaction Rules
Transitions: 150ms ease for hover/focus
Focus: color change, no outline
Hover: color shift to orange

## DO List
- Use exact hex values from palette
- Maintain spacing multiples from scale
- Use system font stack
- Keep buttons flat — no shadows
- Use hover orange only for interactive elements
- Respect border radius mapping

## DON'T List
- Add custom colors
- Use heavy shadows
- Mix rounded and sharp corners inconsistently
- Underline links
- Use decorative fonts

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #000000;
  color: transparent;
  padding: 5px;
  border-radius: 10px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: transparent;
  color: #000000;
}
```

### Secondary Button
```css
.btn-secondary {
  background: rgb(191, 191, 191);
  color: transparent;
  padding: 5px;
  border-radius: 100%;
  border: none;
}
.btn-secondary:hover {
  background: transparent;
  color: #000000;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 15px;
  border: 1px solid #dfdfdf;
}
```

9. Summary

TL;DR — Indiatimes’ design system is a pragmatic, fast-loading, flat UI built on system fonts, a bold primary blue, and a neutral-heavy palette. Small radii, minimal shadows, and a tight spacing scale keep content readable and interfaces snappy.

Brand Keywords — utilitarian-flat, news-functional, bold-accent, speed-first, trust-blue