Prefabs

A prefab is a complete look in one CSS file, and installing one gives you a brand, a face set, and corners without writing a retune. Each one fills --brand-* and loads from one shadcn add. Washi, ICS, and Ramson also set the warm paper knobs, and Vistula leaves the room gray. Switch looks in the sidebar to see each one land on the specimens.

Every prefab depends on @gesso/tokens, so adding one adds the four token files as well. Import its CSS after the token files, as shown for each below, and set data-theme on the root element. A prefab names its faces and does not load them, so load the font files in your app. You can import several prefabs and switch between them with data-theme.

Washi

Washi is warm paper with a wave-blue primary and a blossom second hue, and it warms the category red, orange, and yellow, so danger is a brick red and a warning a softer yellow. It uses Hanken Grotesk for the UI, Newsreader for running text, and Fraunces for titles, and keeps the 8px corners and regular weight of the dry kit.

npx shadcn@latest add @gesso/washi

@import "./styles/dry/themes/washi.css";

<html data-theme="washi">

Dark is .dark on the same element. The chrome inverts and keeps its warmth, wave lightens so it reads as ink and as a fill with dark text on it. Blossom keeps its dark text.

ICS

ICS is warm paper with a violet primary and an orange second hue. It defines --ics-violet-* and --ics-orange-* as primitives, which components do not use directly, and the brand picks the 600 step of each. Sora is both font-sans and font-body, and Outfit is font-display. Controls are pills, because --brand-radius-control is --radius-scale-full, and boxes use --radius-scale-xl. The 600 UI weight gives a 2px stroke. Status stays dry, and ICS sets the warm paper knobs. @gesso/ascora-brand brings this prefab together with the Ascora o-ring, the wordmark, and a fonts.css that loads Outfit and Sora.

npx shadcn@latest add @gesso/ics

@import "./styles/dry/themes/ics.css";

<html data-theme="ics">

Dark is .dark on the same element. The chrome inverts, the primary lightens to violet 400 with dark violet text on it, the support becomes orange 400 with dark text.

Ramson

Ramson is warm paper with a pine primary, and a rose second hue. Pine is a green off-black (oklch(0.215 0.033 172)), and the prefab also sets --sys-contrast to it, so the fill and hover washes, the unfilled control edge, and the focus ring tint green and not warm gray. Overlay scrims keep their own fixed ink, so they stay neutral. Danger stays the system red, which keeps a secondary rose button from reading as a delete. Outfit is font-sans and font-body, and Fraunces is font-display. The corners are 8px and the UI weight is 500. @gesso/ramson-brand brings this prefab together with the Ramson marks and a fonts.css that loads both faces.

npx shadcn@latest add @gesso/ramson

@import "./styles/dry/themes/ramson.css";

<html data-theme="ramson">

Dark is .dark on the same element. The primary lifts to a light sage with dark text on it, rose lifts to coral, and the contrast ink becomes mint, so the washes tint off mint.

Vistula

Vistula is gray paper with a pine primary and a vermillion second hue. It sets no chrome knobs, so the room stays neutral and the greens carry the color. Pine is #314832. Vermillion is the accent, and because it sits on the same hue as the system red, Vistula sets --cat-red to a crimson so a support button never reads as a delete. Danger reads that red, and so does every red chip, chart segment, and mark, the same way Washi's red works on Retune. Moss (#708c4b), the palette's second green, is the dark primary: light mode keeps pine, and dark switches to moss so the green still reads as ink and as a fill with dark text. Archivo is font-sans and font-display, and Newsreader is font-body. Corners are 2px and the UI weight is 400.

npx shadcn@latest add @gesso/vistula

@import "./styles/dry/themes/vistula.css";

<html data-theme="vistula">

Dark is .dark on the same element. The primary switches to moss with dark text on it, and vermillion lifts to coral with dark text.

What is guaranteed

• text-tone-ink in the primary tone, the brand as small text, passes AA text contrast on every surface in Washi, ICS, Ramson, Vistula, and the dry look, in light and dark and on gray and warm paper, because the ink is the brand mixed 48% toward the ink of the room.
• Each prefab ships its own dark values, so its brand does not turn to ink under .dark.
• The ink and surface pairings on Chrome & temperature hold under every prefab, because a prefab sets chroma and hue and does not change the lightness of the surfaces or the ink.

Next

Make your own on Retune, or try colors on Studio. The brand pages for Ramson and Ascora show these looks in use.