Bundled themes

yarcl ships with nine alternative themes alongside its default design system. They change color, shape, type, density, depth and component defaults. Every theme includes light and dark modes and keeps the same public token keys, so you can switch themes without rewriting your components.

Theme	Import	Color	Shape and type	Density and depth
yarcl	@yarcl/react/defaults	blue	6px corners, system sans	40px controls, light shadows
Brutalist	brutalist	red on black and white	square corners, 2px borders, monospace	hard offset shadows, dashed focus ring
Bloom	bloom	violet on lavender	pill controls, round cards, rounded sans	large 44px controls, airy spacing, soft tinted shadows
Compact	compact	teal on cool gray	2px corners, 13px sans	28px controls, tight spacing, compact tables, nearly flat
Editorial	editorial	terracotta on cream	square corners, light grotesque sans	generous spacing, flat cards, double focus ring
Cyberpunk	cyberpunk	neon pink, cyan and lime on violet	monospace text, sharp controls, luminous panel edges	42px controls, glowing shadows
Vermeer	vermeer	rich blue and ochre on parchment and olive	serif text throughout, rounded controls and cards	46px controls, comfortable tables, warm layered depth
Art Deco	artDeco	gold on pearl and black	geometric letterspaced type, square controls, double frames	44px controls, generous spacing, concentric panel outlines
Circuit	circuit	cyan on ice and navy	monospace labels, crisp controls, subtly rounded panels	42px controls, comfortable tables, layered surfaces
Studio	studio	cobalt with citrus accents	heavy display type, rounded rectangular controls, sculpted cards	48px controls, generous table rows, colored depth

See them all in the theme playground.

Cyberpunk

Cyberpunk suits gaming, music, creative technology and developer tools with a stronger visual identity. Pink actions, cyan focus rings and lime success accents stand out against pale violet in light mode and deep purple in dark mode. Monospace text, sharp controls and luminous panel outlines carry the neon treatment through the whole interface. Text contrast stays readable in both schemes.

Preview Cyberpunk or see its dark mode.

Vermeer

Vermeer suits galleries, cultural institutions, books, learning and hospitality. Rich blue actions and ochre accents sit on parchment surfaces in light mode and olive shadows in dark mode. Georgia carries through headings, body copy, labels, inputs and tables. Rounded panels, generous control sizes and warm shadows give it a softer, painterly character than Editorial’s angular sans serif layout.

Preview Vermeer or see its dark mode.

Art Deco

Art Deco suits hotels, events, premium services and architectural portfolios. Gold accents, pearl surfaces and black backgrounds pair with geometric type and widely spaced labels. Cards, dialogs, drawers and table headers use double borders; card shadows add concentric outlines. Square controls and precise framing keep the decoration architectural, with light and dark modes using the same vocabulary.

Preview Art Deco or see its dark mode.

Circuit

Circuit suits developer tools, monitoring, analytics and infrastructure dashboards. Cyan actions stand out against icy light surfaces or deep navy panels. Monospace labels, table headers and tab triggers add a technical rhythm without making all body text monospace. Controls and tables retain comfortable spacing, while crisp corners and subtle panel outlines separate layers.

Preview Circuit or see its dark mode.

Studio

Studio suits creative tools, education, collaboration and consumer apps. Cobalt anchors the interface, while citrus success accents bring energy to badges and alerts. Heavy headings, large controls, rounded rectangular buttons and broadly rounded cards establish a strong hierarchy. Light mode uses clean pale surfaces; dark mode keeps the same hierarchy on deep indigo surfaces.

Preview Studio or see its dark mode.

Using one

As is:

src/yarcl.config.ts

export { bloom as default } from '@yarcl/react/themes';

As a starting point:

src/yarcl.config.ts

import { defineConfig } from '@yarcl/react/define';
import { brutalist } from '@yarcl/react/themes';

export default defineConfig({
  ...brutalist,
  colors: { ...brutalist.colors, primary: { light: '#2f6bff', dark: '#7aa2ff' } },
});

What they share

Every bundled theme satisfies ThemeContract: the same keys as the library defaults. That makes them interchangeable, and means an app written against the defaults works with any of them.

Group	Keys
colors	primary, neutral, success, warning, danger, info
sizes	xs, sm, md, lg, xl
radii	square, sm, md, lg, xl, rounded
variants	solid, soft, outline, ghost
spacing	xs, sm, md, lg, xl
shadows	sm, md, lg
density	compact, comfortable
modalSizes	sm, md, lg, xl, full
typography.fonts	body, heading, mono
typography.styles	display, heading, subheading, body, caption, code, label

Fonts

Themes name their font families but don’t ship font files. Without them, each stack falls back to a similar system font. Cyberpunk uses a system monospace stack; Vermeer uses Georgia for headings and body text; Art Deco prefers Futura, Century Gothic or Avenir Next before falling back to system sans. Circuit uses system sans and monospace stacks; Studio prefers Avenir Next or Trebuchet MS. All work without a font download.

Every theme maps the stable body, heading and mono roles to its families. Vermeer adds a serif family while retaining the shared sans and mono keys. To load a family, add typography.fontFaces with your own files, or load it from a font service in your HTML.