Skip to content
Cuelark UI
Getting started

Theming

Customize accent, radius, density and crop marks with CSS variables, and generate a theme with the live editor.

Everything is a CSS variable. Components never hard-code colors, heights or timings, so a few variables restyle the whole library, in light and dark mode. Use the editor below, then paste the snippet into your global stylesheet after the Cuelark theme.

Themes

CobaltInter
PrimarySecondary

Cool mist, vivid cobalt buttons, Inter. The default.

PaperInter
PrimarySecondary

Warm paper, ink buttons and a chartreuse signal.

MonoGeist
PrimarySecondary

Pure neutral, ink accents, Geist. Quiet and exact.

AtelierInstrument Sans
PrimarySecondary

Paper with violet, editorial type, generous corners.

TerminalSpace Grotesk
PrimarySecondary

Square corners, compact, mint signal, Space Grotesk.

StudioPlus Jakarta Sans
PrimarySecondary

Zinc, coral buttons, soft SaaS type, roomy.

Theme editor

PresetCobalt
SignalCobalt
Base
FontLinear, Figma
Text size16px
Spacing
Radius0.75rem
Density
MotionDefault

Changes apply to this whole site and are saved in your browser. Use the palette button in the header to tweak from any page.

Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
globals.css: paste after the Cuelark theme
:root {
  --background: oklch(0.985 0.007 255);
  --foreground: oklch(0.18 0.021 255);
  --card: oklch(0.997 0.004 255);
  --card-foreground: oklch(0.18 0.021 255);
  --popover: oklch(0.997 0.004 255);
  --popover-foreground: oklch(0.18 0.021 255);
  --primary: oklch(0.55 0.23 264);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.955 0.011 255);
  --secondary-foreground: oklch(0.2 0.021 255);
  --muted: oklch(0.955 0.011 255);
  --muted-foreground: oklch(0.52 0.021 255);
  --accent: oklch(0.945 0.014 255);
  --accent-foreground: oklch(0.2 0.021 255);
  --border: oklch(0.905 0.014 255);
  --input: oklch(0.885 0.014 255);
  --ring: oklch(0.55 0.23 264);
  --signal: oklch(0.55 0.23 264);
  --signal-foreground: oklch(0.99 0 0);
  --cl-mark: oklch(0.68 0.014 255);
  --cl-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --cl-text-size: 1;
  --cl-tracking: 0em;
  --radius: 0.75rem;
  --cl-density: 1;
  --cl-marks: 1;
  --cl-motion: 1;
}

.dark {
  --background: oklch(0.155 0.014 255);
  --foreground: oklch(0.965 0.011 255);
  --card: oklch(0.185 0.014 255);
  --card-foreground: oklch(0.965 0.011 255);
  --popover: oklch(0.205 0.014 255);
  --popover-foreground: oklch(0.965 0.011 255);
  --primary: oklch(0.64 0.23 264);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.25 0.014 255);
  --secondary-foreground: oklch(0.965 0.011 255);
  --muted: oklch(0.25 0.014 255);
  --muted-foreground: oklch(0.7 0.018 255);
  --accent: oklch(0.265 0.014 255);
  --accent-foreground: oklch(0.965 0.011 255);
  --border: oklch(1 0 0 / 0.09);
  --input: oklch(1 0 0 / 0.14);
  --ring: oklch(0.64 0.23 264);
  --signal: oklch(0.64 0.23 264);
  --signal-foreground: oklch(0.99 0 0);
  --cl-mark: oklch(0.55 0.014 255);
}

The knobs

TokenWhat it controls
--primary · --ring · --accentAccent color (OKLCH). The editor derives the light and dark set from one hue.
--radiusCorner rounding; shadcn's radius scale (sm, md, lg, xl) is derived from it.
--cl-densityScales control heights (h-ctl-*) and card padding (p-card): 0.875 compact, 1 default, 1.125 roomy.
--cl-marksCrop-mark visibility, 0 or 1. Also --cl-mark-len and --cl-mark-gap for their geometry.
--cl-motionGSAP motion amplitude: 0 off, 1 default, 1.5 expressive. Cascades, so scope it to a subtree.
--cl-highlight · --cl-shadeThe inset top highlight and the shadow color behind every raised and recessed surface.

All tokens

The full set the theme registry item writes into your CSS. Values are OKLCH, so lightness steps look even across hues.

VariableLightDark
--backgroundoklch(0.985 0.007 255)oklch(0.155 0.014 255)
--foregroundoklch(0.18 0.021 255)oklch(0.965 0.011 255)
--cardoklch(0.997 0.004 255)oklch(0.185 0.014 255)
--card-foregroundoklch(0.18 0.021 255)oklch(0.965 0.011 255)
--popoveroklch(0.997 0.004 255)oklch(0.205 0.014 255)
--popover-foregroundoklch(0.18 0.021 255)oklch(0.965 0.011 255)
--primaryoklch(0.55 0.23 264)oklch(0.64 0.23 264)
--primary-foregroundoklch(0.99 0 0)oklch(0.99 0 0)
--secondaryoklch(0.955 0.011 255)oklch(0.25 0.014 255)
--secondary-foregroundoklch(0.2 0.021 255)oklch(0.965 0.011 255)
--mutedoklch(0.955 0.011 255)oklch(0.25 0.014 255)
--muted-foregroundoklch(0.52 0.021 255)oklch(0.7 0.018 255)
--accentoklch(0.945 0.014 255)oklch(0.265 0.014 255)
--accent-foregroundoklch(0.2 0.021 255)oklch(0.965 0.011 255)
--borderoklch(0.905 0.014 255)oklch(1 0 0 / 0.09)
--inputoklch(0.885 0.014 255)oklch(1 0 0 / 0.14)
--ringoklch(0.55 0.23 264)oklch(0.64 0.23 264)
--signaloklch(0.55 0.23 264)oklch(0.64 0.23 264)
--signal-foregroundoklch(0.99 0 0)oklch(0.99 0 0)
--cl-markoklch(0.68 0.014 255)oklch(0.55 0.014 255)
--radius0.75rem—
--cl-density1—
--cl-marks1—
--cl-motion1—
--destructiveoklch(0.577 0.215 27)oklch(0.7 0.19 22)
--successoklch(0.56 0.14 150)oklch(0.74 0.15 150)
--success-foregroundoklch(0.985 0.004 85)oklch(0.18 0.03 150)
--warningoklch(0.66 0.15 65)oklch(0.8 0.14 80)
--warning-foregroundoklch(0.2 0.012 75)oklch(0.2 0.04 70)
--cl-highlightoklch(1 0 0 / 0.16)oklch(1 0 0 / 0.1)
--cl-shadeoklch(0.3 0.06 262 / 0.09)oklch(0 0 0 / 0.5)

Dark mode

Dark values live under .dark, the shadcn convention. Toggle the class on <html> with your theme switcher; no component needs a dark: variant.

Utilities

  • cue-marks: crop marks around any positioned element.
  • cue-dash-t / cue-dash-b: dashed hairline on the top or bottom edge.
  • cue-label: the mono micro-label.
  • cue-kbd: the keycap used for every shortcut hint.
  • h-ctl-sm · h-ctl-md · h-ctl-lg and p-card: density-aware sizes.
  • shadow-control · shadow-raised · shadow-overlay · shadow-well · shadow-pressed and ease-cue.