Seznam Design System Deep Dive

1. Brand Overview

Seznam is an old guard of the Czech internet. If you grew up in the region, you’ve used it. It’s a portal, a search engine, a news hub, a mailbox — all under one umbrella. That breadth shows in their design system: it’s not about pushing the bleeding edge of visual trends, it’s about trust, familiarity, and performance across a ton of content types.

The tone is pragmatic. No flashy gradients, no overcomplicated typography stacks. They’re using Arial across the board, sometimes with Helvetica as a fallback. That’s a deliberate “workhorse” choice. Arial renders predictably everywhere, loads instantly, and doesn’t distract from the content.

The color story is anchored on a very recognizable #cc0000 — a saturated red. It’s the brand’s heartbeat. It appears in the logo, primary buttons, and key links. Everything else is neutral: a deep black for body text, mid-grays for secondary text, lighter grays for dividers and backgrounds, and white for surfaces. This gives the red room to breathe and keeps the UI feeling consistent.

The UI language is a hybrid of functional portal design and some softer, modern touches. Rounded corners (4px, 8px, 12px, up to full circles) are common. Cards and buttons often have subtle shadows. They’re not doing full flat design, but they’re also not going into Material Design’s heavy depth stacking.

Interaction states are clear but not overanimated. Hover states often drop opacity or underline links — old-school web affordances that remain effective. Focus states are defined (often swapping background and text colors), which helps with accessibility.

If you’re designing for Seznam, you’re designing for a huge, diverse audience — from teenagers on mobile to older users on desktop. That means clarity beats cleverness. Buttons must look like buttons. Links must be obvious. Content density is high, so spacing is tight but organized on an 8px grid. The system reflects that: a lot of small spacing increments (1px, 2px, 4px, 6px) are used.

In short: the vibe is functional, trusted, content-first. They’ve modernized enough to feel current without alienating long-time users. The red is the signature, the rest is a neutral frame.

2. Color System

2.1 Primary Colors

The main brand color is rgb(204, 0, 0) / #cc0000. This is a high-energy, high-contrast red. On white, it’s arresting. On black, it’s aggressive. Red in branding often signals urgency, passion, and authority — think CNN, YouTube, Coca-Cola. For Seznam, it’s both a nod to its long-standing visual identity and a practical choice: red pops in link lists, headlines, and buttons against the neutral UI.

Compared to competitors (e.g., Google’s blue-heavy palette, Yahoo’s purple), Seznam’s red dominates. It’s a differentiator in the Czech market. Psychologically, it’s a “look here” color — perfect for CTAs and key navigation.

2.2 Complete Palette

2.3 Color Relationships

The palette is essentially primary red + grayscale. That’s a safe, high-contrast setup. Red (#cc0000) on white (#ffffff) has a contrast ratio of ~4.8:1 — just above WCAG AA for normal text. Black (#000) on white is ~21:1, so no issues. Gray text needs careful use: #666666 on white is ~5.3:1 (ok for body), but #aaaaaa on white is ~2.3:1 — too low for small text if accessibility is a priority.

Dark mode isn’t evident in the extracted data, but the grayscale range could invert well.

2.4 Usage Guide

• Primary Red (#cc0000): Use for primary actions, links, and key brand moments. Don’t overuse — it’s there to draw attention.
• Black/Near Black: For main text. Keeps reading comfortable.
• Mid Grays (#666666, #888888): For secondary and tertiary text. Keep font size and weight sufficient for legibility.
• Light Gray (#aaaaaa): Disabled states only.
• Avoid using red for non-interactive elements unless it’s part of branding — red implies clickability or urgency.
• For hover states, subtle darkening or opacity changes work better than wild color shifts.

3. Typography

3.1 Font Families

• Primary: Arial
• Fallbacks: Helvetica, system sans-serif
• Special case: Times appears for some link contexts, but that’s rare.

No Google Fonts, no Adobe Fonts. This is system-safe typography — loads instantly, renders consistently.

3.2 Type Scale

3.3 Hierarchy

The scale is tight. The largest heading is 32px, then it drops quickly to 22px and 20px. There’s a lot of 16px usage for headings — unusual, but in a dense portal layout, it keeps things compact. Weight is the main differentiator: 700 for emphasis, 400 for body. Line heights vary from tight (1.00) for buttons to very loose (2.46) for some captions.

Hierarchy relies on a mix of size and weight, not size alone. That’s functional in a multi-column, content-heavy layout.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with many sub-4px increments for fine-tuning.

4.2 Layout

Breakpoints weren’t extracted, but given Vuetify usage, expect a 12-column grid with responsive breakpoints baked in. The spacing scale supports dense layouts with fine adjustments.

5. Visual Elements

Border Radius

They mix small radii for cards (4px, 8px, 12px) with large ones for pills and circles (30px, 50%, 100%). Some asymmetric radii are used in search bars (0px 28px 28px 0px).

Common mapping:

• 4px: badges, images
• 8px: buttons
• 12px: cards
• 16px+: menus, hero elements
• 50% / 100%: avatars, circular buttons

Shadows

They use soft, multi-layer shadows for depth:

• rgba(0, 0, 0, 0.08) 0px 2px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px — common for cards.
• Heavier: rgba(17, 17, 17, 0.16) 0px 1px 10px 0px for floating buttons.
• Some functional shadows (e.g., for slideable arrows).

Borders

Mostly 1px solid in light gray (rgb(204, 204, 204)) or subtle black alphas. Borders are used for separation more than decoration.

6. Components

6.1 Buttons

They have multiple button variants:

Primary Search Submit:

• Default: bg #cc0000, white text, radius 0px 28px 28px 0px, no border, font 14px/400.
• Hover: opacity 0.3, bg #e0e0e0, border .0625rem solid var(--neutral-1).
• Focus: bg var(--neutral-5), text var(--neutral-1).

Outlined Pill:

• Default: transparent bg, #666 text, 1px solid #ccc, radius 30px, font 12px/700.
• Hover/Focus: same hover pattern as above.

Red Outline:

• Default: bg rgba(204,0,0,0.08), text #cc0000, border 1px solid #cc0000, radius 20px.

Circular Icon Buttons:

• Variants with white bg, red icon; dark overlay bg; or light gray bg.
• Radius 50% or 100%, padding ~13px.

6.2 Links

Variants:

• Red (#cc0000) with underline on default and hover.
• Black/Near black (700 weight) with underline on hover.
• Gray with underline on hover.
• White text links for dark backgrounds.

6.3 Forms

Not much extracted on inputs. Expect simple 1px borders in light gray, 4px radius, Arial text.

6.4 Cards

Cards likely use 12px radius and the soft shadow. Padding from spacing scale (12px, 16px, 24px) depending on density.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #cc0000;
  --color-dark-gray: #666666;
  --color-black: #000000;
  --color-near-black: #111111;
  --color-medium-gray: #888888;
  --color-white: #ffffff;
  --color-light-gray: #aaaaaa;
  --color-dark-charcoal: #2c2c2c;
  --color-mid-charcoal: #404040;
  --color-almost-black: #010101;
  --color-slate-gray: #525252;
  --color-very-dark-gray: #0e0e0e;
  --color-light-blue: #7dbfff;
  --color-dark-red: #990000;

  /* Typography */
  --font-primary: Arial, Helvetica, sans-serif;
  --font-secondary: Times, serif;

  /* Spacing */
  --space-1px: 1px;
  --space-2px: 2px;
  --space-3px: 3px;
  --space-4px: 4px;
  --space-6px: 6px;
  --space-8px: 8px;
  --space-10px: 10px;
  --space-12px: 12px;
  --space-13px: 13px;
  --space-16px: 16px;
  --space-24px: 24px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.08) 0px 2px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;
  --shadow-medium: rgba(17, 17, 17, 0.16) 0px 1px 10px 0px;
}

8. AI Coding Assistant Prompt

# Seznam Design System Specification

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

## Brand Context
Seznam’s design is functional, trusted, and content-first. The primary red (#cc0000) is the signature. Everything else is neutral to let content dominate. Typography is Arial for consistency and performance. Layouts are dense but organized on an 8px grid.

## Color Palette
- Primary Red: #cc0000 — Logo, primary buttons, links
- Dark Gray: #666666 — Secondary text
- Black: #000000 — Body text
- Near Black: #111111 — Headlines
- Medium Gray: #888888 — Tertiary text
- White: #ffffff — Backgrounds, text on dark
- Light Gray: #aaaaaa — Disabled states
- Dark Charcoal: #2c2c2c — Hover/focus bg
- Mid Charcoal: #404040 — Hover/focus bg
- Almost Black: #010101 — Hover/focus
- Slate Gray: #525252 — Hover/focus
- Very Dark Gray: #0e0e0e — Hover/focus
- Light Blue: #7dbfff — Accent hover
- Dark Red: #990000 — Hover variant

## Typography
Font families:
- Primary: Arial, Helvetica, sans-serif
- Occasional: Times, serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1-lg | 32px | 700 | — | Hero titles |
| H1-md | 22px | 700 | 1.18 | Section titles |
| H1-sm | 20px | 700 | 1.60 | Subtitles |
| Body  | 16px | 400 | 1.25 | Paragraphs |
| Link  | 16px | 700 | 1.31 | Nav links |
| Button | 14px | 700 | 1.43 | CTAs |
| Caption | 12px | 400 | 1.67 | Meta info |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 3px, 4px, 6px, 8px, 10px, 12px, 13px, 16px, 24px, 31px, 88.9px
Use multiples of 8px for major layout, sub-8px for fine adjustments.

## Border Radius
- none: 0 — tables
- sm: 4px — badges, small images
- md: 8px — buttons
- lg: 12px — cards
- pill: 30px — tags
- full: 50% — avatars

## Shadows & Depth
- Soft: rgba(0,0,0,0.08) 0 2px 10px, rgba(0,0,0,0.1) 0 0 2px — cards
- Medium: rgba(17,17,17,0.16) 0 1px 10px — floating buttons

## Component Specifications

### Primary Button
Default:
```css
background: #cc0000;
color: #ffffff;
border-radius: 0 28px 28px 0;
border: none;
font-size: 14px;
font-weight: 400;
```
Hover: opacity: 0.3; background: #e0e0e0; border: 1px solid #000;
Focus: background: var(--neutral-5); color: var(--neutral-1);

### Outlined Pill
Default:
```css
background: transparent;
color: #666666;
border: 1px solid #cccccc;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
```

### Links
- Red link: #cc0000 underline; hover underline + color var(--link-hover)
- Black link: #111111 no underline; hover underline

### Input Fields
Border: 1px solid #ccc; border-radius: 4px; padding: 8px; font-family: Arial

### Cards
Background: #ffffff; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-soft)

## Layout & Responsive Rules
- Content grid based on 8px increments
- Use Vuetify breakpoints for responsive

## Interaction Rules
- State changes: 150ms ease
- Focus: visible outline or bg change
- Hover: opacity drop or underline

## DO
- Use only palette colors
- Keep spacing on 8px grid
- Use Arial for all text
- Maintain clear hover/focus states
- Keep primary red for interactive elements

## DON'T
- Invent new colors
- Mix sharp and rounded corners in same component
- Overuse shadows
- Use low-contrast gray for body text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #cc0000;
  color: #ffffff;
  border-radius: 0 28px 28px 0;
  border: none;
  font-size: 14px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  opacity: 0.3;
  background: #e0e0e0;
  border: 1px solid #000000;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.08) 0px 2px 10px, rgba(0,0,0,0.1) 0px 0px 2px;
}
```

Input:
```css
.input {
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
  font-family: Arial, sans-serif;
}
.input:focus {
  border-color: #cc0000;
  outline: none;
}
```

9. Summary

TL;DR — Seznam’s design system is a content-first, red-and-neutral UI built on an 8px grid. Arial everywhere, clear interaction states, and a restrained use of shadows keep things familiar and functional.

Brand Keywords: portal-functional, red-centric, utilitarian-friendly, content-heavy, trusted-classic