Founding price: $35, then $79.99

Get Pro
Get Pro
All themes

Tealmac themeFree

The tealmac signature: a calm, deep teal on mist-tinted neutrals, generous corners and soft teal-tinted shadows. Part of tealmac signature. Radius 0.75rem.

Compare in the galleryUse as a full preset

Live preview

Create an account

Enter your email below to create your account.

or continue with

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%
  • Direct
  • Search
  • Social
  • Email
  • Referral
SD

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.

Alert volume64%

Payments

Manage your recent payments.

SelectStatusEmailAmount
Successken99@example.com$316.00
Successabe45@example.com$242.00
Processingmonserrat44@example.com$837.00
Failedcarmella@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/tealmac.json
Or paste the CSS into globals.css
:root {
  --radius: 0.75rem;
  --background: oklch(0.986 0.004 196);
  --foreground: oklch(0.2 0.022 210);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.022 210);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.022 210);
  --primary: oklch(0.5 0.092 192);
  --primary-foreground: oklch(0.988 0.008 190);
  --secondary: oklch(0.958 0.01 196);
  --secondary-foreground: oklch(0.26 0.03 205);
  --muted: oklch(0.958 0.008 200);
  --muted-foreground: oklch(0.49 0.022 210);
  --accent: oklch(0.948 0.028 188);
  --accent-foreground: oklch(0.34 0.068 194);
  --destructive: oklch(0.55 0.2 26);
  --border: oklch(0.912 0.01 200);
  --input: oklch(0.68 0.02 205);
  --ring: oklch(0.6 0.1 190);
  --chart-1: oklch(0.6 0.105 188);
  --chart-2: oklch(0.62 0.13 240);
  --chart-3: oklch(0.76 0.14 78);
  --chart-4: oklch(0.64 0.17 22);
  --chart-5: oklch(0.58 0.16 300);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.2 0.022 210);
  --sidebar-primary: oklch(0.5 0.092 192);
  --sidebar-primary-foreground: oklch(0.988 0.008 190);
  --sidebar-accent: oklch(0.948 0.028 188);
  --sidebar-accent-foreground: oklch(0.34 0.068 194);
  --sidebar-border: oklch(0.912 0.01 200);
  --sidebar-ring: oklch(0.6 0.1 190);
  --shadow-2xs: 0 1px 0 0 oklch(0.32 0.05 205 / 5%);
  --shadow-xs: 0 1px 2px 0 oklch(0.32 0.05 205 / 6%);
  --shadow-sm: 0 1px 3px 0 oklch(0.32 0.05 205 / 8%), 0 1px 2px -1px oklch(0.32 0.05 205 / 6%);
  --shadow: 0 2px 6px -1px oklch(0.32 0.05 205 / 8%), 0 1px 3px -1px oklch(0.32 0.05 205 / 6%);
  --shadow-md: 0 6px 14px -4px oklch(0.32 0.05 205 / 10%), 0 2px 6px -2px oklch(0.32 0.05 205 / 6%);
  --shadow-lg: 0 14px 30px -8px oklch(0.32 0.05 205 / 14%), 0 4px 10px -4px oklch(0.32 0.05 205 / 6%);
  --shadow-xl: 0 24px 48px -12px oklch(0.32 0.05 205 / 18%), 0 8px 16px -6px oklch(0.32 0.05 205 / 8%);
}

.dark {
  --background: oklch(0.168 0.014 212);
  --foreground: oklch(0.962 0.006 196);
  --card: oklch(0.2 0.016 212);
  --card-foreground: oklch(0.962 0.006 196);
  --popover: oklch(0.218 0.018 212);
  --popover-foreground: oklch(0.962 0.006 196);
  --primary: oklch(0.78 0.118 184);
  --primary-foreground: oklch(0.2 0.035 205);
  --secondary: oklch(0.26 0.018 212);
  --secondary-foreground: oklch(0.962 0.006 196);
  --muted: oklch(0.25 0.016 212);
  --muted-foreground: oklch(0.72 0.022 205);
  --accent: oklch(0.29 0.042 196);
  --accent-foreground: oklch(0.93 0.04 186);
  --destructive: oklch(0.68 0.19 24);
  --border: oklch(0.9 0.02 200 / 10%);
  --input: oklch(0.9 0.02 200 / 18%);
  --ring: oklch(0.72 0.11 186);
  --chart-1: oklch(0.76 0.12 184);
  --chart-2: oklch(0.72 0.13 240);
  --chart-3: oklch(0.82 0.14 82);
  --chart-4: oklch(0.72 0.16 22);
  --chart-5: oklch(0.72 0.14 300);
  --sidebar: oklch(0.2 0.016 212);
  --sidebar-foreground: oklch(0.962 0.006 196);
  --sidebar-primary: oklch(0.78 0.118 184);
  --sidebar-primary-foreground: oklch(0.2 0.035 205);
  --sidebar-accent: oklch(0.29 0.042 196);
  --sidebar-accent-foreground: oklch(0.93 0.04 186);
  --sidebar-border: oklch(0.9 0.02 200 / 10%);
  --sidebar-ring: oklch(0.72 0.11 186);
  --shadow-2xs: 0 1px 0 0 oklch(0.05 0.02 220 / 20%);
  --shadow-xs: 0 1px 2px 0 oklch(0.05 0.02 220 / 24%);
  --shadow-sm: 0 1px 3px 0 oklch(0.05 0.02 220 / 32%), 0 1px 2px -1px oklch(0.05 0.02 220 / 24%);
  --shadow: 0 2px 6px -1px oklch(0.05 0.02 220 / 32%), 0 1px 3px -1px oklch(0.05 0.02 220 / 24%);
  --shadow-md: 0 6px 14px -4px oklch(0.05 0.02 220 / 40%), 0 2px 6px -2px oklch(0.05 0.02 220 / 24%);
  --shadow-lg: 0 14px 30px -8px oklch(0.05 0.02 220 / 56%), 0 4px 10px -4px oklch(0.05 0.02 220 / 24%);
  --shadow-xl: 0 24px 48px -12px oklch(0.05 0.02 220 / 72%), 0 8px 16px -6px oklch(0.05 0.02 220 / 32%);
}

@theme inline {
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

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
/* Tealmac (tealmac) */
@import "tailwindcss";

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

:root {
  --radius: 0.75rem;
  --spacing: 0.25rem;
  --background: oklch(0.986 0.004 196);
  --foreground: oklch(0.2 0.022 210);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.022 210);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.022 210);
  --primary: oklch(0.5 0.092 192);
  --primary-foreground: oklch(0.988 0.008 190);
  --secondary: oklch(0.958 0.01 196);
  --secondary-foreground: oklch(0.26 0.03 205);
  --muted: oklch(0.958 0.008 200);
  --muted-foreground: oklch(0.49 0.022 210);
  --accent: oklch(0.948 0.028 188);
  --accent-foreground: oklch(0.34 0.068 194);
  --destructive: oklch(0.55 0.2 26);
  --border: oklch(0.912 0.01 200);
  --input: oklch(0.68 0.02 205);
  --ring: oklch(0.6 0.1 190);
  --chart-1: oklch(0.6 0.105 188);
  --chart-2: oklch(0.62 0.13 240);
  --chart-3: oklch(0.76 0.14 78);
  --chart-4: oklch(0.64 0.17 22);
  --chart-5: oklch(0.58 0.16 300);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.2 0.022 210);
  --sidebar-primary: oklch(0.5 0.092 192);
  --sidebar-primary-foreground: oklch(0.988 0.008 190);
  --sidebar-accent: oklch(0.948 0.028 188);
  --sidebar-accent-foreground: oklch(0.34 0.068 194);
  --sidebar-border: oklch(0.912 0.01 200);
  --sidebar-ring: oklch(0.6 0.1 190);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.32 0.05 205 / 5%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.32 0.05 205 / 6%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.32 0.05 205 / 8%), 0px 1px 2px -1px oklch(0.32 0.05 205 / 6%);
  --shadow-md: 0px 6px 14px -4px oklch(0.32 0.05 205 / 10%), 0px 2px 6px -2px oklch(0.32 0.05 205 / 6%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.32 0.05 205 / 14%), 0px 4px 10px -4px oklch(0.32 0.05 205 / 6%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.32 0.05 205 / 18%), 0px 8px 16px -6px oklch(0.32 0.05 205 / 8%);
}

.dark {
  --background: oklch(0.168 0.014 212);
  --foreground: oklch(0.962 0.006 196);
  --card: oklch(0.2 0.016 212);
  --card-foreground: oklch(0.962 0.006 196);
  --popover: oklch(0.218 0.018 212);
  --popover-foreground: oklch(0.962 0.006 196);
  --primary: oklch(0.78 0.118 184);
  --primary-foreground: oklch(0.2 0.035 205);
  --secondary: oklch(0.26 0.018 212);
  --secondary-foreground: oklch(0.962 0.006 196);
  --muted: oklch(0.25 0.016 212);
  --muted-foreground: oklch(0.72 0.022 205);
  --accent: oklch(0.29 0.042 196);
  --accent-foreground: oklch(0.93 0.04 186);
  --destructive: oklch(0.68 0.19 24);
  --border: oklch(0.9 0.02 200 / 10%);
  --input: oklch(0.9 0.02 200 / 18%);
  --ring: oklch(0.72 0.11 186);
  --chart-1: oklch(0.76 0.12 184);
  --chart-2: oklch(0.72 0.13 240);
  --chart-3: oklch(0.82 0.14 82);
  --chart-4: oklch(0.72 0.16 22);
  --chart-5: oklch(0.72 0.14 300);
  --sidebar: oklch(0.2 0.016 212);
  --sidebar-foreground: oklch(0.962 0.006 196);
  --sidebar-primary: oklch(0.78 0.118 184);
  --sidebar-primary-foreground: oklch(0.2 0.035 205);
  --sidebar-accent: oklch(0.29 0.042 196);
  --sidebar-accent-foreground: oklch(0.93 0.04 186);
  --sidebar-border: oklch(0.9 0.02 200 / 10%);
  --sidebar-ring: oklch(0.72 0.11 186);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.05 0.02 220 / 20%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.05 0.02 220 / 24%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.05 0.02 220 / 32%), 0px 1px 2px -1px oklch(0.05 0.02 220 / 24%);
  --shadow-md: 0px 6px 14px -4px oklch(0.05 0.02 220 / 40%), 0px 2px 6px -2px oklch(0.05 0.02 220 / 24%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.05 0.02 220 / 56%), 0px 4px 10px -4px oklch(0.05 0.02 220 / 24%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.05 0.02 220 / 72%), 0px 8px 16px -6px oklch(0.05 0.02 220 / 32%);
}

@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
PairRatioResult
Text on background17.33:1 / 4.5:1Pass
Text on cards18.02:1 / 4.5:1Pass
Popover text18.02:1 / 4.5:1Pass
Muted text on muted5.5:1 / 4.5:1Pass
Muted text on background5.97:1 / 4.5:1Pass
Primary button text5.55:1 / 4.5:1Pass
Secondary button text13.67:1 / 4.5:1Pass
Accent label9.89:1 / 4.5:1Pass
Sidebar text18.02:1 / 4.5:1Pass
Sidebar active item5.55:1 / 4.5:1Pass
Sidebar hover item9.89:1 / 4.5:1Pass
Primary on background5.51:1 / 3:1Pass
Focus ring on background3.62:1 / 3:1Pass
Destructive on background5.17:1 / 4.5:1Pass
Destructive on cards5.38:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background17.18:1 / 4.5:1Pass
Text on cards16.19:1 / 4.5:1Pass
Popover text15.55:1 / 4.5:1Pass
Muted text on muted6.48:1 / 4.5:1Pass
Muted text on background7.78:1 / 4.5:1Pass
Primary button text9.44:1 / 4.5:1Pass
Secondary button text13.87:1 / 4.5:1Pass
Accent label11.47:1 / 4.5:1Pass
Sidebar text16.19:1 / 4.5:1Pass
Sidebar active item9.44:1 / 4.5:1Pass
Sidebar hover item11.47:1 / 4.5:1Pass
Primary on background10.06:1 / 3:1Pass
Focus ring on background8.11:1 / 3:1Pass
Destructive on background6.09:1 / 4.5:1Pass
Destructive on cards5.74:1 / 4.5:1Pass

Similar themes

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

More from tealmac signature

Back to all themes