Studio
Studio
Cursor tasarım sistemi açık temalı bir arayüz dili kullanıyor. Ana marka rengi Onyx Outline (#f54e00); metinler Inkwell (#262510), arka plan Canvas Parchment (#f7f7f4). Tipografide CursorGothic, berkeleyMono ve Lato kullanılıyor. Bu DESIGN.md dosyası 10 renk token'ı ve 6 kademeli bir yazı ölçeği içeriyor; Claude, Cursor veya v0 gibi yapay zekâ araçlarına verildiğinde Cursor tarzında tutarlı arayüzler üretmelerine yardımcı olur.
Bağımsız Stil İncelemesi
Warm ivory software studio.
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.
| Renk | HEX | CSS token | Kullanım (İngilizce) |
|---|---|---|---|
| Canvas Parchment | #f7f7f4 | --color-canvas-parchment | Page backgrounds, card backgrounds, neutral button backgrounds — provides a soft, warm foundation. |
| Inkwell | #262510 | --color-inkwell | Primary text, strong borders, navigation text — grounds the lighter surfaces with significant contrast. |
| Muted Stone | #7a7974 | --color-muted-stone | Secondary text, subtle borders, icon fills — a mid-tone gray for less prominent information or structural lines. |
| Deep Shadow | #141414 | --color-deep-shadow | Deepest text variant — for maximum contrast on headlines or critical information. |
| Pebble Gray | #e6e5e0 | --color-pebble-gray | Hover states on neutral buttons, subtle card backgrounds — visually lighter than Canvas Parchment, indicating elevation. |
| Onyx Outline | #f54e00 | --color-onyx-outline | Outlined action button borders and link text — a vibrant orange indicating interactive elements without a solid fill. |
| Chartreuse Alert | #4ade80 | --color-chartreuse-alert | supporting accents, small interactive text snippets — a vivid green for positive or noteworthy cues, often within code examples. |
| Goldenrod Accent | #c08532 | --color-goldenrod-accent | Accent for specific interactive states or icons, often found in button backgrounds for 'Build' actions. |
| Forest Green Action | #34785c | --color-forest-green-action | Specific button backgrounds/borders like 'View PR' — a moderate green for distinct, yet secondary actions. |
| Highlight Beige | #cdcdc9 | --color-highlight-beige | Subtle card backgrounds on nested elements, faint border color — a light neutral for separation with low visual weight. |
| Font | Ağırlıklar | Yedek font |
|---|---|---|
| CursorGothic | 400 | system-ui |
| berkeleyMono | 400, 500 | monospace |
| Lato | 400, 600 | sans-serif |
| EB Garamond | 400, 500 | |
| -apple-system | 400 |
| Rol | Boyut | Satır yüksekliği | Token |
|---|---|---|---|
| caption | 10px | 1.1 | --text-caption |
| body-lg | 14px | 1.43 | --text-body-lg |
| heading-sm | 22px | 1.25 | --text-heading-sm |
| heading | 26px | 1.2 | --text-heading |
| heading-lg | 36px | 1.1 | --text-heading-lg |
| display | 72px | 1 | --text-display |
Tasarım Sistemleri
