Theme · Space Grotesk
Terminal theme for shadcn/ui
Square corners, compact controls, a mint signal and Space Grotesk, for developer tools and dashboards.
Font: Space Grotesk.
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-terminal.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.003 286);
--foreground: oklch(0.18 0.009 286);
--card: oklch(0.997 0.002 286);
--card-foreground: oklch(0.18 0.009 286);
--popover: oklch(0.997 0.002 286);
--popover-foreground: oklch(0.18 0.009 286);
--primary: oklch(0.2 0.009 286);
--primary-foreground: oklch(0.985 0.003 286);
--secondary: oklch(0.955 0.005 286);
--secondary-foreground: oklch(0.2 0.009 286);
--muted: oklch(0.955 0.005 286);
--muted-foreground: oklch(0.52 0.009 286);
--accent: oklch(0.945 0.006 286);
--accent-foreground: oklch(0.2 0.009 286);
--border: oklch(0.905 0.006 286);
--input: oklch(0.885 0.006 286);
--ring: oklch(0.65 0.14 168);
--signal: oklch(0.84 0.14 168);
--signal-foreground: oklch(0.22 0.05 168);
--cl-mark: oklch(0.68 0.006 286);
--cl-font-sans: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 0.9375;
--cl-tracking: 0em;
--radius: 0rem;
--cl-density: 0.875;
--cl-marks: 1;
--cl-motion: 1;
}
.dark {
--background: oklch(0.155 0.006 286);
--foreground: oklch(0.965 0.005 286);
--card: oklch(0.185 0.006 286);
--card-foreground: oklch(0.965 0.005 286);
--popover: oklch(0.205 0.006 286);
--popover-foreground: oklch(0.965 0.005 286);
--primary: oklch(0.955 0.005 286);
--primary-foreground: oklch(0.18 0.009 286);
--secondary: oklch(0.25 0.006 286);
--secondary-foreground: oklch(0.965 0.005 286);
--muted: oklch(0.25 0.006 286);
--muted-foreground: oklch(0.7 0.007 286);
--accent: oklch(0.265 0.006 286);
--accent-foreground: oklch(0.965 0.005 286);
--border: oklch(1 0 0 / 0.09);
--input: oklch(1 0 0 / 0.14);
--ring: oklch(0.84 0.14 168);
--signal: oklch(0.84 0.14 168);
--signal-foreground: oklch(0.2 0.05 168);
--cl-mark: oklch(0.55 0.006 286);
}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 |