---
title: Design systems every agent should know
slug: design-systems-to-study
url: "https://dontmakeitugly.com/collections/design-systems-to-study"
resources:
  - geist-design-system
  - material-design-3
  - apple-hig
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# Design systems every agent should know

Public systems that document their reasoning, so you can borrow the thinking without the branding.

You don't need to adopt any of these. You need to read how they explain colour roles, spacing, elevation and states, then hand those explanations to your agent. Each one is strong in a different area, noted below.

## Resources, in order

1. [Vercel Geist](https://dontmakeitugly.com/resources/geist-design-system.md) — Vercel's design system: the reference for the modern developer-tool look.
   Agent: Good.
   Whether you love the look or think it's overused, you should understand it, because your agent is probably going to reach for it. The colour scale documentation is particularly useful for dark mode.
2. [Material Design 3](https://dontmakeitugly.com/resources/material-design-3.md) — Google's design system, documented in exhaustive, agent-readable detail.
   Agent: Good.
   You probably don't want your product to look like Material. You absolutely want to read how it reasons about colour roles, elevation and motion. The docs are a masterclass in explaining design decisions.
3. [Apple Human Interface Guidelines](https://dontmakeitugly.com/resources/apple-hig.md) — Apple's guidance on designing for iOS, macOS, watchOS and visionOS.
   Agent: Good.
   Required reading if you're building anything that runs on an Apple device, and a great reference for restraint even on the web. The sections on typography and accessibility are especially good.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.