How to read someone else’s design system: Material, Apple, Fluent

Material 3, Apple’s HIG and Fluent 2 are the design systems of Google, Apple and Microsoft. What is worth taking is their rules, not their look.

Why read other people’s systems

Some of the best lessons in design are free to read: the documentation of the big design systems. Behind them are years of research, thousands of tested decisions and teams who maintain them every day. But you have to read them with the right question. Not “how do I make it just as beautiful” but “what did they decide and why, and does it suit me”.

The dangerous mistake is to take a system’s look. It belongs to the product it was made for, and is often protected by brand rules. Take the rules: the size of a tap target, the spacing step, the order of states, the names of tokens.

Check yourself: what do you borrow from someone else’s system?

Decisions and rules, not the look: they carry over to any project.

Reading in twenty minutes: seven questions

Any system is read the same way. Ask it seven questions, and in twenty minutes you’ll understand the main thing.

1. Who is it for, and what for? For Android apps, for government services, for working dashboards? Everything else depends on this.
2. Foundations. What colors, fonts, spacing and grid does it have? Is there a spacing step and a type scale, like yours?
3. Tokens. How are values named: by look (blue-500) or by role (color.text.primary)? How many tiers?
4. The page of one component. Open the button: is there an anatomy, variants, states, rules for “when to use and when not”, notes on accessibility, a code example?
5. Accessibility. Is it claimed, how was it tested, are there minimum sizes for tap targets?
6. Openness. Can you take the code? What is the license? What are you allowed to do with the styling?
7. Health. When was it last updated? Are there versions and a list of changes? Is the community alive?

One caveat: systems change. Everything below describes the situation at the end of October 2026, and the only reliable source is the documentation itself, which you’ll find linked on every card.

Three systems of the biggest platforms

Open the cards: they are arranged the same way, which makes the systems easy to compare.

Material Design 3Human Interface Guidelines (Apple)Fluent 2 (Microsoft)

Google

Idea

A common grammar for Android apps and the web: layers of “paper”, large rounded corners, expressive color.

Tokens

Three tiers: reference (the raw palette), system (roles such as primary and surface) and component (the values of one part). A color scheme is built from five key colors, each giving a tonal palette of 13 tones; all five can be generated from one source color, and on Android 12 and newer that color can be taken from the wallpaper (dynamic color).

Components

A very complete set, from buttons and fields to navigation and dialogs; states and anatomy are described for each.

Accessibility

Android recommends a touch target of at least 48 × 48 dp, and Material follows it; the web library has a focus ring for keyboard users.

Openness

The documentation is public. The Material web components library (material-web.dev) says in its README that it is in maintenance mode pending new maintainers, so check its state before you choose it.

What to take

The idea of color roles (what a color is used for), component states and the detailed anatomy pages.

When not to take it

When you need a character of your own: the recognizable Material look quickly makes a site “one of many”.

Open the system’s documentation (opens the system’s own site)

Material Design 3 (Google). Material was born in 2014 as a language of “sheets of paper”. Its third version (2021, “Material You”) made color expressive: a color scheme is built from five key colors, each giving a tonal palette of 13 tones; all five can be generated from one source color, and on Android 12 and newer that color can be taken from the wallpaper. The roles are named like “primary”, “on primary” and “container”. Tokens are split into three layers: reference (the raw palette), system (the roles) and component (the values of one part). A button’s states are made as a “state layer”: a semi-transparent layer over the part. In 2025 Google announced Material 3 Expressive, a more expressive wing of the system. What is most valuable for us: the color roles and the order in which a component is documented.

Human Interface Guidelines (Apple). These are rules for apps on Apple’s devices, not a library. They teach respect for the platform and the person: a button needs a hit region of at least 44 by 44 points (60 by 60 in visionOS), text size follows the person’s setting (Dynamic Type), and colors are named by purpose (“background”, “label”) and adapt by themselves to Dark Mode. In 2025 Apple updated its platforms with a glass manner called Liquid Glass. What to take for a website is the respect for the person’s settings, not the look.

Fluent 2 (Microsoft). One language for Microsoft’s products (Windows, Teams, Outlook) and the web. Fluent’s tokens divide into global tokens, which store raw values, and “aliases”: semantic names that refer to the global ones. The layer of aliases lets you change the theme without touching components. There are components for Web (an open React library), iOS, Android and Windows. It’s useful to take the idea of the alias layer: we’ll return to it in the lesson on tokens.

Check yourself: what are the three tiers of tokens in Material 3?

Reference (raw palette values), system (roles such as primary and surface) and component (the values of one part).

What the big systems have in common

Put the three together, and you can see that they argue about taste but agree on the main things:

• each has a step (4 or 8) and a scale of sizes;
• color is defined by role, not by name;
• a tap target has a minimum size: 44 points at Apple, and 48 dp in the Android guidance that Material follows (and in WCAG 2.2 the minimum for criterion 2.5.8 is 24 by 24 pixels);
• every component has an explicit list of states;
• the person’s settings (text size, theme, reduced motion) are respected.

These five things you can take into your project right now, without borrowing anyone’s look.

Practice

Open two of the systems we went through (or any others from the list in the lesson) and write out three decisions from each: the corner radius, the spacing step, what focus looks like. Don’t copy the number: understand why it’s what it is. Then explain how the choice relates to the tone and audience of your project (you remember “warm” or “businesslike” from the brief), and apply the decisions to the main-action button.

A button that is easy to press isn’t a small thing: on a phone a finger isn’t a mouse, and a target smaller than 44 pixels leads to misses. If your audience is older, do make it bigger.

What was wrong with 2014

Material Design appeared in 2014, and within a year web libraries grew up around it, such as Material Design Lite and Angular Material. But hardly anyone then had tokens as a separate layer, and accessibility more often stayed on the developer’s conscience. Systems with tokens, detailed documentation and accessibility checks became the standard later.