Bet UI Default

Default Bet UI color and typography tokens.

Preview

Color and type tokens in light and dark.

Bet UI Default

light

Colors

Backgroundoklch(1 0 0)

Foregroundoklch(0.145 0 0)

Primaryoklch(0.205 0 0)

Primary fgoklch(0.985 0 0)

Secondaryoklch(0.97 0 0)

Accentoklch(0.97 0 0)

Destructiveoklch(0.577 0.245 27.325)

Mutedoklch(0.97 0 0)

Cardoklch(1 0 0)

Borderoklch(0.922 0 0)

Brand

Brand#0100FF

Brand fg#ffffff

Outcome

Yes#6ae301

Yes fg#101519

No#FF0C01

No fg#ffffff

Charts

Typography

Headingvar(--font-geist-sans, ui-sans-serif), system-ui, sans-serif

Aa Bb Cc 123

Bodyvar(--font-geist-sans, ui-sans-serif), system-ui, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Bet UI Default

dark

Colors

Backgroundoklch(0.145 0 0)

Foregroundoklch(0.985 0 0)

Primaryoklch(0.922 0 0)

Primary fgoklch(0.205 0 0)

Secondaryoklch(0.269 0 0)

Accentoklch(0.269 0 0)

Destructiveoklch(0.704 0.191 22.216)

Mutedoklch(0.269 0 0)

Cardoklch(0.205 0 0)

Borderoklch(1 0 0 / 10%)

Brand

Brand#165bfb

Brand fg#ffffff

Outcome

Yes#6ae301

Yes fg#101519

No#FF0C01

No fg#101519

Charts

Typography

Headingvar(--font-geist-sans, ui-sans-serif), system-ui, sans-serif

Aa Bb Cc 123

Bodyvar(--font-geist-sans, ui-sans-serif), system-ui, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Installation

pnpm dlx shadcn@latest add https://betui.fyi/r/default.json

Tokens

Token	light	dark
--accent	oklch(0.97 0 0)	oklch(0.269 0 0)
--accent-foreground	oklch(0.205 0 0)	oklch(0.985 0 0)
--background	oklch(1 0 0)	oklch(0.145 0 0)
--border	oklch(0.922 0 0)	oklch(1 0 0 / 10%)
--brand	#0100FF	#165bfb
--brand-foreground	#ffffff	#ffffff
--card	oklch(1 0 0)	oklch(0.205 0 0)
--card-foreground	oklch(0.145 0 0)	oklch(0.985 0 0)
--chart-1	oklch(0.646 0.222 41.116)	oklch(0.488 0.243 264.376)
--chart-2	oklch(0.6 0.118 184.704)	oklch(0.696 0.17 162.48)
--chart-3	oklch(0.398 0.07 227.392)	oklch(0.769 0.188 70.08)
--chart-4	oklch(0.828 0.189 84.429)	oklch(0.627 0.265 303.9)
--chart-5	oklch(0.769 0.188 70.08)	oklch(0.645 0.246 16.439)
--destructive	oklch(0.577 0.245 27.325)	oklch(0.704 0.191 22.216)
--destructive-foreground	oklch(0.985 0 0)	oklch(0.985 0 0)
--foreground	oklch(0.145 0 0)	oklch(0.985 0 0)
--input	oklch(0.922 0 0)	oklch(1 0 0 / 15%)
--muted	oklch(0.97 0 0)	oklch(0.269 0 0)
--muted-foreground	oklch(0.556 0 0)	oklch(0.708 0 0)
--no	#FF0C01	#FF0C01
--no-foreground	#ffffff	#101519
--popover	oklch(1 0 0)	oklch(0.205 0 0)
--popover-foreground	oklch(0.145 0 0)	oklch(0.985 0 0)
--primary	oklch(0.205 0 0)	oklch(0.922 0 0)
--primary-foreground	oklch(0.985 0 0)	oklch(0.205 0 0)
--radius	0.625rem	0.625rem
--ring	oklch(0.708 0 0)	oklch(0.556 0 0)
--secondary	oklch(0.97 0 0)	oklch(0.269 0 0)
--secondary-foreground	oklch(0.205 0 0)	oklch(0.985 0 0)
--sidebar	oklch(0.985 0 0)	oklch(0.205 0 0)
--sidebar-accent	oklch(0.97 0 0)	oklch(0.269 0 0)
--sidebar-accent-foreground	oklch(0.205 0 0)	oklch(0.985 0 0)
--sidebar-border	oklch(0.922 0 0)	oklch(1 0 0 / 10%)
--sidebar-foreground	oklch(0.145 0 0)	oklch(0.985 0 0)
--sidebar-primary	oklch(0.205 0 0)	oklch(0.488 0.243 264.376)
--sidebar-primary-foreground	oklch(0.985 0 0)	oklch(0.985 0 0)
--sidebar-ring	oklch(0.708 0 0)	oklch(0.556 0 0)
--surface-edge	rgb(0 0 0 / 5%)	rgb(255 255 255 / 8%)
--surface-shadow	0 2px 3px -2px rgb(0 0 0 / 0.12), 0 8px 14px -8px rgb(0 0 0 / 0.18)	0 2px 3px rgb(0 0 0 / 0.35), 0 6px 14px -4px rgb(0 0 0 / 0.45)
--yes	#6ae301	#6ae301
--yes-foreground	#101519	#101519