How to build a UI in the Turso style

:root {
  /* Turso style — extracted from turso.tech by taste-skill */
  --canvas: #0F1317;
  --surface: #0D1318;
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.5);
  --accent: #4FF8D2;
  --border: #283945;
  --font-heading: 'Inter (800 ExtraBold)', 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: 60px;
  --h1-tracking: -0.025em;
  --h1-weight: 800;
  --radius-button: 9999px;
  --radius-common: 8px;
  --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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Turso style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#0F1317",
        surface: "#0D1318",
        ink: "#FFFFFF",
        muted: "rgba(255, 255, 255, 0.5)",
        accent: "#4FF8D2",
        line: "#283945",
      },
      fontFamily: {
        heading: ["Inter (800 ExtraBold)", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["60px", { letterSpacing: "-0.025em", fontWeight: "800" }] },
      borderRadius: { button: "9999px", card: "8px" },
      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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: turso-style
description: Build UI in the Turso visual style (Deep Oceanic Teal & Neon Aquamarine Edge Database). Use when the user asks for a Turso-like look.
---

# Turso Style — Quick Rules (source: turso.tech, extracted by taste-skill)

## Tokens
- canvasBg: #0F1317 — Primary Turso page canvas
- surfaceElevated: #0D1318 — Primary elevated card & bento surface
- surfaceSecondary: #0D1318 — Secondary interactive container / hover fill
- borderPrimary: #283945 — Primary structural divider (1px solid #283945)
- borderSecondary: #283945 — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: rgba(255, 255, 255, 0.5) — Lead paragraphs, descriptions & muted labels
- accentPrimary: #4FF8D2 — Primary interactive CTA & brand highlight (9999px (Pill))
- accentSecondary: #D946EF — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Inter (800 ExtraBold); body: Inter; mono: JetBrains Mono
- Hero H1: 60px | line-height 60px (leading-[1]) | letter-spacing -1.5px (tracking-[-0.025em]) | weight 800 (font-[800]) | color #FFFFFF (text-white) | font __Inter_f367f3
- Section H2 (Primary): 36px | line-height 40px (leading-[1.11]) | letter-spacing -0.9px (tracking-[-0.025em]) | weight 700 (font-[700]) | color #FFFFFF (text-white) | font __Inter_f367f3
- Card / Feature H3: 36px | line-height 40px (leading-[1.11]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #FFFFFF (text-white) | font __Inter_f367f3
- Body Copy (Paragraph): 18px | line-height 32px (leading-[1.78]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color rgba(255, 255, 255, 0.5) (text-white/[0.5]) | font __Inter_f367f3

## Components
- Primary button: height 44px, padding 12px 24px, radius 9999px, bg #4FF8D2, text #000000, 14px / 600
- Card: bg #0D1318, border 1px solid rgba(40, 57, 69, 0.8), radius 12px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Turso’s exact #0F1317 canvas and #0D1318 surface pairing.
- NEVER replace Inter (800 ExtraBold) display typography or ignore its signature scale (60px / -0.025em (w800)).
- NEVER use thick opaque borders that clash with #283945 (1px solid #283945).
- NEVER deviate from the signature button geometry (9999px (Pill)) 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/turso/

npx taste-skill add turso