JL
Design systems

Cursor

Warm cream canvas, one orange action

Design SystemLight theme

Color

  • primary

    #f54e00

  • primary-active

    #d04200

  • ink

    #26251e

  • body

    #5a5852

  • body-strong

    {ink}

  • muted

    #807d72

  • muted-soft

    #a09c92

  • hairline

    #e6e5e0

  • hairline-soft

    #efeee8

  • hairline-strong

    #cfcdc4

  • canvas

    #f7f7f4

  • canvas-soft

    #fafaf7

  • surface-card

    #ffffff

  • surface-strong

    #e6e5e0

  • on-primary

    #ffffff

  • timeline-thinking

    #dfa88f

  • timeline-grep

    #9fc9a2

  • timeline-read

    #9fbbe0

  • timeline-edit

    #c0a8dd

  • timeline-done

    #c08532

  • semantic-error

    #cf2d56

  • semantic-success

    #1f8a65

Typography

sans
"CursorGothic", Inter, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif
mono
"JetBrains Mono", "Fira Code", monospace

Display

  • display-mega

    72px / 1.1 · 400 · -2.16px

    display-mega

  • display-lg

    36px / 1.2 · 400 · -0.72px

    display-lg

  • display-md

    26px / 1.25 · 400 · -0.325px

    display-md

  • display-sm

    22px / 1.3 · 400 · -0.11px

    display-sm

Text

  • title-md

    18px / 1.4 · 600 · 0

    title-md

  • title-sm

    16px / 1.4 · 600 · 0

    title-sm

  • body-md

    16px / 1.5 · 400 · 0

    body-md

  • body-tracked

    16px / 1.5 · 400 · 0.08px

    body-tracked

  • body-sm

    14px / 1.5 · 400 · 0

    body-sm

  • caption

    13px / 1.4 · 400 · 0

    caption

  • caption-uppercase

    11px / 1.4 · 600 · 0.88px

    caption-uppercase

  • button

    14px / 1 · 500 · 0

    button

  • nav-link

    14px / 1.4 · 500 · 0

    nav-link

Code

  • code

    13px / 1.5 · 400 · 0

    code

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-base

    16px

  • space-md

    20px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-section

    80px

  • space-footer

    64px

  • space-cta-band

    96px

Radius

  • radius-none

    0px

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    12px

  • radius-xl

    16px

  • radius-pill

    9999px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

Components

  • Buttons

    Buttons are 8px-radius rectangles in four kinds: the orange primary, the white secondary, the ink download button and the plain text link.

    • Do use cur-btn--primary (primary, on-primary label, radius-md, size-button-height) for the single main action in a view. Its pressed fill is primary-active.
    • Do pair a white cur-btn--secondary (surface-card, ink label, 1px hairline-strong border) with the primary; its padding is 9px 17px so it matches the primary's outer size.
    • Do use cur-btn--download (ink fill, canvas label, size-download-height) for a download call to action, followed by a cur-btn--text link.
    • Do set labels in button (14px, weight 500) and keep them one short phrase.
    • Don't add a second action colour, a pill shape or a drop shadow (shadow-none).
    • Don't expect a hover style: the source documents none. The pressed state is the only one.
    • Known failing pair kept exact: the on-primary label on primary is 3.52:1 (see the token note).

  • Cards

    Cards are white surface-card panels with a 1px hairline and 12px corners, in feature, comparison, testimonial and pricing kinds, plus the editor mockup card and the code block.

    • Do give every card surface-card, a 1px hairline outline and radius-lg, with space-lg padding (feature, comparison, testimonial) or space-xl (pricing).
    • Do set the title in title-md in ink and the copy in body-md in body.
    • Do invert the featured pricing tier to ink with canvas text instead of adding a ribbon or a colour.
    • Do set code in code (JetBrains Mono) on every code surface: cur-code-block (space-md padding) and cur-ide-pane (canvas-soft, radius-md, space-base padding).
    • Do use the five timeline pills only inside an agent timeline. Their label is caption-uppercase, ink on the pastel, except cur-pill--done, whose on-primary label is 3.16:1 (kept exact from the source).
    • Don't add drop shadows or a coloured edge; depth is the hairline and the white-on-cream step.
    • Don't use the timeline-* colours for status, buttons or decoration elsewhere.

  • Inputs

    The text input is a 44px white field with 8px corners and a 16px value, with message lines for errors and confirmations.

    • Do set the field on canvas with surface-card fill, ink text in body-md, radius-md, size-input-height and a 12px 16px padding.
    • Do show the focus ring as a 2px solid ink outline offset 2px; the source gives no focus colour, so this is a preview choice.
    • Do report errors in semantic-error and confirmations in semantic-success, with the word "Error" or "Confirmed" in the message.
    • Don't expect a border: the source gives none, so the white field sits on cream at 1.07:1. Place it where a label and surrounding layout make the field findable.
    • Don't use muted placeholder text or muted-soft disabled text for content a reader needs: muted is 4.12:1 on surface-card and muted-soft is 2.74:1 (kept exact from the source). The placeholder colour itself is a preview choice.
    • Don't invent validation styling beyond focus, error and success text; the source documents no more.

  • Navigation

    Navigation is the 64px cream top bar with a wordmark, a text menu and a primary download button, plus the five-column footer.

    • Do set the top bar on canvas at size-nav-height, with labels in nav-link (14px, weight 500) in ink, and end it with a sign-in link and one cur-btn--primary.
    • Do collapse the menu to a hamburger below 768px, as the source states; the second bar in the preview shows a text "Menu" stand-in because no icons are included.
    • Do set the footer on canvas with space-footer and space-xxl padding, text in body-sm in body, five columns on desktop.
    • Don't colour the wordmark placeholder primary at small sizes: orange text is 3.28:1 on canvas. The source colours the real wordmark orange.
    • Don't add a border or shadow under the bar; the source defines none (shadow-none).
    • The source gives no side inset for the bar; the preview uses space-lg, which is a preview choice.