Debian Brand Design System Deep Dive

1. Brand Overview

Debian isn't trying to sell you sneakers or coffee subscriptions. The site is a volunteer-driven distribution of free and open-source software. The design reflects that. No glossy gradients, no heavy hero animations. It’s utilitarian, almost austere, but with a certain trustworthiness that comes from decades of being a cornerstone in the Linux ecosystem.

The vibe: functional first. If you’re here, you already know what Debian is or you’re about to download it. The design doesn’t waste time convincing you. The color palette leans heavily on blue — a safe, corporate, reliable hue — paired with stark white and muted grays. This isn’t about delight; it’s about clarity and legibility.

Typography is straight-up sans-serif. Helvetica, Arial fallback, Oswald for a bit of punch in captions. No fancy variable fonts, no Google Fonts imports. This is old-school web design discipline: use what’s available, keep it consistent, don’t break on systems without fancy font support.

Buttons are big — almost comically big — for the primary download CTA. Padding is generous (10px top/bottom, 40px left/right), and the font size is a whopping 36.8px. That’s rare in modern web design where buttons tend to be more restrained. Here it’s almost billboard-like: “Download Debian” is the star.

Spacing follows a loosely 8px-based scale, but the actual values are eclectic — there’s a lot of fractional pixel values (2.4px, 4.48px, 5.76px) which suggest legacy CSS, possibly from older responsive tweaks.

Borders and shadows are minimal. Shadows appear only in a subtle 2px offset form, nothing dramatic. Radius values are small (3px, 5px) except for occasional 50% for circular elements.

Overall philosophy: practical, accessible, no-frills. The design won’t win a Dribbble award, but it will render perfectly on a 10-year-old browser.

2. Color System

2.1 Primary Colors

The hero color here is #0035c7 — a deep blue. It’s strong without being flashy. Psychologically, dark blue signals trust, stability, and professionalism. It’s widely used in tech and finance for those reasons. Debian’s choice here makes sense — it’s a project that powers servers, critical systems, and is maintained by a global volunteer team. The color says “serious” and “dependable.”

Compared to competitors: Ubuntu leans into warm orange/brown, signaling friendliness and community. Fedora uses a lighter blue, more approachable. Debian’s darker blue is more formal.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. Deep Blue (#0035c7) on white (#ffffff) easily meets WCAG AAA for normal text. White text on Deep Blue also passes comfortably. The grays are soft enough for backgrounds but might fail AAA for small text — worth testing in UI contexts.

No dark mode here. The palette is firmly light-theme.

2.4 Usage Guide

• Works: Deep Blue with white text — crisp, strong. Bright Blue for hover states — keeps interaction clear.
• Avoid: Using Medium Gray (#bbbbbb) for text smaller than 14px — low contrast.
• Pairing: Light Gray BG (#f5f6f7) makes a good subtle section background with Dark Gray text.

3. Typography

3.1 Font Families

• Primary: Generic sans-serif (system default)
• Fallback: Helvetica → Arial
• Accent: Oswald (for uppercase captions)
• No Google Fonts, No Adobe Fonts — strictly local/system fonts.

This choice aligns with Debian’s ethos: minimal dependencies, maximum compatibility.

3.2 Type Scale

3.3 Hierarchy

The jump from 36.8px buttons to 35.2px H1 is minimal — both are oversized. This reinforces the CTA as a co-primary with the page title. Lower levels drop quickly into the 22px range, which is readable on desktop. Captions are tight (12px) with varied line heights — some at 2.00 for breathing room, others at 1.00 for compactness.

4. Spacing & Layout

4.1 Spacing Scale

Base grid leans toward 8px multiples but with fractional outliers — maybe from older responsive tweaks.

4.2 Layout

Breakpoints: 450px, 768px, 800px, 850px, 980px, 1250px, 1580px. That’s a lot — likely tuned to specific layout changes rather than a strict mobile/tablet/desktop triad.

5. Visual Elements

Border Radius

Shadows

Only one: rgb(0, 0, 0) 2px 2px 2px -2px. Minimal depth, mostly flat design.

Borders

Mostly 1px solid, in white, gray, or blue. Some inset/outset for form elements — old-school.

6. Components

6.1 Buttons

Primary CTA (os-dl-btn)

• Default:
  • Background: rgba(9, 9, 9, 0.753) — semi-transparent dark
  • Text color: #ffffff
  • Padding: 10px 40px
  • Border radius: 10px
  • Border: none
  • Font size: 36.8px, weight 400
• Hover:
  • Background: #cccccc
  • Text color: #3366ff
• Focus: Not defined explicitly.

Big, bold, clear. Hover state flips the vibe — lighter background with bright blue text.

6.2 Links

Three link styles:

1. Deep Blue (#0035c7), underline default, no underline on hover + bright blue color (#3366ff).
2. Bright Blue (#3366ff), no underline default or hover.
3. White (#ffffff) default, bright blue (#3366ff) hover.

The underline removal on hover is a subtle modern touch.

6.3 Forms

Select-one:

• Background: white
• Text: black
• Border: 1px solid #767676
• Border radius: 0px
• Padding: 0px

Old-school form styling, no custom focus.

6.4 Cards

No explicit card component in data, but divs use small radii (5px) and minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-deep-blue: #0035c7;
  --color-white: #ffffff;
  --color-bright-blue: #3366ff;
  --color-medium-gray: #bbbbbb;
  --color-dark-gray: #888888;
  --color-navy-blue: #00207a;
  --color-vivid-blue: #005fcc;
  --color-light-gray-bg: #f5f6f7;
  --color-cool-gray: #d2d3d7;

  /* Typography */
  --font-primary: sans-serif;
  --font-helvetica: Helvetica, Arial, sans-serif;
  --font-oswald: Oswald, sans-serif;

  --font-size-button: 2.30rem;
  --font-size-h1-large: 2.20rem;
  --font-size-h1-medium: 1.50rem;
  --font-size-h1-small: 1.40rem;
  --font-size-link-large: 1.40rem;
  --font-size-link-medium: 1.10rem;
  --font-size-link-small: 1.00rem;
  --font-size-caption: 0.75rem;

  /* Spacing */
  --space-1: 1px;
  --space-2-4: 2.4px;
  --space-3: 3px;
  --space-3-3: 3.3px;
  --space-4: 4px;
  --space-4-48: 4.48px;
  --space-5: 5px;
  --space-5-76: 5.76px;
  --space-6: 6px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-28: 28px;
  --space-29-3332: 29.3332px;
  --space-130: 130px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-default: rgb(0, 0, 0) 2px 2px 2px -2px;
}

8. AI Coding Assistant Prompt

# Debian Design System Specification

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

## Brand Context
Debian values clarity, stability, and compatibility. The design is utilitarian, with minimal decoration, focusing on legibility and functional hierarchy. Color choices signal trust and seriousness.

## Color Palette
- Deep Blue: #0035c7 — primary links, key actions, borders
- Pure White: #ffffff — backgrounds, text on dark
- Bright Blue: #3366ff — hover states, highlights
- Medium Gray: #bbbbbb — dividers, muted text
- Dark Gray: #888888 — borders, time stamps
- Navy Blue: #00207a — hover/focus link states
- Vivid Blue: #005fcc — hover/focus on buttons
- Light Gray BG: #f5f6f7 — section backgrounds, hover states
- Cool Gray: #d2d3d7 — dividers, borders

## Typography
- Primary: sans-serif
- Secondary: Helvetica, Arial fallback
- Accent: Oswald for uppercase captions

| Element | Size | Weight | Line Height | Transform | Use For |
|---------|------|--------|-------------|-----------|---------|
| Button | 36.8px | 400 | 1.50 | none | Primary CTAs |
| H1 Large | 35.2px | 400 | 0.83 | none | Page titles |
| H1 Upper | 35.2px | 700 | 0.83 | uppercase | Section titles |
| H1 Med | 24px | 400 | 1.00 | none | Subtitles |
| H1 Small | 22.4px | 400 | 1.07 | none | Smaller headings |
| Link Large | 22.4px | 400 | 1.07 | none | Main nav links |
| Link Med | 17.6px | 400 | 1.50 | none | Secondary links |
| Link Small | 16px | 400 | 1.50 | none | Inline links |
| Caption | 12px | 400 | 1.00 | none | Meta info |
| Caption Upper | 12px | 400 | 1.10 | uppercase | Labels |

## Spacing & Grid
Base: loosely 8px grid with fractional legacy values
Scale: 1px, 2.4px, 3px, 4px, 4.48px, 5.76px, 10px, 12px, 16px, 20px, 24px, 28px, 29.3332px, 130px
Use: 10px for button padding, 20px for section gaps, 24px for large sections

## Border Radius
- sm: 3px — small badges
- md: 5px — inputs, small cards
- lg: 10px — primary buttons
- full: 50% — circular labels/icons

## Shadows & Depth
Minimal: rgb(0, 0, 0) 2px 2px 2px -2px

## Component Specifications

### Primary Button
Default:
```css
background: rgba(9, 9, 9, 0.753);
color: #ffffff;
padding: 10px 40px;
border-radius: 10px;
border: none;
font-size: 36.8px;
font-weight: 400;
```
Hover:
```css
background: #cccccc;
color: #3366ff;
```

### Links
Deep Blue variant:
- Default: color #0035c7, underline
- Hover: color #3366ff, no underline

Bright Blue variant:
- Default/hover: color #3366ff, no underline

White variant:
- Default: color #ffffff
- Hover: color #3366ff

### Input Fields
Select-one:
```css
background: #ffffff;
color: #000000;
border: 1px solid #767676;
border-radius: 0px;
padding: 0px;
```

## Layout & Responsive Rules
Breakpoints: 450px, 768px, 800px, 850px, 980px, 1250px, 1580px
Adjust layout at each breakpoint for optimal readability.

## Interaction Rules
- No transition defined — state change is instant
- Hover/focus use color shifts
- No motion/animation

## DO List
- Use only defined palette colors
- Maintain fractional spacing values for legacy consistency
- Keep buttons oversized for emphasis
- Use uppercase Oswald captions sparingly
- Respect breakpoints for layout shifts

## DON'T List
- Introduce shadows beyond the defined minimal
- Mix arbitrary border radius values
- Use fonts outside the system stack
- Reduce primary button size below spec
- Use grays for small text without checking contrast

## Code Examples

Primary button:
```css
.btn-primary {
  background: rgba(9, 9, 9, 0.753);
  color: #ffffff;
  padding: 10px 40px;
  border-radius: 10px;
  font-size: 36.8px;
  font-weight: 400;
  border: none;
}
.btn-primary:hover {
  background: #cccccc;
  color: #3366ff;
}
```

Link:
```css
.link-primary {
  color: #0035c7;
  text-decoration: underline;
}
.link-primary:hover {
  color: #3366ff;
  text-decoration: none;
}
```

Input:
```css
.select {
  background: #ffffff;
  color: #000000;
  border: 1px solid #767676;
  border-radius: 0;
  padding: 0;
}
```

9. Summary

TL;DR: Debian’s design system is built for clarity and longevity, not flash. It’s a utilitarian palette of blues and grays, oversized CTAs, and system-safe typography. Minimal shadows, tight spacing discipline, and a responsive layout tuned to practical breakpoints.

Brand Keywords:

• trust-first
• utilitarian-minimal
• legacy-compatible
• volunteer-driven
• functional-tech