Theming

Oxide UI is built on a small set of design decisions you can override freely.

Color system

The palette has three layers:

Token	Default	Role
Background	zinc-950 (#09090b)	Page background, deepest surface
Surface	zinc-900 (#18181b)	Cards, panels, elevated containers
Border	zinc-800 (#27272a)	Dividers, input borders
Text primary	zinc-100 (#f4f4f5)	Headings, labels
Text secondary	zinc-400 (#a1a1aa)	Body text, descriptions
Text muted	zinc-500 (#71717a)	Placeholders, metadata
Accent	#D40C37	Buttons, links, active states

Changing the accent color

Every component uses #D40C37 as an inline arbitrary value. To swap it globally, register a CSS custom property:

/* globals.css */
:root {
  --color-accent: #D40C37;
}

Then use it in Tailwind via bg-[var(--color-accent)]. Or define it as a full palette extension:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        accent: {
          DEFAULT: 'var(--color-accent)',
          hover:   'var(--color-accent-hover)',
          soft:    'var(--color-accent-soft)',
        },
      },
    },
  },
}

:root {
  --color-accent:       #D40C37;
  --color-accent-hover: #e8103f;
  --color-accent-soft:  rgba(212, 12, 55, 0.10);
}

Now bg-accent, text-accent, border-accent, and ring-accent work everywhere.

Adjusting surface depth

If your design uses a lighter dark (like zinc-900 as base instead of zinc-950), shift all surface colors up one step:

Old class	New class
bg-zinc-950 (#09090b)	bg-zinc-900 (#18181b)
bg-zinc-900	bg-zinc-800
border-zinc-800	border-zinc-700

Typography

Components use system font stacks for minimal setup. To match the Oxide UI docs aesthetic, apply Syne for headings globally:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.03em;
}

Focus rings

All interactive components use a crimson focus ring: focus-visible:ring-2 focus-visible:ring-[#D40C37]/50. Update the color and width to match your brand:

<!-- Example: teal accent focus ring -->
class="... focus-visible:ring-2 focus-visible:ring-teal-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"