Theme · Instrument Sans
Stripe theme for shadcn/ui
A theme in the style of Stripe: navy text on cool white, blurple primary buttons, slate greys and soft blue-tinted shadows. Dark mode moves to a deep navy instead of grey.
Font: Instrument Sans. Stripe uses Söhne, a commercial face; Instrument Sans is the closest open alternative.
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-stripe.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: #f6f9fc;
--foreground: #0a2540;
--card: #ffffff;
--card-foreground: #0a2540;
--popover: #ffffff;
--popover-foreground: #0a2540;
--primary: #635bff;
--primary-foreground: #ffffff;
--secondary: #eef2f7;
--secondary-foreground: #0a2540;
--muted: #eef2f7;
--muted-foreground: #425466;
--accent: #e6ebf1;
--accent-foreground: #0a2540;
--border: #e3e8ee;
--input: #d5dbe4;
--ring: #635bff;
--signal: #635bff;
--signal-foreground: #ffffff;
--cl-mark: #c1c9d2;
--cl-shade: rgb(50 50 93 / 0.12);
--cl-font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: -0.005em;
--radius: 0.5rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
}
.dark {
--background: #0a1628;
--foreground: #f6f9fc;
--card: #10213a;
--card-foreground: #f6f9fc;
--popover: #142847;
--popover-foreground: #f6f9fc;
--primary: #7a73ff;
--primary-foreground: #ffffff;
--secondary: #1a2f4d;
--secondary-foreground: #f6f9fc;
--muted: #1a2f4d;
--muted-foreground: #a3b1c6;
--accent: #1f3657;
--accent-foreground: #f6f9fc;
--border: #24395a;
--input: #2c4468;
--ring: #7a73ff;
--signal: #7a73ff;
--signal-foreground: #ffffff;
--cl-mark: #3a5175;
--cl-shade: rgb(0 0 0 / 0.45);
}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 |