How to build a UI in the Loops style

:root {
  /* Loops style — extracted from loops.so by taste-skill */
  --canvas: #FDFDFC;
  --surface: #F9F9F8;
  --text: #21201C;
  --text-muted: #63625E;
  --accent: #7D1B0C;
  --border: #E9E8E6;
  --font-heading: Newsreader, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 44px;
  --h1-tracking: -0.02em;
  --h1-weight: 500;
  --radius-button: 40px;
  --radius-common: 6px;
  --shadow-common: rgba(33, 32, 28, 0.04) 0px 1px 2px 0px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.42s, 0.42s;
}

// tailwind.config.js — Loops style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FDFDFC",
        surface: "#F9F9F8",
        ink: "#21201C",
        muted: "#63625E",
        accent: "#7D1B0C",
        line: "#E9E8E6",
      },
      fontFamily: {
        heading: ["Newsreader", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["SF Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["44px", { letterSpacing: "-0.02em", fontWeight: "500" }] },
      borderRadius: { button: "40px", card: "6px" },
      boxShadow: { brand: "rgba(33, 32, 28, 0.04) 0px 1px 2px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1)" },
    },
  },
};

---
name: loops-style
description: Build UI in the Loops visual style (Warm Editorial SaaS & Newsreader Serif Craft). Use when the user asks for a Loops-like look.
---

# Loops Style — Quick Rules (source: loops.so, extracted by taste-skill)

## Tokens
- canvasBg: #FDFDFC — Primary Loops page canvas
- surfaceElevated: #F9F9F8 — Primary elevated card & bento surface
- surfaceSecondary: #F1F0EF — Secondary interactive container / hover fill
- borderPrimary: #E9E8E6 — Primary structural divider (1px solid #E9E8E6)
- borderSecondary: #DAD9D6 — Secondary nested module or pill border
- textPrimary: #21201C — Hero H1, section H2 & high-contrast foreground
- textMuted: #63625E — Lead paragraphs, descriptions & muted labels
- accentPrimary: #7D1B0C — Primary interactive CTA & brand highlight (40px (Pill))
- accentSecondary: #FDFDFC — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Newsreader; body: Inter; mono: SF Mono
- Hero H1: 44px | line-height 47.5px (leading-[1.08]) | letter-spacing -0.88px (tracking-[-0.02em]) | weight 500 (font-[500]) | color #21201C (text-[#21201C]) | font Newsreader
- Section H2 (Primary): 44px | line-height 48px (leading-[1.09]) | letter-spacing -1.6px (tracking-[-0.036em]) | weight 500 (font-[500]) | color #FFF4EC (text-[#FFF4EC]) | font Newsreader
- Section H2 (Secondary): 25.3px | line-height 29.1px (leading-[1.15]) | letter-spacing 0px (tracking-[0em]) | weight 500 (font-[500]) | color #21201C (text-[#21201C]) | font Newsreader
- Card / Feature H3: 30px | line-height 33.6px (leading-[1.12]) | letter-spacing -0.6px (tracking-[-0.02em]) | weight 400 (font-[400]) | color #21201C (text-[#21201C]) | font ui-serif

## Components
- Primary button: height 44px, padding 10px 20px, radius 40px, bg #21201C, text #0000EE, 12px / 400
- Card: bg #F1F0EF, border 1px solid rgba(38, 38, 26, 0.08), radius 12px, padding 4px 4px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Loops’s exact #FDFDFC canvas and #F9F9F8 surface pairing.
- NEVER replace Newsreader display typography or ignore its signature scale (44px / -0.02em (w500)).
- NEVER use thick opaque borders that clash with #E9E8E6 (1px solid #E9E8E6).
- NEVER deviate from the signature button geometry (40px (Pill)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with SF Mono.

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

npx taste-skill add loops