How to build a UI in the Upstash style

:root {
  /* Upstash style — extracted from upstash.com by taste-skill */
  --canvas: #F5F5F5;
  --surface: #FFFFFF;
  --text: #022C22;
  --text-muted: #71717B;
  --accent: #00BC7D;
  --border: rgba(0, 0, 0, 0.05);
  --font-heading: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 128px;
  --h1-tracking: -0.025em;
  --h1-weight: 700;
  --radius-button: 10px;
  --radius-common: 35.2px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Upstash style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#F5F5F5",
        surface: "#FFFFFF",
        ink: "#022C22",
        muted: "#71717B",
        accent: "#00BC7D",
        line: "rgba(0, 0, 0, 0.05)",
      },
      fontFamily: {
        heading: ["Inter Tight", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["128px", { letterSpacing: "-0.025em", fontWeight: "700" }] },
      borderRadius: { button: "10px", card: "35.2px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: upstash-style
description: Build UI in the Upstash visual style (Oversized Emerald Typography & Clean Serverless Daylight). Use when the user asks for a Upstash-like look.
---

# Upstash Style — Quick Rules (source: upstash.com, extracted by taste-skill)

## Tokens
- canvasBg: #F5F5F5 — Primary Upstash page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: rgba(0, 115, 89, 0.08) — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 0, 0, 0.05) — Primary structural divider (1px rgba(0,0,0,0.05))
- borderSecondary: rgba(255, 255, 255, 0.1) — Secondary nested module or pill border
- textPrimary: #022C22 — Hero H1, section H2 & high-contrast foreground
- textMuted: #71717B — Lead paragraphs, descriptions & muted labels
- accentPrimary: #00BC7D — Primary interactive CTA & brand highlight (10px)
- accentSecondary: #00BC7D — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Inter Tight; body: Inter; mono: JetBrains Mono
- Hero H1: 128px | line-height 128px (leading-[1]) | letter-spacing -3.2px (tracking-[-0.025em]) | weight 700 (font-[700]) | color rgba(0, 0, 0, 0) (text-[rgba(0,0,0,0)]) | font Inter Tight
- Section H2 (Primary): 48px | line-height 48px (leading-[1]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #022C22 (text-[#022C22]) | font Inter Tight
- Card / Feature H3: 24px | line-height 32px (leading-[1.33]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #022C22 (text-[#022C22]) | font Inter Tight
- Body Copy (Paragraph): 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #71717B (text-[#71717B]) | font Inter

## Components
- Primary button: height 40px, padding 0px 20px, radius 10px, bg #FFFFFF, text #065F46, 16px / 500
- Card: bg #F5F5F5, border none, radius 35.2px, padding 24px 48px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Upstash’s exact #F5F5F5 canvas and #FFFFFF surface pairing.
- NEVER replace Inter Tight display typography or ignore its signature scale (128px / -0.025em (w700)).
- NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.05) (1px rgba(0,0,0,0.05)).
- NEVER deviate from the signature button geometry (10px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with JetBrains Mono.

Full 120-line spec: https://taste-skill.pages.dev/taste/upstash/

npx taste-skill add upstash