Theme · Instrument Sans
Atelier theme for shadcn/ui
Warm paper with a violet accent, editorial type and generous corners.
Font: Instrument Sans.
Preview
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Install
With the shadcn CLI. It writes the light and dark tokens into your global CSS (and the Cuelark utilities if you don't have them yet).
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/theme-atelier.jsonOr paste the CSS after your Tailwind import. The variable names are the standard shadcn/ui ones, so it themes any shadcn project.
:root {
--background: oklch(0.985 0.004 80);
--foreground: oklch(0.18 0.012 80);
--card: oklch(0.997 0.002 80);
--card-foreground: oklch(0.18 0.012 80);
--popover: oklch(0.997 0.002 80);
--popover-foreground: oklch(0.18 0.012 80);
--primary: oklch(0.64 0.22 295);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.955 0.006 80);
--secondary-foreground: oklch(0.2 0.012 80);
--muted: oklch(0.955 0.006 80);
--muted-foreground: oklch(0.52 0.012 80);
--accent: oklch(0.945 0.008 80);
--accent-foreground: oklch(0.2 0.012 80);
--border: oklch(0.905 0.008 80);
--input: oklch(0.885 0.008 80);
--ring: oklch(0.64 0.22 295);
--signal: oklch(0.64 0.22 295);
--signal-foreground: oklch(0.99 0 0);
--cl-mark: oklch(0.68 0.008 80);
--cl-font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: 0em;
--radius: 1rem;
--cl-density: 1;
--cl-marks: 1;
--cl-motion: 1;
}
.dark {
--background: oklch(0.155 0.008 80);
--foreground: oklch(0.965 0.006 80);
--card: oklch(0.185 0.008 80);
--card-foreground: oklch(0.965 0.006 80);
--popover: oklch(0.205 0.008 80);
--popover-foreground: oklch(0.965 0.006 80);
--primary: oklch(0.64 0.22 295);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.25 0.008 80);
--secondary-foreground: oklch(0.965 0.006 80);
--muted: oklch(0.25 0.008 80);
--muted-foreground: oklch(0.7 0.01 80);
--accent: oklch(0.265 0.008 80);
--accent-foreground: oklch(0.965 0.006 80);
--border: oklch(1 0 0 / 0.09);
--input: oklch(1 0 0 / 0.14);
--ring: oklch(0.64 0.22 295);
--signal: oklch(0.64 0.22 295);
--signal-foreground: oklch(0.99 0 0);
--cl-mark: oklch(0.55 0.008 80);
}Tokens
| Token | Used for | Light | Dark |
|---|---|---|---|
| --background | Page | ||
| --foreground | Text | ||
| --card | Cards | ||
| --muted | Panels, wells | ||
| --muted-foreground | Secondary text | ||
| --primary | Primary buttons | ||
| --primary-foreground | Text on primary | ||
| --secondary | Secondary buttons | ||
| --accent | Hover, selection | ||
| --border | Borders | ||
| --input | Input borders | ||
| --ring | Focus ring | ||
| --signal | Accent: checked, live, highlights |