Serasa Experian Brand Design System Deep Dive

Data extracted from: https://www.serasaexperian.com.br/
Analysis date: 2025-12-12
Author: Senior Brand Design Analyst

1. Brand Overview

Serasa Experian blends corporate trust with consumer empowerment. From the very first impression, their website feels data-driven yet human. It’s designed to make complex financial tools approachable for everyday users — the kind of design you’d expect from a market leader that wants to reassure, not intimidate.

The vibe is "corporate with empathy." The color palette strikes an unusual balance: deep professional blues paired with vibrant magentas and purples. This duality mirrors their market position — serious about data, but approachable for consumers who interact with their credit tools.

Typography choices reinforce this feeling. Everything runs on Roboto, a workhorse font used by digital-first brands that care about clarity. No fancy serif drama here. It’s pragmatic, grid-friendly, and scalable — perfect for a high-traffic platform dealing with forms, dashboards, and data.

Visually, Serasa Experian’s site feels highly modular. Every element lives inside a clear 8px grid system. Buttons, cards, and forms all share the same rhythm. If this site were a person, it’s the organized team player — never missing a spacing guideline, never shouting too loud.

Rounded corners dominate — from 8px up to 64px, with splashy 50% pills. This curvature softens the brand’s analytical backbone. It makes “credit checking” feel a bit less bureaucratic and a bit more like tapping a friendly app.

They’re definitely not chasing visual trends. The design is anchored in practical usability. The blue (#1d4f91) and magenta (#e80070) duo reads consistently across CTAs, links, and accents, signaling that corporate + vibrant can coexist when engineered with restraint.

If banks wear suits, Serasa Experian wears a colorful blazer over a spreadsheet. Structured, but not stiff. Reliable, but still optimistic about digital finance. That’s their signature.

2. Color System

Serasa Experian’s color system is unmistakable: a triad of deep blue, bold magenta, and supporting neutrals. The visuals mix professionalism and warmth — a clever move for a financial data company that has to sound friendly.

2.1 Primary Colors

The primary color is #1d4f91 (rgb(29, 79, 145)) — a solid, deep blue. It drives the brand’s main identity and appears on navigation, links, and core icons. It conveys security, reliability, and technology — everything you want in a credit data company.

There’s also a secondary “emotional driver”: magenta #e80070. This shade adds energy. It’s used for buttons and CTAs. The combo of blue and magenta is bold — visually distinct in a market full of cold blues (like Equifax’s navy or TransUnion’s teal). Serasa’s magenta stands out on CTA regions, reminding the user this is also a consumer brand, not just a B2B database.

2.2 Complete Palette

Every extracted tone, normalized and observed roles below:

2.3 Color Relationships

The contrast between the primary blue (#1d4f91) and white (#ffffff) is strong — a ratio around 8.8:1, well above WCAG AA. Magnificently legible. Same for magenta (#e80070) on white: contrast is 5.3:1 — borderline for small text but punchy for CTAs. Good enough for accessibility when paired with bold typography.

They follow a light mode baseline: surfaces are white; text is dark gray. Blue and magenta act as highlights, never backgrounds. There’s no dark mode in this extracted set — no inverse tokens — but the blue shades could easily support one if inverted correctly.

2.4 Usage Guide

What works:

• Blue (#1d4f91) + White = primary navigation and trust.
• Magenta (#e80070) for CTAs — the brand spark.
• Purple (#6d2077, #77127b) as hover or secondary CTAs.
• Neutral grays (#333, #64676b, #717171) for hierarchy.

What to avoid:

• Blue text on magenta background — low contrast.
• Pure black (#000000) text for body — harsh against white.
• Excess pink (#e63888) on magenta or purple — blends too much.

The palette’s balance leans heavily on contrast and vibrance without noise. Blue sets the tone; magenta adds heartbeat; grays stabilize the system. It’s clean, bold, and consistent.

3. Typography

3.1 Font Families

Everything runs on Roboto — the digital-era classic. A few fallbacks like Arial and Helvetica, but no custom licensing or Adobe fonts. No variable fonts, no custom imports. This is a deliberate low-friction choice for scalability.

Roboto is geometric, legible, and neutral — ideal for dense forms and multilingual UI. Arial appears in button or caption contexts, probably legacy code or accessibility fallback.

3.2 Type Scale

Below is the extracted size system. Sizes, weight, and line-height reflect their actual rhythm.

3.3 Hierarchy

The hierarchy is clear and rational. Headings range smoothly from 64px down to 16px, line heights hover between 1.1 and 1.5 — maintaining vertical rhythm on the 8px baseline.

Roboto 600 or 700 weights mark sub-sections and CTAs. The body copy at 16px (1rem) keeps everything legible, especially for mobile. Line spacing of 1.5 gives just enough air.

Notice how button text (16px, weight 600) matches paragraph text size. This keeps button labels feeling integrated rather than oversized.

This is a functional typography system — it scales cleanly and rarely surprises. Great for dashboards, dense content, and multilingual layouts. No exotic typography. No contrast font pairings. Just one consistent global voice.

4. Spacing & Layout

4.1 Spacing Scale

The base scale is 8px — confirmed from both common values and mapping of elements.

Every spacing value fits into the 8px logic, even the edge cases (5px, 11px) that probably come from visual alignment tweaks. The usage is classic web grid discipline. You could layout any section purely with multiples of 8px and it would align perfectly.

4.2 Layout & Breakpoints

Serasa uses dense breakpoint control — 25 different widths extracted between 336px and 1441px.
Key points:

• Mobile: 336px–767px
• Tablet: 768px–992px
• Medium desktop: 1024px–1240px
• Full desktop: up to 1440px

It’s a responsive-first grid that adapts gracefully to small screens. The site likely uses flexbox or grid with adaptive column count — not fluid typography, but modular scaling. It’s clear the designers built for typical devices rather than fluid extremes.

5. Visual Elements

Border Radius System

Rounded geometry dominates. Elements show a full range from minimal (4px) to bold (64px) and circular (50%).

This rounding makes the brand feel confident yet modern. There’s softness without losing structure.
The 8px radius is the backbone — consistent for form elements and most CTAs.

Shadows

Serasa doesn’t go full flat. Shadows are light but present.

They use shadows as soft accents — tying hue back to brand purples. Never heavy-handed.

Borders

Mostly 1px solid lines in neutral tones (rgb(214,214,214) and rgb(109,32,119) for focus or brand). A few creative touches — tab accents with colored left bars. Border usage is considered — dividers for layout clarity, not decoration.

6. Components

This is where Serasa’s systematic precision shines. Every UI element follows tight color logic and consistent radius.

6.1 Buttons

Let’s unpack the core variants and states.

Primary (Magenta CTA)

Default

• background: rgb(232,0,112) (#e80070)
• color: white
• padding: 11px 16px
• radius: 8px
• border: 1px solid #e80070

Hover

• background: white
• color: #e63888
• border: 1px solid rgb(118,0,86)

Focus

• box-shadow: rgb(0,95,117) 0px 0px 0px 2px
• outline: none

Clean and visible. Focus ring uses teal (#005f75) — distinct from brand colors to ensure visibility.

Secondary (Purple CTA)

Identical layout, different hue:

• background: #6d2077
• border: same color
• text: white
• hover swaps white background and magenta text.
• Focus ring repeats the same blue-green accent.

Basically a hue-shifted sibling of primary.

Circular CTA (Icon)

• background: transparent
• color: #333
• border: 1px solid #d6d6d6
• hover: border-color rgb(118,0,86)
• shape: fully rounded 50%
• Use: carousel or pagination

Floating CTA Card

• background: white
• shadow: rgba(105,105,105,0.2) 0px 4px 50px
• radius: 50px
• color: #333
• Lightweight container button — big visual hit zone.

Green Fixed Button

• background: rgb(15,172,103)
• radius: 8px
• Flat, no border. Used for sticky bars.

Small Utility (Gray capsule)

• background: rgb(240,240,240)
• border: 1px solid #4a4a4a
• radius: 20px
• font: 12px bold
• hover: invert to white and magenta border

Purple Accent Capsule

• background: #77127b
• border: none
• radius: 20px
• shadow: rgb(119,18,123) 0px 10px 28px -12px

This is the prestige variant — used where brand color saturation matters.

6.2 Links

8 extracted link states show a clear design language: underline for readability, remove on hover.

They rely heavily on color transition rather than underline toggling. Text-decoration consistency gives clear affordance to users.

6.3 Forms

Text Inputs

• background: white
• text: #717171
• border: 1px solid #d6d6d6
• radius: 8px
• padding: 12px
• focus: outline none; border resets to 0 (probably replaced by shadow via JS states)

Checkbox

• border: none; transparent background; icon-only check indicator. Rounded corners are removed (0px).

All form inputs follow clean neutrality: high contrast, practical spacing. No decorative flair.

6.4 Cards

Hard data comes from their border-radius and shadow pairings:

• background: white
• shadow: rgba(105,105,105,0.2) 0px 4px 50px
• radius: between 32px–64px
• padding: multiples of 24px–32px

Cards float softly on backgrounds, often with pill-shaped imagery (50% top corners). The consistent shadow color (gray rather than black) keeps them light and crisp.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #1d4f91;
  --color-secondary: rgba(0, 0, 0, 0);
  --color-text: #333333;
  --color-background: #ffffff;
  --color-gray-600: #64676b;
  --color-black: #000000;
  --color-blue-soft: #09478f;
  --color-gray-500: #717171;
  --color-purple: #6d2077;
  --color-magenta: #e80070;
  --color-purple-dark: #77127b;
  --color-pink: #e63888;
  --color-blue-muted: #426da9;
  --color-slate: #252c34;
  --color-gray-400: #585858;

  /* Typography */
  --font-primary: "Roboto", sans-serif;
  --font-fallback: "Arial", "Helvetica", sans-serif;

  /* Font sizes and line-heights */
  --font-h1: 64px;
  --font-h1-line: 1.13;
  --font-body: 16px;
  --font-body-line: 1.50;
  --font-caption: 14px;

  /* Spacing */
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-96: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-2xl: 64px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(108, 36, 119, 0.05) 0px 6px 12px 0px;
  --shadow-lg: rgba(105, 105, 105, 0.2) 0px 4px 50px 0px;
  --shadow-card: rgba(133, 133, 133, 0.24) 1px 1px 20px 0px;
}

8. AI Coding Assistant Prompt

# Serasa Experian Design System Specification

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

## Brand Context
Serasa Experian combines financial credibility with accessibility. The design system balances corporate blue tones with expressive magenta and purple accents. Everything runs on a disciplined 8px grid and the Roboto typeface.

## Color Palette
- Primary Blue: #1d4f91 — navigation, icons, links, headings
- Magenta CTA: #e80070 — primary buttons, interactive highlights
- Secondary Purple: #6d2077 — secondary buttons, brand touchpoints
- Deep Purple: #77127b — hover or emphasis states
- Accent Pink: #e63888 — hover for CTAs
- Soft Blue: #09478f — tab highlight line
- Neutral Dark: #333333 — text
- Neutral Gray: #64676b — secondary text
- Mid Gray: #717171 — body text / placeholder
- White: #ffffff — backgrounds, text on brand colors
- Slate: #252c34 — footer/dark elements
- Transparent: rgba(0,0,0,0)

## Typography
Font Family: "Roboto", fallback "Arial", "Helvetica"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 64px | 500 | 1.13 | Page title |
| H2 | 48px | 500 | 1.17 | Section intro |
| H3 | 36px | 600 | 1.17 | Headline |
| H4 | 25px | 600 | 1.00 | Sub title |
| H5 | 20px | 500–700 | 1.2–1.4 | UI headers |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Small | 14px | 400–600 | 1.43–1.71 | Captions, notes |

## Spacing & Grid
Base: 8px. Scale includes 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 96px.
Use multiples of 8px for layout rhythm.

## Border Radius
- none: 0px — tables
- sm: 4px — small icons
- md: 8px — inputs, standard buttons
- lg: 20px — pills, rounded cards
- xl: 32px–64px — feature cards or banners
- full: 50% — avatars, rounded buttons

## Shadows & Depth
- Light shadow: rgba(108,36,119,0.05) 0px 6px 12px
- Medium: rgba(105,105,105,0.2) 0px 4px 50px
- Card: rgba(133,133,133,0.24) 1px 1px 20px

## Components

### Primary Button
```css
.btn-primary {
  background: #e80070;
  color: #fff;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid #e80070;
  font-weight: 600;
  font-size: 16px;
}
.btn-primary:hover {
  background: #fff;
  color: #e63888;
  border-color: #760056;
}
.btn-primary:focus {
  box-shadow: 0 0 0 2px #005f75;
  outline: none;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #6d2077;
  color: #fff;
  border-radius: 8px;
  border: 1px solid #6d2077;
  padding: 11px 16px;
}
.btn-secondary:hover {
  background: #fff;
  color: #e63888;
  border: 1px solid #760056;
}
.btn-secondary:focus {
  box-shadow: 0 0 0 2px #005f75;
}
```

### Input Field
```css
.input {
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  padding: 12px;
  color: #717171;
  background: #fff;
  font-size: 16px;
}
.input:focus {
  border: 0;
  outline: none;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 32px;
  padding: 24px;
  box-shadow: rgba(105,105,105,0.2) 0px 4px 50px;
}
```

## Layout & Responsive Rules
- Max width: 1240px
- Page padding: 16px mobile / 32px desktop
- Breakpoints: 480px, 768px, 992px, 1240px, 1440px

## Interaction Rules
- Transition duration: 150ms ease
- Focus state: visible via 2px teal outline
- Hover states invert color or lighten shades
- Disabled elements: 50% opacity

## DO
- Use only defined hex colors
- Keep all spacing multiples of 8px
- Maintain 8px or 20px radii consistently
- Keep shadows subtle and tinted gray, not black
- Use Roboto for everything
- Use white background for clarity

## DON'T
- Don’t add bright gradient backgrounds
- Don’t mix sharp and rounded corners
- Don’t change font family
- Don’t use unapproved shades of blue or pink
- Don’t stack shadows

## Example Implementations
### Tailwind equivalents
```html
<button class="bg-[#e80070] text-white px-4 py-2 rounded-md font-semibold hover:bg-white hover:text-[#e63888] focus:outline-none focus:ring-2 focus:ring-[#005f75]">
  Confirm
</button>

<div class="bg-white rounded-[32px] shadow-[0_4px_50px_rgba(105,105,105,0.2)] p-6">
  <h2 class="text-[#1d4f91] font-semibold text-2xl">Credit Summary</h2>
</div>

<input type="text" class="border border-[#d6d6d6] rounded-md p-3 text-[#717171] focus:outline-none focus:ring-2 focus:ring-[#005f75]" />
```

9. Summary

TL;DR:
Serasa Experian’s design is corporate confidence with a friendly twist. Blue builds trust, magenta creates warmth. Roboto keeps everything grounded. 8px grids rule everything. Rounded geometry and soft shadows add polish without fluff.

Brand Keywords:

• data-driven-hospitality
• corporate-softness
• grid-disciplined
• tech-trustworthy
• magenta-powered

In one line:
Serasa Experian’s system is all about clarity with character — blue for trust, magenta for action, Roboto for legibility, and an 8px grid that keeps it all perfectly in order.