Founding price: $35, then $99

Get Pro
Get Pro
All themes

Aster Mantle themeFree

Aster Mantle: a vivid analogous palette around hue 300, flat surfaces, none corners, comfortable density, soft contrast. warm. A violet theme. Radius 0rem.

Compare in the gallery

Live preview

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/aster-mantle.json
Or paste the CSS into globals.css
:root {
  --radius: 0rem;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.96 0.023 303.5);
  --foreground: oklch(0.28 0.047 303.5);
  --card: oklch(0.974 0.015 303.5);
  --card-foreground: oklch(0.28 0.047 303.5);
  --popover: oklch(0.974 0.015 303.5);
  --popover-foreground: oklch(0.28 0.047 303.5);
  --primary: oklch(0.644 0.22 299.9);
  --primary-foreground: oklch(0.18 0.02 299.9);
  --secondary: oklch(0.926 0.044 303.5);
  --secondary-foreground: oklch(0.28 0.047 303.5);
  --muted: oklch(0.933 0.039 303.5);
  --muted-foreground: oklch(0.5 0.053 303.5);
  --accent: oklch(0.921 0.056 338.5);
  --accent-foreground: oklch(0.28 0.047 303.5);
  --destructive: oklch(0.555 0.21 30.4);
  --border: oklch(0.906 0.047 303.5);
  --input: oklch(0.887 0.053 303.5);
  --ring: oklch(0.649 0.198 299.9);
  --chart-1: oklch(0.54 0.19 295);
  --chart-2: oklch(0.72 0.19 340.8);
  --chart-3: oklch(0.46 0.119 246.3);
  --chart-4: oklch(0.62 0.19 29.1);
  --chart-5: oklch(0.78 0.134 206.3);
  --sidebar: oklch(0.944 0.032 303.5);
  --sidebar-foreground: oklch(0.28 0.047 303.5);
  --sidebar-primary: oklch(0.644 0.22 299.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 299.9);
  --sidebar-accent: oklch(0.921 0.056 338.5);
  --sidebar-accent-foreground: oklch(0.28 0.047 303.5);
  --sidebar-border: oklch(0.906 0.047 303.5);
  --sidebar-ring: oklch(0.649 0.198 299.9);
  --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.151 0.037 297);
  --foreground: oklch(0.93 0.038 297);
  --card: oklch(0.183 0.029 297);
  --card-foreground: oklch(0.93 0.038 297);
  --popover: oklch(0.199 0.029 297);
  --popover-foreground: oklch(0.93 0.038 297);
  --primary: oklch(0.615 0.202 299.9);
  --primary-foreground: oklch(0.18 0.02 299.9);
  --secondary: oklch(0.197 0.088 297);
  --secondary-foreground: oklch(0.93 0.038 297);
  --muted: oklch(0.187 0.051 297);
  --muted-foreground: oklch(0.72 0.053 297);
  --accent: oklch(0.203 0.084 332);
  --accent-foreground: oklch(0.93 0.038 297);
  --destructive: oklch(0.7 0.191 27.8);
  --border: oklch(0.223 0.059 297);
  --input: oklch(0.249 0.066 297);
  --ring: oklch(0.585 0.182 299.9);
  --chart-1: oklch(0.62 0.19 294.7);
  --chart-2: oklch(0.8 0.147 344.2);
  --chart-3: oklch(0.54 0.143 247.2);
  --chart-4: oklch(0.7 0.19 22.8);
  --chart-5: oklch(0.86 0.147 204.5);
  --sidebar: oklch(0.173 0.04 297);
  --sidebar-foreground: oklch(0.93 0.038 297);
  --sidebar-primary: oklch(0.615 0.202 299.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 299.9);
  --sidebar-accent: oklch(0.203 0.084 332);
  --sidebar-accent-foreground: oklch(0.93 0.038 297);
  --sidebar-border: oklch(0.223 0.059 297);
  --sidebar-ring: oklch(0.585 0.182 299.9);
  --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 {
  --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);
}

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
/* Aster Mantle (aster-mantle) */
@import "tailwindcss";

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

:root {
  --radius: 0rem;
  --spacing: 0.275rem;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.96 0.023 303.5);
  --foreground: oklch(0.28 0.047 303.5);
  --card: oklch(0.974 0.015 303.5);
  --card-foreground: oklch(0.28 0.047 303.5);
  --popover: oklch(0.974 0.015 303.5);
  --popover-foreground: oklch(0.28 0.047 303.5);
  --primary: oklch(0.644 0.22 299.9);
  --primary-foreground: oklch(0.18 0.02 299.9);
  --secondary: oklch(0.926 0.044 303.5);
  --secondary-foreground: oklch(0.28 0.047 303.5);
  --muted: oklch(0.933 0.039 303.5);
  --muted-foreground: oklch(0.5 0.053 303.5);
  --accent: oklch(0.921 0.056 338.5);
  --accent-foreground: oklch(0.28 0.047 303.5);
  --destructive: oklch(0.555 0.21 30.4);
  --border: oklch(0.906 0.047 303.5);
  --input: oklch(0.887 0.053 303.5);
  --ring: oklch(0.649 0.198 299.9);
  --chart-1: oklch(0.54 0.19 295);
  --chart-2: oklch(0.72 0.19 340.8);
  --chart-3: oklch(0.46 0.119 246.3);
  --chart-4: oklch(0.62 0.19 29.1);
  --chart-5: oklch(0.78 0.134 206.3);
  --sidebar: oklch(0.944 0.032 303.5);
  --sidebar-foreground: oklch(0.28 0.047 303.5);
  --sidebar-primary: oklch(0.644 0.22 299.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 299.9);
  --sidebar-accent: oklch(0.921 0.056 338.5);
  --sidebar-accent-foreground: oklch(0.28 0.047 303.5);
  --sidebar-border: oklch(0.906 0.047 303.5);
  --sidebar-ring: oklch(0.649 0.198 299.9);
  --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.151 0.037 297);
  --foreground: oklch(0.93 0.038 297);
  --card: oklch(0.183 0.029 297);
  --card-foreground: oklch(0.93 0.038 297);
  --popover: oklch(0.199 0.029 297);
  --popover-foreground: oklch(0.93 0.038 297);
  --primary: oklch(0.615 0.202 299.9);
  --primary-foreground: oklch(0.18 0.02 299.9);
  --secondary: oklch(0.197 0.088 297);
  --secondary-foreground: oklch(0.93 0.038 297);
  --muted: oklch(0.187 0.051 297);
  --muted-foreground: oklch(0.72 0.053 297);
  --accent: oklch(0.203 0.084 332);
  --accent-foreground: oklch(0.93 0.038 297);
  --destructive: oklch(0.7 0.191 27.8);
  --border: oklch(0.223 0.059 297);
  --input: oklch(0.249 0.066 297);
  --ring: oklch(0.585 0.182 299.9);
  --chart-1: oklch(0.62 0.19 294.7);
  --chart-2: oklch(0.8 0.147 344.2);
  --chart-3: oklch(0.54 0.143 247.2);
  --chart-4: oklch(0.7 0.19 22.8);
  --chart-5: oklch(0.86 0.147 204.5);
  --sidebar: oklch(0.173 0.04 297);
  --sidebar-foreground: oklch(0.93 0.038 297);
  --sidebar-primary: oklch(0.615 0.202 299.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 299.9);
  --sidebar-accent: oklch(0.203 0.084 332);
  --sidebar-accent-foreground: oklch(0.93 0.038 297);
  --sidebar-border: oklch(0.223 0.059 297);
  --sidebar-ring: oklch(0.585 0.182 299.9);
  --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

This theme passes every theme gate: text contrast (WCAG 2.2 AA), chart colours that stay apart, and matching light and dark modes.

light mode
PairRatioResult
Text on background13.11:1 / 4.5:1Pass
Text on cards13.69:1 / 4.5:1Pass
Popover text13.69:1 / 4.5:1Pass
Muted text on muted4.98:1 / 4.5:1Pass
Muted text on background5.42:1 / 4.5:1Pass
Primary button text5.17:1 / 4.5:1Pass
Secondary button text11.77:1 / 4.5:1Pass
Accent label11.47:1 / 4.5:1Pass
Sidebar text12.47:1 / 4.5:1Pass
Sidebar active item5.17:1 / 4.5:1Pass
Sidebar hover item11.47:1 / 4.5:1Pass
Primary on background3.23:1 / 3:1Pass
Focus ring on background3.12:1 / 3:1Pass
Destructive on background4.67:1 / 4.5:1Pass
Destructive on cards4.88:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background15.92:1 / 4.5:1Pass
Text on cards15.16:1 / 4.5:1Pass
Popover text14.71:1 / 4.5:1Pass
Muted text on muted7.44:1 / 4.5:1Pass
Muted text on background7.84:1 / 4.5:1Pass
Primary button text4.64:1 / 4.5:1Pass
Secondary button text15:1 / 4.5:1Pass
Accent label14.85:1 / 4.5:1Pass
Sidebar text15.45:1 / 4.5:1Pass
Sidebar active item4.64:1 / 4.5:1Pass
Sidebar hover item14.85:1 / 4.5:1Pass
Primary on background4.86:1 / 3:1Pass
Focus ring on background4.34:1 / 3:1Pass
Destructive on background6.79:1 / 4.5:1Pass
Destructive on cards6.47:1 / 4.5:1Pass

Similar themes

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