Cursor

Reference it for

• A dev-tool product site that refuses dark mode — warm-cream on slate-text is unexpected in the category and is the brand's biggest differentiator.
• A theme-token semantic naming pattern: bg-theme-bg, text-theme-text, bg-theme-card-hex. Tailwind classes that point at CSS variables. Lets the same components serve dark and light themes via root-class swap.
• Bespoke display face + serif body face as a one-two punch: CursorGothic for confidence, EB Garamond at 17.28px for the editorial paragraphs. Both choices fight the SaaS-default Inter monoculture.
• Tailwind's default easing cubic at 0.15s for everything that hovers — cubic-bezier(0.4, 0, 0.2, 1). The 31-hit count on the full color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to shorthand reveals every interactive element is using Tailwind's transition-colors utility (which expands to this shorthand). Consistent and ergonomic.
• The 0.14s expo-out micro-animation (opacity 0.14s cubic-bezier(0.25, 1, 0.5, 1)) for in-app micro-reveals. Faster than Anthropic's 0.8s and even snappier than Linear's 0.16s — the right speed for showing live IDE-style updates.
• Pill buttons with border-radius: 3.35544e+07px (= 2^25, max-rounded). Both primary and secondary use the full pill shape. Hover swaps text/bg in 150ms.
• A tiny H1 (26px) with the burden of selling carried by below-the-fold animated product panels. Works specifically for a category where the buyer already knows the product type and wants proof-of-craft.
• A bg-theme-card-hex (#f2f1ed) footer — slightly darker than the page bg, no mode flip. The page closes with warmth rather than contrast.

Do not copy

• CursorGothic — bespoke and not licensable. Substitute the client's own humanist sans.
• The exact warm-cream #f7f7f4 on #f2f1ed palette — Cursor-coded after this site went live. Pick the client's own warm-neutral pair.
• The 119 @font-face declarations. Cursor loads CursorGothic Regular/Medium/Bold + EB Garamond Regular/Italic + Berkeley Mono + Lato + system-ui fallbacks across multiple subsets. ~21 font files actually fetched. An Astro rebuild should aggressively subset and only ship rendered weights.
• The 88-script + 21-font + 212-request network bill. Most are marketing pixels (Reddit, TikTok, LinkedIn, Facebook, Snap, Google). Pick the 2-3 that drive actual paid attribution.
• The min-h-screen pt-[var(--site-header-height)] body padding trick with a fixed header. Works on Cursor because the header is a slim 52px; on a denser nav this pattern creates layout-shift problems.
• The H1 at 26px without earning it. Cursor can get away with a tiny hero headline because the IDE-replay panels below carry the brand. Most Jiffi clients need a 48-80px H1 to do equivalent work.