# RAMTT design system · Malte Therkildsen

> The RAMTT design system: tokens from one source, components found by their attributes, pills for everything you press.

Source: https://therkildsen.dev/projects/system

# RAMTT design system

The tokens and components RAMTT is built with: generated colors, one face, pills for everything you press, and one delay for every move.

## What it is

Every color is a token generated from one source file; the neutrals were locked and the build stops if one of them drifts. Components are found by their attributes, so a button works the moment it is in the page, with or without a framework.

The marketing pages use the app’s own sizes. Most brands build their website in a second, larger design. Here only the text size goes up.

## The parts

### Parts you press

Buttons, segmented controls, switches and sliders. They all hold their state in the DOM, so a port to React keeps the same attributes.

### The palette

Search everything with ⌘K.

### Properties

Label and value, one row each. The same part lists a component’s measurements in the catalog.

### Color

Labels, charts and states use them.