Skin / Theme pack

Refined

Craft-inspired neutral surfaces, Inter typography, pill controls, and quiet layered shadows.

Preview Refined How skin layers resolve

Source

Explore the files that define this skin. Copy any file to make it your own.

About the skin files

theme.css: token block scoped to [data-skin]; a theme skin's entire brand
skin.css: the pack's own vars + @utility helpers + descendant CSS the cva recipes can't express
skin.config.tsx: per-slot classes, adornments, and the motion flag

How skin layers resolve

src/registry/skin-packs/refined/theme.css

[data-skin="refined"][data-skin] {

--control-fill: var(--card);

  --font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

--font-mono: var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;

--text-caption: 0.75rem;

--text-body-lg: 0.875rem;

--text-heading-4: 0.875rem;

--text-heading-4--line-height: 1.5;

--text-heading-4--font-weight: 500;

--text-heading-3: 0.875rem;

--text-heading-3--line-height: 1.5;

--text-heading-3--font-weight: 500;

--text-heading-2: 1rem;

--text-heading-2--line-height: 1.5;

--text-heading-2--font-weight: 500;

--text-heading-1: 1rem;

--text-heading-1--line-height: 1.5;

--text-heading-1--font-weight: 500;

--text-heading-1--letter-spacing: 0em;

--text-display: 1rem;

--text-display--line-height: 1.5;

--text-display--font-weight: 500;

--text-display--letter-spacing: 0em;

--background: oklch(0.985 0 0);

--foreground: oklch(0.205 0 0);

--card: oklch(1 0 0);

--card-foreground: var(--foreground);

--popover: var(--card);

--popover-foreground: var(--foreground);

--primary: var(--foreground);

--primary-foreground: var(--background);

--secondary: oklch(0.95 0 0);

--secondary-foreground: var(--foreground);

--muted: oklch(0.96 0 0);

--muted-foreground: oklch(0.52 0 0);

--accent: oklch(0.955 0 0);

--accent-foreground: var(--foreground);

--destructive: oklch(0.55 0.2 27);

--destructive-foreground: oklch(1 0 0);

--border: oklch(0.922 0 0 / var(--ring-opacity));

--input: oklch(0.922 0 0);

--primary-text: var(--foreground);

--canvas: var(--background);

--scroll-fade-size: 2rem;

--shadow-color: oklch(0 0 0);

--shadow-highlight: oklch(1 0 0 / 0.6);

--shadow-size: 1;

--radius: 0.625rem;

--radius-control: var(--radius);

--radius-field: calc(var(--radius) * 1.2);

--radius-panel: calc(var(--radius) * 1.6);

--radius-scene: calc(var(--radius) * 1.8);

--radius-popup-item: calc(var(--radius) * 0.8);

--padding-x: 0.75rem;

--padding-y: 0.5rem;

--control-h: 2rem;

--control-h-xs: round(var(--control-h) * 0.75, 1px);

--control-h-sm: round(var(--control-h) * 0.875, 1px);

--control-h-lg: round(var(--control-h) * 1.125, 1px);

--ease-emphasized: cubic-bezier(0.23, 1, 0.32, 1);

}

.dark[data-skin="refined"][data-skin],

.dark [data-skin="refined"][data-skin] {

--background: oklch(0.17 0 0);

--foreground: oklch(0.945 0 0);

--card: oklch(0.205 0 0);

--primary: oklch(0.922 0 0);

--primary-foreground: var(--card);

--secondary: oklch(0.269 0 0);

--muted: oklch(0.24 0 0);

--muted-foreground: oklch(0.7 0 0);

--accent: oklch(0.269 0 0);

--destructive: oklch(0.704 0.191 22.216);

--destructive-foreground: oklch(0.17 0 0);

--border: oklch(1 0 0 / calc(0.1 * var(--ring-opacity)));

--input: oklch(1 0 0 / 0.15);

--ring: oklch(0.7 0 0);

--shadow-highlight: oklch(1 0 0 / 0.03);

}

Installation

Start complete or add only Refined

Complete project installs the canonical Control UI component set and this skin in one step. Skin only replaces the active skin.config.tsx, skin-theme.css, and skin.css targets without changing component source.

Complete project

npx shadcn@latest add https://control-ui.dev/r/all-refined.json

Skin only

npx shadcn@latest add https://control-ui.dev/r/skin-refined.json --overwrite

See registry manifest