---
title: "Materials — Brand system"
description: "Card appearances and tones, the four-step elevation ladder, and radius roles: pills for controls, soft rectangles for panels."
url: https://www.unitpost.com/brand/materials
section: "Brand"
updated: 2026-09-10
---
# Materials — Brand system

> Card appearances and tones, the four-step elevation ladder, and radius roles: pills for controls, soft rectangles for panels.

This page is a visual specimen of the Unitpost design system. The written contract it illustrates is [design.md](https://www.unitpost.com/design.md) (§2.5 Shape, §2.6 Elevation, §3 Containers). Load design.md to build on-brand UI; it is the authoritative source.

## Shape

| Token | Value |
| --- | --- |
| `--radius` | `0.625rem` |
| `--shape-control` | `9999px` |
| `--shape-panel` | `0.875rem` |
| `--shape-dialog` | `1rem` |

## Elevation (light)

| Token | Value |
| --- | --- |
| `--elevation-xs` | `0 1px 2px rgb(0 0 0 / 0.04)` |
| `--elevation-sm` | `0 1px 3px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.04)` |
| `--elevation-md` | `0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.05)` |
| `--elevation-lg` | `0 18px 48px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.07)` |

## Elevation (dark)

| Token | Value |
| --- | --- |
| `--elevation-xs` | `0 1px 2px rgb(0 0 0 / 0.35)` |
| `--elevation-sm` | `0 2px 8px rgb(0 0 0 / 0.38)` |
| `--elevation-md` | `0 12px 32px rgb(0 0 0 / 0.48)` |
| `--elevation-lg` | `0 24px 64px rgb(0 0 0 / 0.58)` |

## Other brand pages

- [Brand system](https://www.unitpost.com/brand): Unitpost design foundations: colors, typography, materials, interface components, and page patterns. One set of tokens and one kit for every surface. ([Markdown](https://www.unitpost.com/brand.md))
- [Colors — Brand system](https://www.unitpost.com/brand/colors): The neutral ladder, semantic roles, and every color token with its light and dark value, read live from theme.css. ([Markdown](https://www.unitpost.com/brand/colors.md))
- [Typography — Brand system](https://www.unitpost.com/brand/typography): Inter for the interface, DM Sans for headings, Source Code Pro for machine values only. One size scale and named type-* roles from theme.css. ([Markdown](https://www.unitpost.com/brand/typography.md))
- [Components — Brand system](https://www.unitpost.com/brand/components): Every Unitpost interface primitive with its variants and states, shown in light and dark themes and checked against the components' own types. ([Markdown](https://www.unitpost.com/brand/components.md))
- [Patterns — Brand system](https://www.unitpost.com/brand/patterns): How Unitpost pages are built from the kit: one shape each for list, detail, settings, empty, and error pages. ([Markdown](https://www.unitpost.com/brand/patterns.md))