---
title: "Styles and components · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/styles-and-components
updated: 2026-10-20
licence: "All rights reserved"
---

# Styles and components

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Keep every colour, size and control in one place. Design tokens hold the values, a component library holds the controls, and a catalogue shows every state.

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/styles-and-components`.

## Required

- [Take every style value from design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens): Take every colour, space, font size, radius, shadow, duration and layer order from a named design token. Never write a raw value in a component.
- [Build each control once](https://agentwranglers.se/playbook/app-ui/styles-and-components/shared-components): Build each control once in a shared component library, and use it on every screen. Never style a raw button, input, select or table on a page.

## Recommended

- [Name tokens by purpose](https://agentwranglers.se/playbook/app-ui/styles-and-components/purpose-tokens): Give components tokens named by purpose, such as `color-danger` or `space-section`, which point to a base palette. Components never use the base palette directly.
- [Change components through variants](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants): Change how a component looks only through its own options, such as `variant="danger"` or `size="small"`. Never override its classes from the outside.
- [Show every component state in a catalogue](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue): Give every shared component a catalogue entry for each state it can show, such as default, loading, empty, error and disabled.

- Next: [Data views](https://agentwranglers.se/playbook/app-ui/data-views)
- [All chapters](https://agentwranglers.se/playbook/app-ui)