How to build a UI in the Attio style

:root {
  /* Attio style — extracted from attio.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F3F4F6;
  --text: #1C1D1F;
  --text-muted: #6F7988;
  --accent: #1C1D1F;
  --border: #E4E7EC;
  --font-heading: interDisplay, 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: 64px;
  --h1-tracking: 0em;
  --h1-weight: 600;
  --radius-button: 10px;
  --radius-common: 8px;
  --shadow-common: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px;
  --ease: cubic-bezier(0, 0, 0, 1);
  --duration: 0.5s;
}

// tailwind.config.js — Attio style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F3F4F6",
        ink: "#1C1D1F",
        muted: "#6F7988",
        accent: "#1C1D1F",
        line: "#E4E7EC",
      },
      fontFamily: {
        heading: ["interDisplay", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["64px", { letterSpacing: "0em", fontWeight: "600" }] },
      borderRadius: { button: "10px", card: "8px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0, 0, 0, 1)" },
    },
  },
};

---
name: attio-style
description: Build UI in the Attio visual style (Next-Gen CRM Spreadsheet-Grid Precision & Inter Display). Use when the user asks for a Attio-like look.
---

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

## Tokens
- canvasBg: #FFFFFF — Primary Attio page canvas
- surfaceElevated: #F3F4F6 — Primary elevated card & bento surface
- surfaceSecondary: #FAFAFB — Secondary interactive container / hover fill
- borderPrimary: #E4E7EC — Primary structural divider (1px solid #E4E7EC)
- borderSecondary: rgba(0, 0, 0, 0.05) — Secondary nested module or pill border
- textPrimary: #1C1D1F — Hero H1, section H2 & high-contrast foreground
- textMuted: #6F7988 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #1C1D1F — Primary interactive CTA & brand highlight (10px)
- accentSecondary: #101010 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: interDisplay; body: Inter; mono: JetBrains Mono
- Hero H1: 64px | line-height 60.8px (leading-[0.95]) | letter-spacing -1.28px (tracking-[-0.02em]) | weight 600 (font-[600]) | color #1C1D1F (text-[#1C1D1F]) | font interDisplay
- Section H2 (Primary): 56px | line-height 56px (leading-[1]) | letter-spacing -0.84px (tracking-[-0.015em]) | weight 500 (font-[500]) | color #FFFFFF (text-white) | font interDisplay
- Section H2 (Secondary): 40px | line-height 44px (leading-[1.1]) | letter-spacing -0.4px (tracking-[-0.01em]) | weight 500 (font-[500]) | color #1C1D1F (text-[#1C1D1F]) | font interDisplay
- Card / Feature H3: 24px | line-height 27.6px (leading-[1.15]) | letter-spacing -0.24px (tracking-[-0.01em]) | weight 500 (font-[500]) | color #1C1D1F (text-[#1C1D1F]) | font interDisplay

## Components
- Primary button: height 36px, padding 0px 12px, radius 10px, bg #FFFFFF, text #2E3238, 14px / 500
- Card: bg #F3F4F6, border none, radius 16px, padding 0px 6px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Attio’s exact #FFFFFF canvas and #F3F4F6 surface pairing.
- NEVER replace interDisplay display typography or ignore its signature scale (64px / 0.95 (w600)).
- NEVER use thick opaque borders that clash with #E4E7EC (1px solid #E4E7EC).
- 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/attio/

npx taste-skill add attio