Example — Brand Design System Deep Dive

1. Brand Overview

The “Example” brand site at https://example.com/ is barebones in terms of extracted visual data — and that’s interesting in itself. This isn’t a design system dripping with custom colors, branded typefaces, or elaborate components. It’s lean. Almost skeletal.

From the data, we see no custom logo assets in the scrape, just a generic favicon.ico. Colors? No defined palette beyond what’s baked into the HTML and browser defaults. Typography? All system-ui. This is the default font stack that pulls from the user’s OS: San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android, etc. No Google Fonts, no Adobe Fonts, no custom injection. That tells me they’re deliberately avoiding brand-specific typography — maybe for speed, maybe for universality.

Spacing follows an 8px scale — always a good choice for modularity and grid alignment. We see frequency counts for some specific spacings: 16px used 4 times, 16.08px used twice (odd tiny variation), and a large 162px used twice (likely for big layout gaps or hero padding). No border radius values at all, meaning corners stay sharp.

The link style is the only real “component” we can pin down: rgb(51, 68, 136) blue, underlined, weight 400. Classic web link. No hover state defined in the data — which either means it’s unchanged on hover or handled via browser default.

So the vibe? Minimal. Functional. Feels like a template or placeholder site. The design philosophy here leans toward “no-frills” — let the content speak, keep the UI invisible. This is the kind of system you’d see in an internal dev tool, API docs, or a staging site: fast to load, easy to maintain.

Who’s this for? Developers who don’t care about brand polish. Users who want information without distraction. The absence of embellishment is the statement: “We’re not here to impress you with visuals. We’re here to deliver content.”

2. Color System

2.1 Primary Colors

From the extracted data, the only explicit color is for links: rgb(51, 68, 136). Converted to hex, that’s #334488. This is a muted, deep blue — darker than the standard web link blue (#0000EE). Psychologically, deep blues imply trust and stability. It’s not flashy; it’s professional.

This choice works because it’s legible against white backgrounds, it’s accessible in most cases, and it doesn’t scream for attention. Compared to competitors using vibrant primary blues (#0071e3 for Apple’s CTAs, #1a73e8 for Google), this is subdued. You could say it’s “anti-CTA” — the link is there if you want it, but it’s not baiting you.

2.2 Complete Palette

The extracted palette is minimal — one color token for links.

No background, surface, text, or accent colors are explicitly extracted. That implies defaults (likely black text #000 on white #fff background), but since we can’t invent values, we stick to what’s here.

2.3 Color Relationships

With only one custom color, relationships are simple: Link Blue against body text black and page background white. Contrast ratio between #334488 and #fff is about 6.8:1 — comfortably above WCAG AA for normal text. Against black, it’s 2.1:1 — lower, but links aren’t usually shown on black backgrounds here.

Dark mode? No data. This system is likely light-mode only unless overridden by user CSS.

2.4 Usage Guide

• Use Link Blue (#334488) exclusively for clickable inline links.
• Don’t use it for buttons — it’s not styled for that role.
• On white backgrounds, it’s accessible; on dark backgrounds, check contrast.
• Keep underline — it’s part of the recognizability.

3. Typography

3.1 Font Families

All typography uses system-ui. No fallbacks listed, but system-ui itself is a generic keyword that resolves to the OS default UI font. This is a pragmatic choice: no font loading, instant render, consistent feel with native apps.

No Google Fonts. No Adobe Fonts. No variable fonts. This is pure default.

3.2 Type Scale

Here’s the extracted size data:

Odd: Two “heading-1” contexts with different sizes and weights. Possibly one is for smaller screens or nested headings.

3.3 Hierarchy

The hierarchy is almost nonexistent. H1 at 24px bold — fine for a title. Another “H1” at 16px regular — could be a subheading or mislabelled body text. Links match the smaller size and regular weight.

This minimal scale keeps the UI feeling uniform but risks blending headings into body copy. Readability is fine on desktop, but the lack of larger headings means less visual separation.

4. Spacing & Layout

4.1 Spacing Scale

Base scale type: 8px. This is the most common grid multiple in UI design.

Extracted values:

That 162px is huge — possibly top/bottom padding in a hero or section.

4.2 Layout

No breakpoints extracted. No container widths. This suggests a fluid layout relying on browser defaults. If there’s responsiveness, it’s not tokenized here.

5. Visual Elements

• Border Radius: None. All corners are sharp.
• Shadows: None extracted. This is flat design.
• Borders: No combinations defined — again, minimal.

This absence reinforces the utilitarian feel. No soft edges, no depth cues — everything is flat and rectangular.

6. Components

6.1 Buttons

No button styles extracted. That means either there are no buttons on the site or they’re using defaults identical to links or form controls.

6.2 Links

We do have link styles:

Default:

• Color: rgb(51, 68, 136) (#334488)
• Text-decoration: underline
• Font-weight: 400

Hover: null (likely unchanged)

This is classic web usability — always underlined, always blue.

6.3 Forms

No input styles extracted — text, checkbox, radio, select arrays are empty.

6.4 Cards

No data — probably no card components in use.

7. Design Tokens — CSS Custom Properties

:root {
  /* Colors */
  --color-link-blue: #334488;

  /* Typography */
  --font-family-system: system-ui;
  --font-size-h1-lg: 24px;
  --font-size-h1-sm: 16px;
  --font-size-link: 16px;
  --font-weight-bold: 700;
  --font-weight-regular: 400;

  /* Spacing */
  --space-16: 16px;
  --space-16-08: 16.08px;
  --space-162: 162px;
  --spacing-scale-type: 8px;

  /* Border Radius */
  /* none */

  /* Shadows */
  /* none */
}

8. AI Coding Assistant Prompt

# Example Design System Specification

You are an Example design expert. Build UIs matching their visual language exactly.

## Brand Context
Example’s site is minimal and utilitarian. It uses only system default fonts, a single link color, no custom components, and sharp corners. The design is flat, with no shadows, and relies on an 8px spacing grid.

## Color Palette
- Link Blue: #334488 — Inline hyperlinks only

## Typography
- Font family: system-ui
- Sizes:
  - H1 Large: 24px, weight 700, line-height default — Page titles
  - H1 Small: 16px, weight 400 — Subheadings or smaller headings
  - Link: 16px, weight 400 — Inline links
- No custom line heights specified — use browser defaults

## Spacing & Grid
- Base: 8px grid
- Tokens:
  - sm: 16px — common gap/padding
  - sm-alt: 16.08px — minor variant, avoid unless matching existing layout
  - xl: 162px — large section padding

## Border Radius
- none: 0px — all corners sharp

## Shadows & Depth
Flat design — use borders or spacing for separation, not shadows.

## Component Specifications

### Navigation Links
Default:
```css
a {
  color: #334488;
  text-decoration: underline;
  font-weight: 400;
}
```
Hover:
- No change (retain underline and color)

### Buttons
- No custom styles — use native browser buttons or match link style if needed

### Input Fields
- Use browser default styling — no overrides

### Cards
- Not in use — create with sharp corners, no shadows, padding from spacing tokens if needed

## Layout & Responsive Rules
- No max content width specified
- Use fluid layout with spacing multiples of 8px
- No breakpoints defined — rely on browser defaults for responsive behavior

## Interaction Rules
- Links retain underline on hover
- No animations or transitions defined

## DO List
- Use Link Blue (#334488) only for inline links
- Keep 8px-based spacing
- Use system-ui font family
- Maintain sharp corners
- Keep link underline

## DON'T List
- Don't add shadows
- Don't round corners
- Don't change link color for hover
- Don't introduce new fonts
- Don't invent new colors

## Code Examples

### Link
```css
a {
  color: #334488;
  text-decoration: underline;
  font-weight: 400;
}
```

### Section Padding
```css
.section {
  padding-top: 162px;
  padding-bottom: 162px;
}
```

### Heading
```css
h1 {
  font-family: system-ui;
  font-size: 24px;
  font-weight: 700;
}
```

9. Summary

TL;DR — Example’s design system is stripped down to the essentials: system fonts, one link color, 8px spacing, sharp corners. It’s functional, fast, and content-first.

Brand Keywords:

• zero-frills
• utilitarian-default
• flat-minimalist
• content-priority