Blogger Design System Deep Dive

1. Brand Overview

Blogger is one of the web’s OG publishing tools. It’s been around long enough to have seen multiple waves of web design trends — from the skeuomorphic early 2000s, through flat design, into today’s clean, responsive minimalism. The current design language is stripped back, functional, and feels like a Google product: system fonts, neutral grays, clean lines, and a single dominant accent color for calls to action.

The vibe? Utility-first with subtle warmth. This isn’t the whimsical palette of a lifestyle brand, nor the ultra-corporate aesthetic of enterprise SaaS — it’s somewhere in between. The brand design says: “We’re here to help you publish your words. We’ll stay out of the way.”
The orange primary (#ff8000) injects energy and draws the eye, but it’s used sparingly. The rest of the interface leans on cool, muted tones — deep blue-gray (#2f454f) for large blocks, mid-gray (#cbd1d3) for secondary text, and pure white (#ffffff) for backgrounds. That combination keeps everything readable and ensures the orange pops when it appears.

Typography is a single workhorse: Roboto. No frills, no custom ligatures, no playful alternates. This choice reinforces that utilitarian ethos — the words matter, not the ornamentation. The type scale is consistent and logical, using multiples of the base spacing unit (8px), which makes the rhythm predictable.

Visually, Blogger’s design system feels like it was built to be invisible until you need it. Buttons are compact, corners are slightly rounded (3px), shadows are almost nonexistent (just one subtle rgba(0,0,0,0.2) drop), and there’s no elaborate border system. This minimalism keeps the UI light and fast.

In short: Blogger’s current design system is pragmatic, restrained, and engineered for clarity. It’s a functional toolkit rather than a decorative statement — and that’s exactly what works for a publishing platform whose users are here to tell their own stories.

2. Color System

2.1 Primary Colors

The hero here is #ff8000 — a bright orange used for CTAs. Orange is high-energy, positive, and attention-grabbing without being aggressive. Compared to competitors (e.g., Medium’s green or WordPress’s blue), Blogger’s orange feels warmer and more personal. It’s also rare in publishing tools, which gives Blogger some visual differentiation.

The secondary anchor is #2f454f, a deep blue-gray used for hero backgrounds and dark CTAs. This gives a strong contrast to the orange in mixed usage.

White (#ffffff) dominates for text and backgrounds, keeping things clean. Gray tones (#cbd1d3, #333333) handle secondary UI elements.

2.2 Complete Palette

2.3 Color Relationships

The orange/blue-gray pair is a classic complementary scheme, giving high contrast without eye strain. White as a base ensures accessibility — orange on white passes WCAG AA easily for large text; blue-gray on white is borderline for small text but acceptable for headings.

There’s no dedicated dark mode in the extracted data, but darker backgrounds show up in buttons and hero sections.

2.4 Usage Guide

• Works well: Orange (#ff8000) over blue-gray (#2f454f) — strong call-to-action contrast. White text over orange — maximum legibility.
• Avoid: Orange text on white for body copy (too aggressive). Blue-gray text on orange — poor contrast.
• Hover states: Orange buttons darken to #31434e (rgb(49,67,78)), giving clear feedback without breaking the palette.
• Focus states: Use darker blues (#0f1519) for active/focus backgrounds — consistent across buttons.

3. Typography

3.1 Font Families

Single family: Roboto (Google Fonts). No fallbacks listed beyond the default system sans stack. Also references Roboto Slab in sources, but no slab styles appear in the extracted UI components — likely for content, not UI.

3.2 Type Scale

3.3 Hierarchy

H1s are huge and light-weight (100) — a deliberate choice to keep large headings airy. Mid-level headings drop to the 20-21px range with moderate weight. Links and small UI text stick to 14px or 13px, sometimes uppercase for navigation clarity.

This scale feels modular — multiples of 8px or close fractions (21.06px is an odd outlier, possibly due to responsive scaling). The consistent line height (1.66) on smaller text ensures readability.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

One breakpoint at 610px — unusual, suggests a single mobile/tablet threshold. Layout likely stacks content below this width. Spacing is consistent with the 8px scale, making responsive adjustments easier.

5. Visual Elements

• Border Radius:

  • 3px: Common for buttons and small UI elements.
  • 4px: Used for select dropdowns.
  • 32px: Rare, “Jump Link” pill shape.

• Shadows:

  • One subtle shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px — barely visible depth, used sparingly.

• Borders: None in extracted combinations — flat design with background color changes for separation.

6. Components

6.1 Buttons

Primary CTA (.cta.ga-header-cta)

• Default:

  • Background: #ff8000
  • Color: #ffffff
  • Padding: 10px 16px
  • Radius: 3px
  • Border: none
  • Font: Roboto, 14px, weight 500

• Hover:

  • Background: #31434e (rgb(49,67,78))
  • Color: #ffffff

• Active/Focus:

  • Background: #0f1519 (rgb(15,21,25))
  • Color: #ffffff

Secondary Dark CTA (.cta.dark.ga-map-cta)

• Default:

  • Background: #2f454f
  • Color: #ffffff
  • Padding: 14px 20px
  • Radius: 3px
  • Font: Roboto, 13px, weight 500

• Hover:

  • Background: #31434e
  • Color: #ffffff

• Active/Focus:

  • Background: #0f1519
  • Color: #ffffff

6.2 Links

Three styles:

1. White text (#ffffff), weight 600 — stays white on hover.
2. Blue-gray (#2f454f), weight 500 — turns white on hover.
3. Cool gray (#cbd1d3), weight 400 — turns white on hover.

No underlines in any state.

6.3 Forms

Select Inputs (select-one)

• Default:

  • Background: #303e47 (rgb(48,62,71))
  • Color: #c5c9db (rgb(197,201,219))
  • Border Radius: 4px
  • Padding: 0px 32px 0px 10px

• Focus:

  • Background: #0f1519

No border on default — relies on background color change for focus.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-cool-gray: #cbd1d3;
  --color-deep-blue-gray: #2f454f;
  --color-dark-gray: #333333;
  --color-primary-orange: #ff8000;
  --color-deep-red: #bc382e;
  --color-bright-orange: #ff9224;
  --color-slate-blue-gray: #405965;

  /* Typography */
  --font-family-primary: 'Roboto', sans-serif;
  --line-height-default: 1.66;

  /* Type Sizes */
  --font-size-h1-lg: 2.75rem; /* 44px */
  --font-size-h1-md: 2.63rem; /* 42px */
  --font-size-h1-sm: 1.32rem; /* 21.06px */
  --font-size-h1-xs: 1.25rem; /* 20px */
  --font-size-link-lg: 1.13rem; /* 18px */
  --font-size-link-sm: 0.88rem; /* 14px */
  --font-size-link-xs: 0.81rem; /* 13px */

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-18: 18px;
  --space-21: 21.06px;
  --space-34: 34.86px;
  --space-36: 36.52px;
  --space-40: 40px;
  --space-48: 48px;
  --space-80: 80px;
  --space-108: 108px;
  --space-160: 160px;
  --space-460: 460.8px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 32px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.2) 0px 2px 3px;
}

8. AI Coding Assistant Prompt

# Blogger Design System Specification

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

## Brand Context
Blogger's design is functional, minimal, and text-first. It uses a warm orange accent for CTAs against a cool, muted base. Corners are slightly rounded, shadows are rare, and typography is clean and utilitarian.

## Color Palette
- White: #ffffff — Backgrounds, text, headers
- Cool Gray: #cbd1d3 — Secondary text, inactive links
- Deep Blue-Gray: #2f454f — Dark buttons, hero backgrounds
- Dark Gray: #333333 — Rare text use
- Primary Orange: #ff8000 — Primary CTA backgrounds
- Deep Red: #bc382e — Minor accents
- Bright Orange: #ff9224 — Hover/focus accent for CTAs
- Slate Blue-Gray: #405965 — Hover/focus backgrounds for dark elements

## Typography
- Font Family: 'Roboto', sans-serif
- Sizes:
  - H1 Large: 44px, weight 100, line-height 1.10
  - H1 Medium: 42px, weight 100, line-height 1.10
  - H1 Small: 21.06px, weight 500, line-height 1.66
  - H1 XS: 20px, weight 400, line-height 1.66
  - Link Large: 18px, weight 400, line-height 1.66
  - Link Small: 14px, weight 600, line-height 1.66
  - Link XS: 13px, weight 500, line-height 1.66, uppercase
  - Caption: 14px, weight 500, line-height 1.66, uppercase

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 5px, 8px, 10px, 12px, 14px, 18px, 21.06px, 34.86px, 36.52px, 40px, 48px, 80px, 108px, 160px, 460.8px.
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 3px — Buttons, small UI
- md: 4px — Select inputs
- pill: 32px — Jump Links

## Shadows & Depth
- Subtle shadow: rgba(0,0,0,0.2) 0px 2px 3px
- Mostly flat design — use background color changes for separation.

## Component Specifications

### Primary Button (.cta.ga-header-cta)
Default:
- Background: #ff8000
- Color: #ffffff
- Padding: 10px 16px
- Radius: 3px
- Font: Roboto, 14px, weight 500

Hover:
- Background: #31434e
- Color: #ffffff

Active/Focus:
- Background: #0f1519
- Color: #ffffff

### Secondary Dark Button (.cta.dark.ga-map-cta)
Default:
- Background: #2f454f
- Color: #ffffff
- Padding: 14px 20px
- Radius: 3px
- Font: Roboto, 13px, weight 500

Hover:
- Background: #31434e
- Color: #ffffff

Active/Focus:
- Background: #0f1519
- Color: #ffffff

### Links
1. White (#ffffff), weight 600 — hover stays white.
2. Blue-gray (#2f454f), weight 500 — hover white.
3. Cool gray (#cbd1d3), weight 400 — hover white.

### Input Select (select-one)
Default:
- Background: #303e47
- Color: #c5c9db
- Radius: 4px
- Padding: 0 32px 0 10px
Focus:
- Background: #0f1519

## Layout & Responsive Rules
- Breakpoint at 610px — stack content below this width.
- Section spacing: multiples of 8px.

## Interaction Rules
- No underlines on links.
- Color change on hover for buttons and links.
- Use darker backgrounds for focus.

## DO
- Use only palette colors.
- Maintain 8px grid spacing.
- Keep corners consistent (3px unless specified).
- Use Roboto for all UI text.
- Keep CTAs bold and high-contrast.

## DON'T
- Add new colors.
- Mix sharp and rounded corners.
- Use heavy shadows.
- Underline links.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ff8000;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 3px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #31434e; }
.btn-primary:focus { background: #0f1519; color: #ffffff; }
```

### Secondary Button
```css
.btn-secondary {
  background: #2f454f;
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 3px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: none;
}
.btn-secondary:hover { background: #31434e; }
.btn-secondary:focus { background: #0f1519; }
```

### Select Input
```css
.select-input {
  background: #303e47;
  color: #c5c9db;
  border-radius: 4px;
  padding: 0 32px 0 10px;
  border: none;
}
.select-input:focus { background: #0f1519; }
```

9. Summary

TL;DR: Blogger’s design system is minimal, predictable, and anchored by a warm orange CTA color. It uses a strict 8px grid, Roboto typography, and barely-there shadows. Corners are gently rounded, and interaction states rely on color changes rather than motion.

Brand Keywords: warm-functional, utilitarian-minimalist, text-first, grid-consistent