Cursor

Cursor's design language evokes a functional, precise studio environment, blending the tactile feel of physical tools with the clean, digital interface of modern software. A foundation of warm, off-white backgrounds (#f7f7f4) and subtle, multi-layered shadows create a sense of depth and hierarchy, mimicking stacked, floating interface elements. Typography is highly refined, utilizing custom mono and gothic fonts with precise letter-spacing and stylistic alternates that convey technical sophistication. Use CursorGothic for all headings and primary UI text, applying precise letter-spacing values (e.g., -0.45px at 72px, -0.08px at 22px). Elevate content with the multi-layered shadow token: rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px. Apply Canvas Parchment (#f7f7f4) as the primary background for all major page sections and UI elements. Reserve Onyx Outline (#f54e00) exclusively for outlined interactive elements or prominent link text to signal primary action. Use 4px border-radius for most general rounded elements like cards and buttons, with 8px radius for more visually distinct components. Maintain a compact information density with an 8px element gap between related UI elements. Ensure input fields use a transparent background with Muted Stone (#7a7974) for borders, prioritizing readability of the input over strong visual containment. Do not use solid background colors for primary call-to-action buttons; prefer bordered actions with Onyx Outline (#f54e00). Avoid arbitrary shadow values; adhere strictly to the defined multi-layered shadow for all elevated cards and elements. Never use purely achromatic grays for primary text or borders; always use Inkwell (#26251e) or Muted Stone (#7a7974). Do not introduce new font families or weights beyond CursorGothic (400), Lato (400, 600), and berkeleyMono (400, 500). Do not use the vivid accent color Onyx Outline (#f54e00) as a background fill for any component. Avoid large, uncontained background images; all visuals should appear within component bounds or as subtle, textural overlays. Do not vary letter-spacing for standard body text or inputs; only apply the specified letter-spacing values for CursorGothic headlines.