Interactive Multi-Component Sandbox

Paperweight UI Playground

Experiment with buttons, inputs, segmented tabs, badges, toggles, and cards under customized tokens.

Token Controls

Primary Accent Color

Border Radius8px

Shadow Physics

Hairline Border

Canvas Fill

Live Dynamic Showcase

Blueprint Grid

1. Segmented Control / Tabs

2. Tactile Dynamic Buttons

3. Recessed Search Input

4. Status Badges & Keycaps

Custom Badge⌘K Search

Tactile Bento Container

Live Sandbox

All components in this sandbox respond live to your radius (8px), shadow physics, border hairline, and accent color tweaks.

Accent: #2563EBRadius: 8pxShadow: tactile

Generated Token Style Code

/* Dynamic Paperweight UI Design Tokens */
:root {
  --primary-accent: #2563EB;
  --border-radius: 8px;
  --border-width: 1px;
  --box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.3), 0 1px 2px 0 rgba(0,0,0,0.05);
}

/* Example Custom Component Styling */
.paperweight-custom-card {
  background-color: #ffffff;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--box-shadow);
}