---
title: "Materials"
description: "Radii, fills, strokes, and elevation — the surfaces the system is built from."
url: https://buenalabs.io/design/materials
---

# Materials

The surfaces the system is built from: three fills, two strokes, one radius scale. Depth comes from fill steps and hairlines — not shadows.

## Fills

Surfaces step `bg-primary` → `bg-surface` → `bg-elevated`. Don't skip levels.

## Strokes

- `border` — controls: inputs, buttons, framed media.
- `separator` — hairline dividers between content.

## Radii

Base radius `--radius: 0.375rem` (6px). Scale: sm −4px, md −2px, lg base, xl +4px, 2xl +8px, 3xl +12px, 4xl +16px. Large surfaces (cards, previews) use `--radius-card` (12px) and `--radius-card-lg` (16px).

## Layout

Max content width `1200px`. Spare grids, wide gutters, one idea per section. No drop shadows.