v2.0.1

Try looks in the demo editor

Tune tokens and preview them on a card. The link keeps your draft, so you can reopen it.

Draft look

Active

Spacing, type and color follow the fields.

Owner: Maya Laurent
Region: Europe
Plan: Team

Billing ends 14 November

Add a payment method to keep the workspace.

Preview only: the buttons and fields here are samples.

Change spacing first, then watch the card. Preview dark changes the card only.

Shape and spacing

Save and apply

Saved on this device, in this browser. Nothing is uploaded.

Name the look to save it.

Applying restyles this site in your browser only. The home demo keeps its own look.

Type rhythm

Depth

Color (light)

What this exports

A recipe, not a complete look: shape and spacing, type rhythm, shadows, two font stacks, and seven colors for light and for dark. Cards, menus, sidebars and muted surfaces take the page color, and every corner uses one radius. Motion, button personality, glass layers and page texture are not included.

CSS

:root {
  --spacing: 0.25rem;
  --zk-border-width: 1px;
  --radius: 0.5rem;
  --zk-body-leading: 1.55;
  --zk-heading-leading: 1.1;
  --zk-heading-tracking: -0.02em;
  --zk-label-tracking: 0.025em;
  --zk-font-sans: "Inter Variable", Inter, "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", Inter, "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
  --zk-font-display: "Inter Variable", Inter, "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Variable", Inter, "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --accent: 240 4.8% 59.9%;
  --border: 240 5.9% 60%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --secondary: 0 0% 100%;
  --secondary-foreground: 240 10% 3.9%;
  --muted: 0 0% 100%;
  --muted-foreground: 240 5% 32%;
  --input: 240 5.9% 60%;
  --ring: 240 4.8% 59.9%;
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 240 10% 3.9%;
  --sidebar-border: 240 5.9% 60%;
  --sidebar-accent: 240 4.8% 59.9%;
  --zk-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --zk-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --radius-xs: 0.5rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.5rem;
  --radius-2xl: 0.5rem;
  --radius-3xl: 0.5rem;
}
:root.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --accent: 240 3.7% 37.9%;
  --border: 240 3.7% 37.9%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --secondary: 240 10% 3.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 10% 3.9%;
  --muted-foreground: 240 5% 64.9%;
  --input: 240 3.7% 37.9%;
  --ring: 240 3.7% 37.9%;
  --sidebar: 240 10% 3.9%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-border: 240 3.7% 37.9%;
  --sidebar-accent: 240 3.7% 37.9%;
}

Try looks in the demo editor

Draft look

Billing ends 14 November

What this exports

Load a recipe