Free Brand Design System Deep Dive

1. Brand Overview

Free’s visual identity is rooted in a clear, unapologetic confidence. The brand is direct, bold, and stripped of unnecessary decoration. This isn’t a design system trying to impress with gradients or ornamental flourishes — it’s a system that gets to the point.

The primary red (#cc0000) is the hero here. It’s aggressive, high-energy, and immediately recognizable, especially in a telecom/internet market dominated by blues and muted tones. Red is not a safe color; it’s a challenger’s color. Free is positioning itself as the brand that disrupts, that doesn’t play by the established visual rules.

Typography reinforces this personality. The custom Iliad typeface appears in headings, giving the brand a proprietary feel, paired with Montserrat for UI and body — a reliable sans-serif that’s modern but human-friendly. The use of weights from ultra-light (100) to heavy (700) allows for nuanced hierarchy without introducing more typefaces.

Layout and spacing follow an 8px scale — predictable, easy for developers, and consistent across components. Components are built with clean geometry: pill shapes (9999px radius) for buttons, rounded rectangles (8px, 16px, 12px) for cards and modals. Shadows are minimal to nonexistent — depth is created via borders and contrast rather than drop shadows. This keeps the UI crisp and flat.

Free’s design system is for digital-first experiences — fast, responsive, and adaptable to devices from mobile to desktop. The breakpoints range from 599px for small devices up to 1920px for large screens, showing a commitment to scaling the same brand feel across contexts. Tailwind CSS and Vuetify are in play, meaning the brand has a modern, component-based dev stack.

In short: this is a challenger brand’s design language — bold primary color, custom headline font, tight grid, minimal depth, and functional clarity.

2. Color System

2.1 Primary Colors

The brand red (#cc0000) is the anchor. It’s used for the logo, key CTAs, and interactive states. Red in this shade is pure, saturated, and unambiguous — not leaning orange or pink. Psychologically, it signals urgency, power, and confidence. In telecom, it sets Free apart from the blue-heavy palettes of competitors like Orange, SFR, or Bouygues.

The neutrals — from #ffffff to dark greys (#212529, #161616, #000000) — create a high-contrast environment where red pops. Greys like #8d8d8d and #6f6f6f handle secondary text, while #f4f4f4 and #e0e0e0 serve as surface backgrounds.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong: #cc0000 on #ffffff easily passes WCAG AA for normal text. Dark greys against light surfaces are safe for accessibility. The palette uses pure colors — no complex hues or gradients — which makes contrast predictable.

No explicit dark mode is defined. The palette leans to light surfaces (#ffffff, #f4f4f4) with dark text. A dark mode would require inversion: #161616 background, #f4f4f4 text, #cc0000 still as accent.

2.4 Usage Guide

• Primary actions: Use #cc0000 for buttons, links, logo.
• Surfaces: Use #f4f4f4 for section backgrounds, #ffffff for cards.
• Text: Use #212529 or #161616 for primary text; #8d8d8d or #6f6f6f for secondary.
• Borders: Use #c6c6c6 or #e0e0e0.
• Avoid: Mixing red with blue (#0073ff) unless it’s a functional accent — it risks diluting the brand focus.

3. Typography

3.1 Font Families

• Iliad — Custom brand typeface for headings. Fallback: Arial.
• Montserrat — UI and body copy. Fallback: Arial.
• icons — Icon font for UI glyphs.

No Google or Adobe fonts detected — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 64px down to 32px — big hero text, then smaller section headers. Montserrat fills in smaller UI text, maintaining readability. The wide range of weights allows subtle emphasis without changing size. Icon font sizes match text sizes for alignment.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Values:

4.2 Layout

Breakpoints:
599px (mobile), 768px (tablet), 1024px, 1275px, 1280px, 1440px, 1920px.

Responsive design is clearly a priority — many intermediate breakpoints. Tailwind’s utility classes make adapting spacing easy.

5. Visual Elements

Border Radius

Shadows

Mostly flat. Minimal shadows:

• Transparent 3px blur
• Very light RGBA shadows for subtle depth
• One grey shadow rgb(128, 128, 128) 0px 0px 4px 0px

Borders

Thin (1px) solid borders dominate. Colors: #c6c6c6, #e0e0e0, semi-transparent RGBA. Borders create separation in a flat design.

6. Components

6.1 Buttons

Primary (red):

• Default: bg #cc0000, white text, 8px radius, 1px border rgba(34,34,34,0.2), padding 8px 16px
• Hover: bg rgba(0,0,0,0.2), white text, 0.7 opacity
• Active: bg rgba(0,0,0,0.4)
• Focus: no outline

Secondary (light grey):

• Default: bg #eeeeee, dark grey text, 8px radius, 1px border rgba(34,34,34,0.2)
• Same hover/active/focus as primary

Icon button:

• Default: transparent bg, red text, 10px radius, 1px border rgba(0,0,0,0.4)
• Hover: bg #e2f5f9, grey text, 0.7 opacity
• Active: bg rgba(0,0,0,0.4), white text

Pill button (white):

• Default: bg white, grey text, radius 9999px, border #c6c6c6
• Hover/active: same pattern

Pill button (black):

• Default: bg #161616, light grey text, radius 9999px, border #161616

6.2 Links

Variants from red underlined to grey plain text. Hover universally changes to white — a bold interaction choice.

6.3 Forms

No text inputs in extracted data. Likely styled with 1px borders and 8px radius.

6.4 Cards

Surfaces use #ffffff or #f4f4f4, radius 8px or 16px, thin borders instead of shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-light-grey: #c6c6c6;
  --color-dark-grey-1: #212529;
  --color-dark-grey-2: #161616;
  --color-white: #ffffff;
  --color-mid-grey: #8d8d8d;
  --color-very-light-grey: #f4f4f4;
  --color-brand-red: #cc0000;
  --color-black: #000000;
  --color-pale-grey: #e0e0e0;
  --color-medium-grey: #6f6f6f;
  --color-dark-grey-3: #525252;
  --color-dark-grey-4: #393939;
  --color-accent-blue: #0073ff;

  /* Typography */
  --font-iliad: "Iliad", Arial;
  --font-montserrat: "Montserrat", Arial;
  --font-icons: "icons";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9.04688px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-64: 64px;
  --space-360: 360.984px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-xxl: 12px;
  --radius-xxxl: 16px;
  --radius-huge: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-light: rgba(0,0,0,0) 0px 0px 3px 0px;
  --shadow-subtle: rgba(0,0,0,0.04) 0px 2px 4px 0px, rgba(0,0,0,0.04) 0px 3px 6px 0px;
  --shadow-grey: rgb(128,128,128) 0px 0px 4px 0px;
}

8. AI Coding Assistant Prompt

# Free Design System Specification

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

## Brand Context
Free’s design language is bold, flat, and confident. It uses a bright primary red against neutral greys and whites, minimal shadows, and rounded geometry. Typography is custom for headings and Montserrat for UI, with a strict 8px spacing grid.

## Color Palette
- Light Grey: #c6c6c6 — borders, neutral surfaces
- Dark Grey 1: #212529 — nav backgrounds, primary text
- Dark Grey 2: #161616 — text, dark surfaces
- White: #ffffff — backgrounds, text on dark
- Mid Grey: #8d8d8d — secondary text
- Very Light Grey: #f4f4f4 — section surfaces
- Brand Red: #cc0000 — logo, CTAs, primary buttons
- Black: #000000 — icons, text
- Pale Grey: #e0e0e0 — dividers, component surfaces
- Medium Grey: #6f6f6f — secondary text
- Dark Grey 3: #525252 — body text
- Dark Grey 4: #393939 — inline text elements
- Accent Blue: #0073ff — rare accents

## Typography
- Headings: "Iliad", Arial
- Body/UI: "Montserrat", Arial
- Icons: "icons"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 64px | 400 | 1.13 | Page titles |
| H2 | 40px | 700 | 1.20 | Section headers |
| H3 | 32px | 700 | 1.25 | Subheaders |
| Body | 16px | 400-700 | 1.50 | Paragraphs, UI text |
| Caption | 12-14px | 400-600 | 1.33-1.50 | Labels, small text |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 6px, 8px, 9.04688px, 10px, 12px, 14px, 16px, 20px, 24px, 30px, 32px, 40px, 48px, 50px, 64px, 360.984px.
Use spacing tokens consistently for padding, margins, and gaps.

## Border Radius
- none: 0px — square corners
- sm: 3px — dialogs
- md: 5px — small elements
- lg: 8px — buttons, cards
- xl: 10px — icon buttons
- xxl: 12px — images, list items
- xxxl: 16px — large cards
- huge: 24px — special containers
- full: 9999px — pills, avatars

## Shadows & Depth
Flat design. Subtle RGBA shadows only for hover elevation. Prefer borders for separation.

## Components

### Primary Button
Default:
- background: #cc0000
- color: #ffffff
- padding: 8px 16px
- border-radius: 8px
- border: 1px solid rgba(34,34,34,0.2)
- font-weight: 700
- font-size: 16px
Hover:
- background: rgba(0,0,0,0.2)
- opacity: 0.7
Active:
- background: rgba(0,0,0,0.4)
Focus:
- outline: none

### Secondary Button
Default:
- background: #eeeeee
- color: #444444
- same padding/radius/border as primary

### Icon Button
Default:
- background: transparent
- color: #cc0000
- padding: 8px
- border-radius: 10px
- border: 1px solid rgba(0,0,0,0.4)
Hover: bg #e2f5f9, color #757575

### Navigation Link
Default: color varies (red, grey), no underline
Hover: color white

## Layout & Responsive Rules
Max content width: 1920px
Breakpoints: 599px, 768px, 1024px, 1275px, 1280px, 1440px, 1920px
Mobile: stack components vertically, 16px padding
Desktop: use grid with gaps from spacing scale

## Interaction Rules
Transition: 150ms ease for hover/active states
Focus: remove default outline, rely on color changes

## DO List
- Use ONLY colors from the palette
- Maintain 8px spacing grid
- Use Iliad for headings, Montserrat for body
- Keep shadows subtle or absent
- Make CTAs red

## DON'T List
- Don't introduce new colors
- Don't mix sharp and rounded corners
- Don't use heavy shadows
- Don't remove hover feedback

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #cc0000;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(34,34,34,0.2);
  font-weight: 700;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgba(0,0,0,0.2); opacity: 0.7; }
.btn-primary:active { background: rgba(0,0,0,0.4); }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}
```

Input:
```css
.input {
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
}
.input:focus { border-color: #cc0000; outline: none; }
```

9. Summary

TL;DR — Free’s design system is a flat, bold, red-forward UI with custom heading type, Montserrat body, strict 8px spacing, and minimal shadows. It’s built for speed and clarity.

Brand Keywords:

• bold-minimalist
• red-challenger
• flat-precision
• telecom-direct
• modern-functional