Stone themeFree

Warm, slightly brown greys from the shadcn/ui base colours. Part of shadcn/ui base colours. Radius 0.625rem.

Compare in the gallery

Create an account

Enter your email below to create your account.

or continue with

Password

Team

Seats used this billing period.

OM
Olivia Martin
Owner
JL
Jackson Lee
Developer
IN
Isabella Nguyen
Designer

Traffic

Visitors by source

48,204+12.4%

Jan

Feb

Mar

Apr

May

Jun

Jul

Direct
Search
Social
Email
Referral

Sofia Davis

m@example.com

Hi, how can I help you today?

Hey, I'm having trouble with my account.

What seems to be the problem?

I can't log in.

Popular

Team

$29/ month

Everything a growing team needs to ship together.

Unlimited projects
Shared workspaces
Priority support
Audit log

Notifications

Choose what you hear about.

Email digestsA summary every Monday.

Push alertsWhen a build fails.

Alert volume64%

Payments

Manage your recent payments.

Status	Email	Amount
Success	ken99@example.com	$316.00
Success	abe45@example.com	$242.00
Processing	monserrat44@example.com	$837.00
Failed	carmella@example.com	$721.00

1 of 4 row(s) selected.

Install

The CLI writes these variables into your global stylesheet. Every component reads them, so the whole app changes at once.

shadcn CLI

npx shadcn@latest add https://ui.tealmac.com/r/themes/shadcn-stone.json

Or paste the CSS into globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --primary-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.97 0.001 106.424);
  --secondary-foreground: oklch(0.216 0.006 56.043);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --sidebar: oklch(0.985 0.001 106.423);
  --sidebar-foreground: oklch(0.147 0.004 49.25);
  --sidebar-primary: oklch(0.216 0.006 56.043);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.97 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
  --sidebar-border: oklch(0.923 0.003 48.717);
  --sidebar-ring: oklch(0.709 0.01 56.259);
}

.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.923 0.003 48.717);
  --primary-foreground: oklch(0.216 0.006 56.043);
  --secondary: oklch(0.268 0.007 34.298);
  --secondary-foreground: oklch(0.985 0.001 106.423);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
}

Export the tokens

The same theme as Tailwind v4 CSS, plain CSS variables, SCSS, JavaScript, TypeScript, DTCG design tokens, Figma variables and starter files for Swift, Android, Jetpack Compose and Flutter.

Download globals.css

Tailwind v4: globals.css

/* Stone (shadcn-stone) */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --spacing: 0.25rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --primary-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.97 0.001 106.424);
  --secondary-foreground: oklch(0.216 0.006 56.043);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --sidebar: oklch(0.985 0.001 106.423);
  --sidebar-foreground: oklch(0.147 0.004 49.25);
  --sidebar-primary: oklch(0.216 0.006 56.043);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.97 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
  --sidebar-border: oklch(0.923 0.003 48.717);
  --sidebar-ring: oklch(0.709 0.01 56.259);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.923 0.003 48.717);
  --primary-foreground: oklch(0.216 0.006 56.043);
  --secondary: oklch(0.268 0.007 34.298);
  --secondary-foreground: oklch(0.985 0.001 106.423);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Contrast report

Measured contrast of every pair. This preset predates the theme gates and is shown as it is.

light mode
Pair	Ratio	Result
Text on background	19.75:1 / 4.5:1	Pass
Text on cards	19.75:1 / 4.5:1	Pass
Popover text	19.75:1 / 4.5:1	Pass
Muted text on muted	4.41:1 / 4.5:1	Fail
Muted text on background	4.81:1 / 4.5:1	Pass
Primary button text	16.76:1 / 4.5:1	Pass
Secondary button text	16.04:1 / 4.5:1	Pass
Accent label	16.04:1 / 4.5:1	Pass
Sidebar text	18.92:1 / 4.5:1	Pass
Sidebar active item	16.76:1 / 4.5:1	Pass
Sidebar hover item	16.04:1 / 4.5:1	Pass
Primary on background	17.49:1 / 3:1	Pass
Focus ring on background	2.59:1 / 3:1	Fail
Destructive on background	4.91:1 / 4.5:1	Pass
Destructive on cards	4.91:1 / 4.5:1	Pass

dark mode
Pair	Ratio	Result
Text on background	18.92:1 / 4.5:1	Pass
Text on cards	16.76:1 / 4.5:1	Pass
Popover text	16.76:1 / 4.5:1	Pass
Muted text on muted	5.87:1 / 4.5:1	Pass
Muted text on background	7.63:1 / 4.5:1	Pass
Primary button text	13.92:1 / 4.5:1	Pass
Secondary button text	14.56:1 / 4.5:1	Pass
Accent label	14.56:1 / 4.5:1	Pass
Sidebar text	16.76:1 / 4.5:1	Pass
Sidebar active item	6.54:1 / 4.5:1	Pass
Sidebar hover item	14.56:1 / 4.5:1	Pass
Primary on background	15.72:1 / 3:1	Pass
Focus ring on background	4.11:1 / 3:1	Pass
Destructive on background	6.88:1 / 4.5:1	Pass
Destructive on cards	6.09:1 / 4.5:1	Pass

Similar themes

The closest themes by colour, measured in OKLab across the key tokens in light and dark.

More from shadcn/ui base colours

Back to all themes

Stone themeFREEFree

Live preview

Create an account

Team

Traffic

Sofia Davis

Team

Notifications

Payments

Install

Export the tokens

Contrast report

Similar themes

More from shadcn/ui base colours

Stone themeFree