# vicentemolero.com design system — rules for agents

The design system of https://vicentemolero.com/en/system, written so an agent can build a screen that respects it. Values: [tokens.json](https://vicentemolero.com/sistema/tokens.json) (W3C Design Tokens). If a value is not here, it is not in the system: do not make one up.

## Type
- Families: Inter for reading; IBM Plex Mono only for `t1` (labels and data, uppercase).
- Scale (desktop/laptop/mobile): `t8` 56/48/38 px · 500 (headlines and figures) · `t7` 36/32/28 px · 500 (section titles) · `t6` 24/24/22 px · 500 (subtitles, decisions and quotes) · `t5` 22/22/20 px · 400 (ledes) · `t4` 18/18/17 px · 400 (body text) · `t3` 15 px · 400 (cards and lists) · `t2` 13 px · 400 (navigation, footers and metadata) · `t1` 11 px · 400 · mono (labels and data).
- Only weights 400 and 500. No bold, no 600/700. Hierarchy comes from size and grey, not weight.
- One size per role: do not use sizes in between.

## Colour
- Interface: white and four greys. `ink` #0a0a0a (19.8:1) headlines and main text · `body` #3a3a3a (11.4:1) body text · `muted` #6b6b6b (5.3:1) support and navigation · `faint` #8a8a8a (3.5:1) labels and ornaments only, never text that has to be read.
- Background of controls and loading images #f3f3f3; separators rgba(0,0,0,.08); borders of buttons and fields rgba(0,0,0,.14).
- Colour only for states. Green #43B966: availability, nothing else. Blue #0D99FF: frames, focus and selection labels, as in Figma. Never as a text colour, link colour or button fill (3.0:1, an accepted exception for short decorative labels).

## Space and radii
- Space only from: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px. Inside a component 4–16 · same block 16–24 · between blocks 48 (32 on mobile) · between sections 128 (96 on mobile).
- Radii: 4 px tags · 8 px cards · 16 px panels · 999 px buttons (pill).

## Buttons and links
- 14 px, weight 400, outside the scale on purpose so they read as actions. Height 40 px, padding 0 16 px, radius 999 px.
- Primary: #0a0a0a fill, white text. Secondary: white, 1 px border rgba(0,0,0,.14), hover border #6b6b6b. Pressed: scale .96.
- Links: underlined, offset 3 px, underline #0a0a0a at 35 %.

## Motion
- One curve: cubic-bezier(.22,1,.36,1). `enter` cubic-bezier(.34,1.18,.64,1) only for sheets and panels that come in.
- Durations: 150 ms respond (hover, press, copy) · 300 ms change state (menu, tabs) · 600 ms enter the screen.
- Motion confirms something that happens; it does not decorate. With prefers-reduced-motion, almost nothing moves and everything still works.

## Example: a project card
- Container: white, 1 px border rgba(0,0,0,.08), radius 8 px, padding 24 px, gap 12 px between its parts.
- Image: ratio 16/10, background #f3f3f3, top radius 8 px, 1 px border rgba(0,0,0,.08) below.
- Title: `t4` weight 500, `ink`. Description: `t3` 400, `body`. Deliverables: `t3` 400, `muted`.
- Footer: 1 px top border rgba(0,0,0,.08), 12 px padding; metric in `t1` mono, `ink`; arrow → that moves on hover in 150 ms with the system curve.
- Selected: 1.5 px frame in blue #0D99FF with a `t1` label, as in Figma. No shadows.