Studio

Studio lets you try a retune before you commit any CSS. Start from Dry, Washi, ICS, or Vistula, or pick any primary and secondary color with the color well or a hex value, then set the paper (cool, gray, or warm), the box and control corners, the type stack (Washi, ICS, or Vistula), and the UI weight. The stage below is a small app built from the kit's own components: a rail on the tray, and on the page a primary and outline button, a support chip next to a primary one, an alert, a stat strip, category chips, a progress bar, and a form with a field, a switch, and a toggle group. It is scoped to its own sheet and reads --brand-* the way an app would, so each choice lands where it would in your app. Mode switches it to dark paper, and stroke derives from the UI weight.

Copy writes a [data-theme="acme"] block. Rename acme and paste it after your token imports, and set the same name on data-theme. The block holds the brand colors, both radii, the three faces, the weight, and the chrome knobs for the paper you chose. Studio writes a dark block for any starter whose prefab ships a dark step, and for ink, which has to invert by hand once your block sets it. Vermillion also sets danger to Vistula's crimson, so the accent and a delete stay apart. When a starter comes from a prefab, the copy starts with the shadcn add line that installs it. For a hex you picked yourself, add a [data-theme="acme"].dark block as described on Retune. The faces are named and not loaded, so load their font files in your app.

[data-theme="acme"] {
  --brand-primary: var(--neutral-900);
  --brand-primary-fg: var(--neutral-50);
  --brand-secondary: var(--neutral-700);
  --brand-secondary-fg: var(--neutral-50);
  --brand-radius: var(--radius-scale-md);
  --brand-radius-control: var(--radius-scale-md);
  --brand-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --brand-font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --brand-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --brand-font-weight-ui: 400;
  --chrome-chroma: 0;
  --chrome-chroma-tag: 0;
  --chrome-hue: 80;
}

[data-theme="acme"].dark {
  --brand-primary: var(--neutral-50);
  --brand-primary-fg: var(--neutral-900);
  --brand-secondary: var(--neutral-300);
  --brand-secondary-fg: var(--neutral-900);
}

Next

Read what each token does on Retune, or install a finished look from Prefabs. Ramson stays a prefab you install, outside these presets.