Weather.com Brand Design System Deep Dive

1. Brand Overview

Weather.com is one of those brands where utility drives every decision. It’s not here to be playful or overly expressive — it’s here to give you data, clearly, fast, and reliably. The vibe is pragmatic and authoritative, but with just enough visual polish to make the interface feel contemporary. Think “trusted local news” meets “enterprise dashboard.”

From the extracted data, you can see the design philosophy: heavy use of dark neutral tones (#252422, #000000) paired with high-contrast white (#ffffff) and functional accent blues (#003399, #1b4de4). This isn’t about brand flamboyance — it’s about clarity in conditions where quick comprehension matters.

Typography leans on Inter, a clean, modern sans-serif with high legibility across device sizes, plus system fallbacks like Arial and Roboto. The scale moves from 80px display headlines down to 10px captions, which is wide for a utility site — they want to handle everything from weather alerts to tiny map labels without sacrificing hierarchy.

Spacing? It’s clearly an 8px base grid, with common increments like 8, 16, 24, and 48px. Buttons and inputs follow the same radius (8px), creating a uniform, approachable touch target. Shadows are minimal and functional — small drop shadows in rgba(0,0,0,0.2) for depth, but no gratuitous depth effects. Borders are used strategically to divide content.

This is a design system for a brand that serves millions daily. The audience is global, mixed-ability, and multi-device. Accessibility and responsiveness are baked in — breakpoints span from 320px mobile up to 1440px desktop, with fine-grain steps in between.

The philosophy: information first, brand second. Weather.com’s visual language supports that by being restrained, systematic, and predictable. Even the color palette tells you: “We’re here to deliver data you can trust.”

2. Color System

2.1 Primary Colors

The primary brand color is rgb(37, 36, 34) (#252422), a near-black neutral. It’s used for text, borders, and dominant UI chrome. This color projects seriousness and stability — perfect for a brand dealing with critical real-time information. It’s a bit warmer than pure black, which softens contrast without losing authority.

Secondary is pure white (#ffffff). This is the canvas for most content areas, ensuring maximum contrast for text. The accent blue rgb(0, 51, 153) (#003399) and focus blue rgb(27, 77, 228) (#1b4de4) signal interaction — think links, focus outlines, and CTAs. There’s also a functional red (#eb0000) for errors and danger, and green (#34c759) for validation.

Compared to competitors like AccuWeather (which uses orange-heavy palettes), Weather.com’s core colors are cooler and more neutral. This fits their positioning as a data authority rather than a lifestyle brand.

2.2 Complete Palette

2.3 Color Relationships

The primary dark (#252422) on white yields a contrast ratio well above WCAG AAA — excellent for accessibility. The blue accents (#003399, #1b4de4) also pass contrast when used on white backgrounds. Red (#eb0000) is vivid enough for error states, though it’s worth checking against dark backgrounds for compliance.

Dark mode isn’t explicitly defined in the data, but the palette naturally supports it — swap secondary light (#ffffff) for primary dark (#252422) as the background, invert text colors, keep functional colors intact.

2.4 Usage Guide

• Primary Dark (#252422): Use for text, main nav, section headers.
• White (#ffffff): Use for backgrounds, cards, modal surfaces.
• Blue (#003399 / #1b4de4): Reserve for links, CTAs, focus outlines — don’t overuse.
• Error Red (#eb0000): Only for errors and severe alerts.
• Gray tones: Use progressively lighter grays for secondary and disabled text.
• Avoid mixing: Don’t put blue text on red backgrounds — hard to read.
• Functional greens: Use sparingly, only for validation.

3. Typography

3.1 Font Families

Primary font: Inter — variable, from Google Fonts. Fallbacks: Arial, Roboto. For certain captions, system fonts (-apple-system, system-ui) are used, which ensures platform-native rendering for small UI text.

No Adobe Fonts. Variable fonts are supported, which means size and weight are adjustable without multiple file loads — good for performance.

3.2 Type Scale

3.3 Hierarchy

They use size + weight to signal hierarchy rather than color shifts. Big headlines (80px, 60px) are rare — likely hero temperatures or breaking weather events. Mid-range sizes (18px–24px) carry section headers. Body text sits at 14–16px with 400–500 weights, ensuring readability at all breakpoints. Captions drop to 12–13px, sometimes using system fonts for crispness.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Values cluster around 5px, 7px, 10px for tight UI, then jump to 24px, 48px for section spacing.

4.2 Layout

Breakpoints are thorough: starting at 320px up to 1440px, with small increments (480, 630, 640, 667, 767, 768, etc.). This suggests fine-tuned responsive adjustments — not just mobile/tablet/desktop, but device-specific.

5. Visual Elements

Border Radius

Uniformity is strong here: primary component radius is 8px (buttons, inputs, alerts). Other values:

• 0px — tables, some card edges
• 3px — spans, small tiles
• 6px — images, div corners
• 16px — rare, maybe for special UI blocks
• 20px — occasional pill-like shapes
• 30px — large rounded containers
• 1920px — SVG shapes (full circles)
• 50% — avatars, circular buttons

Shadows

Minimal: rgba(0,0,0,0.2) with 0–5px offsets. Depth is subtle, often 2px or 4px blur — functional separation rather than decorative.

Borders

Mostly 1px solid lines, either #252422 or light gray (#f0f0f0). Used to separate nav items, list items, cards. Some use rgba(37,36,34,0.1) for subtle dividers.

6. Components

6.1 Buttons

Primary button example from Search Input:

• Default: bg #f2f2f2, text #252422, padding 5px 6px 5px 16px, radius 8px, no border, no shadow.
• Focus: outline #1b4de4 auto 5px.
• Hover/Active: not defined in data — likely same as default.

Font: Inter, 16px, weight 400.

6.2 Links

Multiple styles:

1. Dark text (#252422), underline. Hover: dark at 80% opacity, no underline.
2. White text (#ffffff), no underline. Hover: dark at 80% opacity.
3. Black (#000000), no underline. Hover: dark at 80% opacity.
4. Dark gray (#2b2b2b), no underline. Hover: focus blue underline.
5. Gray (#686c74), no underline. Hover: dark at 80% opacity.
6. Blue (#1b4de4), underline. Hover: dark at 80% opacity.

6.3 Forms

Text inputs:

1. Default: bg #f2f2f2, text #252422, radius 8px, padding 5px 6px 5px 16px. Focus: outline #1b4de4 auto 5px.
2. Transparent bg, white text, radius 0px. Focus: none.

6.4 Cards

Borders used for division, subtle shadows (rgba(0,0,0,0.2) 0px 2px 12px). Padding and radius depend on content type (8px–16px radius).

7. Design Tokens

:root {
  /* Colors */
  --color-primary-dark: #252422;
  --color-secondary-light: #ffffff;
  --color-black: #000000;
  --color-medium-gray: #6f7585;
  --color-brand-blue-dark: #003399;
  --color-focus-blue: #1b4de4;
  --color-light-gray: #f2f2f2;
  --color-text-valid: #34c759;
  --color-text-overlay: #ffffff;
  --color-text-gray: #81838d;
  --color-text-brand-dark: #003399;
  --color-text-error: #eb0000;
  --color-text-light: #686c74;
  --color-text-disabled: #43454e;
  --color-text-info: #7f7f7f;
  --color-text-severe: #da291c;
  --color-text-bg-medium: #383838;
  --color-text-dark: #000000;

  /* Typography */
  --font-primary: 'Inter', Arial, Roboto;
  --font-system: -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue';

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-48: 48px;

  /* Radius */
  --radius-none: 0;
  --radius-3: 3px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.2) 0px 2px 12px;
  --shadow-md: rgba(0,0,0,0.15) 0px 4px 16px;
  --shadow-focus: rgba(0,0,0,0.2) 0px 5px 10px;
}

8. AI Coding Assistant Prompt

# Weather.com Design System Specification

You are a Weather.com design expert. Build UIs matching their visual language exactly.

## Brand Context
Weather.com values clarity, accessibility, and trust. The design prioritizes legibility, predictable patterns, and functional color use. It’s a utility-first interface with restrained decoration.

## Color Palette
- Primary Dark: #252422 — Text, borders, UI chrome
- Secondary Light: #ffffff — Backgrounds, surfaces
- Pure Black: #000000 — Strong text
- Medium Gray: #6f7585 — Secondary info
- Brand Blue Dark: #003399 — Links, brand accents
- Focus Blue: #1b4de4 — Focus outlines, hover states
- Light Gray: #f2f2f2 — Inputs, surfaces
- Text Valid: #34c759 — Success
- Text Overlay: #ffffff — Text over dark
- Text Gray: #81838d — Secondary text
- Text Brand Dark: #003399 — Brand-specific text
- Text Error: #eb0000 — Errors
- Text Light: #686c74 — Placeholder
- Text Disabled: #43454e — Disabled
- Text Info: #7f7f7f — Info
- Text Severe: #da291c — Severe alerts
- Text Bg Medium: #383838 — Text on medium-dark bg
- Text Dark: #000000 — Primary body text

## Typography
- Primary: "Inter", Arial, Roboto — headings, body
- System: "-apple-system", system-ui, Segoe UI, Roboto — small UI text

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 80px | 500 | 1.00 | Hero data |
| H1 | 60px | 600 | 1.00 | Major headings |
| H1 | 36px | 400 | 0.83 | Subheadings |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 30px, 48px
Use multiples of 8px for layout. Smaller values for micro-gaps.

## Border Radius
- none: 0px — tables
- sm: 3px — small tiles
- md: 6px — images
- base: 8px — buttons, inputs, alerts
- lg: 16px — larger blocks
- xl: 20px — pills
- xxl: 30px — large containers
- full: 50% — avatars

## Shadows & Depth
- sm: rgba(0,0,0,0.2) 0px 2px 12px — cards, modals
- md: rgba(0,0,0,0.15) 0px 4px 16px
- focus: rgba(0,0,0,0.2) 0px 5px 10px

## Component Specifications

### Primary Button
Default:
- background: #f2f2f2
- color: #252422
- padding: 5px 6px 5px 16px
- border-radius: 8px
- border: none
- font: Inter, 16px, 400
Focus:
- outline: #1b4de4 auto 5px

### Navigation Link
Default: color #252422, underline
Hover: color rgba(37,36,34,0.8), no underline

### Input Field
Default:
- bg: #f2f2f2
- color: #252422
- radius: 8px
- padding: 5px 6px 5px 16px
Focus: outline #1b4de4 auto 5px

## Layout & Responsive Rules
Breakpoints: 320px, 360px, 480px, 630px, 640px, 667px, 767px, 768px, 794px, 795px, 850px, 950px, 1008px, 1023px, 1024px, 1279px, 1439px, 1440px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: strong blue outline
- Hover: subtle color shift

## DO
- Use only palette colors
- Maintain 8px grid
- Keep button radius at 8px
- Use Inter for main text
- Ensure WCAG AA contrast minimums

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Remove focus indicators

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #f2f2f2;
  color: #252422;
  padding: 5px 6px 5px 16px;
  border-radius: 8px;
  border: none;
  font-family: 'Inter', Arial, Roboto;
  font-size: 16px;
  font-weight: 400;
}
.btn-primary:focus {
  outline: #1b4de4 auto 5px;
}
```

### Input
```css
.input {
  background: #f2f2f2;
  color: #252422;
  border-radius: 8px;
  padding: 5px 6px 5px 16px;
  border: none;
}
.input:focus {
  outline: #1b4de4 auto 5px;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 12px;
  padding: 24px;
}
```

9. Summary

TL;DR — Weather.com’s design system is utilitarian, neutral, and highly accessible. It’s built on an 8px grid, a restrained palette of dark neutrals and functional accents, and a typography system that scales from massive data displays to tiny captions without losing clarity.

Brand Keywords

• data-driven-neutral
• accessibility-first
• global-utility
• trust-focused