Founding price: $35, then $99

Get Pro
Get Pro
All themes

Beryl Outline themeFree

Beryl Outline: a balanced mono palette around hue 165, bordered surfaces, none corners, comfortable density, soft contrast. minimal, editorial. A emerald 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/basic-fog.json
Or paste the CSS into globals.css
:root {
  --radius: 0rem;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.966 0.004 165.5);
  --foreground: oklch(0.28 0.007 165.5);
  --card: oklch(0.98 0.004 165.5);
  --card-foreground: oklch(0.28 0.007 165.5);
  --popover: oklch(0.98 0.004 165.5);
  --popover-foreground: oklch(0.28 0.007 165.5);
  --primary: oklch(0.609 0.128 165.2);
  --primary-foreground: oklch(0.18 0.02 165.2);
  --secondary: oklch(0.931 0.011 165.5);
  --secondary-foreground: oklch(0.28 0.007 165.5);
  --muted: oklch(0.939 0.006 165.5);
  --muted-foreground: oklch(0.5 0.008 165.5);
  --accent: oklch(0.927 0.025 185.5);
  --accent-foreground: oklch(0.28 0.007 165.5);
  --destructive: oklch(0.56 0.21 27.7);
  --border: oklch(0.87 0.007 165.5);
  --input: oklch(0.836 0.008 165.5);
  --ring: oklch(0.619 0.13 165.2);
  --chart-1: oklch(0.54 0.113 165.3);
  --chart-2: oklch(0.72 0.124 190.5);
  --chart-3: oklch(0.46 0.132 133.9);
  --chart-4: oklch(0.62 0.121 228.3);
  --chart-5: oklch(0.78 0.14 102.4);
  --sidebar: oklch(0.95 0.005 165.5);
  --sidebar-foreground: oklch(0.28 0.007 165.5);
  --sidebar-primary: oklch(0.609 0.128 165.2);
  --sidebar-primary-foreground: oklch(0.18 0.02 165.2);
  --sidebar-accent: oklch(0.927 0.025 185.5);
  --sidebar-accent-foreground: oklch(0.28 0.007 165.5);
  --sidebar-border: oklch(0.87 0.007 165.5);
  --sidebar-ring: oklch(0.619 0.13 165.2);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 1px 0px 0px oklch(0.25 0.03 165.2 / 6%);
  --shadow-sm: 0px 1px 2px 0px oklch(0.25 0.03 165.2 / 6%);
  --shadow-md: 0px 2px 4px 0px oklch(0.25 0.03 165.2 / 8%);
  --shadow-lg: 0px 4px 8px 0px oklch(0.25 0.03 165.2 / 10%);
  --shadow-xl: 0px 8px 16px 0px oklch(0.25 0.03 165.2 / 12%);
}

.dark {
  --background: oklch(0.216 0.006 169.2);
  --foreground: oklch(0.93 0.007 169.2);
  --card: oklch(0.248 0.004 169.2);
  --card-foreground: oklch(0.93 0.007 169.2);
  --popover: oklch(0.264 0.004 169.2);
  --popover-foreground: oklch(0.93 0.007 169.2);
  --primary: oklch(0.531 0.111 165.2);
  --primary-foreground: oklch(0.985 0.004 165.2);
  --secondary: oklch(0.262 0.013 169.2);
  --secondary-foreground: oklch(0.93 0.007 169.2);
  --muted: oklch(0.252 0.008 169.2);
  --muted-foreground: oklch(0.72 0.008 169.2);
  --accent: oklch(0.268 0.025 189.2);
  --accent-foreground: oklch(0.93 0.007 169.2);
  --destructive: oklch(0.7 0.192 31);
  --border: oklch(0.344 0.009 169.2);
  --input: oklch(0.389 0.01 169.2);
  --ring: oklch(0.521 0.109 165.2);
  --chart-1: oklch(0.62 0.128 166.7);
  --chart-2: oklch(0.8 0.136 197);
  --chart-3: oklch(0.54 0.14 137.2);
  --chart-4: oklch(0.7 0.137 228);
  --chart-5: oklch(0.86 0.14 110.3);
  --sidebar: oklch(0.238 0.006 169.2);
  --sidebar-foreground: oklch(0.93 0.007 169.2);
  --sidebar-primary: oklch(0.531 0.111 165.2);
  --sidebar-primary-foreground: oklch(0.985 0.004 165.2);
  --sidebar-accent: oklch(0.268 0.025 189.2);
  --sidebar-accent-foreground: oklch(0.93 0.007 169.2);
  --sidebar-border: oklch(0.344 0.009 169.2);
  --sidebar-ring: oklch(0.521 0.109 165.2);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 1px 0px 0px oklch(0 0 0 / 18%);
  --shadow-sm: 0px 1px 2px 0px oklch(0 0 0 / 18%);
  --shadow-md: 0px 2px 4px 0px oklch(0 0 0 / 24%);
  --shadow-lg: 0px 4px 8px 0px oklch(0 0 0 / 30%);
  --shadow-xl: 0px 8px 16px 0px oklch(0 0 0 / 36%);
}

@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
/* Beryl Outline (basic-fog) */
@import "tailwindcss";

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

:root {
  --radius: 0rem;
  --spacing: 0.275rem;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.966 0.004 165.5);
  --foreground: oklch(0.28 0.007 165.5);
  --card: oklch(0.98 0.004 165.5);
  --card-foreground: oklch(0.28 0.007 165.5);
  --popover: oklch(0.98 0.004 165.5);
  --popover-foreground: oklch(0.28 0.007 165.5);
  --primary: oklch(0.609 0.128 165.2);
  --primary-foreground: oklch(0.18 0.02 165.2);
  --secondary: oklch(0.931 0.011 165.5);
  --secondary-foreground: oklch(0.28 0.007 165.5);
  --muted: oklch(0.939 0.006 165.5);
  --muted-foreground: oklch(0.5 0.008 165.5);
  --accent: oklch(0.927 0.025 185.5);
  --accent-foreground: oklch(0.28 0.007 165.5);
  --destructive: oklch(0.56 0.21 27.7);
  --border: oklch(0.87 0.007 165.5);
  --input: oklch(0.836 0.008 165.5);
  --ring: oklch(0.619 0.13 165.2);
  --chart-1: oklch(0.54 0.113 165.3);
  --chart-2: oklch(0.72 0.124 190.5);
  --chart-3: oklch(0.46 0.132 133.9);
  --chart-4: oklch(0.62 0.121 228.3);
  --chart-5: oklch(0.78 0.14 102.4);
  --sidebar: oklch(0.95 0.005 165.5);
  --sidebar-foreground: oklch(0.28 0.007 165.5);
  --sidebar-primary: oklch(0.609 0.128 165.2);
  --sidebar-primary-foreground: oklch(0.18 0.02 165.2);
  --sidebar-accent: oklch(0.927 0.025 185.5);
  --sidebar-accent-foreground: oklch(0.28 0.007 165.5);
  --sidebar-border: oklch(0.87 0.007 165.5);
  --sidebar-ring: oklch(0.619 0.13 165.2);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 1px 0px 0px oklch(0.25 0.03 165.2 / 6%);
  --shadow-sm: 0px 1px 2px 0px oklch(0.25 0.03 165.2 / 6%);
  --shadow-md: 0px 2px 4px 0px oklch(0.25 0.03 165.2 / 8%);
  --shadow-lg: 0px 4px 8px 0px oklch(0.25 0.03 165.2 / 10%);
  --shadow-xl: 0px 8px 16px 0px oklch(0.25 0.03 165.2 / 12%);
}

.dark {
  --background: oklch(0.216 0.006 169.2);
  --foreground: oklch(0.93 0.007 169.2);
  --card: oklch(0.248 0.004 169.2);
  --card-foreground: oklch(0.93 0.007 169.2);
  --popover: oklch(0.264 0.004 169.2);
  --popover-foreground: oklch(0.93 0.007 169.2);
  --primary: oklch(0.531 0.111 165.2);
  --primary-foreground: oklch(0.985 0.004 165.2);
  --secondary: oklch(0.262 0.013 169.2);
  --secondary-foreground: oklch(0.93 0.007 169.2);
  --muted: oklch(0.252 0.008 169.2);
  --muted-foreground: oklch(0.72 0.008 169.2);
  --accent: oklch(0.268 0.025 189.2);
  --accent-foreground: oklch(0.93 0.007 169.2);
  --destructive: oklch(0.7 0.192 31);
  --border: oklch(0.344 0.009 169.2);
  --input: oklch(0.389 0.01 169.2);
  --ring: oklch(0.521 0.109 165.2);
  --chart-1: oklch(0.62 0.128 166.7);
  --chart-2: oklch(0.8 0.136 197);
  --chart-3: oklch(0.54 0.14 137.2);
  --chart-4: oklch(0.7 0.137 228);
  --chart-5: oklch(0.86 0.14 110.3);
  --sidebar: oklch(0.238 0.006 169.2);
  --sidebar-foreground: oklch(0.93 0.007 169.2);
  --sidebar-primary: oklch(0.531 0.111 165.2);
  --sidebar-primary-foreground: oklch(0.985 0.004 165.2);
  --sidebar-accent: oklch(0.268 0.025 189.2);
  --sidebar-accent-foreground: oklch(0.93 0.007 169.2);
  --sidebar-border: oklch(0.344 0.009 169.2);
  --sidebar-ring: oklch(0.521 0.109 165.2);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 1px 0px 0px oklch(0 0 0 / 18%);
  --shadow-sm: 0px 1px 2px 0px oklch(0 0 0 / 18%);
  --shadow-md: 0px 2px 4px 0px oklch(0 0 0 / 24%);
  --shadow-lg: 0px 4px 8px 0px oklch(0 0 0 / 30%);
  --shadow-xl: 0px 8px 16px 0px oklch(0 0 0 / 36%);
}

@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.2:1 / 4.5:1Pass
Text on cards13.76:1 / 4.5:1Pass
Popover text13.76:1 / 4.5:1Pass
Muted text on muted5.01:1 / 4.5:1Pass
Muted text on background5.42:1 / 4.5:1Pass
Primary button text5.24:1 / 4.5:1Pass
Secondary button text11.93:1 / 4.5:1Pass
Accent label11.84:1 / 4.5:1Pass
Sidebar text12.6:1 / 4.5:1Pass
Sidebar active item5.24:1 / 4.5:1Pass
Sidebar hover item11.84:1 / 4.5:1Pass
Primary on background3.24:1 / 3:1Pass
Focus ring on background3.11:1 / 3:1Pass
Destructive on background4.7:1 / 4.5:1Pass
Destructive on cards4.89:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background14.23:1 / 4.5:1Pass
Text on cards13.11:1 / 4.5:1Pass
Popover text12.5:1 / 4.5:1Pass
Muted text on muted6.42:1 / 4.5:1Pass
Muted text on background7.06:1 / 4.5:1Pass
Primary button text4.76:1 / 4.5:1Pass
Secondary button text12.54:1 / 4.5:1Pass
Accent label12.25:1 / 4.5:1Pass
Sidebar text13.47:1 / 4.5:1Pass
Sidebar active item4.76:1 / 4.5:1Pass
Sidebar hover item12.25:1 / 4.5:1Pass
Primary on background3.52:1 / 3:1Pass
Focus ring on background3.37:1 / 3:1Pass
Destructive on background6.01:1 / 4.5:1Pass
Destructive on cards5.54:1 / 4.5:1Pass

Similar themes

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