Dot DESIGN.md Example

What this file renders to

Computed from the file below when this page is built. Open it in the viewer for the full guideline with navigation and diagnostics.

Lint summary

The same checks as the DESIGN.md linter, run on this file at build time. Design system defines 2 colors, 1 typography scale.

• 0 errors
• 1 warning
• 3 info

• warningmissing-primary colors
  No 'primary' color defined. The agent will auto-generate key colors, reducing your control over the palette.
• infomissing-sections spacing
  No 'spacing' section defined. Layout spacing will fall back to agent defaults.
• infomissing-sections rounded
  No 'rounded' section defined. Corner rounding will fall back to agent defaults.

Copy it, edit it, and use it as a starting point for your own file. Nothing is uploaded.

---
version: alpha
name: Dot
description: A single-color minimal product with near-zero decoration.
colors:
  brand: "#111111"
  surface: "#FAFAFA"
typography:
  body: { fontFamily: Inter, fontSize: 16px, fontWeight: 400, lineHeight: 1.6 }
---

## Philosophy

Dot strips every non-essential element. One brand color, one typeface, zero
secondary surfaces. The constraint is the feature.

## Colors

- **brand (#111111):** used for all interactive elements and headings.
- **surface (#FAFAFA):** page canvas with near-white warmth.

## Do's and Don'ts

- Do let content carry the visual weight.
- Don't introduce additional colors.

More files: all DESIGN.md examples and templates.