Skip to contentVibraUI
Palette

Terracotta theme

Terracotta on parchment: a warm cream ground, a clay accent, and charts in clay and violet.

background
card
primary
chart-2
success
danger

Install

The file lands as app/vibra-terracotta.css. Import it after your globals and set data-preset="terracotta" on <html>, or on any wrapper.

npx shadcn@latest add @vibra/theme-terracotta

Needs the @vibra registry in your components.json — set it up once.

The stylesheet

app/vibra-terracotta.css
/* Terracotta — a warm terracotta on a parchment ground, set beside a cool blue focus ring.
 *
 * After tweakcn's palette (https://www.shadcnblocks.com/theme/claude), mapped onto every token
 * vibra.css defines and held to Vibra's contrast floors: where a value moved,
 * it moved the least it could — a fill that was too light to read as a word
 * is the same hue, deeper. The typefaces the original names are not carried;
 * a preset is colour, radius and elevation, and the face is the page's own.
 *
 * Generated by scripts/build-presets.ts. Edit scripts/presets/sources, not this file. */
[data-preset="terracotta"] {
  --radius: 0.5rem;

  /* Planes. */
  --background: oklch(0.98 0.01 95.1);
  --surface: oklch(0.985 0.01 95.1);
  --card: oklch(0.99 0 0);
  --popover: oklch(1 0 0);
  --muted: oklch(0.93 0.02 90.2);
  --secondary: oklch(0.92 0.01 93);
  --accent: oklch(0.94 0.01 95.1);

  /* Ink. --faint-foreground is for eyebrows, meta and axis titles at 11px/600 and up — never body copy. */
  --foreground: oklch(0.34 0.03 95.7);
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --muted-foreground: oklch(0.48 0.02 95.1);
  --faint-foreground: oklch(0.46 0.02 95.1);
  --secondary-foreground: var(--foreground);
  --accent-foreground: var(--foreground);

  /* The accent, and the aliases that carry it. */
  --brand: oklch(0.51 0.14 39);
  --brand-foreground: oklch(1 0 0);
  --brand-muted: oklch(0.93 0.045 39);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --ring: var(--brand);

  /* Lines. --input is the field boundary, so it carries 3:1 against the page and a card. */
  --border: oklch(0.88 0.01 97.4);
  --rule: oklch(0.765 0.01 97.4);
  --input: oklch(0.65 0.02 98.3);
  --chart-grid: oklch(0.88 0.01 97.4);

  /* Semantic tones on opaque tints. */
  --success: oklch(0.5 0.14 150);
  --success-foreground: oklch(0.99 0.003 150);
  --success-muted: oklch(0.95 0.04 150);
  --warning: oklch(0.5 0.11 75);
  --warning-foreground: oklch(0.99 0.003 75);
  --warning-muted: oklch(0.95 0.04 75);
  --danger: oklch(0.5 0.2 25);
  --danger-foreground: oklch(0.99 0.003 25);
  --danger-muted: oklch(0.95 0.04 25);
  --info: oklch(0.5 0.14 250);
  --info-foreground: oklch(0.99 0.003 250);
  --info-muted: oklch(0.95 0.04 250);
  --destructive: var(--danger);

  /* Chart palette: the accent first when it is a colour, then the source's hues, then three of Vibra's own. */
  --chart-1: var(--brand);
  --chart-2: oklch(0.66 0.16 290.4);
  --chart-3: oklch(0.65 0.03 93.1);
  --chart-4: oklch(0.65 0.04 298.2);
  --chart-5: oklch(0.56 0.13 42.1);
  --chart-6: oklch(0.55 0.12 159);
  --chart-7: oklch(0.56 0.14 279);
  --chart-8: oklch(0.5 0.02 95.1);
  --chart-positive: var(--success);
  --chart-negative: var(--danger);
  --chart-neutral: var(--muted-foreground);
  --chart-axis: var(--muted-foreground);

  /* The sidebar sits one plane below the content it frames. */
  --sidebar: oklch(0.97 0.01 98.9);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: oklch(0.92 0.01 93);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.94 0 0);
  --sidebar-ring: var(--brand);

  /* Elevation. */
  --shadow-sheet: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-float: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-modal: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --overlay: oklch(0 0 0 / 40%);
}

.dark [data-preset="terracotta"],
[data-preset="terracotta"].dark,
[data-preset="terracotta"] .dark {
  /* Planes. */
  --background: oklch(0.27 0 106.6);
  --surface: oklch(0.295 0 106.6);
  --card: oklch(0.27 0 106.6);
  --popover: oklch(0.31 0 106.6);
  --muted: oklch(0.22 0 106.7);
  --secondary: oklch(0.405 0 106.6);
  --accent: oklch(0.405 0 106.6);

  /* Ink. --faint-foreground is for eyebrows, meta and axis titles at 11px/600 and up — never body copy. */
  --foreground: oklch(0.81 0.01 93);
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --muted-foreground: oklch(0.79 0.02 99.1);
  --faint-foreground: oklch(0.79 0.02 99.1);
  --secondary-foreground: var(--foreground);
  --accent-foreground: var(--foreground);

  /* The accent, and the aliases that carry it. */
  --brand: oklch(0.8 0.115 38.8);
  --brand-foreground: oklch(0.16 0 0);
  --brand-muted: oklch(0.28 0.06 38.8);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --ring: var(--brand);

  /* Lines. --input is the field boundary, so it carries 3:1 against the page and a card. */
  --border: oklch(0.36 0.01 106.9);
  --rule: oklch(0.455 0.01 106.9);
  --input: oklch(0.55 0.01 100.2);
  --chart-grid: oklch(0.38 0.01 106.9);

  /* Semantic tones on opaque tints. */
  --success: oklch(0.8 0.14 150);
  --success-foreground: oklch(0.16 0.03 150);
  --success-muted: oklch(0.3 0.04 150);
  --warning: oklch(0.8 0.11 85);
  --warning-foreground: oklch(0.16 0.03 85);
  --warning-muted: oklch(0.3 0.04 85);
  --danger: oklch(0.8 0.14 25.3);
  --danger-foreground: oklch(0.16 0.03 25.3);
  --danger-muted: oklch(0.3 0.04 25.3);
  --info: oklch(0.8 0.14 250);
  --info-foreground: oklch(0.16 0.03 250);
  --info-muted: oklch(0.3 0.04 250);
  --destructive: var(--danger);

  /* Chart palette: the accent first when it is a colour, then the source's hues, then three of Vibra's own. */
  --chart-1: var(--brand);
  --chart-2: oklch(0.69 0.16 290.4);
  --chart-3: oklch(0.55 0.01 95.4);
  --chart-4: oklch(0.55 0.05 289.3);
  --chart-5: oklch(0.56 0.13 42.1);
  --chart-6: oklch(0.76 0.11 158.8);
  --chart-7: oklch(0.74 0.12 278.8);
  --chart-8: oklch(0.72 0.02 106.6);
  --chart-positive: var(--success);
  --chart-negative: var(--danger);
  --chart-neutral: var(--muted-foreground);
  --chart-axis: var(--muted-foreground);

  /* The sidebar sits one plane below the content it frames. */
  --sidebar: oklch(0.24 0 67.7);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: oklch(0.365 0 106.6);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--brand);

  /* Elevation. */
  --shadow-sheet: inset 0 1px 0 oklch(1 0 0 / 5%);
  --shadow-float: 0 12px 32px -8px oklch(0 0 0 / 60%), inset 0 1px 0 oklch(1 0 0 / 6%);
  --shadow-modal: 0 24px 64px -12px oklch(0 0 0 / 70%);
  --overlay: oklch(0 0 0 / 60%);
}