{"id":"4e3b4717-84c8-4599-baaf-a343c3d619b6","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/4e3b4717-84c8-4599-baaf-a343c3d619b6","originalSiteUrl":"https://cursor.com","capturedAt":"2026-04-28T23:43:13.712Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Cursor","summary":"Warm ivory software studio.","description":"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.","industry":"devtools","colorScheme":"light","colors":[{"name":"Canvas Parchment","hex":"#f7f7f4","role":"Page backgrounds, card backgrounds, neutral button backgrounds — provides a soft, warm foundation.","group":"neutral"},{"name":"Inkwell","hex":"#262510","role":"Primary text, strong borders, navigation text — grounds the lighter surfaces with significant contrast.","group":"neutral"},{"name":"Muted Stone","hex":"#7a7974","role":"Secondary text, subtle borders, icon fills — a mid-tone gray for less prominent information or structural lines.","group":"neutral"},{"name":"Deep Shadow","hex":"#141414","role":"Deepest text variant — for maximum contrast on headlines or critical information.","group":"neutral"},{"name":"Pebble Gray","hex":"#e6e5e0","role":"Hover states on neutral buttons, subtle card backgrounds — visually lighter than Canvas Parchment, indicating elevation.","group":"neutral"},{"name":"Onyx Outline","hex":"#f54e00","role":"Outlined action button borders and link text — a vibrant orange indicating interactive elements without a solid fill.","group":"accent"},{"name":"Chartreuse Alert","hex":"#4ade80","role":"supporting accents, small interactive text snippets — a vivid green for positive or noteworthy cues, often within code examples.","group":"accent"},{"name":"Goldenrod Accent","hex":"#c08532","role":"Accent for specific interactive states or icons, often found in button backgrounds for 'Build' actions.","group":"accent"},{"name":"Forest Green Action","hex":"#34785c","role":"Specific button backgrounds/borders like 'View PR' — a moderate green for distinct, yet secondary actions.","group":"accent"},{"name":"Highlight Beige","hex":"#cdcdc9","role":"Subtle card backgrounds on nested elements, faint border color — a light neutral for separation with low visual weight.","group":"neutral"}],"typography":[{"role":"Primary UI text for headlines, navigation items, and larger body copy. The custom font with precise letter-spacing and stylistic alternates (\"ss09\", \"ss08\", \"tnum\") creates a technically sophisticated, almost code-like feel.","sizes":"13px, 14px, 16px, 22px, 26px, 36px, 72px","family":"CursorGothic","weight":"400","lineHeight":"1.00, 1.10, 1.20, 1.25, 1.30, 1.43, 1.50","substitute":"system-ui","letterSpacing":"-0.45, -0.35, -0.19, -0.08, 0.08, 0.18","fontFeatureSettings":"\"ss09\", \"ss08\", \"tnum\""},{"role":"Code snippets, input text, and small descriptive body copy. The monospaced nature reinforces the developer tool identity.","sizes":"12px, 13px","family":"berkeleyMono","weight":"400, 500","lineHeight":"1.21, 1.43, 1.50, 1.63, 1.67","substitute":"monospace","letterSpacing":""},{"role":"Secondary and utility text across various components like buttons, links, and small informational sections. Its geometric sans-serif quality adds versatility.","sizes":"10px, 12px, 14px, 16px","family":"Lato","weight":"400, 600","lineHeight":"1.10, 1.27, 1.33, 1.50","substitute":"sans-serif","letterSpacing":"0.06"},{"role":"EB Garamond — detected in extracted data but not described by AI","sizes":"16px","family":"EB Garamond","weight":"400, 500","lineHeight":"1, 1.5"},{"role":"-apple-system — detected in extracted data but not described by AI","sizes":"16px","family":"-apple-system","weight":"400","lineHeight":"1.5"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.1,"letterSpacing":0.06},{"role":"body-lg","size":14,"lineHeight":1.43,"letterSpacing":0.08},{"role":"heading-sm","size":22,"lineHeight":1.25,"letterSpacing":-0.08},{"role":"heading","size":26,"lineHeight":1.2,"letterSpacing":-0.35},{"role":"heading-lg","size":36,"lineHeight":1.1,"letterSpacing":-0.45},{"role":"display","size":72,"lineHeight":1,"letterSpacing":-2.16}],"spacing":{"radius":{"cards":"4px","buttons":"4px","general":"4px","prominent":"8px"},"elementGap":"8px","sectionGap":"43px","cardPadding":"12px","pageMaxWidth":"1300px"},"radius":{"cards":"4px","buttons":"4px","general":"4px","prominent":"8px"},"shadows":{"surfaces":[{"hex":"#f7f7f4","name":"Canvas Parchment","level":0,"purpose":"Base page background, light card surfaces."},{"hex":"#e6e5e0","name":"Pebble Gray","level":1,"purpose":"Elevated card backgrounds, hover states, subtle section differentiation."},{"hex":"#cdcdc9","name":"Highlight Beige","level":2,"purpose":"Nesting card elements, subtle background variations within components."}]},"guidelines":{"do":["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."],"dont":["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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Trusted By — Brand Grid","role":""},{"name":"Cursor Agent Activity Card","role":""},{"name":"Primary Filled Button","role":"Interactive element"},{"name":"Ghost Action Button","role":"Interactive element"},{"name":"Outlined Accent Button","role":"Interactive element"},{"name":"Elevated Content Card","role":"Content container"},{"name":"Flat Background Card","role":"Content container"},{"name":"Text Input Field","role":"Form element"},{"name":"Icon Button","role":"Interactive element"},{"name":"Branding Card","role":"Informational display"}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419771947-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419771947-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/4e3b4717-84c8-4599-baaf-a343c3d619b6-1777551922358-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/4e3b4717-84c8-4599-baaf-a343c3d619b6-1777551922358-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/4e3b4717-84c8-4599-baaf-a343c3d619b6-1777551922358-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/4e3b4717-84c8-4599-baaf-a343c3d619b6-1777551922358-preview-detail-poster.jpg"},"similarStyleIds":["742b500d-3e10-4daa-bb89-d0d26272e5f6","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","e869e214-f672-4ac3-bfc2-bd25de7b003b","90ce5883-bb24-4466-93f7-801cd617b0d1","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","c9cabb96-32fa-4896-837a-f2497ce1c856","720c9806-2d70-4dd1-9a19-12efd71fc742","607c2098-bbbb-40bb-b23e-adf2b72c63dd","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","031056ff-7af1-46db-8daa-115f731c5d26","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","29567671-da1e-4f85-ae52-8b611fecc384","c45b115b-dcb5-446d-8952-85aef740f8e4","c8c22958-ec50-47f1-aedc-a131d7aeb442","7b083729-e694-4b66-82a3-befb08451722","b458ca1a-70f0-4f85-b745-f879a4d08457","c60a19c1-259a-4001-95d9-6a3826f5c06e","fe955d4a-c56d-4ab0-a6b3-8d985ab9570c","418b374a-be64-44f0-b17e-1d45308c7e62"],"exports":{"designMdUrl":"/references/refero/4e3b4717-84c8-4599-baaf-a343c3d619b6/design.md","tokensJsonUrl":"/references/refero/4e3b4717-84c8-4599-baaf-a343c3d619b6/tokens.json","tailwindV4Url":"/references/refero/4e3b4717-84c8-4599-baaf-a343c3d619b6/tailwind-v4.css","cssVariablesUrl":"/references/refero/4e3b4717-84c8-4599-baaf-a343c3d619b6/tailwind-v4.css"}}