Get Access
Docs/Theming

Theming

Colours, light and dark mode, fonts and logos are tokens in one stylesheet, so a rebrand is a handful of edits.

Colour tokens

Every colour is a CSS variable at the top of src/app/globals.css, with a light set on :root and a dark set on .dark. Tailwind utilities read them, so changing a value updates the whole app in both themes.

src/app/globals.css
:root {
  --ac-app-bg: #ffffff;
  --ac-panel-bg: #f4f4f5;
  --ac-text-primary: #09090b;
  --ac-text-muted: #71717a;
  --ac-border: rgba(0, 0, 0, 0.1);
}

.dark {
  --ac-app-bg: #0a0a0a;
  --ac-text-primary: #fafafa;
}
UtilityUse
bg-appBg, bg-panelBg, bg-cardSurfaces
text-textPrimary / Secondary / MutedText
border-borderDarkHairline borders (0.5px everywhere)
bg-brand, text-brandFgPrimary buttons and highlights

People can also pick a theme colour in Settings › Preferences. The seven presets are the data-accent blocks in the same file.

Fonts

Inter and Hedvig Letters Serif are self-hosted from src/app/fonts and loaded in src/app/layout.tsx. Replace the files, or swap next/font/local for next/font/google. The type scale (text-caption, text-body, …) lives in the same @theme block as the colours.

Logos and avatars

Company logos and avatars are gradient images in public/mesh and public/avatars. Swap the files to restyle every logo at once; the product name and copy live in src/lib/data/workspace.ts.