Creative Commons Design System — Deep Dive Analysis

1. Brand Overview

Creative Commons isn’t just a licensing body — it’s a global movement that makes sharing culture possible. The visual identity reflects that mission: pragmatic, no-nonsense, but open and approachable. This is a brand aimed at creators, educators, technologists, and policymakers. The design language is utilitarian, with flashes of personality in color accents. It’s built for clarity over ornamentation.

From the top, you get a strong black-and-white foundation. Black for authority and precision. White for openness and space. Then they drop in bright secondary colors — turquoise, gold, tomato — to signal creative energy. This mix makes sense for a brand that must balance legal seriousness with cultural vibrancy.

Typography choices reinforce this duality. Roboto Condensed handles headings — bold, condensed, often uppercase — projecting clarity and efficiency. Source Sans Pro takes care of body and UI text — humanist sans with good readability. Times appears in some headings/links, adding a touch of editorial seriousness. The typography is not trying to be trendy; it’s trying to be legible and recognisable.

Layout is predictable in a good way. 8px-based spacing scale, clear breakpoints from mobile up to large desktop. Buttons and inputs use minimal radius — 3px or 4px — nothing fancy. Shadows? None. This is flat design territory. They use borders for separation, not depth.

The vibe: serious infrastructure for the creative commons of the internet. This isn’t a playful startup aesthetic. It’s a design language that says: “We’re here for the long haul, and we care about usability.”

2. Color System

2.1 Primary Colors

The primary brand color is pure black (#000000). Black anchors the brand — it’s both a neutral and a strong statement. In web UI design, pure black is rare for interactive elements because of accessibility concerns, but here it works because it’s always paired with white text or high-contrast colors. Compared to competitors in the open licensing space (which often lean towards blues and greens), Creative Commons’ black-primary choice is more authoritative — think legal documents, ink, permanence.

2.2 Complete Palette

2.3 Color Relationships

Black and white dominate — maximum contrast. Turquoise (#05b5da) pops against black or white. The grey (#767676) is safely in the middle, good for secondary text but risky on white backgrounds if font size is small — WCAG AA might fail at small sizes. Link blue (#0000ee) is the browser default — high contrast against white. The softer background colors (#FEF6D8, #E0F5E0, #FEEDE9, #DFF6FC) are pastel and low-contrast, meant for panels or alerts with darker text.

2.4 Usage Guide

• Black (#000000) for headers, primary buttons, and strong text.
• White (#ffffff) for text on dark backgrounds, main page background.
• Turquoise (#05b5da) for accents — links, icon fills, hover states.
• Grey (#767676) for borders, placeholders, muted text.
• Link blue (#0000ee) for inline links in body copy.
• Use pastel backgrounds sparingly to avoid diluting the strong black-white contrast.
• Avoid pairing dark brown (#903101) with deep blue (#005fcc) — low contrast and clashing tones.
• Keep text color high contrast against pastel backgrounds — don’t use grey on soft gold.

3. Typography

3.1 Font Families

• Roboto Condensed — Primary heading font. No fallbacks listed. Used for headings, some links, uppercase treatments.
• Source Sans Pro — Body copy, buttons, some links. Humanist sans, readable at small sizes.
• Times — Serif used for certain headings and links. Adds editorial gravitas.

No Google Fonts or Adobe Fonts listed in sources — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy Notes

They use tight line heights (1.15) for headings — keeps blocks compact. Uppercase headings at large sizes feel authoritative. Body text (Source Sans Pro, 16px, 1.50) is very readable. The mix of serif and sans in headings is unusual — it signals different content types. The scale jumps are irregular — not a perfect modular scale but more pragmatic sizing.

4. Spacing & Layout

4.1 Spacing Scale

8px base grid. Common values:

4.2 Layout

Breakpoints: 400px, 425px, 480px, 705px, 900px, 1140px, 1500px. That’s a lot — they’ve probably tuned for specific content layouts. Expect mobile-first CSS with progressive enhancements at each breakpoint. No max content width listed, but 1140px and 1500px suggest container widths for large desktop.

5. Visual Elements

• Border Radius: Minimal — 3px and 4px on most UI elements. Some asymmetric: 0px 0px 5px 5px for buttons, 4px 0px 0px 4px for inputs. No full-pill shapes.
• Shadows: None. Flat design. Depth is created with borders (1px or 2px solid).
• Borders: Grey (#767676) for inputs, black for buttons. Styles include solid, outset, inset — old-school HTML elements retain default styles in some cases.

6. Components

6.1 Buttons

Explore Button

• Default: background black (#000000), text white (#ffffff), padding 16px 10px 6px, border radius 0px 0px 5px 5px, no border.
• Hover: text color turquoise (#049cdb).
• Font: Source Sans Pro, 12.8px, weight 400.

Expand Attribution

• Default: background light grey (#efefef), text black, padding 8px, radius 3px, border 1px solid #000000.
• Hover: text color turquoise (#049cdb).
• Font: Source Sans Pro, 16px, weight 400.

Small Grey Button

• Default: background grey (#767676), text white, padding 19.8px, radius 0px 4px 4px 0px, no border.
• Font: Source Sans Pro, 18px, weight 600.

6.2 Links

Varieties:

• Default link: blue (#0000ee), underline.
• Grey link: grey (#767676), bold, no underline.
• Black link: black (#000000), normal weight.
• Brown link: brown (#903101), semi-bold.
• White link: white (#ffffff), bold.
• Turquoise link: turquoise (#05b5da), normal weight.

No hover styles specified beyond some buttons — likely minimal changes.

6.3 Forms

• Email input: transparent bg, grey border (#767676, 2px solid), radius 4px 0px 0px 4px, padding 8px.
• Text input: transparent bg, grey border, radius 0px, padding 1px 2px.

No focus styles in data — could be default browser outlines.

7. Design Tokens — CSS Variables

/* Colors */
:root {
  --color-white: #ffffff;
  --color-dark-brown: #903101;
  --color-turquoise: #05b5da;
  --color-grey: #767676;
  --color-link-blue: #0000ee;
  --color-light-grey: #f5f5f5;
  --color-black: #000000;
  --color-deep-blue: #005fcc;
  --color-gold: #FBD43C;
  --color-dark-green: #005d00;
  --color-soft-gold: #FEF6D8;
  --color-soft-green: #E0F5E0;
  --color-soft-tomato: #FEEDE9;
  --color-soft-turquoise: #DFF6FC;
  --color-green: #008000;
  --color-tomato: #C74200;
}

/* Typography */
:root {
  --font-roboto-condensed: "Roboto Condensed";
  --font-source-sans-pro: "Source Sans Pro";
  --font-times: "Times";
}

/* Spacing */
:root {
  --space-1: 1px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-128: 128px;
}

/* Border radius */
:root {
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-bottom-5: 0px 0px 5px 5px;
  --radius-right-4: 0px 4px 4px 0px;
  --radius-left-4: 4px 0px 0px 4px;
}

8. AI Coding Assistant Prompt

# Creative Commons Design System Specification

System Prompt:
You are a Creative Commons design expert. Build UIs matching their visual language exactly.

Brand Context:
Creative Commons blends legal authority with creative openness. The design is flat, accessible, and practical — black-and-white core with bright accents, minimal ornamentation, and typography built for clarity.

Color Palette:
- Primary Black: #000000 — Primary buttons, headings, strong text
- White: #ffffff — Backgrounds, text on dark surfaces
- Dark Brown: #903101 — Accent links
- Turquoise: #05b5da — Logo accents, link highlights
- Grey: #767676 — Borders, secondary text
- Link Blue: #0000ee — Default body links
- Light Grey: #f5f5f5 — Subtle panels
- Deep Blue: #005fcc — Hover/focus states
- Gold: #FBD43C — Highlight backgrounds
- Dark Green: #005d00 — Success contexts
- Soft Gold: #FEF6D8 — Soft highlight areas
- Soft Green: #E0F5E0 — Success backgrounds
- Soft Tomato: #FEEDE9 — Error backgrounds
- Soft Turquoise: #DFF6FC — Info backgrounds
- Green: #008000 — Positive actions
- Tomato: #C74200 — Alerts/warnings

Typography:
- Headings: "Roboto Condensed"
- Body: "Source Sans Pro"
- Serif Headings: "Times"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56.96px | 700 | 1.15 | Main titles |
| H2 | 45.84px | 700 | 1.15 | Section titles |
| H3 | 33.6px | 700 | 1.15 | Subsections |
| Link Large | 33.6px | 700 | 1.15 | Hero links |
| Serif Heading | 32px | 700 | 1.15 | Editorial headings |
| Body Large | 30.4px | 400 | 1.15 | Large body text |
| ... | ... | ... | ... | ... |

Spacing & Grid:
Base: 8px
Scale: 1px, 5px, 6px, 8px, 10px, 16px, 24px, 28px, 32px, 40px, 48px, 64px, 128px

Border Radius:
- none: 0 — Tables
- sm: 3px — Small buttons
- md: 4px — Inputs
- bottom-5: 0 0 5px 5px — Explore button
- right-4: 0 4px 4px 0 — Small grey button
- left-4: 4px 0 0 4px — Email input

Shadows & Depth:
Flat design — no shadows. Use borders for separation.

Component Specifications:

Primary Button (.explore):
Default: bg #000000, text #ffffff, padding 16px 10px 6px, radius 0 0 5px 5px, no border.
Hover: text #049cdb.
Font: Source Sans Pro 12.8px, weight 400.

Secondary Button (.expand-attribution):
Default: bg #efefef, text #000000, padding 8px, radius 3px, border 1px solid #000000.
Hover: text #049cdb.
Font: Source Sans Pro 16px, weight 400.

Small Grey Button (.button.small):
Default: bg #767676, text #ffffff, padding 19.8px, radius 0 4px 4px 0, no border.
Font: Source Sans Pro 18px, weight 600.

Navigation Links:
Blue link: #0000ee, underline.
Grey link: #767676, bold, no underline.
Brown link: #903101, semi-bold, no underline.
White link: #ffffff, bold.

Input Fields:
Email: transparent bg, border 2px solid #767676, radius 4px 0 0 4px, padding 8px.
Text: transparent bg, border 2px solid #767676, radius 0, padding 1px 2px.

Layout & Responsive Rules:
Breakpoints: 400px, 425px, 480px, 705px, 900px, 1140px, 1500px.
Mobile-first, scale up progressively.

Interaction Rules:
Transitions: 150ms ease for hover/focus state changes.
Focus indicators: Default browser outline unless overridden.

DO List:
- Use ONLY palette colors.
- Maintain 8px-based spacing scale.
- Keep corners minimal — 3px or 4px.
- Use Roboto Condensed for headings, Source Sans Pro for body.
- Use uppercase for major headings where specified.
- Pair pastel backgrounds with dark text for contrast.

DON'T List:
- Add shadows — flat design only.
- Mix rounded and sharp corners inconsistently.
- Use colors outside the palette.
- Reduce contrast below WCAG AA for body text.
- Overuse pastel backgrounds — keep emphasis on black/white contrast.

Code Examples:

```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 16px 10px 6px;
  border-radius: 0 0 5px 5px;
  font-family: "Source Sans Pro";
  font-size: 12.8px;
  font-weight: 400;
  border: none;
  transition: color 150ms ease;
}
.btn-primary:hover { color: #049cdb; }

.btn-secondary {
  background: #efefef;
  color: #000000;
  padding: 8px;
  border-radius: 3px;
  font-family: "Source Sans Pro";
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #000000;
  transition: color 150ms ease;
}
.btn-secondary:hover { color: #049cdb; }

.input-email {
  background: transparent;
  color: #767676;
  border: 2px solid #767676;
  border-radius: 4px 0 0 4px;
  padding: 8px;
  font-family: "Source Sans Pro";
  font-size: 16px;
}
```

9. Summary

TL;DR — Creative Commons’ design system is flat, authoritative, and built for clarity. Black-and-white core with bright accents. Minimal radii, no shadows, strict 8px grid. Typography is functional, mixing condensed sans and serif.

Brand Keywords:

• authority-minimalist
• flat-functional
• creative-accented
• legal-pragmatic