Onet Brand Design System Deep Dive

1. Brand Overview

Onet is a major Polish online news and services portal. It’s an information hub, and the design reflects that—dense, layered, but structured enough to guide a reader through a flood of content. This is not the sparse, aspirational minimalism of a Silicon Valley startup. Instead, we’re looking at a functional interface, tuned for delivering fast, scannable updates alongside interactive tools.

The vibe: pragmatic, commercial, bold in places, but restrained where functionality demands it. The brand uses black and deep greys to set a serious tone, white for clarity, and a strong yellow punch (#FFD200) as its signature accent. That yellow has a heritage feel—it’s closer to the kind of safety yellow that demands attention, functional yet warm.

Typography is modern and clean. Fira Sans is the workhorse, which tells me they wanted high readability on screens and a font that’s versatile across weights. The occasional Helvetica Neue usage—probably legacy—dips into design-system pockets that may have been migrated from older templates. There’s also raw Arial in some contexts (buttons and headings), practical but a bit of a mixed bag.

Corners and curvature give away part of Onet’s interaction philosophy: 7px radius dominates, lending slightly rounded cards and images without going full pill-shape. When they do go pill (40px, 100% radius), it’s for high-visibility actions—search buttons, CTAs, chat icons.

Overall, Onet’s system is stable, with patterns that feel “news portal” in the European sense: emphasis on typography, restrained decoration, functional color coding. You could imagine printing this UI in grayscale and still navigating it—that’s a mark of robust hierarchy.

2. Color System

2.1 Primary Colors

The standout primary is #FFD200. Bright, assertive, and used in CTAs, buttons, and some up-front branding moments. This color works in crowded UIs because it’s high-contrast against black and grey surfaces, and because Onet avoids pairing it with saturated reds or blues that might compete. It leans into immediacy—very news-appropriate. Competitors like WP.pl tilt towards reds (#E60000) which invoke urgency but can fatigue the reader. Onet’s yellow reads as alert but less aggressive.

Black and near-black tones (#000000, #1E1E1E) are heavily used as text colors and backgrounds for navigation bars or sections. Greys (#DCDCDC, #FFFFFF, #0000EE for links) fill out the action and surface palette.

2.2 Complete Palette

All colors here are high-confidence extractions; yellow and blue are the only saturated hues in heavy use.

2.3 Color Relationships

The primary yellow (#FFD200) over black (#000000) easily exceeds WCAG AA contrast requirements (contrast ratio ~12.7:1). The link blue (#0000EE) against white hits ~8.6:1—strong enough for readability.

Dark mode isn't explicitly implemented; however, heavy use of dark backgrounds in nav/components work well in this news portal context. Contrast between white background content sections and dark interface scaffolding organizes hierarchy visually.

2.4 Usage Guide

• Pair #FFD200 with black for maximum CTA punch.
• Avoid yellow-on-white—the contrast fails accessibility standards.
• Links should use #0000EE and underline only when needed (Onet uses underline selectively; default is none).
• White text on dark charcoal works fine but must be weightier or bigger to maintain legibility.
• Functional greys (#DCDCDC) suit borders/dividers; avoid using them for body text—they’ll underperform in readability.

3. Typography

3.1 Font Families

Onet primarily uses Fira Sans with fallbacks to Arial, Helvetica. Helvetica Neue appears for certain headings and captions, indicating either older template chunks or a niche style choice. Arial is occasionally set directly (buttons, headings), likely for performance or compatibility.

No Google Fonts or Adobe Fonts are sourced directly—these are hosted/served locally.

3.2 Type Scale

…and so forth (full list in source data).

3.3 Hierarchy

Heavier weights (700) and uppercase transforms mark section headers. Larger sizes (32px–36px) are rare—reserved for major headlines and top buttons. The bulk of interactive text runs at 14–16px, which keeps density manageable but could push accessibility edges for smaller captions.

Line height often tight (1.00–1.20), which suits compact card layouts but gives a slightly compressed feel. This matches the “information-dense” brand character.

4. Spacing & Layout

4.1 Spacing Scale

The base grid is listed as "8px" scaling. However, Onet clearly uses sub-base units often—3px, 5px, 7px, 9px appear frequently.

4.2 Layout

Breakpoints reflect a standard multi-device approach:

• 320px — small devices
• 480px, 500px — small-mid
• 650px — phablet
• 768px — tablet
• 1072px — small desktop
• 1280px, 1366px — large desktop

5. Visual Elements

Border Radius

7px is the dominant card/image radius. Pills go up to 40px or full 100%. Smaller radii (4px, 5px) on more restrained buttons.

List:

• 0px — straight edges
• 4px — accept buttons
• 7px — cards, images
• 15px — rounded small buttons
• 20px — large buttons/forms
• 40px — chat CTAs
• 100% — avatars, pills

Shadow System

Two distinct uses:

• Decorative/inset: White “shadow” — actually a double side highlight (e.g., rgb(255,255,255) -5px 0px …).
• Functional drop shadow: rgba(0,0,0,0.25) 0px 4px 8px — moderate depth, used sparingly.

Borders are more common for separation.

6. Components

6.1 Buttons

Search Button

• Default: bg #FFD200, text black, radius 20px, no border
• Hover: text #AEAAAA, border 2px solid #000000
• Font: weight 700, size 12px

Chat CTA

• bg rgb(147,37,234), padding 0px 10px 0px 15px, radius 40px
• Shadow: rgba(0,0,0,0.25) 0px 4px 8px
• Font: weight 400, size 16px
• Focus: box-shadow none, outline none

Author Button

• White bg, text #1E1E1E, border 1px solid #DCDCDC, radius 15px
• Hover border upgrade to black 2px

Transparent Author Button

• Transparent bg, white text, same border as above

CMP Accept Button

• bg #FED413 (close to brand yellow), text black
• Border 2px solid #A38800
• Padding 12px, radius 4px

6.2 Links

Variants:

• Blue (#0000EE), weight 700 — default link style
• Charcoal (#1E1E1E), weight 400 — nav items
• Black (#000000) underlined — inline content emphasis
• White (#FFFFFF) — on dark backgrounds
• Grey (#6A6A6A) — low emphasis

Hover state generally changes to muted #484444.

6.3 Forms

Search input:

• Transparent bg, text black
• No border, no radius (0px)
• Padding sides: 12px, 16px

Focus state: not detailed—likely default browser outline suppressed.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-dark-charcoal: #1e1e1e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-grey: #dcdcdc;
  --color-link-blue: #0000ee;
  --color-brand-yellow: #ffd200;

  /* Typography */
  --font-fira-sans: "Fira Sans", Arial, Helvetica;
  --font-helvetica-neue: "Helvetica Neue", Arial;
  --font-arial: Arial;

  /* Spacing */
  --space-3: 3px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-16: 16px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 40px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-side-white: rgb(255,255,255) -5px 0px 0px 0px, rgb(255,255,255) 5px 0px 0px 0px;
  --shadow-drop: rgba(0,0,0,0.25) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Onet Design System Specification

You are an Onet design expert. Build UIs matching their visual language exactly.

## Brand Context
Onet is a Polish news portal that prioritizes clarity, density, and functional hierarchy. It combines bold accents with restrained backgrounds and typography optimized for screen readability. Interactive elements use rounded forms for emphasis, while cards and navigation are slightly softened with 7px corners.

## Color Palette
- Dark Charcoal: #1e1e1e — Text, dividers, nav backgrounds
- Pure Black: #000000 — Primary text, icons, borders
- Pure White: #ffffff — Backgrounds, text on dark
- Light Grey: #dcdcdc — Input borders, low-emphasis UI
- Link Blue: #0000ee — Inline links in body text
- Brand Yellow: #ffd200 — Primary CTAs, accent transitions

## Typography
- Fonts:
  - Fira Sans, Arial, Helvetica — main headings and body
  - Helvetica Neue, Arial — legacy headings/captions
  - Arial — some buttons/headlines
- Type sizes:
  - H1 Arial 36px 400 /1.00
  - H1 Fira Sans 32px 700
  - Link Fira Sans 17.094px 400
  - Caption Fira Sans 14px 700 uppercase
  - [Full table from data]
- Headings: bold, often uppercase for emphasis
- Body: weights 400–500, tighter line heights for dense layouts

## Spacing & Grid
Base: 8px grid with micro-units
Scale: 3px, 5px, 7px, 8px, 10px, 11px, 16px
Use multiples for padding, margins, and gaps. Button padding often 5–12px.

## Border Radius
- none: 0px — straight-edged inputs
- sm: 4px — small buttons
- md: 7px — cards, images
- lg: 15px — medium buttons
- xl: 20px — bigger buttons/forms
- pill: 40px — chat CTAs
- full: 100% — avatars, search pills

## Shadows & Depth
- Edge highlight: white side "shadows" for separators
- Drop shadow: rgba(0,0,0,0.25) 0px 4px 8px for select CTAs

## Component Specifications

### Primary Button
Default: bg #ffd200, color #000000, border-radius 20px, no border, font-weight 700, font-size 12px  
Hover: color #aeaAAA, border 2px solid #000000

### Secondary Button
bg #ffffff, color #1e1e1e, border 1px solid #dcdcdc, radius 15px  
Hover: color #aeaAAA, border 2px solid #000000

### Navigation Link
Default: color #0000ee, weight 700, no underline  
Hover: color #484444

### Input Field (search)
Transparent bg, text #000000, padding 0 12px 0 16px, no border, no radius  
Focus: browser outline suppressed

### Card
bg #ffffff, border-radius 7px, padding multiples of 10px, optional border 1px solid #dcdcdc

## Layout & Responsive Rules
- Breakpoints: 320px, 480px, 500px, 650px, 768px, 1072px, 1280px, 1366px
- Max widths: follow breakpoints
- Page padding: multiples of 8px grid

## Interaction Rules
- Transition: 150ms ease for hover/focus state changes
- Focus indicators: border color change, outline suppressed unless in accessibility mode

## DO List
- Use ONLY palette colors
- Keep spacing multiples of 8px or listed micro-units
- Use Fira Sans for body and headings
- Maintain consistent radius across similar components
- Ensure link hover states darken the text

## DON'T List
- Do not invent new colors
- Do not mix sharp and rounded corners within same module
- Do not overload yellow for non-interactive backgrounds
- Do not reduce body text below 14px

## Code Examples

### Button
```css
.btn-primary {
  background: #ffd200;
  color: #000000;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #aeaAAA;
  border: 2px solid #000000;
}

Card

.card {
  background: #ffffff;
  border-radius: 7px;
  padding: 10px;
  border: 1px solid #dcdcdc;
}

Input

.input-search {
  background: transparent;
  color: #000000;
  padding: 0 12px 0 16px;
  border: none;
  border-radius: 0;
}

---

## 9. Summary

**TL;DR**: Onet’s design system is utilitarian with a strong identity accent (yellow). Fira Sans drives legibility, 7px radius cards keep the tone approachable, and color rules are strict—black, white, charcoal, yellow, and link blue form the functional set.

**Brand Keywords**:
- news-functional  
- yellow-accented  
- typographically-driven  
- rounded-clarity  
- dense-hierarchy