Tactile Digital / Deformable UI

Also called: Deformable UI, Squishy UI, Jelly UI, Tactile digital

Glossy jelly controls with chrome rims that squash and stretch under your finger — UI that feels like a soft toy.

“Jelly buttons”Soft & DimensionalEra: 2024 →PlayfulBoldTechyFriendly

tactile-digital-deformable-ui / landingEN

tactile-digital-deformable-ui / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm14pxRadius md20pxRadius lg28pxRadius xl36pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

jelly buttonssquash and stretchchrome rimpuffy clay cardsglossy highlight blobspringy overshootcandy neon on grapewobble on hover

Tactile Digital makes every control look and behave like a soft, glossy object. Buttons are saturated jelly with a bright highlight blob on top and a darker underside; cards are puffy clay slabs wrapped in a polished chrome rim. Interaction is physical: hover wobbles, press squashes the element wide and flat, release springs back with overshoot. The base is a deep grape night so the candy colours and chrome glints pop.

Best for

Casual and mobile games, launchers and reward screens
Creator and music toys, sticker/emote apps
Gen-Z consumer apps that want haptic-feeling UI
Promo and loyalty campaigns with big CTAs

Avoid for

Banking, legal and healthcare forms
Dense data tools where motion distracts
Users who rely on reduced motion (provide a static fallback)

✓ Do

Squash on press: translateY(4px) scale(1.1,.84) in 90ms, then spring back with cubic-bezier(.34,1.56,.64,1)
Give every button a top highlight blob and a 5–6px darker underside
Wrap cards and avatars in a 3px chrome gradient rim (decorative, overrides the 2px border token)
Keep text on solid, high-contrast jelly — the gloss band is ≤30% of button height and sits under the label

✕ Don't

Don’t use flat, matte fills — everything should catch light
Don’t animate layout properties; deform with transform only
Wobble only the hovered element; no idle wobble except ≤2 decorative gumdrops
Don’t use pastel, low-saturation colour (that reads as claymorphism)

Not to be confused with

Claymorphism →Claymorphism is matte pastel clay that sits still on a light background; Tactile Digital is glossy, saturated jelly with chrome rims on a dark base, and it squashes and wobbles when touched.3D & Hyperrealism →3D Hyperrealism renders realistic objects and lighting; Tactile Digital keeps simple 2D shapes and sells softness through gloss, rims and squash-and-stretch motion.Gamified Playful →Gamified Playful uses flat chunky buttons with a solid bottom border, streaks and XP bars; Tactile Digital is about the glossy deformable material itself.

On mobile

This is where the style shines: press = squash, release = spring. Use the jelly look for the primary CTA, the active tab bubble and the featured card; keep list rows flat on a single puffy card so scrolling stays smooth. Pair the squash with a light haptic tick on native.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinRubik · 700/800

The quick brown fox

Heading · ThaiKanit · 700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinRubik · 400/500/600

Clear words make shared decisions.

Body · ThaiPrompt · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Kanit’s heavy, rounded-corner strokes match Rubik’s soft-cornered bold weights; loopless Prompt keeps the same geometric, friendly body rhythm.

Colour palette

Light

Dark

Design tokens

Radius	`sm 14px · md 20px · lg 28px · xl 36px · pill 999px`
Border	`2px`
Shadow	`inset 0 -6px 14px rgba(0,0,0,0.28), inset 0 4px 10px rgba(255,255,255,0.08), 0 12px 26px rgba(5,0,20,0.45)`
Display	`clamp(2.9rem, 6.5vw, 5.25rem)`
Motion	`320ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Tactile Digital / Deformable UI (tactile-digital-deformable-ui) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Kanit:wght@700;800&family=Prompt:wght@400;500;600&display=swap
 */
:root {
  --radius: 28px;
  --background: #F2ECFF;
  --foreground: #1E1238;
  --card: #FFFFFF;
  --card-foreground: #1E1238;
  --popover: #FFFFFF;
  --popover-foreground: #1E1238;
  --primary: #7ACC00;
  --primary-foreground: #122000;
  --secondary: #C8186F;
  --secondary-foreground: #FFFFFF;
  --muted: #E7DDFF;
  --muted-foreground: #5A4C7C;
  --accent: #E7DDFF;
  --accent-foreground: #1E1238;
  --destructive: #D62550;
  --border: #C9B8F2;
  --input: #C9B8F2;
  --ring: #7ACC00;
  --chart-1: #6CB800;
  --chart-2: #E8288C;
  --chart-3: #00A9D6;
  --chart-4: #E0A100;
  --chart-5: #7B5CFF;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1E1238;
  --sidebar-primary: #7ACC00;
  --sidebar-primary-foreground: #122000;
  --sidebar-accent: #E7DDFF;
  --sidebar-accent-foreground: #1E1238;
  --sidebar-border: #C9B8F2;
  --sidebar-ring: #7ACC00;
}

.dark {
  --background: #170F2E;
  --foreground: #FFF6FF;
  --card: #2A1D52;
  --card-foreground: #FFF6FF;
  --popover: #2A1D52;
  --popover-foreground: #FFF6FF;
  --primary: #B4F03C;
  --primary-foreground: #162400;
  --secondary: #FF4FA8;
  --secondary-foreground: #2B0018;
  --muted: #21163F;
  --muted-foreground: #CBBDEE;
  --accent: #21163F;
  --accent-foreground: #FFF6FF;
  --destructive: #FF5C7A;
  --border: #4A3A80;
  --input: #4A3A80;
  --ring: #B4F03C;
  --chart-1: #B4F03C;
  --chart-2: #FF4FA8;
  --chart-3: #3EE0FF;
  --chart-4: #FFC83D;
  --chart-5: #A98BFF;
  --sidebar: #2A1D52;
  --sidebar-foreground: #FFF6FF;
  --sidebar-primary: #B4F03C;
  --sidebar-primary-foreground: #162400;
  --sidebar-accent: #21163F;
  --sidebar-accent-foreground: #FFF6FF;
  --sidebar-border: #4A3A80;
  --sidebar-ring: #B4F03C;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Tactile Digital / Deformable UI (tactile-digital-deformable-ui) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Kanit:wght@700;800&family=Prompt:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F2ECFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #E7DDFF;
  --color-text: #1E1238;
  --color-text-muted: #5A4C7C;
  --color-primary: #7ACC00;
  --color-on-primary: #122000;
  --color-secondary: #C8186F;
  --color-on-secondary: #FFFFFF;
  --color-accent: #00A9D6;
  --color-border: #C9B8F2;
  --color-success: #14894A;
  --color-warning: #B87700;
  --color-danger: #D62550;
  --color-chart-1: #6CB800;
  --color-chart-2: #E8288C;
  --color-chart-3: #00A9D6;
  --color-chart-4: #E0A100;
  --color-chart-5: #7B5CFF;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --shadow-sm: inset 0 -3px 0 rgba(0,0,0,0.22), inset 0 2px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(5,0,20,0.35);
  --shadow-md: inset 0 -6px 14px rgba(0,0,0,0.28), inset 0 4px 10px rgba(255,255,255,0.08), 0 12px 26px rgba(5,0,20,0.45);
  --shadow-lg: inset 0 -10px 20px rgba(0,0,0,0.3), inset 0 6px 14px rgba(255,255,255,0.1), 0 22px 44px rgba(5,0,20,0.55);
  --font-heading: "Rubik", "Kanit", system-ui, sans-serif;
  --font-body: "Rubik", "Prompt", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Prompt", monospace;
}

.dark {
  --color-bg: #170F2E;
  --color-surface: #2A1D52;
  --color-surface-2: #21163F;
  --color-text: #FFF6FF;
  --color-text-muted: #CBBDEE;
  --color-primary: #B4F03C;
  --color-on-primary: #162400;
  --color-secondary: #FF4FA8;
  --color-on-secondary: #2B0018;
  --color-accent: #3EE0FF;
  --color-border: #4A3A80;
  --color-success: #5BEA8A;
  --color-warning: #FFC83D;
  --color-danger: #FF5C7A;
  --color-chart-1: #B4F03C;
  --color-chart-2: #FF4FA8;
  --color-chart-3: #3EE0FF;
  --color-chart-4: #FFC83D;
  --color-chart-5: #A98BFF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Tactile Digital / Deformable UI (tactile-digital-deformable-ui). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Kanit:wght@700;800&family=Prompt:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9255,
            1
          ],
          "hex": "#f2ecff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.8667,
            1
          ],
          "hex": "#e7ddff"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0706,
            0.2196
          ],
          "hex": "#1e1238"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.298,
            0.4863
          ],
          "hex": "#5a4c7c"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.8,
            0
          ],
          "hex": "#7acc00"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.1255,
            0
          ],
          "hex": "#122000"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.0941,
            0.4353
          ],
          "hex": "#c8186f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6627,
            0.8392
          ],
          "hex": "#00a9d6"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7216,
            0.949
          ],
          "hex": "#c9b8f2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.5373,
            0.2902
          ],
          "hex": "#14894a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.4667,
            0
          ],
          "hex": "#b87700"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.1451,
            0.3137
          ],
          "hex": "#d62550"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.7216,
            0
          ],
          "hex": "#6cb800"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.1569,
            0.549
          ],
          "hex": "#e8288c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6627,
            0.8392
          ],
          "hex": "#00a9d6"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6314,
            0
          ],
          "hex": "#e0a100"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.3608,
            1
          ],
          "hex": "#7b5cff"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0588,
            0.1804
          ],
          "hex": "#170f2e"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1137,
            0.3216
          ],
          "hex": "#2a1d52"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1294,
            0.0863,
            0.2471
          ],
          "hex": "#21163f"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9647,
            1
          ],
          "hex": "#fff6ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7961,
            0.7412,
            0.9333
          ],
          "hex": "#cbbdee"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.9412,
            0.2353
          ],
          "hex": "#b4f03c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1412,
            0
          ],
          "hex": "#162400"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3098,
            0.6588
          ],
          "hex": "#ff4fa8"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0,
            0.0941
          ],
          "hex": "#2b0018"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.8784,
            1
          ],
          "hex": "#3ee0ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2275,
            0.502
          ],
          "hex": "#4a3a80"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.9176,
            0.5412
          ],
          "hex": "#5bea8a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7843,
            0.2392
          ],
          "hex": "#ffc83d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.4784
          ],
          "hex": "#ff5c7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.9412,
            0.2353
          ],
          "hex": "#b4f03c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3098,
            0.6588
          ],
          "hex": "#ff4fa8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.8784,
            1
          ],
          "hex": "#3ee0ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7843,
            0.2392
          ],
          "hex": "#ffc83d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.5451,
            1
          ],
          "hex": "#a98bff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0196,
              0,
              0.0784
            ],
            "hex": "#050014",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -6,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0196,
              0,
              0.0784
            ],
            "hex": "#050014",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 26,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -10,
            "unit": "px"
          },
          "blur": {
            "value": 20,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0196,
              0,
              0.0784
            ],
            "hex": "#050014",
            "alpha": 0.55
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 22,
            "unit": "px"
          },
          "blur": {
            "value": 44,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Rubik",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Rubik",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Prompt",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 320,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!