One anatomy. Ten personalities.

Every preset changes color, geometry, density, depth, type, focus, and motion through the same dependency-free contract.

Token inspectorSearch the selected theme’s complete token map

Inspect the exact values in Clank. Search token names, CSS variables, values, or groups.

Search theme tokens

32 of 32 tokens in Clank

Colors

--clank-canvascanvas: #0c0e11
--clank-canvas-raisedcanvasRaised: #101317
--clank-surfacesurface: #161a20
--clank-surface-mutedsurfaceMuted: #1c2128
--clank-surface-hoversurfaceHover: #242b33
--clank-texttext: #f2f4f7
--clank-text-mutedtextMuted: #b0b7c2
--clank-text-fainttextFaint: #929ca9
--clank-borderborder: #2b333e
--clank-border-strongborderStrong: #465160
--clank-accentaccent: #9bef6b
--clank-accent-hoveraccentHover: #b3ff88
--clank-accent-contrastaccentContrast: #102008
--clank-dangerdanger: #ff6b6b
--clank-danger-contrastdangerContrast: #210606
--clank-focusfocus: #b3ff88
--clank-overlayoverlay: rgba(0, 0, 0, .68)

Typography

--clank-font-sansfontSans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--clank-font-monofontMono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace

Geometry

--clank-radius-xsradiusXs: 4px
--clank-radius-smradiusSm: 7px
--clank-radius-mdradiusMd: 11px
--clank-radius-lgradiusLg: 16px
--clank-radius-fullradiusFull: 999px
--clank-control-heightcontrolHeight: 40px
--clank-densitydensity: 1
--clank-border-widthborderWidth: 1px

Depth

--clank-shadow-smshadowSm: 0 1px 2px rgba(0, 0, 0, .24)
--clank-shadow-mdshadowMd: 0 14px 35px rgba(0, 0, 0, .28)
--clank-shadow-lgshadowLg: 0 28px 90px rgba(0, 0, 0, .52)

Motion

--clank-motion-fastmotionFast: 120ms
--clank-motion-normalmotionNormal: 220ms

Contrast checkerCompare foreground and background theme tokens

Compare two color tokens in Clank. Results cover this opaque color pair only; they do not certify a whole interface.

Foreground tokenBackground token

17.541:1 contrast ratio. Pass/fail uses the unrounded result.

Readable by designPreview text using the selected tokens.

AA normal textAt least 4.5:1Pass
AA large textAt least 3:1Pass
AAA normal textAt least 7:1Pass
AAA large textAt least 4.5:1Pass

Large text means at least 18pt (24px), or 14pt (about 18.67px) bold. Translucent and unsupported values are unavailable because their displayed colors cannot be inferred here. WCAG text contrast guidance.

Theme exportCopy or download the selected theme as CSS or JSON

Export Clank for your application. CSS includes the root defaults and the selected theme’s attribute selector. JSON contains the complete theme contract and token values.

clank-theme-clank.css is ready to copy or download.

:root {
  color-scheme: dark;
  --clank-canvas: #0c0e11;
  --clank-canvas-raised: #101317;
  --clank-surface: #161a20;
  --clank-surface-muted: #1c2128;
  --clank-surface-hover: #242b33;
  --clank-text: #f2f4f7;
  --clank-text-muted: #b0b7c2;
  --clank-text-faint: #929ca9;
  --clank-border: #2b333e;
  --clank-border-strong: #465160;
  --clank-accent: #9bef6b;
  --clank-accent-hover: #b3ff88;
  --clank-accent-contrast: #102008;
  --clank-danger: #ff6b6b;
  --clank-danger-contrast: #210606;
  --clank-focus: #b3ff88;
  --clank-overlay: rgba(0, 0, 0, .68);
  --clank-radius-xs: 4px;
  --clank-radius-sm: 7px;
  --clank-radius-md: 11px;
  --clank-radius-lg: 16px;
  --clank-radius-full: 999px;
  --clank-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --clank-shadow-md: 0 14px 35px rgba(0, 0, 0, .28);
  --clank-shadow-lg: 0 28px 90px rgba(0, 0, 0, .52);
  --clank-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --clank-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --clank-control-height: 40px;
  --clank-density: 1;
  --clank-border-width: 1px;
  --clank-motion-fast: 120ms;
  --clank-motion-normal: 220ms;
}
:root[data-clank-theme="clank"] {
  color-scheme: dark;
  --clank-canvas: #0c0e11;
  --clank-canvas-raised: #101317;
  --clank-surface: #161a20;
  --clank-surface-muted: #1c2128;
  --clank-surface-hover: #242b33;
  --clank-text: #f2f4f7;
  --clank-text-muted: #b0b7c2;
  --clank-text-faint: #929ca9;
  --clank-border: #2b333e;
  --clank-border-strong: #465160;
  --clank-accent: #9bef6b;
  --clank-accent-hover: #b3ff88;
  --clank-accent-contrast: #102008;
  --clank-danger: #ff6b6b;
  --clank-danger-contrast: #210606;
  --clank-focus: #b3ff88;
  --clank-overlay: rgba(0, 0, 0, .68);
  --clank-radius-xs: 4px;
  --clank-radius-sm: 7px;
  --clank-radius-md: 11px;
  --clank-radius-lg: 16px;
  --clank-radius-full: 999px;
  --clank-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --clank-shadow-md: 0 14px 35px rgba(0, 0, 0, .28);
  --clank-shadow-lg: 0 28px 90px rgba(0, 0, 0, .52);
  --clank-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --clank-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --clank-control-height: 40px;
  --clank-density: 1;
  --clank-border-width: 1px;
  --clank-motion-fast: 120ms;
  --clank-motion-normal: 220ms;
}

Theme comparisonSee exactly which token values differ between two presets

Compare the exact CSS token values of any two presets. These selections do not change the Studio theme.

First themeSecond theme

Show changed tokens only

24 of 32 tokens differ between Clank and Porcelain. Showing 32.

--clank-canvasChanged: First: Clank#0c0e11
Second: Porcelain#f6f8fb
--clank-canvas-raisedChanged: First: Clank#101317
Second: Porcelain#ffffff
--clank-surfaceChanged: First: Clank#161a20
Second: Porcelain#ffffff
--clank-surface-mutedChanged: First: Clank#1c2128
Second: Porcelain#eef2f7
--clank-surface-hoverChanged: First: Clank#242b33
Second: Porcelain#e4eaf2
--clank-textChanged: First: Clank#f2f4f7
Second: Porcelain#152033
--clank-text-mutedChanged: First: Clank#b0b7c2
Second: Porcelain#5a697f
--clank-text-faintChanged: First: Clank#929ca9
Second: Porcelain#5f6875
--clank-borderChanged: First: Clank#2b333e
Second: Porcelain#d9e0e9
--clank-border-strongChanged: First: Clank#465160
Second: Porcelain#b6c0cd
--clank-accentChanged: First: Clank#9bef6b
Second: Porcelain#255fdb
--clank-accent-hoverChanged: First: Clank#b3ff88
Second: Porcelain#174fc7
--clank-accent-contrastChanged: First: Clank#102008
Second: Porcelain#ffffff
--clank-dangerChanged: First: Clank#ff6b6b
Second: Porcelain#d83b4b
--clank-danger-contrastChanged: First: Clank#210606
Second: Porcelain#ffffff
--clank-focusChanged: First: Clank#b3ff88
Second: Porcelain#2764e7
--clank-overlayChanged: First: Clankrgba(0, 0, 0, .68)
Second: Porcelainrgba(18, 31, 50, .46)
--clank-radius-xsChanged: First: Clank4px
Second: Porcelain3px
--clank-radius-smChanged: First: Clank7px
Second: Porcelain6px
--clank-radius-mdChanged: First: Clank11px
Second: Porcelain9px
--clank-radius-lgChanged: First: Clank16px
Second: Porcelain13px
--clank-radius-fullSame: First: Clank999px
Second: Porcelain999px
--clank-shadow-smChanged: First: Clank0 1px 2px rgba(0, 0, 0, .24)
Second: Porcelain0 1px 2px rgba(22, 34, 51, .08)
--clank-shadow-mdChanged: First: Clank0 14px 35px rgba(0, 0, 0, .28)
Second: Porcelain0 14px 36px rgba(22, 34, 51, .13)
--clank-shadow-lgChanged: First: Clank0 28px 90px rgba(0, 0, 0, .52)
Second: Porcelain0 30px 80px rgba(22, 34, 51, .2)
--clank-font-sansSame: First: ClankInter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Second: PorcelainInter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--clank-font-monoSame: First: Clank'SFMono-Regular', Consolas, 'Liberation Mono', monospace
Second: Porcelain'SFMono-Regular', Consolas, 'Liberation Mono', monospace
--clank-control-heightSame: First: Clank40px
Second: Porcelain40px
--clank-densitySame: First: Clank1
Second: Porcelain1
--clank-border-widthSame: First: Clank1px
Second: Porcelain1px
--clank-motion-fastSame: First: Clank120ms
Second: Porcelain120ms
--clank-motion-normalSame: First: Clank220ms
Second: Porcelain220ms

Token sandboxTry safe token overrides in a scoped live sample

Experiment with 27 color, geometry, density, and motion tokens in the sample below. Typography and shadows retain their preset values. Edits stay in this preview. Changing the base clears all overrides.

Base presetEditable tokenToken value

Color: hex, rgb(), rgba(), or transparent. No variables or other functions.

No overrides applied. 0 edited tokens.

Export overrides

Apply this CSS after the base preset and add data-clank-sandbox to your container. Only applied overrides are included; an unfinished or invalid draft is excluded.

/* Apply after the clank preset. Add data-clank-sandbox to the target container. */
[data-clank-sandbox] {
  /* No overrides applied. */
}

Clank · live sample

Make room for your next idea.

Primary text, quieter details, and interactive controls share the tokens you edit here.

Project name

light

Playful cloud surfaces, raspberry actions, pill controls, and buoyant shadows.

lightpinkplayfulpill