Skip to content
UI Kit
Accent color

Theming

Tokens that carry every mode

One set of names, two sets of values. Components only read tokens, so light, dark and every accent come along by themselves.

Accents

primary is the accent of a project. Electric blue is the default, six more ship with the kit, neutral among them. Pick one and the whole site follows.

Dark by default, light on demand

The kit starts dark. The class dark on the html element is the switch, so every installed component follows without a single change. To start your project dark, write the class into the markup.

DarkDefault

Northwind Studio

Body text at 15 px reads calmly on every screen and keeps lines between 60 and 75 characters.

NewRead the guide
<html class="dark">
Light

Northwind Studio

Body text at 15 px reads calmly on every screen and keeps lines between 60 and 75 characters.

NewRead the guide
<html>
<html lang="en" class="dark" data-accent="blue">

Colors

The same token name in both modes. Use the class in the last column, never a fixed color.

  • --backgroundLightoklch(1 0 none)Darkoklch(0.145 0.011 264)bg-background
  • --foregroundLightoklch(0.18 0.014 264)Darkoklch(0.968 0.004 264)text-foreground
  • --surfaceLightoklch(0.984 0.003 264)Darkoklch(0.168 0.012 264)bg-surface
  • --surface-2Lightoklch(0.966 0.005 264)Darkoklch(0.198 0.013 264)bg-surface-2
  • --cardLightoklch(1 0 none)Darkoklch(0.172 0.012 264)bg-card
  • --popoverLightoklch(1 0 none)Darkoklch(0.2 0.013 264)bg-popover
  • --mutedLightoklch(0.962 0.006 264)Darkoklch(0.215 0.013 264)bg-muted
  • --accentLightoklch(0.952 0.008 264)Darkoklch(0.235 0.014 264)bg-accent
  • --muted-foregroundLightoklch(0.49 0.018 264)Darkoklch(0.74 0.013 264)text-muted-foreground
  • --subtle-foregroundLightoklch(0.6 0.014 264)Darkoklch(0.6 0.013 264)text-subtle-foreground
  • --borderLightoklch(0.918 0.007 264)Darkoklch(0.92 0.02 264 / 0.09)border-border
  • --border-strongLightoklch(0.862 0.01 264)Darkoklch(0.92 0.02 264 / 0.16)border-border-strong
  • --inputLightoklch(0.89 0.009 264)Darkoklch(0.92 0.02 264 / 0.13)border-input
  • --primaryLightoklch(0.55 0.235 263)Darkoklch(0.68 0.17 258)bg-primary
  • --primary-foregroundLightoklch(0.985 0 none)Darkoklch(0.17 0.05 264)text-primary-foreground
  • --successLightoklch(0.62 0.15 158)Darkoklch(0.76 0.16 158)text-success
  • --warningLightoklch(0.76 0.16 72)Darkoklch(0.82 0.15 78)bg-warning
  • --infoLightoklch(0.6 0.16 252)Darkoklch(0.74 0.14 250)text-info
  • --destructiveLightoklch(0.575 0.22 25)Darkoklch(0.68 0.2 22)text-destructive
  • --bezelLightoklch(0.19 0.012 264)Darkoklch(0.1 0.01 264)bg-bezel

Your own accent

Set --primary and --primary-foreground once for light and once for dark. Move the sliders, the preview and the CSS follow.

200
0.17
0.56
Contrast of the label on the accent4.5 : 1
Preview with your accent · Light

Northwind Studio

New
Read the guide
Preview with your accent · Dark

Northwind Studio

New
Read the guide
src/styles/accent.css
/* After kit.css. Light first, then dark. */
[data-accent="brand"] {
  --primary: oklch(0.56 0.17 200);
  --primary-foreground: oklch(0.985 0 0);
}
.dark[data-accent="brand"], .dark [data-accent="brand"] {
  --primary: oklch(0.69 0.14 200);
  --primary-foreground: oklch(0.18 0.03 200);
}

One typeface for everything

SF Pro Display sets headlines, text, code and numbers. Apple devices bring it along, everywhere else Inter steps in. Code uses the same family on purpose, numbers are set tabular so columns line up.

SF Pro Display--font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", sans-serif--font-mono: var(--font-sans)
Text

Components for a better web

Body text at 15 px reads calmly on every screen and keeps lines between 60 and 75 characters.

Code and commands$ aiw add hero<Hero variant="centered" />
Tabular numbers
January
$48,210
February
$51,904
March
$117,336
  • text-displayclamp(2.75rem, 1.6rem + 4.6vw, 5.25rem)line-height 1 · -0.026em

    Components for a better web

  • text-h1clamp(2.375rem, 1.6rem + 3vw, 4rem)line-height 1.04 · -0.024em

    Components for a better web

  • text-h2clamp(1.875rem, 1.35rem + 2.1vw, 3rem)line-height 1.08 · -0.02em

    Components for a better web

  • text-h31.1875remline-height 1.35 · -0.012em

    Components for a better web

  • text-leadclamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)line-height 1.6 ·

    Body text at 15 px reads calmly on every screen and keeps lines between 60 and 75 characters.

  • text-[15px]body

    Body text at 15 px reads calmly on every screen and keeps lines between 60 and 75 characters.

Radius

One value, --radius, drives five steps. Change it and every card and button follows. --radius: 0.75rem

  • rounded-sm8 px
  • rounded-md10 px
  • rounded-lg12 px
  • rounded-xl16 px
  • rounded-2xl20 px

Shadows

Three depths and an inner highlight for raised surfaces. In dark mode they get deeper, not lighter.

  • --shadow-sm
  • --shadow-md
  • --shadow-lg
  • --highlight

Utilities

Small helpers for light, depth and motion. Use them sparingly, one beam per page is plenty.

  • Aa Bb

    kit-gradient-text

    Large headline with a soft vertical light.

  • Northwind

    kit-accent-text

    The accent runs into its neighbour on the color wheel.

  • kit-glow

    kit-glow

    Soft light from the top of a section, clipped sideways.

  • kit-dots

    Dot pattern that fades out towards the edges.

  • kit-grid

    Line grid that fades out towards the edges.

  • kit-beam

    kit-beam

    A light that runs around the one most important surface.

  • Hover me

    kit-spotlight

    A spotlight under the pointer, paired with useSpotlight().

  • kit-shine

    A sheen passes over a surface on hover.

  • kit-rise

    Entrance on load, staggered with --kit-delay.

  • NorthwindAtlasLumenKanzlei BergerCafé MiraHarbor

    kit-fade-x

    Fades both sides, for marquees and scroll rows.

  • NorthwindAtlasLumenKanzlei BergerCafé Mira

    kit-fade-start

    Fades the start of a row whose content ends on the right.

  • NorthwindAtlasLumenKanzlei BergerCafé Mira

    kit-fade-end

    Fades the end of a row that runs on to the right.

  • kit-fade-y

    Fades the top and bottom edge, for lists that scroll.

  • kit-fade-b

    Fades the bottom edge, for media that runs out.

  • kit-no-scrollbar

    Scroll rows without a visible scrollbar.

  • kit-scrollbar

    A thin, quiet scrollbar for panels that must scroll.

  • kit-highlight

    kit-highlight

    The inner light edge of raised surfaces.

  • kit-card

    Card surface with border, radius, highlight and a soft shadow.

  • 1200 px

    kit-container

    Content width with side gutters, the same in every component.

  • kit-flow

    A dash that travels along an SVG line, for flows and connections.

  • kit-scroll-scale

    Grows to full size while it scrolls in, with useScrollProgress().

  • kit-scroll-fade

    Comes into full light while it scrolls in, with useScrollProgress().

Light, dark and accent

The class dark on the html element switches to dark mode, data-accent picks an accent. Set both before the first paint so nothing flashes.

<html class="dark" data-accent="brand">

Often searched

Jump to

Copied to the clipboard