Bevel

Material themes

Brass, bakelite or anodized aluminium: pick a material, tune its light and shape, and copy the CSS. Every component reads the same few tokens, so one theme changes them all. See Theming for how it works.

Agent shell access
Off, guarded
Deploy to prod
Off, guarded

The agent asks before running shell commands.

This turn

Ready
$0.000so far

Spending caps

OnWorkspace$500 a month
TrippedPer person$50 a month
OffPer case$200
OnOverageOwners only
  • US-EASTV2.15LIVE
  • US-WESTV2.14TESTING
  • EU-WESTV2.14BUILDING
  • AP-SOUTHV2.14QUEUED

0.70Agent

Brass. A ship's instrument. Bronze housings, polished brass, warm lamplight.

Panel
0.33
0.04
62°
Hardware
0.79
0.13
82°
Face
0.94
0.04
85°
Light and shape
0.26
0.36
0.28
1×
1.15×
CSS
/* After: npx shadcn@latest add @bevel/themes */
[data-bevel-theme="brass"] {
  --bevel-theme-panel: oklch(0.33 0.045 62);
  --bevel-theme-hardware: oklch(0.79 0.13 82);
  --bevel-theme-face: oklch(0.94 0.04 85);
  --bevel-highlight: oklch(1 0 0 / 0.26);
  --bevel-shade: oklch(0.1 0.03 62 / 0.36);
  --bevel-cast: oklch(0.27 0.05 62 / 0.28);
  --bevel-radius-scale: 1;
  --bevel-speed: 1.15;
}
.dark [data-bevel-theme="brass"] {
  --bevel-highlight: oklch(1 0 0 / 0.17);
  --bevel-cast: oklch(0 0 0 / 0.55);
}

Then put data-bevel-theme="brass" on <html> or any container. The link in the address bar reproduces this theme.