Blogspot (Blogger) Design System Deep Dive

1. Brand Overview

Blogspot (now branded as Blogger under Google) is one of the OG blogging platforms. It’s been around since the early 2000s, and its design language carries that legacy — but with Google’s more recent Material-inspired discipline applied in places.

The vibe? Simple. Functional. Google-clean. There’s no ornamental fluff here. The design is all about getting you to write, read, and manage posts without distraction. This is not a lifestyle brand trying to seduce you with gradients and microinteractions — it’s a utility platform that still needs to feel friendly enough to welcome hobbyists and semi-pro bloggers.

The homepage is minimal. Big typography. A restrained color palette anchored by an orange CTA color that’s been part of Blogger’s identity for decades. That orange is the emotional hook — warm, inviting, a bit retro — and it’s used sparingly, which makes it pop.

The rest of the palette leans heavily on dark slate blues and muted grays. This is classic Google: neutral backdrops so the brand color and the content can stand out. It also hints at the “writing” metaphor: the white background is the page; the dark header and footer are the frame.

Typography is all Roboto — no surprises there. Google standardizes on it for legibility and brand cohesion across properties. The scale is surprisingly varied, with ultra-light weights for big headings and medium weights for smaller UI text.

Spacing is on an 8px base (again, very Google), but there are a few odd outliers like 19.1875px and 34.86px — probably legacy or specific layout tweaks that never got normalized. Border radii are tiny (3px, 4px) except for one 32px pill element. Shadows are almost nonexistent — flat design rules here.

The component library is small but purposeful: CTAs in orange or slate, links in white or slate, and a lone select dropdown with a dark background. No giant UI library here — just what the marketing site needs.

Blogger’s design philosophy here is pragmatic minimalism. It’s not trying to win awards for visual innovation. It’s about quick comprehension, brand continuity, and getting out of the way so the content can take center stage. If you’re building for this system, the challenge is discipline: resist adding more than what’s absolutely necessary.

2. Color System

2.1 Primary Colors

The heartbeat of Blogger’s palette is orange — specifically #ff8000. This is their CTA color. It’s bright, warm, and has been tied to their identity for years. Psychologically, orange is energetic and friendly. It works for Blogger because it feels less corporate than blue and less aggressive than red.

Compared to competitors:

• Medium: Emerald green for premium, black/white for content.
• WordPress.com: Blues for trust and stability.
• Blogger: Orange for warmth and nostalgia.

This choice positions Blogger as the “friendly” platform — approachable, not too serious.

2.2 Complete Palette

2.3 Color Relationships

The contrast between #ff8000 (orange) and #ffffff (white) is solid — WCAG AA for large text, borderline for small text but still readable given bold weight. The dark slate (#2f454f) against white easily passes AAA. The lighter gray #cbd1d3 on dark backgrounds is fine, but on white it would fail — so it’s only used on dark surfaces.

There’s no explicit dark mode here, but the header/footer use a dark background with light text — a partial inversion.

2.4 Usage Guide

• Use #ff8000 only for primary calls to action. Overuse will kill its impact.
• Pair #ff8000 with white text for buttons; never with gray text.
• Use #2f454f for secondary buttons, headers, and structural elements.
• Keep #cbd1d3 for secondary/inactive text on dark backgrounds.
• Avoid mixing #bc382e (red) with #ff8000 unless signaling error states.
• Hover states shift slightly: orange to #ff9224, dark slate to #405965.

3. Typography

3.1 Font Families

Everything is Roboto. No fallbacks listed in the data, but in practice you’d include "Roboto", sans-serif. Source: Google Fonts. There’s also mention of “Roboto Slab” in the sources, but all extracted contexts are Roboto.

3.2 Type Scale

3.3 Hierarchy

The H1 weights are ultra-light (100) at large sizes — a classic Google marketing style. It makes big headings feel airy. Smaller headings and UI text jump to medium (500) or bold (600) for readability.

The scale is a bit inconsistent — multiple “heading-1” contexts with different sizes and weights likely reflect responsive adjustments. The consistent 1.66 line-height for smaller sizes keeps text blocks open and easy to scan.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px. Confirmed by the presence of multiples: 8, 16, 48, 80, etc. But there are odd decimals:

Those decimals are likely from responsive scaling or font-based spacing.

4.2 Layout

Only one breakpoint is extracted: 610px — likely the mobile/desktop switch. That’s narrow, meaning the mobile layout persists until fairly wide devices.

5. Visual Elements

• Border radius: Mostly 3px on buttons and small elements. One 4px on selects. One 32px on a “Jump Link” — pill shape.
• Shadows: Only one: rgba(0,0,0,0.2) 0px 2px 3px 0px. Low elevation, subtle. Almost flat design.
• Borders: None significant in extracted data — minimal lines.

This keeps the design crisp and flat. Rounded corners are minimal — enough to soften but not bubbly.

6. Components

6.1 Buttons

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

• Default: bg #ff8000, text #ffffff, padding 10px 16px, radius 3px, no border/shadow, font 14px/500.
• Hover: bg #31434e (rgb 49,67,78), text stays white.
• Active: bg #0f1519 (rgb 15,21,25).
• Focus: same as active.

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

• Default: bg #2f454f, text #ffffff, padding 14px 20px, radius 3px, font 13px/500.
• Hover: bg #31434e.
• Active/Focus: bg #0f1519.

6.2 Links

Three variants:

1. White (#ffffff), bold (600), no underline. Hover stays white.
2. Slate (#2f454f), medium (500). Hover turns white.
3. Light gray (#cbd1d3), regular (400). Hover turns white.

6.3 Forms

Only one select:

• Default: bg #303e47, text #c5c9db, radius 4px, padding 0 32px 0 10px.
• Focus: bg #0f1519.

6.4 Cards

No explicit card component in extracted data. Likely flat, with padding from spacing scale.

7. Design Tokens

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

  /* Typography */
  --font-family-roboto: "Roboto", sans-serif;
  --font-size-h1-lg: 44px;
  --font-size-h1-md: 42px;
  --font-size-h1-sm: 21.06px;
  --font-size-h1-xs: 20px;
  --font-size-link-lg: 18px;
  --font-size-link-md: 14px;
  --font-size-link-sm: 13px;
  --line-height-tight: 1.10;
  --line-height-loose: 1.66;

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

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

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

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 pragmatic, minimal, and content-first. Color is used sparingly, with orange CTAs popping against neutral dark and white backgrounds. Typography is Roboto-driven, with ultra-light hero headings and medium-weight UI text. Spacing follows an 8px base grid with occasional non-standard values.

## Color Palette
- White: #ffffff — Headers, logos, text on dark backgrounds
- Light Gray: #cbd1d3 — Secondary text on dark backgrounds
- Slate Blue: #2f454f — Header background, secondary buttons
- Dark Gray: #333333 — Neutral text
- Orange: #ff8000 — Primary CTAs
- Deep Red: #bc382e — Error/warning accents
- Light Orange: #ff9224 — Hover state for orange buttons
- Muted Blue: #405965 — Hover state for dark buttons

## Typography
Font family: "Roboto", sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1-lg | 44px | 100 | 1.10 | Hero headings |
| H1-md | 42px | 100 | 1.10 | Hero headings (alt) |
| H1-sm | 21.06px | 500 | 1.66 | Section titles |
| H1-xs | 20px | 400 | 1.66 | Small headings |
| Link-lg | 18px | 400 | 1.66 | Prominent links |
| Link-md | 14px | 600 | 1.66 | Nav links |
| Link-md-up | 14px | 500 | 1.66 | Uppercase UI links |
| Link-sm-up | 13px | 500 | 1.66 | Uppercase small links |
| Caption-up | 14px | 500 | 1.66 | Uppercase captions |

## Spacing & Grid
Base: 8px grid. Available values: 1, 5, 8, 10, 12, 14, 18, 19.1875, 21.06, 34.86, 36.52, 40, 48, 80, 108, 160, 460.8 px. Use multiples of 8px where possible.

## Border Radius
- sm: 3px — buttons, small UI
- md: 4px — select inputs
- pill: 32px — pill links

## Shadows & Depth
- Shadow-sm: rgba(0,0,0,0.2) 0px 2px 3px 0px

## Component Specifications

### Primary Button
Default:
- background: #ff8000
- color: #ffffff
- padding: 10px 16px
- border-radius: 3px
- font: 14px/500
- border: none
Hover: background #31434e
Active: background #0f1519
Focus: background #0f1519

### Secondary Button
Default:
- background: #2f454f
- color: #ffffff
- padding: 14px 20px
- border-radius: 3px
- font: 13px/500
Hover: background #31434e
Active: background #0f1519
Focus: background #0f1519

### Links
1. White, 600 weight, no underline. Hover stays white.
2. Slate (#2f454f), 500 weight. Hover turns white.
3. Light gray (#cbd1d3), 400 weight. Hover turns white.

### Select Input
Default: bg #303e47, color #c5c9db, radius 4px, padding 0 32px 0 10px.
Focus: bg #0f1519.

### Cards
Flat background, padding from spacing scale, minimal radius (3–4px).

## Layout & Responsive Rules
- Breakpoint: 610px mobile/desktop switch
- Use consistent padding multiples of 8px

## Interaction Rules
- Transition: background-color 150ms ease for buttons
- Focus: background shift for buttons, bg darkening for inputs
- Hover: subtle color shift

## DO
- Use only defined palette colors
- Maintain 8px grid
- Keep headings ultra-light for large sizes
- Use white text on colored buttons
- Use minimal shadows

## DON'T
- Add unapproved colors
- Overuse orange — reserve for CTAs
- Mix sharp and rounded corners
- Add heavy drop shadows

## Code Examples

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

### Secondary Button
```css
.btn-secondary {
  background: #2f454f;
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
  border: none;
  transition: background 150ms ease;
}
.btn-secondary:hover { background: #31434e; }
.btn-secondary:active,
.btn-secondary:focus { background: #0f1519; }
```

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

9. Summary

TL;DR — Blogger’s design system is minimal, functional, and restrained. Orange CTAs are the only real splash of color, paired with slate blues and white. Typography is all Roboto, with ultra-light hero headings. Spacing follows an 8px base with a few quirks. Components are flat, with tiny radii and almost no shadows.

Brand Keywords:

• warm-functional
• google-minimal
• content-first
• restrained-color
• flat-ui