Effects

Effects include radius, shadow, border, and motion tokens.

Radius

--radius-none

0

--radius-xs

0.125rem

--radius-sm

0.25rem

--radius-md

0.375rem

--radius-lg

0.5rem

--radius-xl

0.75rem

--radius-2xl

1rem

--radius-full

9999px

--radius-card

0.5rem

--radius-control

0.375rem

Shadow

--shadow-none

none

--shadow-2xs

0 1px rgb(36 33 28 / 0.05)

--shadow-xs

0 1px 1px rgb(36 33 28 / 0.05)

--shadow-sm

0 1px 2px rgb(36 33 28 / 0.08), 0 1px 1px rgb(36 33 28 / 0.04)

--shadow-md

0 8px 20px rgb(36 33 28 / 0.08), 0 2px 6px rgb(36 33 28 / 0.06)

--shadow-lg

0 18px 42px rgb(36 33 28 / 0.12), 0 4px 12px rgb(36 33 28 / 0.08)

--shadow-xl

0 26px 70px rgb(36 33 28 / 0.16), 0 10px 24px rgb(36 33 28 / 0.1)

--shadow-2xl

0 25px 50px -12px rgb(36 33 28 / 0.25)

--shadow-card

var(--shadow-sm)

--shadow-panel

var(--shadow-md)

--shadow-focus

0 0 0 4px rgb(156 143 217 / 0.24)

Importing brutal.css adds the --shadow-hard-color, --shadow-hard-sm, --shadow-hard-md, and --shadow-hard-lg physical tokens at :root, together with utilities for the three size tokens. They use positive offsets with zero blur, do not appear in the default entry, and remain available even when the current theme root does not carry .brutal.

Border Width

--border-width-hairline

0.5px

--border-width-thin

1px

--border-width-medium

1.5px

--border-width-thick

2px

--border-width-heavy

3px

--border-width-surface

var(--border-width-thin)

--border-width-control

var(--border-width-thin)

--border-width-surface and --border-width-control are foundation structure roles that default to --border-width-thin. Inside .brutal, both remap to --border-width-heavy. Unlike the entry-global hard-shadow tokens, they resolve in every family, so consumer CSS references them directly:

.card {
  border: var(--border-width-surface) solid var(--border-default);
}

.button {
  border: var(--border-width-control) solid var(--border-default);
}

.input {
  border: var(--border-width-control) solid var(--border-strong);
}

--border-strong keeps at least 3:1 against every surface in all four theme states, so use it when the border alone identifies a control such as a text input.

Motion Duration

--duration-instant

0ms

--duration-fast

120ms

--duration-normal

180ms

--duration-slow

260ms

--duration-slower

420ms

Transition Groups

--transition-interactive

color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)

--transition-surface

background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard)

--transition-motion

opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-soft)