Themes

Six themes, one attribute

Each theme is a complete design system: semantic tokens, typography, radii, shadows, and (for the five opinionated ones) a full 22-hue × 11-shade palette. Activate one with a single attribute:

<html data-theme="vintage">

Tip: the floating switcher at the bottom-right of the site swaps themes live and persists your choice in localStorage. The default theme uses the Tailwind stock palette and follows your OS light/dark preference; the other five ship fixed palettes and fonts loaded on demand from Google Fonts.

Default

data-theme="default"

neutral, flexible, stock

Tailwind stock. Paleta estándar de 22 hues + neutrales. Light/dark automático según el sistema operativo (prefers-color-scheme). Base neutra sin opinión.

Default previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Default";

Display

Aa — Lorem ipsum

system-ui, -apple-system, 'Segoe UI', sans-serif

Body

Aa — Lorem ipsum

system-ui, -apple-system, 'Segoe UI', sans-serif

Mono

Aa — Lorem ipsum

ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace

Semantic tokens (light)

bg / primary

#ffffff

bg / secondary

#f5f5f5

bg / tertiary

#e5e5e5

text / primary

#0a0a0a

text / muted

#737373

border / default

rgba(0,0,0,.1)

accent / default

#171717

accent / foreground

#fafafa

Dark mode (automatic)

bg / primary

#0a0a0a

bg / secondary

#171717

bg / tertiary

#262626

text / primary

#fafafa

text / muted

#a3a3a3

border / default

rgba(255,255,255,.12)

accent / default

#fafafa

accent / foreground

#0a0a0a

Radius

none

full

Shadow

Vintage

data-theme="vintage"

warm, nostalgic, crafted

Paleta nostálgica setentera. Tonos desaturados con tinte sepia, pensada para branding editorial, lifestyle y productos con alma artesanal.

Vintage previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Vintage";

Display

Aa — Lorem ipsum

'Fraunces', Georgia, serif

Body

Aa — Lorem ipsum

'Inter Tight', system-ui, sans-serif

Mono

Aa — Lorem ipsum

'JetBrains Mono', 'Courier New', monospace

Semantic tokens (light)

bg / primary

#fbf8f0

bg / secondary

#f4f1e8

bg / tertiary

#ebe6d7

text / primary

#2a241c

text / muted

#8a7f6f

border / default

rgba(42,36,28,.15)

accent / default

#b8543a

accent / foreground

#fbf8f0

Radius

none

full

Shadow

Color ramps (17 hues)

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Futuristic

data-theme="futuristic"

bold, tech, electric

Cyberpunk neón sobre negros profundos con tinte azul-violeta. Para productos tech, plataformas AI, gaming y landing pages disruptivas.

Futuristic previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Futuristic";

Display

Aa — Lorem ipsum

'Chakra Petch', 'Arial Narrow', sans-serif

Body

Aa — Lorem ipsum

'Space Grotesk', system-ui, sans-serif

Mono

Aa — Lorem ipsum

'Space Mono', 'Courier New', monospace

Semantic tokens (light)

bg / primary

#0a0c17

bg / secondary

#161b2d

bg / tertiary

#1b2139

text / primary

#eef1f7

text / muted

#6d7ba5

border / default

rgba(138,127,255,.2)

accent / default

#00d9f5

accent / foreground

#0a0c17

Radius

none

full

Shadow

Color ramps (17 hues)

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Electric

data-theme="electric"

vibrant, bold, modern

Dopamina moderna. Colores vibrantes y saturados sobre blancos limpios — inspirado en Linear, Figma y Arc. Ideal para SaaS, fintech y productos que necesitan energía.

Electric previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Electric";

Display

Aa — Lorem ipsum

'Bricolage Grotesque', system-ui, sans-serif

Body

Aa — Lorem ipsum

'DM Sans', system-ui, sans-serif

Mono

Aa — Lorem ipsum

'JetBrains Mono', 'Courier New', monospace

Semantic tokens (light)

bg / primary

#ffffff

bg / secondary

#f7f7f7

bg / tertiary

#ebebeb

text / primary

#111111

text / muted

#7d7d7d

border / default

rgba(0,0,0,.1)

accent / default

#8200b5

accent / foreground

#ffffff

Radius

none

full

Shadow

Color ramps (17 hues)

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Oceanic

data-theme="oceanic"

calm, refined, fresh

Paleta de aguas tranquilas. Tonos azul-verdes desaturados, calmados. Ideal para wellness, climate-tech, meditación y productos financieros conscientes.

Oceanic previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Oceanic";

Display

Aa — Lorem ipsum

'Cormorant Garamond', Georgia, serif

Body

Aa — Lorem ipsum

'Plus Jakarta Sans', system-ui, sans-serif

Mono

Aa — Lorem ipsum

'IBM Plex Mono', 'Courier New', monospace

Semantic tokens (light)

bg / primary

#f5faf9

bg / secondary

#e5f4f2

bg / tertiary

#c0e4df

text / primary

#0a2e2d

text / muted

#6a7f85

border / default

rgba(22,108,102,.15)

accent / default

#166c66

accent / foreground

#f5faf9

Radius

none

full

Shadow

Color ramps (17 hues)

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Botanical

data-theme="botanical"

organic, grounded, earthy

Tierra primero. Verdes salvia y tonos orgánicos terrosos. Perfecto para marcas sostenibles, productos outdoor, food & wellness y plataformas eco-conscientes.

Botanical previewSample surface + typography

The quick brown fox jumps over the lazy dog.

const greeting = "Hola Botanical";

Display

Aa — Lorem ipsum

'EB Garamond', Georgia, serif

Body

Aa — Lorem ipsum

'Nunito', system-ui, sans-serif

Mono

Aa — Lorem ipsum

'Courier Prime', 'Courier New', monospace

Semantic tokens (light)

bg / primary

#f6f4ee

bg / secondary

#edf1e9

bg / tertiary

#d9e1cf

text / primary

#212b1c

text / muted

#72695c

border / default

rgba(76,97,60,.15)

accent / default

#4c613c

accent / foreground

#f6f4ee

Radius

none

full

Shadow

Color ramps (17 hues)

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Using themes in your app

Import the stylesheet once at your CSS entry and set data-theme on <html>. All semantic tokens (--color-background, --color-foreground, --color-accent, …) and utilities (bg-*, text-*) resolve to the active theme.

/* app/globals.css */
@import "tailwindcss";
@import "kora-ui/styles/themes.css";

<html data-theme="oceanic">
  <body>...</body>
</html>