Theme · IBM Plex Sans
Notion theme for shadcn/ui
A theme in the style of Notion: warm ink on white, soft beige-grey panels, small corners and Notion's blue for actions. Calm and built for long reading.
Font: IBM Plex Sans. Notion uses the system UI face; Plex keeps the same calm, readable feel everywhere.
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-notion.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: #ffffff;
--foreground: #37352f;
--card: #ffffff;
--card-foreground: #37352f;
--popover: #ffffff;
--popover-foreground: #37352f;
--primary: #2383e2;
--primary-foreground: #ffffff;
--secondary: #f1f1ef;
--secondary-foreground: #37352f;
--muted: #f7f6f3;
--muted-foreground: #787774;
--accent: #efeeec;
--accent-foreground: #37352f;
--border: #e9e9e7;
--input: #dfdfdc;
--ring: #2383e2;
--signal: #2383e2;
--signal-foreground: #ffffff;
--cl-mark: #d3d1cb;
--cl-shade: rgb(15 15 15 / 0.08);
--cl-font-sans: "IBM Plex Sans Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: 0em;
--radius: 0.375rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
}
.dark {
--background: #191919;
--foreground: #e6e6e5;
--card: #202020;
--card-foreground: #e6e6e5;
--popover: #252525;
--popover-foreground: #e6e6e5;
--primary: #2383e2;
--primary-foreground: #ffffff;
--secondary: #2c2c2c;
--secondary-foreground: #e6e6e5;
--muted: #252525;
--muted-foreground: #9b9b9b;
--accent: #2f2f2f;
--accent-foreground: #e6e6e5;
--border: #2f2f2f;
--input: #3a3a3a;
--ring: #529cca;
--signal: #529cca;
--signal-foreground: #ffffff;
--cl-mark: #474747;
--cl-shade: rgb(0 0 0 / 0.5);
}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 |