# example.com Design System

> Minimalist academic utility defined by high-contrast black ink on a stark white canvas with singular blue functional anchors.

**Source:** https://example.com | **Captured:** 2026-06-15 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The example.com design system is a study in functional minimalism, prioritizing legibility and structural clarity over decorative flair. The interface relies on a pure white background (#ffffff) and absolute black text (#000000) to establish a 21:1 contrast ratio for core content. A specific slate-blue (#334488) is reserved exclusively for interactive text elements, serving as the system's only chromatic signal. Typography is strictly system-ui, utilizing bold weights (700) for headers and regular weights (400) for prose, while layout is governed by a rigid 8px base unit.

## Signature DNA
1. **Achromatic Foundation** (The system uses a #ffffff canvas and #000000 text as the primary visual pair across all analyzed pages, ensuring maximum accessibility.)
2. **Interactive Blue Anchor** (The color #334488 is the sole functional accent, used only for "Learn more" links and interactive states to signal utility.)
3. **Sharp Geometry** (A universal 0px border radius is applied to all containers and elements, reinforcing a formal, non-rounded aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and surface | 3 | 0.6 | Rendered background |
| `{color.ink}` | `#000000` | Primary text and structural elements | 9 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent.blue}` | `#334488` | Interactive links and primary action text | 3 | 0.6 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `system-ui` | 400, 700 | All headings and body copy | Inter | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h1}` | 24px | normal | normal | 700 | Main page title | `h1` |
| `{text.body}` | 16px | normal | normal | 400 | Standard prose | `p` |
| `{text.link}` | 16px | normal | normal | 400 | Interactive links | `a` |
| `{text.caption}` | Not captured | - | - | - | - | - |

### Principles
1. **Contrast First:** Text must maintain a minimum 9:1 contrast ratio (observed 21:1 for body, 9:1 for links).
2. **Weight-Based Hierarchy:** Headings are distinguished solely by weight (700) and size (24px) rather than color shifts.
3. **System Native:** No external font assets are loaded; the system relies on the user's local UI font stack for performance.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.base}` | 8px | 3 |
| `{space.md}` | 16px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Universal for all containers | 12 occurrences across all pages |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All surfaces | No shadows observed in computed styles |

## Components
### Tier 1: Foundational
#### Text Link
**Role:** Primary navigation and external reference point.
**Pages observed:** https://example.com, https://example.com/about
**Spec:** Text: `{color.accent.blue}` (#334488) | Typography: `{text.link}` (16px/400) | Decoration: Underline (default browser)
**States observed:** Default: Captured | Hover: Not captured | Focus: Not captured

### Tier 2: Patterns
#### Content Container
**Role:** Centered wrapper for documentation and information.
**Pages observed:** https://example.com, https://example.com/pricing
**Spec:** Background: `{color.canvas}` (#ffffff) | Padding: `{space.md}` (16px) | Radius: `{radius.none}` (0px)
**States observed:** Default: Captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|----------|-------|
| Max-width | ~600px (centered) |
| Section Gap | 16px |
| Alignment | Left-aligned text within centered container |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Container width shifts to 100% viewport minus margins |

## Imagery & decoration
The brand avoids all photography, icons, and illustrations. Visual interest is generated purely through typographic whitespace and the singular blue accent.

## Do's
- Use `#ffffff` as the only background color for primary content.
- Apply `#334488` to all clickable text elements.
- Maintain `system-ui` font stacks for all interface levels.
- Use `700` weight for all `h1` elements at `24px`.
- Ensure all container corners are strictly `0px`.

## Don'ts
- **Wrong:** Using `#0000ff` for links. **Right:** Use `#334488`. **Reason:** Brand consistency and specific contrast requirements.
- **Wrong:** Applying rounded corners to buttons or cards. **Right:** Keep `0px` radius. **Reason:** The brand DNA is strictly geometric and sharp.
- **Wrong:** Introducing secondary accent colors like orange or green. **Right:** Stick to the blue/black/white palette. **Reason:** example.com is a single-accent system.
- Do not use shadows or elevation effects.
- Do not use custom web fonts.

## Similar brands
- Wikipedia (Early versions)
- Craigslist
- Bear Blog (Default theme)

## Quick start
```css
:root {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-accent: #334488;
  --font-main: system-ui, sans-serif;
  --radius-none: 0px;
  --space-base: 8px;
  --space-md: 16px;
}
```

## Agent prompt examples
- "Generate a documentation page using a #ffffff background, #000000 text in system-ui, and #334488 for all links with 0px border radius."
- "Create a centered layout with a max-width of 600px, using 24px bold headers and 16px body text, following the example.com color palette."
- "Design a simple 'About' section with no shadows, no rounded corners, and a single blue link at the bottom."

## Known gaps
- Hover and Active states for links were not explicitly captured in the static evidence.
- Secondary and tertiary heading sizes (h2, h3) were not present on the analyzed pages.
- Form input styles (buttons, text fields) were not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://example.com | 1440px | 2026-06-15 |
| Pricing | https://example.com/pricing | 1440px | 2026-06-15 |
| About | https://example.com/about | 390px | 2026-06-15 |