Mint themeFree

Soft — mint on a rounded Nunito face. Part of Soft. Radius 1rem.

Compare in the gallery Use as a full preset

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/soft-mint.json

Or paste the CSS into globals.css

:root {
  --radius: 1rem;
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.985 0.006 165);
  --foreground: oklch(0.23 0.03 165);
  --card: oklch(1 0 165);
  --card-foreground: oklch(0.23 0.03 165);
  --popover: oklch(1 0 165);
  --popover-foreground: oklch(0.23 0.03 165);
  --primary: oklch(0.5 0.11 165);
  --primary-foreground: oklch(0.985 0.012 165);
  --secondary: oklch(0.95 0.02 165);
  --secondary-foreground: oklch(0.26 0.03 165);
  --muted: oklch(0.955 0.015 165);
  --muted-foreground: oklch(0.49 0.035 165);
  --accent: oklch(0.93 0.05 165);
  --accent-foreground: oklch(0.4 0.11 165);
  --destructive: oklch(0.58 0.22 25);
  --border: oklch(0.9 0.02 165);
  --input: oklch(0.87 0.02 165);
  --ring: oklch(0.5 0.11 165);
  --chart-1: oklch(0.58 0.11 165);
  --chart-2: oklch(0.62 0.104 205);
  --chart-3: oklch(0.66 0.099 245);
  --chart-4: oklch(0.7 0.093 125);
  --chart-5: oklch(0.55 0.11 335);
  --sidebar: oklch(1 0 165);
  --sidebar-foreground: oklch(0.23 0.03 165);
  --sidebar-primary: oklch(0.5 0.11 165);
  --sidebar-primary-foreground: oklch(0.985 0.012 165);
  --sidebar-accent: oklch(0.95 0.02 165);
  --sidebar-accent-foreground: oklch(0.26 0.03 165);
  --sidebar-border: oklch(0.9 0.02 165);
  --sidebar-ring: oklch(0.5 0.11 165);
}

.dark {
  --background: oklch(0.16 0.022 165);
  --foreground: oklch(0.95 0.012 165);
  --card: oklch(0.2 0.026 165);
  --card-foreground: oklch(0.95 0.012 165);
  --popover: oklch(0.21 0.03 165);
  --popover-foreground: oklch(0.95 0.012 165);
  --primary: oklch(0.72 0.11 165);
  --primary-foreground: oklch(0.17 0.02 165);
  --secondary: oklch(0.27 0.03 165);
  --secondary-foreground: oklch(0.95 0.012 165);
  --muted: oklch(0.27 0.03 165);
  --muted-foreground: oklch(0.72 0.03 165);
  --accent: oklch(0.31 0.06 165);
  --accent-foreground: oklch(0.9 0.05 165);
  --destructive: oklch(0.66 0.2 25);
  --border: oklch(0.3 0.02 165);
  --input: oklch(0.34 0.025 165);
  --ring: oklch(0.72 0.11 165);
  --chart-1: oklch(0.7 0.11 165);
  --chart-2: oklch(0.74 0.104 205);
  --chart-3: oklch(0.78 0.099 245);
  --chart-4: oklch(0.72 0.093 125);
  --chart-5: oklch(0.68 0.11 335);
  --sidebar: oklch(0.2 0.026 165);
  --sidebar-foreground: oklch(0.95 0.012 165);
  --sidebar-primary: oklch(0.72 0.11 165);
  --sidebar-primary-foreground: oklch(0.17 0.02 165);
  --sidebar-accent: oklch(0.27 0.03 165);
  --sidebar-accent-foreground: oklch(0.95 0.012 165);
  --sidebar-border: oklch(0.3 0.02 165);
  --sidebar-ring: oklch(0.72 0.11 165);
}

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

/* Mint (soft-mint) */
@import "tailwindcss";

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

:root {
  --radius: 1rem;
  --spacing: 0.25rem;
  --font-sans: Nunito, ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.985 0.006 165);
  --foreground: oklch(0.23 0.03 165);
  --card: oklch(1 0 165);
  --card-foreground: oklch(0.23 0.03 165);
  --popover: oklch(1 0 165);
  --popover-foreground: oklch(0.23 0.03 165);
  --primary: oklch(0.5 0.11 165);
  --primary-foreground: oklch(0.985 0.012 165);
  --secondary: oklch(0.95 0.02 165);
  --secondary-foreground: oklch(0.26 0.03 165);
  --muted: oklch(0.955 0.015 165);
  --muted-foreground: oklch(0.49 0.035 165);
  --accent: oklch(0.93 0.05 165);
  --accent-foreground: oklch(0.4 0.11 165);
  --destructive: oklch(0.58 0.22 25);
  --border: oklch(0.9 0.02 165);
  --input: oklch(0.87 0.02 165);
  --ring: oklch(0.5 0.11 165);
  --chart-1: oklch(0.58 0.11 165);
  --chart-2: oklch(0.62 0.104 205);
  --chart-3: oklch(0.66 0.099 245);
  --chart-4: oklch(0.7 0.093 125);
  --chart-5: oklch(0.55 0.11 335);
  --sidebar: oklch(1 0 165);
  --sidebar-foreground: oklch(0.23 0.03 165);
  --sidebar-primary: oklch(0.5 0.11 165);
  --sidebar-primary-foreground: oklch(0.985 0.012 165);
  --sidebar-accent: oklch(0.95 0.02 165);
  --sidebar-accent-foreground: oklch(0.26 0.03 165);
  --sidebar-border: oklch(0.9 0.02 165);
  --sidebar-ring: oklch(0.5 0.11 165);
  --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.16 0.022 165);
  --foreground: oklch(0.95 0.012 165);
  --card: oklch(0.2 0.026 165);
  --card-foreground: oklch(0.95 0.012 165);
  --popover: oklch(0.21 0.03 165);
  --popover-foreground: oklch(0.95 0.012 165);
  --primary: oklch(0.72 0.11 165);
  --primary-foreground: oklch(0.17 0.02 165);
  --secondary: oklch(0.27 0.03 165);
  --secondary-foreground: oklch(0.95 0.012 165);
  --muted: oklch(0.27 0.03 165);
  --muted-foreground: oklch(0.72 0.03 165);
  --accent: oklch(0.31 0.06 165);
  --accent-foreground: oklch(0.9 0.05 165);
  --destructive: oklch(0.66 0.2 25);
  --border: oklch(0.3 0.02 165);
  --input: oklch(0.34 0.025 165);
  --ring: oklch(0.72 0.11 165);
  --chart-1: oklch(0.7 0.11 165);
  --chart-2: oklch(0.74 0.104 205);
  --chart-3: oklch(0.78 0.099 245);
  --chart-4: oklch(0.72 0.093 125);
  --chart-5: oklch(0.68 0.11 335);
  --sidebar: oklch(0.2 0.026 165);
  --sidebar-foreground: oklch(0.95 0.012 165);
  --sidebar-primary: oklch(0.72 0.11 165);
  --sidebar-primary-foreground: oklch(0.17 0.02 165);
  --sidebar-accent: oklch(0.27 0.03 165);
  --sidebar-accent-foreground: oklch(0.95 0.012 165);
  --sidebar-border: oklch(0.3 0.02 165);
  --sidebar-ring: oklch(0.72 0.11 165);
  --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);
  --font-sans: var(--font-sans);
  --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	16.06:1 / 4.5:1	Pass
Text on cards	16.73:1 / 4.5:1	Pass
Popover text	16.73:1 / 4.5:1	Pass
Muted text on muted	5.42:1 / 4.5:1	Pass
Muted text on background	5.9:1 / 4.5:1	Pass
Primary button text	5.45:1 / 4.5:1	Pass
Secondary button text	13.38:1 / 4.5:1	Pass
Accent label	7.22:1 / 4.5:1	Pass
Sidebar text	16.73:1 / 4.5:1	Pass
Sidebar active item	5.45:1 / 4.5:1	Pass
Sidebar hover item	13.38:1 / 4.5:1	Pass
Primary on background	5.44:1 / 3:1	Pass
Focus ring on background	5.44:1 / 3:1	Pass
Destructive on background	4.6:1 / 4.5:1	Pass
Destructive on cards	4.79:1 / 4.5:1	Pass

dark mode
Pair	Ratio	Result
Text on background	16.78:1 / 4.5:1	Pass
Text on cards	15.61:1 / 4.5:1	Pass
Popover text	15.25:1 / 4.5:1	Pass
Muted text on muted	6.09:1 / 4.5:1	Pass
Muted text on background	7.9:1 / 4.5:1	Pass
Primary button text	8.07:1 / 4.5:1	Pass
Secondary button text	12.93:1 / 4.5:1	Pass
Accent label	9.69:1 / 4.5:1	Pass
Sidebar text	15.61:1 / 4.5:1	Pass
Sidebar active item	8.07:1 / 4.5:1	Pass
Sidebar hover item	12.93:1 / 4.5:1	Pass
Primary on background	8.19:1 / 3:1	Pass
Focus ring on background	8.19:1 / 3:1	Pass
Destructive on background	5.66:1 / 4.5:1	Pass
Destructive on cards	5.26: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 Soft

Back to all themes

Mint themeFREEFree

Live preview

Create an account

Team

Traffic

Sofia Davis

Team

Notifications

Payments

Install

Export the tokens

Contrast report

Similar themes

More from Soft

Mint themeFree