UOL Brand Design System Deep Dive

1. Brand Overview

UOL is one of Brazil’s biggest internet portals, a household name in digital news, entertainment, and services. Their design language reflects exactly that—mass reach, high trust, and a need to cater to millions of daily visitors without friction.

The vibe: pragmatic, bold in accents but restrained in base styling. This is not an experimental design playground; it’s a well-oiled machine optimized for clarity and density. You can see the newsroom DNA—lots of typography hierarchy, enough color to guide the eye, but no gratuitous decoration.

The primary red (#cb0003) is the heartbeat of the brand. It’s assertive, urgent—perfect for a news site. It competes visually with global players like CNN’s red, but feels more saturated and slightly darker, which gives it weight against bright content imagery. The rest of the palette is almost monochrome: blacks, grays, and whites dominate, allowing the red to do the heavy lifting for interaction and highlights.

Typography is custom: “UOLText” and “UOLIcons”. They’ve invested in a proprietary typeface, which says a lot about brand maturity. This isn’t Google Fonts territory—they control the nuance of every glyph. The type scale is wide, with giant headlines (44px) down to micro captions (10px). The weight range from 100 to 700 is fully exploited, giving them room to shout and whisper within the same page.

Spacing reveals a clear preference for the 8px grid, but with some outliers—numbers like 5px and 14px sneak in, hinting at legacy or ad-hoc adjustments. Border radii are small (2px, 4px, 16px), which keeps things crisp. Rounded corners exist but never go full-pill except for avatars and some list items (50%).

Overall, UOL’s design system is functional and content-first. It’s built to handle massive amounts of headlines, imagery, and interactive modules without collapsing into chaos. The brand color is used surgically—mainly for actions and highlights—while the rest of the system relies on typography and layout to drive clarity.

2. Color System

2.1 Primary Colors

The main brand color is rgb(203, 0, 3) → #cb0003. This is a deep, rich red. It’s intense enough to stand out against photography and video thumbnails, which often have their own reds and yellows. Psychologically, red conveys urgency, importance, and action—ideal for news.

Competitor comparison: CNN uses a slightly lighter red (#CC0000), which feels more neutral. UOL’s darker tone leans towards authority rather than alarm. It pairs well with dark grays, giving strong contrast in CTAs.

Usage: CTAs, link highlights, icon accents, kicker elements.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• Red (#cb0003) on white (#ffffff) → strong contrast (>7:1), WCAG AAA compliant for normal text.
• Dark gray (#212529) on white → ~12:1 contrast, excellent for readability.
• Light gray (#f0f0f0) as background with dark gray text → ~7:1, safe for UI elements.

No explicit dark mode detected. The palette is inherently dark-friendly because of high contrast ratios, but it’s designed for light backgrounds.

2.4 Usage Guide

• Works well: Red (#cb0003) with white text → clean, high-impact buttons; Dark gray (#212529) with white text → strong headers.
• Avoid: Red text on light gray background—contrast drops and urgency is lost.
• Best combo for CTAs: Red background + white text + 4px radius.
• Neutral UI: Use #cccccc for dividers to avoid overpowering content.

3. Typography

3.1 Font Families

Primary: UOLText, fallback: Arial.
Icon font: UOLIcons (used for glyph-based icons in headings and UI).

No Google Fonts or Adobe Fonts—this is custom. That means consistent rendering is a priority.

3.2 Type Scale

(Full table includes all 40+ styles from data.)

3.3 Hierarchy

Massive top headlines at 44px—command attention. Subheads drop to 32px and 28px, still big enough for dense news layouts. Body and link text often at 16px or 14px, ensuring legibility on mobile.

Weights range from ultra-light (100) for stylized headings to heavy bold (700) for emphasis. Uppercase transforms are common for buttons and small UI labels—keeps them distinct from body copy.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px.
Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 70px, 80px, 100px.
Oddities: 5px, 14px—likely legacy or fine-tuning.

Frequency: 12px (281 uses) dominates—probably default button padding, small gaps.

4.2 Layout

Breakpoints:

• 320px (small mobile)
• 768px (tablet)
• 1024px (desktop)
• 970px/969px variants—possible ad container constraints.

Responsive approach: Content scales with breakpoints, text sizes mostly fixed in px/rem.

5. Visual Elements

Border Radius:

• 2px (cards, headings) → crisp edges
• 4px (buttons, images) → standard UI roundness
• 16px (pictures) → softer accents
• 50% → avatars, circular icons

Shadows: Rare. Only rgba(0,0,0,0.25) 0px 0px 8px found. This is effectively flat design with occasional depth.

Borders: Heavy use of bottom borders for separation. Colors: #212529 (dark gray) and #cccccc (neutral dividers). Red borders for accent on some cards.

6. Components

6.1 Buttons

Search Button (searchHeader__search):

• Default: bg #f2f2f2, text #212529, padding 12px, radius 4px, no border.
• Hover/active/focus: not defined—static.

Card Ticket Button (cardTicket__list__item__button):

• Default: transparent bg, text #1a1a1a, padding 8px 24px, radius 4px, border 1px solid #cb0003.
• Hover: text #ff7366, bg #f2f2f2, translateY(-1px).
• Focus: no outline.

Footer Button (footer__footerBar__button):

• Default: bg #cb0003, text #fff, padding 0 24px, radius 4px, no border.
• Hover: opacity 0.7.

6.2 Links

Multiple styles:

• White #fff, no underline (header links)
• Dark gray #212529, bold (section headings)
• Red #cb0003 for key actions
  Hover generally changes to currentcolor or section-specific variable.

6.3 Forms

Text Input:

• Default: bg #f2f2f2, text #000, no border, padding-left 8px.
• Focus: border color #000.

6.4 Cards

Borders often 2px solid in brand red (#cb0003) or neutral gray (#cccccc). Border radius small (2px, 4px). No shadows—depth via borders.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #cb0003;
  --color-dark-gray: #212529;
  --color-black: #000000;
  --color-gray: #808080;
  --color-light-gray: #f0f0f0;
  --color-medium-gray: #999999;
  --color-white: #ffffff;
  --color-neutral-gray: #cccccc;
  --color-charcoal: #333333;

  /* Typography */
  --font-primary: "UOLText", Arial;
  --font-icons: "UOLIcons";
  --font-size-h1: 44px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-body: 16px;
  --font-size-caption: 12px;
  --font-size-micro: 10px;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-70: 70px;
  --space-80: 80px;
  --space-100: 100px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-default: rgba(0,0,0,0.25) 0px 0px 8px 0px;
}

8. AI Coding Assistant Prompt

# UOL Design System Specification

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

## Brand Context
UOL’s design is content-first, bold in accents, restrained in base styling. Primary red drives interaction, grays and whites handle structure. Typography is custom and highly controlled.

## Color Palette
- Primary Red: #cb0003 — CTAs, buttons, link highlights
- Dark Gray: #212529 — header backgrounds, body text
- Black: #000000 — text, icons
- Gray: #808080 — secondary text, icons
- Light Gray: #f0f0f0 — backgrounds, inputs
- Medium Gray: #999999 — muted text
- White: #ffffff — text on dark backgrounds
- Neutral Gray: #cccccc — dividers, borders
- Charcoal: #333333 — body copy, UI

## Typography
Font families:
- Primary: "UOLText", Arial
- Icons: "UOLIcons"

Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 44px | 700 | 1.20 | Page titles |
| H1 light | 44px | 100 | 1.20 | Uppercase headlines |
| H2 | 32px | 700 | 1.50 | Section headings |
| Button | 28px | 400 | 1.20 | Uppercase labels |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Caption | 12px | 400-700 | 1.20 | Labels |
| Micro | 10px | 400-700 | 1.20 | Fine print |

## Spacing & Grid
Base: 8px. Scale: 4, 5, 8, 10, 12, 14, 16, 20, 24, 32, 40, 70, 80, 100.
Map:
- Buttons: 8px–12px padding
- Cards: 20px–24px padding
- Section gaps: 40px+

## Border Radius
- sm: 2px — small cards
- md: 4px — buttons, inputs
- lg: 16px — images
- full: 50% — avatars

## Shadows & Depth
Minimal. Use `rgba(0,0,0,0.25) 0px 0px 8px` sparingly. Borders preferred for separation.

## Component Specifications

### Primary Button
Default: bg #cb0003, text #ffffff, padding 0 24px, radius 4px, border none.  
Hover: opacity 0.7. Focus: outline 0.

```css
.btn-primary {
  background: #cb0003;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
  border: none;
}
.btn-primary:hover { opacity: 0.7; }
```

### Secondary Button
Default: transparent bg, text #1a1a1a, padding 8px 24px, border 1px solid #cb0003, radius 4px.  
Hover: text #ff7366, bg #f0f0f0, transform translateY(-1px).

### Input Fields
Default: bg #f0f0f0, text #000, padding-left 8px, no border.  
Focus: border-color #000.

### Card
Bg white, border 2px solid #cb0003 or #cccccc, radius 2px–4px, padding 20px+.

## Layout & Responsive Rules
Breakpoints: 320px, 768px, 1024px.  
Page padding: 16px mobile, 24px desktop.  
Grid gap: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.  
Focus indicators minimal—often no visible outline on brand buttons.

## DO List
- Use ONLY palette colors
- Maintain 8px grid
- Use UOLText for all text
- Keep corners small-radius except avatars
- Use borders for separation

## DON'T List
- Don’t add drop shadows
- Don’t mix sharp and rounded corners in same component
- Don’t alter brand red saturation
- Don’t use underlines on links unless required

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #cb0003;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 12px;
}
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #1a1a1a;
  padding: 8px 24px;
  border: 1px solid #cb0003;
  border-radius: 4px;
}
.btn-secondary:hover {
  color: #ff7366;
  background: #f0f0f0;
  transform: translateY(-1px);
}
```

Input:
```css
.input {
  background: #f0f0f0;
  color: #000;
  padding-left: 8px;
  border: none;
}
.input:focus { border-color: #000; }
```

9. Summary

TL;DR: UOL’s system is a study in restraint—one bold primary color, a disciplined gray scale, and typography that owns the hierarchy. Flat design dominates; borders do the heavy lifting for separation.

Brand Keywords:

• content-first
• bold-accent
• flat-structured
• type-driven