{"id":"4e3b4717-84c8-4599-baaf-a343c3d619b6","name":"Cursor","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","colors":[{"name":"Canvas Parchment","hex":"#f7f7f4","role":"Page backgrounds, card backgrounds, neutral button backgrounds — provides a soft, warm foundation.","group":"neutral","cssVariable":"--color-canvas-parchment"},{"name":"Inkwell","hex":"#262510","role":"Primary text, strong borders, navigation text — grounds the lighter surfaces with significant contrast.","group":"neutral","cssVariable":"--color-inkwell"},{"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","cssVariable":"--color-muted-stone"},{"name":"Deep Shadow","hex":"#141414","role":"Deepest text variant — for maximum contrast on headlines or critical information.","group":"neutral","cssVariable":"--color-deep-shadow"},{"name":"Pebble Gray","hex":"#e6e5e0","role":"Hover states on neutral buttons, subtle card backgrounds — visually lighter than Canvas Parchment, indicating elevation.","group":"neutral","cssVariable":"--color-pebble-gray"},{"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","cssVariable":"--color-onyx-outline"},{"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","cssVariable":"--color-chartreuse-alert"},{"name":"Goldenrod Accent","hex":"#c08532","role":"Accent for specific interactive states or icons, often found in button backgrounds for 'Build' actions.","group":"accent","cssVariable":"--color-goldenrod-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","cssVariable":"--color-forest-green-action"},{"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","cssVariable":"--color-highlight-beige"}],"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"}],"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."]}}