Skin / Theme pack
Rig
Brutalist skin with coral accents, squared corners, and dense typography.
One command installs the pack's theme.css, skin.css and skin.config.tsx over the refined library — tokens, skin.css and slot classes together. Reinstalling refined resets the theme and skin targets back to the baseline look.
npx shadcn@latest add http://127.0.0.1:3000/r/rig/skin.jsonPack source
The 3 files this pack ships, read straight from the registry. Each is yours to own and edit after install.
theme.css — token block scoped to [data-skin]; a theme skin's entire brand
src/registry/skin-packs/rig/theme.css
/* * Rig skin: brutalist brand (coral accent, squared corners) over refined baseline. * Additive only — re-values raw tokens, never @theme inline bindings (owned by refined-ui-theme.css). * Scoped [data-skin="rig"] so it co-compiles with baseline; consumer opts in via <html data-skin="rig">. */[data-skin="rig"] { --font-sans: "Helvetica Neue", "Arial Nova", Arial, "Segoe UI", ui-sans-serif, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* THE one radius knob: 0 squares every control + surface (the chamfer is added in skin.css). */ --radius: 0px; --corner-shape: round; --padding-x: 18px; --padding-y: 11px; --control-h: 40px; /* Flat + matte: brutalist controls carry their weight with fill + chamfer, not elevation. */ --shadow-size: 0; --ring-opacity: 1; --popover-opacity: 1; --backdrop-blur-popover: 0px; --overlay-opacity: 0.6; --backdrop-blur-overlay: 0px; --duration-base: 130ms; --duration-fast: 85ms; --duration-slow: 210ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);}:root:not(.dark)[data-skin="rig"],:where(:not(.dark)) [data-skin="rig"] { /* Coral = ACCENT not page bg; surfaces warm off-white (inverse of dark band's near-black stack). * canvas = paper; card/background/popover = near-white surfaces above it. * primary same coral as dark; near-black ink ~5.9:1 contrast (better than cream). */ --primary: oklch(0.6352 0.1892 32.312); --primary-foreground: oklch(0.1942 0.0103 55.701); --foreground: oklch(0.2168 0.0113 55.716); --secondary-foreground: oklch(0.2168 0.0113 55.716); --accent-foreground: oklch(0.2168 0.0113 55.716); --canvas: oklch(0.9407 0.0084 63.977); --background: oklch(0.9789 0.0041 74.929); --card: oklch(0.9933 0.0016 81.514); --card-foreground: oklch(0.2168 0.0113 55.716); --popover: oklch(0.9933 0.0016 81.514); --popover-foreground: oklch(0.2168 0.0113 55.716);}.dark[data-skin="rig"],:where(.dark) [data-skin="rig"] { --primary: oklch(0.6481 0.1833 32.21); --primary-foreground: oklch(0.1822 0.0073 55.881); --foreground: oklch(0.9313 0.0143 81.504); --secondary-foreground: oklch(0.9313 0.0143 81.504); --accent-foreground: oklch(0.9313 0.0143 81.504); --canvas: oklch(0.1576 0.0041 48.447); --background: oklch(0.1812 0.0051 48.425); --card: oklch(0.204 0.0058 48.423); --card-foreground: oklch(0.9313 0.0143 81.504); --popover: oklch(0.204 0.0058 48.423); --popover-foreground: oklch(0.9313 0.0143 81.504);}