Theme & Tokens
The Acrylic token set — colors, fills, surfaces — lifted from the official macOS 26 UI Kit (light + dark).
Acrylic ships one token set (registry/acrylic/acrylic.css) that every component
references, so they all re-theme together. Values are lifted from the official
Apple macOS 26 UI Kit. Structure follows the shadcn / next-themes convention:
:root is light, .dark is dark.
Every component depends on the theme, so installing any one pulls it in. To add the tokens on their own (e.g. to style your own components), install the theme item directly:
npx shadcn add https://acrylic-ui.vercel.app/r/acrylic.jsonIt merges the semantic + --acr-* variables (light & dark), the @theme color
mappings, and the .scrollbar-mac utility into your global stylesheet.
Semantic colors
| token | source (macOS 26) | light | dark |
|---|---|---|---|
--foreground | Label · Primary | #000 .85 | #fff 1 |
--muted-foreground | Label · Secondary | #000 .5 | #fff .55 |
--primary | System Blue (accent) | #0088ff | #0091ff |
--destructive | System Red | #ff383c | #ff4245 |
--border | Separator | #3c3c43 .29 | #fff .12 |
System colors
The full macOS 26 system palette, lifted from the kit's shared swatches. Each
flips light/dark with the theme — use via bg-[var(--acr-green)], text-[var(--acr-red)],
etc. --primary and --destructive are the semantic aliases of --acr-blue and
--acr-red.
| token | light | dark |
|---|---|---|
--acr-red | #ff383c | #ff4245 |
--acr-orange | #ff8d28 | #ff9230 |
--acr-yellow | #ffcc00 | #ffd600 |
--acr-green | #34c759 | #30d158 |
--acr-mint | #00c8b3 | #00dac3 |
--acr-teal | #00c3d0 | #00d2e0 |
--acr-cyan | #00c0e8 | #3cd3fe |
--acr-blue | #0088ff | #0091ff |
--acr-indigo | #6155f5 | #6d7cff |
--acr-purple | #cb30e0 | #db34f2 |
--acr-pink | #ff2d55 | #ff375f |
--acr-brown | #ac7f5e | #b78a66 |
Translucent fills & surfaces (--acr-*)
| token | role | source |
|---|---|---|
--acr-chip | filled control (Neutral button) | Fill · Primary (10%) |
--acr-field | input fill | Fill · Tertiary (5%) |
--acr-hover | ghost hover | Fill · Quaternary (3%) |
--acr-control | bordered-button fill | controlColor |
--acr-surface | Card | material approximation |
--acr-panel | Dialog panel | material approximation |
--acr-overlay | Dialog overlay tint | material approximation |
Frosting & the Backdrop
Under the acrylic theme, frosted surfaces blur over a body-level Backdrop
(a soft, already-blurred wallpaper; transparent under native vibrancy so the OS
material shows). One hard rule keeps the frost artifact-free:
backdrop-filterbelongs only on BOUNDED or viewport-ANCHORED elements — never on a tall element that scrolls with the page.
A backdrop-filter on a tall, page-scrolling container makes Chromium re-sample
the colourful Backdrop at the element's edges every scroll frame, producing a
coloured fringe at the top on scroll.
| element | technique | safe? |
|---|---|---|
| Dialog · Popover · Card (bounded) | backdrop-filter | ✓ |
| sticky / fixed header, toolbar, sidebar (viewport-anchored) | backdrop-filter | ✓ |
| the main content panel (tall, page-scrolling) | veil only — a translucent --background fill, no filter | ✓ |
The main panel needs no filter: it sits over the static, pre-blurred Backdrop, so
a translucent --background veil already reads as frosted (there is nothing
high-frequency behind it to blur). If you ever need a genuinely blurred plane
across a scrolling area, use a fixed frosted layer (anchored to the
viewport, so it never scrolls) instead of filtering the scroll container.
Spacing & radius
Spacing is the native 8pt grid (Tailwind p-2 = 8px, p-4 = 16px…). Control
corner radius follows macOS: radius = height ÷ 4.
Table
A data table — shadcn's Table restyled to the Acrylic material: flat and transparent so it composes inside a Card, with hairline row separators, muted column labels, and a spring-wired hover tint.
Agent Skill
Acrylic ships a Claude Code skill — teach your coding agent the material system, the component APIs, and the shadcn correspondences.