# Design system

Concept · [Product](https://ecosystem.samcarlton.com/product)

Also called: design systems, component library, UI kit, style guide

A shared set of design rules and ready-made interface pieces, such as buttons, colors and type, so every screen looks and works consistently.

**For example:** With a design system in place, a new settings page is built in a day from existing buttons, forms and colors.

## Connects to (6)

- [Atomic Design](https://ecosystem.samcarlton.com/atomic-design): A method for building design systems from small pieces up: basic elements (atoms) combine into components (molecules), sections…
- [UX / UI](https://ecosystem.samcarlton.com/ux-ui): UI, the user interface, is what people see and tap on the screen.
- [CSS](https://ecosystem.samcarlton.com/css): Cascading Style Sheets.
- [Human Interface Guidelines](https://ecosystem.samcarlton.com/human-interface-guidelines): Apple's official design guidance for apps on its platforms.
- [Progressive disclosure](https://ecosystem.samcarlton.com/progressive-disclosure): Giving an agent only what it needs right now, with pointers to the rest, instead of loading everything at the start.
- [Liquid Glass](https://ecosystem.samcarlton.com/liquid-glass): Apple's design material, introduced in 2025, that looks like see-through glass, reflecting and bending what is behind it.

Map view: https://ecosystem.samcarlton.com/design-system