Theming

Every token is a CSS variable, so restyling is an override away.

System colors

The full HIG palette, with separate light and dark values. Use them as Tailwind colors: bg-blue, text-secondary-label, bg-fill-tertiary.

blue

red

green

orange

yellow

teal

cyan

mint

indigo

purple

pink

brown

Toggle the dark class on <html>. All tokens swap to their dark values — components need no changes.

Components tint with --system-blue by default. Point it at another system color (or your brand color) to re-tint everything:

:root {
  --system-blue: var(--system-indigo);
}
.dark {
  --system-blue: var(--system-indigo);
}

The SF text styles ship as utilities — each with the HIG size, line height, and SF tracking.

Translucent blur layers matching SwiftUI's materials: material-ultrathin, material-thin, material-regular, material-thick.

ultrathin

regular

thick