Example design system

---
version: alpha
name: Example
description: "Light monochrome interface measured from example.com: system-ui type, flat surfaces and square corners."
colors:
  background: "#EEEEEE"
  surface: "#EEEEEE"
  on-surface: "#000000"
  on-background: "#000000"
  primary: "#000000"
  on-primary: "#FFFFFF"
  secondary: "#0000EE"
typography:
  body-md:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  body-lg:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  none: 0px
spacing:
  md: 14px
  lg: 32px
---

# Example Design System


## Overview


The interface is light, built on **Mist (#EEEEEE)** with **Near Black (#000000)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **system-ui**. Headlines run large; body text is 14px. The surface language is flat. Corners are square.

Measured from [example.com](https://example.com/) on October 21, 2026 at 1440×900 and 390×844 from 12 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors


The palette has 5 roles.

- **Mist (#EEEEEE):** Page background, seen 1 time. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 6 times. Token `on-surface`.
- **Near Black (#000000):** Primary actions (the main text color; the palette is monochrome), seen 8 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Indigo (#0000EE):** Accent, seen 1 time. Token `secondary`.

## Typography


**system-ui** carries the whole interface. Fallback stack: `system-ui, sans-serif`.

- **body-md:** system-ui 14px at weight 400, line height 1.6. Body text.
- **body-lg:** system-ui 16px at weight 400, line height 1.6. Lead paragraphs.

## Layout


Spacing does not follow a strict grid: 28% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** md 14px, lg 32px.

## Elevation & Depth


The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes


Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Do's and Don'ts


- Do use #EEEEEE for the page.
- Do let contrast carry emphasis; primary actions use #000000 on #EEEEEE.
- Do reuse the measured spacing steps (14px, 32px).
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond system-ui.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.

Generated by [Sitepeel](https://sitepeel.dev/design-md/example.com/), the free DESIGN.md generator.