Founding price: $35, then $99

Get Pro
Get Pro
All themes

Beacon Ember themeFree

Beacon Ember: a vivid analogous palette around hue 101, flat surfaces, sharp corners, compact density, soft contrast. warm. A yellow theme. Radius 0.25rem.

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/beacon-ember.json
Or paste the CSS into globals.css
:root {
  --radius: 0.25rem;
  --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.986 0.017 96.7);
  --foreground: oklch(0.28 0.027 96.7);
  --card: oklch(0.998 0.004 96.7);
  --card-foreground: oklch(0.28 0.027 96.7);
  --popover: oklch(0.998 0.004 96.7);
  --popover-foreground: oklch(0.28 0.027 96.7);
  --primary: oklch(0.638 0.133 100.9);
  --primary-foreground: oklch(0.18 0.02 100.9);
  --secondary: oklch(0.952 0.041 96.7);
  --secondary-foreground: oklch(0.28 0.027 96.7);
  --muted: oklch(0.959 0.024 96.7);
  --muted-foreground: oklch(0.5 0.031 96.7);
  --accent: oklch(0.947 0.027 8.6);
  --accent-foreground: oklch(0.28 0.027 96.7);
  --destructive: oklch(0.575 0.21 24.9);
  --border: oklch(0.932 0.027 96.7);
  --input: oklch(0.913 0.031 96.7);
  --ring: oklch(0.648 0.135 100.9);
  --chart-1: oklch(0.54 0.114 104);
  --chart-2: oklch(0.72 0.19 145.3);
  --chart-3: oklch(0.46 0.105 63.4);
  --chart-4: oklch(0.62 0.106 195.7);
  --chart-5: oklch(0.78 0.133 9.2);
  --sidebar: oklch(0.97 0.019 96.7);
  --sidebar-foreground: oklch(0.28 0.027 96.7);
  --sidebar-primary: oklch(0.638 0.133 100.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 100.9);
  --sidebar-accent: oklch(0.947 0.027 8.6);
  --sidebar-accent-foreground: oklch(0.28 0.027 96.7);
  --sidebar-border: oklch(0.932 0.027 96.7);
  --sidebar-ring: oklch(0.648 0.135 100.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.216 0.021 105.9);
  --foreground: oklch(0.93 0.027 105.9);
  --card: oklch(0.248 0.017 105.9);
  --card-foreground: oklch(0.93 0.027 105.9);
  --popover: oklch(0.264 0.017 105.9);
  --popover-foreground: oklch(0.93 0.027 105.9);
  --primary: oklch(0.544 0.113 100.9);
  --primary-foreground: oklch(0.985 0.004 100.9);
  --secondary: oklch(0.262 0.051 105.9);
  --secondary-foreground: oklch(0.93 0.027 105.9);
  --muted: oklch(0.252 0.03 105.9);
  --muted-foreground: oklch(0.72 0.031 105.9);
  --accent: oklch(0.268 0.055 17.8);
  --accent-foreground: oklch(0.93 0.027 105.9);
  --destructive: oklch(0.7 0.191 25.8);
  --border: oklch(0.288 0.034 105.9);
  --input: oklch(0.313 0.038 105.9);
  --ring: oklch(0.534 0.111 100.9);
  --chart-1: oklch(0.62 0.131 104.8);
  --chart-2: oklch(0.8 0.19 154.3);
  --chart-3: oklch(0.54 0.134 54.8);
  --chart-4: oklch(0.7 0.12 194.2);
  --chart-5: oklch(0.86 0.076 17.5);
  --sidebar: oklch(0.238 0.023 105.9);
  --sidebar-foreground: oklch(0.93 0.027 105.9);
  --sidebar-primary: oklch(0.544 0.113 100.9);
  --sidebar-primary-foreground: oklch(0.985 0.004 100.9);
  --sidebar-accent: oklch(0.268 0.055 17.8);
  --sidebar-accent-foreground: oklch(0.93 0.027 105.9);
  --sidebar-border: oklch(0.288 0.034 105.9);
  --sidebar-ring: oklch(0.534 0.111 100.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
/* Beacon Ember (beacon-ember) */
@import "tailwindcss";

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

:root {
  --radius: 0.25rem;
  --spacing: 0.225rem;
  --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.986 0.017 96.7);
  --foreground: oklch(0.28 0.027 96.7);
  --card: oklch(0.998 0.004 96.7);
  --card-foreground: oklch(0.28 0.027 96.7);
  --popover: oklch(0.998 0.004 96.7);
  --popover-foreground: oklch(0.28 0.027 96.7);
  --primary: oklch(0.638 0.133 100.9);
  --primary-foreground: oklch(0.18 0.02 100.9);
  --secondary: oklch(0.952 0.041 96.7);
  --secondary-foreground: oklch(0.28 0.027 96.7);
  --muted: oklch(0.959 0.024 96.7);
  --muted-foreground: oklch(0.5 0.031 96.7);
  --accent: oklch(0.947 0.027 8.6);
  --accent-foreground: oklch(0.28 0.027 96.7);
  --destructive: oklch(0.575 0.21 24.9);
  --border: oklch(0.932 0.027 96.7);
  --input: oklch(0.913 0.031 96.7);
  --ring: oklch(0.648 0.135 100.9);
  --chart-1: oklch(0.54 0.114 104);
  --chart-2: oklch(0.72 0.19 145.3);
  --chart-3: oklch(0.46 0.105 63.4);
  --chart-4: oklch(0.62 0.106 195.7);
  --chart-5: oklch(0.78 0.133 9.2);
  --sidebar: oklch(0.97 0.019 96.7);
  --sidebar-foreground: oklch(0.28 0.027 96.7);
  --sidebar-primary: oklch(0.638 0.133 100.9);
  --sidebar-primary-foreground: oklch(0.18 0.02 100.9);
  --sidebar-accent: oklch(0.947 0.027 8.6);
  --sidebar-accent-foreground: oklch(0.28 0.027 96.7);
  --sidebar-border: oklch(0.932 0.027 96.7);
  --sidebar-ring: oklch(0.648 0.135 100.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.216 0.021 105.9);
  --foreground: oklch(0.93 0.027 105.9);
  --card: oklch(0.248 0.017 105.9);
  --card-foreground: oklch(0.93 0.027 105.9);
  --popover: oklch(0.264 0.017 105.9);
  --popover-foreground: oklch(0.93 0.027 105.9);
  --primary: oklch(0.544 0.113 100.9);
  --primary-foreground: oklch(0.985 0.004 100.9);
  --secondary: oklch(0.262 0.051 105.9);
  --secondary-foreground: oklch(0.93 0.027 105.9);
  --muted: oklch(0.252 0.03 105.9);
  --muted-foreground: oklch(0.72 0.031 105.9);
  --accent: oklch(0.268 0.055 17.8);
  --accent-foreground: oklch(0.93 0.027 105.9);
  --destructive: oklch(0.7 0.191 25.8);
  --border: oklch(0.288 0.034 105.9);
  --input: oklch(0.313 0.038 105.9);
  --ring: oklch(0.534 0.111 100.9);
  --chart-1: oklch(0.62 0.131 104.8);
  --chart-2: oklch(0.8 0.19 154.3);
  --chart-3: oklch(0.54 0.134 54.8);
  --chart-4: oklch(0.7 0.12 194.2);
  --chart-5: oklch(0.86 0.076 17.5);
  --sidebar: oklch(0.238 0.023 105.9);
  --sidebar-foreground: oklch(0.93 0.027 105.9);
  --sidebar-primary: oklch(0.544 0.113 100.9);
  --sidebar-primary-foreground: oklch(0.985 0.004 100.9);
  --sidebar-accent: oklch(0.268 0.055 17.8);
  --sidebar-accent-foreground: oklch(0.93 0.027 105.9);
  --sidebar-border: oklch(0.288 0.034 105.9);
  --sidebar-ring: oklch(0.534 0.111 100.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);
  --font-mono: var(--font-mono);
  --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 background14.01:1 / 4.5:1Pass
Text on cards14.49:1 / 4.5:1Pass
Popover text14.49:1 / 4.5:1Pass
Muted text on muted5.32:1 / 4.5:1Pass
Muted text on background5.75:1 / 4.5:1Pass
Primary button text5.59:1 / 4.5:1Pass
Secondary button text12.7:1 / 4.5:1Pass
Accent label12.35:1 / 4.5:1Pass
Sidebar text13.38:1 / 4.5:1Pass
Sidebar active item5.59:1 / 4.5:1Pass
Sidebar hover item12.35:1 / 4.5:1Pass
Primary on background3.23:1 / 3:1Pass
Focus ring on background3.11:1 / 3:1Pass
Destructive on background4.68:1 / 4.5:1Pass
Destructive on cards4.84:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background14.25:1 / 4.5:1Pass
Text on cards13.12:1 / 4.5:1Pass
Popover text12.51:1 / 4.5:1Pass
Muted text on muted6.42:1 / 4.5:1Pass
Muted text on background7.07:1 / 4.5:1Pass
Primary button text4.73:1 / 4.5:1Pass
Secondary button text12.56:1 / 4.5:1Pass
Accent label12.64:1 / 4.5:1Pass
Sidebar text13.48:1 / 4.5:1Pass
Sidebar active item4.73:1 / 4.5:1Pass
Sidebar hover item12.64:1 / 4.5:1Pass
Primary on background3.53:1 / 3:1Pass
Focus ring on background3.39:1 / 3:1Pass
Destructive on background6:1 / 4.5:1Pass
Destructive on cards5.52:1 / 4.5:1Pass

Similar themes

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