InMobi Design System Deep Dive

1. Brand Overview

InMobi’s site feels like it’s built for a tech-savvy, data-driven audience — advertisers, app developers, and marketing teams who care about precision and performance. The visual language is modern corporate tech: clean sans-serif typography, restrained use of color, lots of white space, and a focus on clarity over decoration. You’re not getting playful illustrations or over-stylized UI here; instead, you see a disciplined grid, subtle depth cues, and a controlled palette.

The brand leans heavily on its primary blue (#1476fc) and secondary deep blue (#0b4dcc) for interactive elements, paired with neutrals and functional accent colors for states. Bright accents like yellow (#fed530) and red (#fc523f) show up in very specific button variants — they’re not scattered everywhere, which keeps the visual system from looking chaotic.

Typography is all Poppins for larger UI and headings, with Helvetica Neue stepping in for smaller captions and utility text. That mix says “modern” but also “corporate serious.” They’re not using variable fonts or experimental type — everything is locked down for predictable rendering.

Spacing is mostly on an 8px grid, but they’ve got a few odd fractional values (like 15.1884px and 5.0634px) that suggest some components were designed in a visual tool and exported with decimal precision rather than rounded to the grid. Breakpoints span from small mobile (480px) to wide desktop (1630px), indicating they’ve thought about scaling across devices but keep a lot of breakpoints for fine control.

Overall vibe: disciplined tech brand, with controlled bursts of color for calls-to-action. It’s practical, not artistic — everything in the design system feels like it’s there to support conversion and clarity.

2. Color System

2.1 Primary Colors

The main brand color is #1476fc — a saturated blue used for links, primary buttons, and interaction states. This is a safe choice for tech brands: blue conveys trust, stability, and competence. It’s similar to what you see from Facebook, IBM, or LinkedIn, but slightly lighter than IBM’s blue and more vivid than LinkedIn’s. The hover state shifts to #0091ae, a teal-blue, which adds energy without losing accessibility.

Secondary is pure black (#000000) for text and certain button variants. This works because black text on light backgrounds maximizes readability and keeps the site feeling serious.

2.2 Complete Palette

Here’s every color from the extracted data:

2.3 Color Relationships

The blue (#1476fc) on white passes WCAG AA for normal text and AAA for large text. The hover teal (#0091ae) maintains contrast. Bright yellow on black text is borderline for small text contrast — good for large button labels but not for body copy. Red (#fc523f) on black text also meets accessibility for large text.

No explicit dark mode in this data. The palette is tuned for light backgrounds; deep blue (#33475b) could be leveraged in dark mode schemes.

2.4 Usage Guide

• Use #1476fc for primary interactive elements — links, primary buttons, active states.
• Hover states often shift to #0091ae — never use this as a static color.
• Keep bright yellow (#fed530) and red (#fc523f) for high-visibility CTAs only. Overuse will dilute impact.
• Backgrounds: #e2e9f8 for light sections, #ffffff for main page.
• Text: #000000 for primary, #a3afc7 for secondary. Never use blue for body text — keep it for links.

3. Typography

3.1 Font Families

• Poppins — Modern geometric sans-serif. Used for headings, links, buttons, and most UI text. Fallback: arial.
• Helvetica Neue — Clean, neutral sans. Used for small captions, utility text, and certain buttons. Fallback: Helvetica, Arial.

No Google Fonts or Adobe Fonts references in the extracted data — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Large headings (61px, 31px) create strong visual anchors. Body and link sizes in the 18–20px range keep readability high for web. Small captions at 12px are reserved for non-critical info — don’t use them for anything essential. The mix of weights (400 vs 700) in buttons and headings adds emphasis where needed without overcomplication.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Most values are multiples, but a few fractional values exist.

4.2 Layout

Breakpoints: 480px, 767px, 768px, 769px, 800px, 870px, 900px, 910px, 960px, 980px, 1024px, 1150px, 1151px, 1630px. This is granular — they’re adjusting layout at many sizes rather than relying on just three tiers.

5. Visual Elements

Border Radius

Shadows

Mostly subtle:

• rgba(0, 0, 0, 0.08) 0px 4px 8px 0px — light elevation
• rgb(234, 240, 246) 0px -1px 3px 0px — top inset shadow
• rgba(0, 0, 0, 0.5) 0px 0px 8px 0px — strong shadow, rare

Borders

Not heavy on borders. Buttons sometimes use 1px solid #0b4dcc or #0689cb. Inset borders for iframes.

6. Components

6.1 Buttons

Outline Button (Cookie Button)
Default: transparent background, text #0b4dcc, padding 14px 12px, radius 22px, border 1px solid #0b4dcc.
Hover: background unchanged, text #0091ae, border removed.

Blue Button
Default: #1476fc background, black text, padding 15.1884px 30.375px, radius 18px.
Hover: background unchanged, text #0091ae.

Yellow Button
Default: #fed530 background, black text, same padding/radius as blue button.
Hover: text #0091ae.

Red Button
Default: #fc523f background, black text, same padding/radius.
Hover: text #0091ae.

Primary Black Button
Default: black background, white text, same padding/radius.
Hover: text #0091ae.

6.2 Links

Variant 1: Blue (#1476fc), no underline, hover: teal (#0091ae) + underline.
Variant 2: White (#ffffff), no underline, hover: teal + underline.

6.3 Forms

No inputs extracted — likely styled inline in pages.

6.4 Cards

Radius 36px, possibly with light shadows.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-light-bg: #e2e9f8;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-medium: #a3afc7;
  --color-blue-brand: #1476fc;
  --color-blue-deep: #33475b;
  --color-blue-accent: #0b4dcc;
  --color-cyan-accent: #0689cb;
  --color-yellow-bright: #fed530;
  --color-red-bright: #fc523f;
  --color-link-hover: #0091ae;

  /* Typography */
  --font-poppins: "Poppins", arial;
  --font-helvetica-neue: "Helvetica Neue", Helvetica, Arial;

  /* Font sizes */
  --fs-h1-xl: 61.7962px;
  --fs-h1-l: 31.6462px;
  --fs-h1-m: 25.3125px;
  --fs-link-l: 20.25px;
  --fs-link-m: 18px;
  --fs-h1-xs: 16.2px;
  --fs-btn: 16.2px;
  --fs-link-s: 14px;
  --fs-caption: 12px;

  /* Spacing */
  --space-2: 2px;
  --space-5-0634: 5.0634px;
  --space-6: 6px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15-1884: 15.1884px;
  --space-20: 20px;
  --space-20-25: 20.25px;
  --space-28: 28px;
  --space-30: 30px;
  --space-30-375: 30.375px;
  --space-36: 36px;
  --space-48: 48px;
  --space-50: 50px;
  --space-52: 52px;
  --space-56: 56px;
  --space-81: 81px;
  --space-84: 84px;
  --space-121-5: 121.5px;

  /* Radius */
  --radius-none-bottom14: 0px 0px 14px 14px;
  --radius-3: 3px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-18: 18px;
  --radius-22: 22px;
  --radius-28: 28px;
  --radius-36: 36px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.08) 0px 4px 8px 0px;
  --shadow-top-inset: rgb(234, 240, 246) 0px -1px 3px 0px;
  --shadow-strong: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
}

8. AI Coding Assistant Prompt

# InMobi Design System Specification

System Prompt: You are an InMobi design expert. Build UIs matching their visual language exactly.

Brand Context: InMobi’s design system is precision-driven, corporate tech. Controlled palette, modern sans-serif typography, 8px grid. Blue is the hero, with yellow/red accents for high-impact CTAs. Minimal shadows, rounded corners, clean layouts.

## Colors
- Light Background: #e2e9f8 — section backgrounds
- White: #ffffff — page background, text on dark buttons
- Black: #000000 — primary text
- Medium Gray: #a3afc7 — secondary text, captions
- Brand Blue: #1476fc — links, CTAs, primary actions
- Deep Blue: #33475b — headings, dark backgrounds
- Accent Blue: #0b4dcc — button outlines, secondary buttons
- Accent Cyan: #0689cb — icons, secondary accents
- Bright Yellow: #fed530 — high-visibility CTAs
- Bright Red: #fc523f — alert CTAs
- Link Hover Blue/Teal: #0091ae — hover states

## Typography
Fonts:
- Poppins, arial — headings, links, buttons
- Helvetica Neue, Helvetica, Arial — captions, small utility text

Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 XL | 61.7962px | 700 | 1.20 | Page titles |
| H1 L | 31.6462px | 700 | 1.20 | Section headings |
| H1 M | 25.3125px | 400 | 1.60 | Subheadings |
| Link L | 20.25px | 400 | 1.60 | Prominent links |
| Link M | 18px | 400 | 1.60 | Body links |
| H1 XS | 16.2px | 400 | 1.60 | Small headings |
| Button | 16.2px | 700 | 1.00 | Main buttons |
| Link S | 14px | 400 | 1.60 | Minor links |
| Caption | 12px | 400 | 1.50 | Footnotes, labels |
| Button Uppercase | 12px | 400 | 1.00 | Utility buttons |

## Spacing & Grid
Base: 8px grid
Values: 2px, 5.0634px, 6px, 10px, 12px, 14px, 15.1884px, 20px, 20.25px, 28px, 30px, 30.375px, 36px, 48px, 50px, 52px, 56px, 81px, 84px, 121.5px

## Border Radius
- bottom14: 0px 0px 14px 14px — specific divs
- sm: 3px — small buttons
- md: 8px — list items
- md+: 10px — popup CTAs
- lg: 18px — pill buttons
- lg+: 22px — larger pills
- xl: 28px — images
- card: 36px — cards
- full: 50% — circles

## Shadows & Depth
- Light: rgba(0,0,0,0.08) 0px 4px 8px
- Top inset: rgb(234,240,246) 0px -1px 3px
- Strong: rgba(0,0,0,0.5) 0px 0px 8px

## Components

### Primary Blue Button
Default: bg #1476fc, color #000000, padding 15.1884px 30.375px, radius 18px, border none, font-weight 700, font-size 16.2px
Hover: bg initial, color #0091ae, border none
Focus: outline: none
Disabled: opacity 0.5

### Yellow CTA Button
Default: bg #fed530, color #000000, same padding/radius as primary
Hover: color #0091ae

### Red CTA Button
Default: bg #fc523f, color #000000, same padding/radius as primary
Hover: color #0091ae

### Black Primary Button
Default: bg #000000, color #ffffff, padding 15.1884px 30.375px, radius 18px
Hover: color #0091ae

### Outline Button
Default: bg transparent, color #0b4dcc, padding 14px 12px, radius 22px, border 1px solid #0b4dcc
Hover: color #0091ae, border none

### Links
Blue: default #1476fc, no underline, hover #0091ae + underline
White: default #ffffff, no underline, hover #0091ae + underline

## Layout & Responsive Rules
Breakpoints: 480px, 767px, 768px, 769px, 800px, 870px, 900px, 910px, 960px, 980px, 1024px, 1150px, 1151px, 1630px

## Interaction Rules
- Transition: 150ms ease for color changes
- Focus indicators: use border or outline in brand colors
- Disabled states: 50% opacity

## DO
- Use only palette colors
- Maintain 8px grid (even decimals are from design export)
- Keep hover states consistent: #0091ae for interactive elements
- Use Poppins for headings/buttons, Helvetica Neue for captions
- Maintain button paddings exactly

## DON'T
- Invent new colors
- Mix sharp and rounded corners inconsistently
- Overuse yellow/red buttons
- Apply shadows to text
- Use underline for default links

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #1476fc;
  color: #000000;
  padding: 15.1884px 30.375px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 16.2px;
  border: none;
  transition: color 150ms ease;
}
.btn-primary:hover {
  color: #0091ae;
}
```

Outline Button:
```css
.btn-outline {
  background: transparent;
  color: #0b4dcc;
  padding: 14px 12px;
  border-radius: 22px;
  border: 1px solid #0b4dcc;
  font-size: 12px;
}
.btn-outline:hover {
  color: #0091ae;
  border: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 36px;
  box-shadow: rgba(0,0,0,0.08) 0px 4px 8px;
  padding: 20px;
}
```

9. Summary

TL;DR — InMobi’s design system is a disciplined tech palette: vivid blue for primary actions, yellow/red as high-impact accents, and lots of white space. Poppins drives headings and buttons, Helvetica Neue handles small text. Rounded corners and minimal shadows keep it friendly but still corporate.

Brand Keywords — tech-disciplined, blue-driven, conversion-focused, corporate-minimalist