④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,312 @@
|
||||
# Design System Inspired by Cursor
|
||||
|
||||
> Category: Developer Tools
|
||||
> AI-first code editor. Sleek dark interface, gradient accents.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.
|
||||
|
||||
The custom CursorGothic font is the typographic signature -- a gothic sans-serif with aggressive negative letter-spacing at display sizes (-2.16px at 72px) that creates a compressed, engineered feel. As a secondary voice, the jjannon serif font (with OpenType `"cswh"` contextual swash alternates) provides literary counterpoint for body copy and editorial passages. The monospace voice comes from berkeleyMono, a refined coding font that connects the marketing site to Cursor's core identity as a code editor. This three-font system (gothic display, serif body, mono code) gives Cursor one of the most typographically rich palettes in developer tooling.
|
||||
|
||||
The border system is particularly distinctive -- Cursor uses `oklab()` color space for border colors, applying warm brown at various alpha levels (0.1, 0.2, 0.55) to create borders that feel organic rather than mechanical. The signature border color `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` is not a simple rgba value but a perceptually uniform color that maintains visual consistency across different backgrounds.
|
||||
|
||||
**Key Characteristics:**
|
||||
- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings
|
||||
- jjannon serif for body text with OpenType `"cswh"` (contextual swash alternates)
|
||||
- berkeleyMono for code and technical labels
|
||||
- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
|
||||
- Primary text color `#26251e` (warm near-black with yellow undertone)
|
||||
- Accent orange `#f54e00` for brand highlight and links
|
||||
- oklab-space borders at various alpha levels for perceptually uniform edge treatment
|
||||
- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)
|
||||
- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cursor Dark** (`#26251e`): Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.
|
||||
- **Cursor Cream** (`#f2f1ed`): Page background, primary surface. Not white but a warm cream that sets the entire warm tone.
|
||||
- **Cursor Light** (`#e6e5e0`): Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.
|
||||
- **Pure White** (`#ffffff`): Used sparingly for maximum contrast elements and specific surface highlights.
|
||||
- **True Black** (`#000000`): Minimal use, specific code/console contexts.
|
||||
|
||||
### Accent
|
||||
- **Cursor Orange** (`#f54e00`): Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.
|
||||
- **Gold** (`#c08532`): Secondary accent, warm gold for premium or highlighted contexts.
|
||||
|
||||
### Semantic
|
||||
- **Error** (`#cf2d56`): `--color-error`. A warm crimson-rose rather than cold red.
|
||||
- **Success** (`#1f8a65`): `--color-success`. A muted teal-green, warm-shifted.
|
||||
|
||||
### Timeline / Feature Colors
|
||||
- **Thinking** (`#dfa88f`): Warm peach for "thinking" state in AI timeline.
|
||||
- **Grep** (`#9fc9a2`): Soft sage green for search/grep operations.
|
||||
- **Read** (`#9fbbe0`): Soft blue for file reading operations.
|
||||
- **Edit** (`#c0a8dd`): Soft lavender for editing operations.
|
||||
|
||||
### Surface Scale
|
||||
- **Surface 100** (`#f7f7f4`): Lightest button/card surface, barely tinted.
|
||||
- **Surface 200** (`#f2f1ed`): Primary page background.
|
||||
- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.
|
||||
- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.
|
||||
- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.
|
||||
|
||||
### Border Colors
|
||||
- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`): Standard border, 10% warm brown in oklab space.
|
||||
- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`): Emphasized border, 20% warm brown.
|
||||
- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.
|
||||
- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.
|
||||
- **Border Light** (`#f2f1ed`): Light border matching page background.
|
||||
|
||||
### Shadows & Depth
|
||||
- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.
|
||||
- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display/Headlines**: `CursorGothic`, with fallbacks: `CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`
|
||||
- **Body/Editorial**: `jjannon`, with fallbacks: `Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`
|
||||
- **Code/Technical**: `berkeleyMono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
|
||||
- **UI/System**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Helvetica Neue, Arial`
|
||||
- **Icons**: `CursorIcons16` (icon font at 14px and 12px)
|
||||
- **OpenType Features**: `"cswh"` on jjannon body text, `"ss09"` on CursorGothic buttons/captions
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | Maximum compression, hero statements |
|
||||
| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | Feature sections, CTA headlines |
|
||||
| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | Card headings, sub-sections |
|
||||
| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | Smaller titles, list headings |
|
||||
| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | Editorial body with `"cswh"` |
|
||||
| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | Standard body text, descriptions |
|
||||
| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI body text |
|
||||
| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |
|
||||
| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `"ss09"` |
|
||||
| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |
|
||||
| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |
|
||||
| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |
|
||||
| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |
|
||||
| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |
|
||||
| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |
|
||||
| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |
|
||||
| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |
|
||||
| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |
|
||||
|
||||
### Principles
|
||||
- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.
|
||||
- **Serif for soul**: jjannon provides literary warmth. The `"cswh"` feature adds contextual swash alternates that give body text a calligraphic quality.
|
||||
- **Three typographic voices**: Gothic (display/UI), serif (editorial/body), mono (code/technical). Each serves a distinct communication purpose.
|
||||
- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Warm Surface)**
|
||||
- Background: `#ebeae5` (Surface 300)
|
||||
- Text: `#26251e` (Cursor Dark)
|
||||
- Padding: 10px 12px 10px 14px
|
||||
- Radius: 8px
|
||||
- Outline: none
|
||||
- Hover: text shifts to `var(--color-error)` (`#cf2d56`)
|
||||
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Use: Primary actions, main CTAs
|
||||
|
||||
**Secondary Pill**
|
||||
- Background: `#e6e5e0` (Surface 400)
|
||||
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
|
||||
- Padding: 3px 8px
|
||||
- Radius: full pill (33.5M px)
|
||||
- Hover: text shifts to `var(--color-error)`
|
||||
- Use: Tags, filters, secondary actions
|
||||
|
||||
**Tertiary Pill**
|
||||
- Background: `#e1e0db` (Surface 500)
|
||||
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
|
||||
- Radius: full pill
|
||||
- Use: Active filter state, selected tags
|
||||
|
||||
**Ghost (Transparent)**
|
||||
- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)
|
||||
- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
|
||||
- Padding: 6px 12px
|
||||
- Use: Tertiary actions, dismiss buttons
|
||||
|
||||
**Light Surface**
|
||||
- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)
|
||||
- Text: `#26251e` or `oklab(0.263 / 0.9)` (90%)
|
||||
- Padding: 0px 8px 1px 12px
|
||||
- Use: Dropdown triggers, subtle interactive elements
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#e6e5e0` or `#f2f1ed`
|
||||
- Border: `1px solid oklab(0.263 / 0.1)` (warm brown at 10%)
|
||||
- Radius: 8px (standard), 4px (compact), 10px (featured)
|
||||
- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards
|
||||
- Hover: shadow intensification
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: transparent or surface
|
||||
- Text: `#26251e`
|
||||
- Padding: 8px 8px 6px (textarea)
|
||||
- Border: `1px solid oklab(0.263 / 0.1)`
|
||||
- Focus: border shifts to `oklab(0.263 / 0.2)` or accent orange
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on warm cream background
|
||||
- Cursor logotype left-aligned (~96x24px)
|
||||
- Links: 14px CursorGothic or system-ui, weight 500
|
||||
- CTA button: warm surface with Cursor Dark text
|
||||
- Tab navigation: bottom border `1px solid oklab(0.263 / 0.1)` with active tab differentiation
|
||||
|
||||
### Image Treatment
|
||||
- Code editor screenshots with `1px solid oklab(0.263 / 0.1)` border
|
||||
- Rounded corners: 8px standard
|
||||
- AI chat/timeline screenshots dominate feature sections
|
||||
- Warm gradient or solid cream backgrounds behind hero images
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**AI Timeline**
|
||||
- Vertical timeline showing AI operations: thinking (peach), grep (sage), read (blue), edit (lavender)
|
||||
- Each step uses its semantic color with matching text
|
||||
- Connected with vertical lines
|
||||
- Core visual metaphor for Cursor's AI-first coding experience
|
||||
|
||||
**Code Editor Previews**
|
||||
- Dark code editor screenshots with warm cream border frame
|
||||
- berkeleyMono for code text
|
||||
- Syntax highlighting using timeline colors
|
||||
|
||||
**Pricing Cards**
|
||||
- Warm surface backgrounds with bordered containers
|
||||
- Feature lists using jjannon serif for readability
|
||||
- CTA buttons with accent orange or primary dark styling
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)
|
||||
- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)
|
||||
- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px
|
||||
- Notable: fine-grained sub-8px increments for precise icon/text alignment
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous top padding (80-120px)
|
||||
- Feature sections: 2-3 column grids for cards and features
|
||||
- Full-width sections with warm cream or slightly darker backgrounds
|
||||
- Sidebar layouts for documentation and settings pages
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.
|
||||
- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.
|
||||
- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (1.5px): Fine detail elements
|
||||
- Small (2px): Inline elements, code spans
|
||||
- Medium (3px): Small containers, inline badges
|
||||
- Standard (4px): Cards, images, compact buttons
|
||||
- Comfortable (8px): Primary buttons, cards, menus
|
||||
- Featured (10px): Larger containers, featured cards
|
||||
- Full Pill (33.5M px / 9999px): Pill buttons, tags, badges
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Border Ring (Level 1) | `oklab(0.263 / 0.1) 0px 0px 0px 1px` | Standard card/container border (warm oklab) |
|
||||
| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |
|
||||
| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |
|
||||
| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |
|
||||
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |
|
||||
|
||||
**Shadow Philosophy**: Cursor's depth system is built around two ideas. First, borders use perceptually uniform oklab color space rather than rgba, ensuring warm brown borders look consistent across different background tones. Second, elevation shadows use dramatically large blur values (28px, 70px) with moderate opacity (0.14, 0.1), creating a diffused, atmospheric lift rather than hard-edged drop shadows. Cards don't feel like they float above the page -- they feel like the page has gently opened a space for them.
|
||||
|
||||
### Decorative Depth
|
||||
- Warm cream surface variations create subtle tonal depth without shadows
|
||||
- oklab borders at 10% and 20% create a spectrum of edge definition
|
||||
- No harsh divider lines -- section separation through background tone shifts and spacing
|
||||
|
||||
## 7. Interaction & Motion
|
||||
|
||||
### Hover States
|
||||
- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity
|
||||
- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`
|
||||
- Cards: shadow intensification on hover (ambient → elevated)
|
||||
|
||||
### Focus States
|
||||
- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication
|
||||
- Border focus: `oklab(0.263 / 0.2)` (20% border) for input/form focus
|
||||
- Consistent warm tone in all focus states -- no cold blue focus rings
|
||||
|
||||
### Transitions
|
||||
- Color transitions: 150ms ease for text/background color changes
|
||||
- Shadow transitions: 200ms ease for elevation changes
|
||||
- Transform: subtle scale or translate for interactive feedback
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <600px | Single column, reduced padding, stacked navigation |
|
||||
| Tablet Small | 600-768px | 2-column grids begin |
|
||||
| Tablet | 768-900px | Expanded card grids, sidebar appears |
|
||||
| Desktop Small | 900-1279px | Full layout forming |
|
||||
| Desktop | >1279px | Full layout, maximum content width |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)
|
||||
- Pill buttons maintain tap-friendly sizing with 3px-10px padding
|
||||
- Navigation links at 14px with adequate spacing for touch
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing
|
||||
- Navigation: horizontal links → hamburger menu on mobile
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved
|
||||
- Timeline visualization: horizontal → vertical stacking
|
||||
- Section spacing: 80px+ → 48px → 32px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Editor screenshots maintain warm border treatment at all sizes
|
||||
- AI timeline adapts from horizontal to vertical layout
|
||||
- Product screenshots use responsive images with consistent border radius
|
||||
- Full-width hero images scale proportionally
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA background: `#ebeae5` (warm cream button)
|
||||
- Page background: `#f2f1ed` (warm off-white)
|
||||
- Text color: `#26251e` (warm near-black)
|
||||
- Secondary text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
|
||||
- Accent: `#f54e00` (orange)
|
||||
- Error/hover: `#cf2d56` (warm crimson)
|
||||
- Success: `#1f8a65` (muted teal)
|
||||
- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`."
|
||||
- "Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents."
|
||||
- "Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400."
|
||||
- "Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`."
|
||||
- "Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white/black for primary surfaces
|
||||
2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px
|
||||
3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders
|
||||
4. Three fonts, three voices: CursorGothic (display/UI), jjannon (editorial), berkeleyMono (code)
|
||||
5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards
|
||||
6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction
|
||||
7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth
|
||||
8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon/text micro-alignment
|
||||
@@ -0,0 +1,32 @@
|
||||
# Cursor Usage
|
||||
|
||||
Design System 2.0 package guide for OpenDesign agents and reviewers.
|
||||
|
||||
## Read Order
|
||||
|
||||
1. Read this file first to understand the package contract.
|
||||
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
|
||||
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
|
||||
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
|
||||
5. Inspect `preview/` pages when a visual sanity check is useful.
|
||||
|
||||
## Design Highlights
|
||||
|
||||
- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings
|
||||
- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
|
||||
- Primary text color `#26251e` (warm near-black with yellow undertone)
|
||||
- Accent orange `#f54e00` for brand highlight and links
|
||||
|
||||
## Do
|
||||
|
||||
- Preserve the schema token names exactly so cross-brand switching stays reliable.
|
||||
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
|
||||
- Reuse component groups from `components.manifest.json` before inventing new controls.
|
||||
- Treat `source/` files as audit evidence for the bundled fixture backfill.
|
||||
|
||||
## Avoid
|
||||
|
||||
- Avoid raw hex values outside the copied `:root` token block.
|
||||
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
|
||||
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
|
||||
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
|
||||
@@ -0,0 +1,654 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/cursor. Every visible
|
||||
value comes from tokens.css; if the agent paste-replaces the
|
||||
:root block and reuses the component selectors below verbatim,
|
||||
the artifact passes lint without further audit. Cursor's
|
||||
signature moves: warm cream surfaces, three typographic voices
|
||||
(CursorGothic / jjannon / berkeleyMono), oklab borders rendered
|
||||
as rgba fallback, hover-text shifts to --danger crimson, and
|
||||
diffused atmospheric shadows."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from
|
||||
design-systems/cursor/tokens.css. Keep this block in sync
|
||||
when tokens.css changes. The agent prompt instructs the
|
||||
Designer panelist to paste this block as the FIRST thing in
|
||||
their <style>, then reference everything below via var(...). */
|
||||
:root {
|
||||
--bg: #f2f1ed;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
|
||||
--accent: #f54e00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #1f8a65;
|
||||
--warn: #eab308;
|
||||
--danger: #cf2d56;
|
||||
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--text-xs: 11px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.03em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
0 28px 70px rgba(0, 0, 0, 0.14),
|
||||
0 14px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px var(--border);
|
||||
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
/* Body uses jjannon serif. The three-voice system is a brand
|
||||
signature; do not collapse to one font for "simplicity". */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
font-feature-settings: "cswh"; /* contextual swash alternates */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section {
|
||||
/* Cursor's section separation is via tone shift + spacing,
|
||||
not hard rules. The ring is intentionally faint. */
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
/* CursorGothic uses weight 400 almost exclusively; size +
|
||||
tracking carry hierarchy, not weight (DESIGN.md §3.4). */
|
||||
font-weight: 400;
|
||||
}
|
||||
h1 {
|
||||
/* Hero uses --text-4xl=72px with the full -0.03em tracking. */
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
/* 36px section heading: line-height 1.20, tracking -0.72px (-0.02em).
|
||||
Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
|
||||
line-height: 1.20;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-2xl);
|
||||
/* 26px sub-heading: line-height 1.25, tracking -0.325px (-0.0125em).
|
||||
Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.0125em;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
/* Lead body in serif voice — Cursor's editorial signature. */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.35;
|
||||
color: var(--muted);
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.body-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
|
||||
/* `.eyebrow` — uppercase micro label, system-ui voice. Letter
|
||||
spacing is well above craft/typography.md's 0.06em floor. */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────── */
|
||||
/* Cursor's primary CTA is NOT accent-bg — it is warm-surface bg
|
||||
with dark text, signature for the brand. The accent orange
|
||||
appears on link decoration and on the "accent pill" CTA used
|
||||
sparingly (≤1 per screen). The hover signature is a text-color
|
||||
shift to --danger (warm crimson), not bg-darken. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-base) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
/* DESIGN.md §7: focus is depth (4 12 0.1), not halo. */
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
/* Primary — warm-surface CTA. */
|
||||
.btn-primary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
}
|
||||
.btn-primary:hover { color: var(--danger); }
|
||||
.btn-primary:active { background: var(--surface); }
|
||||
/* Secondary — ghost on warm surface. */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
color: var(--danger);
|
||||
border-color: rgba(38, 37, 30, 0.2);
|
||||
}
|
||||
/* Accent pill — used at most once per screen for the loudest CTA.
|
||||
This is the only place on the page where --accent is a bg. */
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 10px 18px;
|
||||
}
|
||||
.btn-accent:hover { background: var(--accent-hover); }
|
||||
.btn-accent:active { background: var(--accent-active); }
|
||||
|
||||
/* ─── Pill tags ─────────────────────────────────────────── */
|
||||
/* Cursor's full-pill (9999px) badges/filters — DESIGN.md §4.1. */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface);
|
||||
color: var(--meta);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pill-active {
|
||||
background: rgba(38, 37, 30, 0.06); /* deeper surface for selected state */
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
}
|
||||
.field input {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgba(38, 37, 30, 0.2);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field-help {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
/* DESIGN.md §7: hover shadow intensification (ambient → elevated). */
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.card-featured {
|
||||
/* Featured card uses the larger 10px radius (DESIGN.md §5.4). */
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 2px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.badge-success {
|
||||
color: var(--success);
|
||||
background: color-mix(in oklab, var(--success), transparent 90%);
|
||||
}
|
||||
.badge-muted {
|
||||
color: var(--muted);
|
||||
background: color-mix(in oklab, var(--muted), transparent 88%);
|
||||
}
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: var(--meta);
|
||||
}
|
||||
|
||||
/* ─── Kbd ───────────────────────────────────────────────── */
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── AI timeline (decorative, signature element) ──────── */
|
||||
/* DESIGN.md §4.7 — Cursor's AI timeline shows four states with
|
||||
soft "warm pastel" colors. These are decorative state markers,
|
||||
intentionally NOT promoted to brand surface tokens. */
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.timeline-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.timeline-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.timeline-thinking .timeline-dot { background: #dfa88f; }
|
||||
.timeline-grep .timeline-dot { background: #9fc9a2; }
|
||||
.timeline-read .timeline-dot { background: #9fbbe0; }
|
||||
.timeline-edit .timeline-dot { background: #c0a8dd; }
|
||||
|
||||
/* ─── Section-specific layout ───────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
/* Asymmetric hero — keeps the page from looking like an
|
||||
AI-default centered template. */
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 420px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — exercises: h1 (CursorGothic 72px / -0.03em),
|
||||
.lead (jjannon serif), .eyebrow, .btn-primary (warm-surface
|
||||
CTA + crimson hover), .btn-accent (orange pill, used once
|
||||
per page max), kbd (berkeleyMono), .badge-success.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · cursor</p>
|
||||
<h1>The editor your team writes through, not at.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
Cursor pairs a serif voice with gothic compression so
|
||||
feature copy reads like a publication and headlines hit
|
||||
like an engineered statement. Three fonts, one warm cream
|
||||
canvas, every value below comes from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-accent">
|
||||
View tokens
|
||||
<svg
|
||||
class="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-primary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm">System status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Stable
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm body-muted">
|
||||
Last reviewed
|
||||
<time datetime="2026-05-14">2026-05-14</time> · v0.1
|
||||
</p>
|
||||
<p class="body-sm body-muted">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURES — exercises: h2, h3, .card (warm surface + hover
|
||||
shadow lift), .body-muted, .pill / .pill-active (full-pill
|
||||
filter row), .features-grid, AI timeline component (the
|
||||
cursor signature element).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 28ch">
|
||||
Every component below uses only var(--*) — no raw hex, no
|
||||
off-token type.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="filter-row" style="margin-block-start: var(--space-6)">
|
||||
<button class="pill pill-active">All</button>
|
||||
<button class="pill">Surfaces</button>
|
||||
<button class="pill">Typography</button>
|
||||
<button class="pill">Motion</button>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start: var(--space-6)">
|
||||
<article class="card">
|
||||
<h3>Warm surfaces</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--bg, --surface, --surface-warm form a three-tier cream
|
||||
ladder. Pure white only inside code panels; the page
|
||||
never reaches it on the canvas.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Three voices</h3>
|
||||
<p class="body-muted body-sm">
|
||||
CursorGothic for display, jjannon serif for body,
|
||||
berkeleyMono for code. Each voice carries one role; the
|
||||
system never collapses to two faces.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the spec →</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-featured">
|
||||
<h3>oklab borders</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Borders ship as rgba fallbacks of the oklab originals at
|
||||
0.1 / 0.06 alpha — perceptually uniform across every
|
||||
warm surface.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect borders →</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="timeline" style="margin-block-start: var(--space-8); max-width: 480px">
|
||||
<p class="eyebrow">AI timeline · signature element</p>
|
||||
<div class="timeline-step timeline-thinking">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>thinking…</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-grep">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>grep "tokens.css" -r design-systems/</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-read">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>read default/tokens.css</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-edit">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>edit cursor/tokens.css → +56 tokens</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FORM — exercises: .field (jjannon body input), focus-visible
|
||||
depth shadow (no halo), .btn-primary (warm-surface CTA),
|
||||
.btn-secondary (ghost border), .field-help.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs inherit the same tokens.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
The focus state is a soft 4px-12px depth shadow — no
|
||||
cool-blue halo. Border weights stay at oklab 0.1; on
|
||||
focus the active border lifts to 0.2.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="[email protected]"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<p class="field-help">
|
||||
We'll send the spec PDF and nothing else.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send the spec
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Skip for now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,511 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "cursor",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "Cursor — reference components",
|
||||
"description": "Reference fixture for design-systems/cursor. Every visible value comes from tokens.css; if the agent paste-replaces the :root block and reuses the component selectors below verbatim, the artifact passes lint without further audit. Cursor's signature moves: warm cream surfaces, three typographic voices (CursorGothic / jjannon / berkeleyMono), oklab borders rendered as rgba fallback, hover-text shifts to --danger crimson, and diffused atmospheric shadows.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 65,
|
||||
"classCount": 37,
|
||||
"elementCount": 25
|
||||
},
|
||||
"tokens": {
|
||||
"declared": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"referenced": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--border-soft",
|
||||
"--elev-flat",
|
||||
"--elev-ring",
|
||||
"--radius-lg",
|
||||
"--space-1",
|
||||
"--text-xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".badge",
|
||||
".badge-dot",
|
||||
".badge-muted",
|
||||
".badge-success",
|
||||
".body-mono",
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-accent",
|
||||
".btn-accent:active",
|
||||
".btn-accent:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card-featured",
|
||||
".card:hover",
|
||||
".container",
|
||||
".eyebrow",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus-visible",
|
||||
".field label",
|
||||
".field-help",
|
||||
".filter-row",
|
||||
".form",
|
||||
".form-actions",
|
||||
".form-row",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".hero-meta",
|
||||
".icon",
|
||||
".lead",
|
||||
".pill",
|
||||
".pill-active",
|
||||
".row-between",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
".timeline",
|
||||
".timeline-dot",
|
||||
".timeline-edit .timeline-dot",
|
||||
".timeline-grep .timeline-dot",
|
||||
".timeline-read .timeline-dot",
|
||||
".timeline-step",
|
||||
".timeline-thinking .timeline-dot",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"a",
|
||||
"a:hover",
|
||||
"body",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"kbd",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"badge",
|
||||
"badge-dot",
|
||||
"badge-success",
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-accent",
|
||||
"btn-primary",
|
||||
"btn-secondary",
|
||||
"card",
|
||||
"card-featured",
|
||||
"container",
|
||||
"eyebrow",
|
||||
"features-grid",
|
||||
"field",
|
||||
"field-help",
|
||||
"filter-row",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"hero-meta",
|
||||
"icon",
|
||||
"lead",
|
||||
"pill",
|
||||
"pill-active",
|
||||
"row-between",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"timeline",
|
||||
"timeline-dot",
|
||||
"timeline-edit",
|
||||
"timeline-grep",
|
||||
"timeline-read",
|
||||
"timeline-step",
|
||||
"timeline-thinking"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"html",
|
||||
"input",
|
||||
"kbd",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"path",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"svg",
|
||||
"time",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-accent",
|
||||
".btn-accent:active",
|
||||
".btn-accent:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-accent",
|
||||
"btn-primary",
|
||||
"btn-secondary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-on",
|
||||
"--border",
|
||||
"--danger",
|
||||
"--focus-ring",
|
||||
"--muted",
|
||||
"--radius-pill"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus-visible",
|
||||
".field label",
|
||||
".field-help"
|
||||
],
|
||||
"classes": [
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--muted",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card-featured",
|
||||
".card:hover"
|
||||
],
|
||||
"classes": [
|
||||
"card",
|
||||
"card-featured"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--elev-raised"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".badge",
|
||||
".badge-dot",
|
||||
".badge-muted",
|
||||
".badge-success",
|
||||
".pill",
|
||||
".pill-active"
|
||||
],
|
||||
"classes": [
|
||||
"badge",
|
||||
"badge-dot",
|
||||
"badge-success",
|
||||
"pill",
|
||||
"pill-active"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--fg",
|
||||
"--font-display",
|
||||
"--muted",
|
||||
"--radius-pill",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
"a",
|
||||
"a:hover"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
"kbd"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"kbd"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--font-mono",
|
||||
"--muted",
|
||||
"--surface",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".icon"
|
||||
],
|
||||
"classes": [
|
||||
"icon"
|
||||
],
|
||||
"elements": [
|
||||
"svg"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".eyebrow",
|
||||
".lead",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"eyebrow",
|
||||
"lead"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-3xl"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".row-between",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"row-between",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-3",
|
||||
"--space-6"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 9,
|
||||
"pixelValues": 33,
|
||||
"hardcodedFontFamilies": 13
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"format": "od-design-tokens/v1",
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"source": {
|
||||
"tokensCss": "tokens.css",
|
||||
"tokenContractReport": "source/token-contract.report.json"
|
||||
},
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#f2f1ed",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:69"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#e6e5e0",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:70"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#ebeae5",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#26251e",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:78"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "rgba(38, 37, 30, 0.9)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:79"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "rgba(38, 37, 30, 0.55)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:80"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "rgba(38, 37, 30, 0.4)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:81"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(38, 37, 30, 0.1)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:87"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(38, 37, 30, 0.06)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:88"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#f54e00",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:97"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:99"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1f8a65",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:108"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:109"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#cf2d56",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"CursorGothic\", \"CursorGothic Fallback\", system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:119"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"jjannon\", \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", P052, ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"berkeleyMono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"type": "fontFamily",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "11px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:131"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "19.2px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:132"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "22px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:133"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "26px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:134"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "36px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:135"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "72px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:144"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.10",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:145"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.03em",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:153"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:154"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:155"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:156"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:157"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:158"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:159"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:160"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:164"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:165"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:166"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:174"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "10px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:175"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:176"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:177"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:188"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 4px 12px rgba(0, 0, 0, 0.1)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:199"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:214"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:215"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:216"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:217"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "cursor",
|
||||
"name": "Cursor",
|
||||
"category": "Developer Tools",
|
||||
"description": "Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
|
||||
"source": {
|
||||
"type": "bundled",
|
||||
"origin": "OpenDesign curated bundled fixture"
|
||||
},
|
||||
"files": {
|
||||
"design": "DESIGN.md",
|
||||
"tokens": "tokens.css",
|
||||
"designTokens": "design-tokens.json",
|
||||
"tailwind": "tailwind-v4.css",
|
||||
"components": "components.html"
|
||||
},
|
||||
"usage": "USAGE.md",
|
||||
"componentsManifest": "components.manifest.json",
|
||||
"importMode": "normalized",
|
||||
"craft": {
|
||||
"applies": [],
|
||||
"suggested": [
|
||||
"color",
|
||||
"accessibility-baseline"
|
||||
],
|
||||
"exemptions": []
|
||||
},
|
||||
"preview": {
|
||||
"dir": "preview",
|
||||
"pages": [
|
||||
{
|
||||
"path": "preview/colors.html",
|
||||
"role": "colors",
|
||||
"title": "Colors"
|
||||
},
|
||||
{
|
||||
"path": "preview/typography.html",
|
||||
"role": "typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "preview/spacing.html",
|
||||
"role": "spacing",
|
||||
"title": "Spacing"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceFiles": {
|
||||
"evidence": "source/evidence.md",
|
||||
"tokens": "source/tokens.source.json",
|
||||
"report": "source/token-contract.report.json"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor colors</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
|
||||
.color { height: 88px; background: var(--value); }
|
||||
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
|
||||
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Color roles</h1>
|
||||
|
||||
<section class="grid">
|
||||
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
|
||||
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
|
||||
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
|
||||
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
|
||||
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
|
||||
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
|
||||
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
|
||||
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
|
||||
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor spacing</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
|
||||
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
|
||||
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Spacing and radius</h1>
|
||||
|
||||
<section class="stack">
|
||||
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
|
||||
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
|
||||
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
|
||||
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
|
||||
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
|
||||
</section>
|
||||
<section class="radii">
|
||||
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
|
||||
<article style="border-radius: var(--radius-md)">--radius-md</article>
|
||||
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
|
||||
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor typography</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
|
||||
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
|
||||
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
|
||||
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Typography</h1>
|
||||
|
||||
<section class="type-stack">
|
||||
<p class="eyebrow">Developer Tools</p>
|
||||
<h2>Display sample for Cursor</h2>
|
||||
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
|
||||
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
# Cursor Source Evidence
|
||||
|
||||
## Source Scope
|
||||
|
||||
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
|
||||
It does not claim a fresh crawl of the original upstream brand repository or website.
|
||||
|
||||
## Included Fixture Files
|
||||
|
||||
- design-systems/cursor/DESIGN.md
|
||||
- design-systems/cursor/tokens.css
|
||||
- design-systems/cursor/components.html
|
||||
|
||||
## Token Contract
|
||||
|
||||
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
|
||||
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#f2f1ed",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:69"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#e6e5e0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:70"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#ebeae5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#26251e",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:78"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(38, 37, 30, 0.9)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:79"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(38, 37, 30, 0.55)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:80"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(38, 37, 30, 0.4)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:81"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(38, 37, 30, 0.1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:87"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(38, 37, 30, 0.06)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:88"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#f54e00",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:97"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:99"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#1f8a65",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:108"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#eab308",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:109"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#cf2d56",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"CursorGothic\", \"CursorGothic Fallback\", system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:119"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"jjannon\", \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", P052, ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "\"berkeleyMono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "11px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:131"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "19.2px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:132"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "22px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:133"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "26px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:134"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "36px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:135"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "72px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:144"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.10",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:145"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "-0.03em",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:153"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:154"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:155"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"layer": "A2",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:156"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"layer": "A2",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:157"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"layer": "A2",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:158"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"layer": "A2",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:159"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"layer": "A2",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:160"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "80px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:164"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:165"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:166"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:174"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "10px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:175"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:176"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:177"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"layer": "A2",
|
||||
"value": "none",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:188"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 4px 12px rgba(0, 0, 0, 0.1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:199"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "150ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"layer": "A2",
|
||||
"value": "200ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "ease",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1200px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:214"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:215"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:216"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:217"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "cursor",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#f2f1ed",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:69"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#e6e5e0",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:70"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#ebeae5",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:71"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#26251e",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:78"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "rgba(38, 37, 30, 0.9)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:79"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "rgba(38, 37, 30, 0.55)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:80"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "rgba(38, 37, 30, 0.4)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:81"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(38, 37, 30, 0.1)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:87"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(38, 37, 30, 0.06)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:88"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#f54e00",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:97"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:98"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:99"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:100"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1f8a65",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:108"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:109"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#cf2d56",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:110"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"CursorGothic\", \"CursorGothic Fallback\", system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:119"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"jjannon\", \"Iowan Old Style\", \"Palatino Linotype\", \"URW Palladio L\", P052, ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:120"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"berkeleyMono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "11px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:129"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:130"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:131"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "19.2px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:132"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "22px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:133"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "26px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:134"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "36px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:135"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "72px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:136"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:144"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.10",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:145"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.03em",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:146"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:153"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:154"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:155"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:156"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:157"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:158"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:159"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:160"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:164"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:165"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:166"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:174"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "10px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:175"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:176"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:177"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:186"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:187"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:188"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 4px 12px rgba(0, 0, 0, 0.1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:199"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:206"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:207"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:208"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:214"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:215"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:216"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:217"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Deck module</p>
|
||||
<h1>Cursor Executive deck</h1>
|
||||
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Pitch deck</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Email module</p>
|
||||
<h1>Cursor Email module</h1>
|
||||
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Email</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Form module</p>
|
||||
<h1>Cursor Capture form</h1>
|
||||
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Form page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Landing module</p>
|
||||
<h1>Cursor Launch narrative</h1>
|
||||
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Landing page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Newsletter module</p>
|
||||
<h1>Cursor Editorial issue</h1>
|
||||
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Newsletter</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Poster module</p>
|
||||
<h1>Cursor Campaign poster</h1>
|
||||
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Poster</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Cursor" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<p class="eyebrow">Developer Tools</p>
|
||||
<h1>Cursor system assets</h1>
|
||||
<p class="lead">Generated preview modules for bundled official presets.</p>
|
||||
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
|
||||
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
|
||||
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
|
||||
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
|
||||
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
|
||||
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
|
||||
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
|
||||
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Developer Tools system</p>
|
||||
<h1>Cursor component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f54e00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #f2f1ed;
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #cf2d56;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 10px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1f8a65;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 22px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: -0.03em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #f2f1ed;
|
||||
--od-surface: #e6e5e0;
|
||||
--od-text: #26251e;
|
||||
--od-muted: rgba(38, 37, 30, 0.55);
|
||||
--od-border: rgba(38, 37, 30, 0.1);
|
||||
--od-accent: #f54e00;
|
||||
--od-radius: 10px;
|
||||
--od-font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--od-font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Developer Tools system</p>
|
||||
<h1>Cursor component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Cursor, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#f54e00",
|
||||
"colorPrimaryBg": "#ebeae5",
|
||||
"colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 10
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-warm: var(--surface-warm);
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-2: var(--fg-2);
|
||||
--color-muted: var(--muted);
|
||||
--color-meta: var(--meta);
|
||||
--color-border: var(--border);
|
||||
--color-border-soft: var(--border-soft);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-on: var(--accent-on);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-active: var(--accent-active);
|
||||
--color-success: var(--success);
|
||||
--color-warn: var(--warn);
|
||||
--color-danger: var(--danger);
|
||||
--font-display: var(--font-display);
|
||||
--font-body: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
--font-mono: var(--font-mono);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--leading-body: var(--leading-body);
|
||||
--leading-tight: var(--leading-tight);
|
||||
--tracking-display: var(--tracking-display);
|
||||
--spacing-1: var(--space-1);
|
||||
--spacing-2: var(--space-2);
|
||||
--spacing-3: var(--space-3);
|
||||
--spacing-4: var(--space-4);
|
||||
--spacing-5: var(--space-5);
|
||||
--spacing-6: var(--space-6);
|
||||
--spacing-8: var(--space-8);
|
||||
--spacing-12: var(--space-12);
|
||||
--spacing-section-desktop: var(--section-y-desktop);
|
||||
--spacing-section-tablet: var(--section-y-tablet);
|
||||
--spacing-section-phone: var(--section-y-phone);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-pill: var(--radius-pill);
|
||||
--shadow-flat: var(--elev-flat);
|
||||
--shadow-ring: var(--elev-ring);
|
||||
--shadow-raised: var(--elev-raised);
|
||||
--shadow-focus-ring: var(--focus-ring);
|
||||
--duration-fast: var(--motion-fast);
|
||||
--duration-base: var(--motion-base);
|
||||
--ease-standard: var(--ease-standard);
|
||||
--container-max: var(--container-max);
|
||||
--spacing-container-desktop: var(--container-gutter-desktop);
|
||||
--spacing-container-tablet: var(--container-gutter-tablet);
|
||||
--spacing-container-phone: var(--container-gutter-phone);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/cursor/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Cursor" brand — the AI-first code
|
||||
* editor's marketing voice translated into the shared schema. Like
|
||||
* `default/tokens.css` and `kami/tokens.css`, agents are expected to
|
||||
* paste the `:root { … }` block verbatim into the first `<style>` of
|
||||
* every artifact, then reference values via `var(--name)`.
|
||||
*
|
||||
* Why this file exists:
|
||||
* DESIGN.md describes Cursor in prose ("warm cream `#f2f1ed`, warm
|
||||
* near-black `#26251e` text, oklab borders") — agents have to translate
|
||||
* that prose into shared token names without inventing brand variants
|
||||
* like `--cursor-cream`. This file pre-translates once.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Warm-shifted everything — cream surfaces, near-black-with-yellow
|
||||
* text, oklab-space borders. Pure white / pure black are reserved
|
||||
* for code-editor panels and nowhere else.
|
||||
* 2. Three typographic voices — CursorGothic at display sizes with
|
||||
* aggressive negative letter-spacing (signature), jjannon serif for
|
||||
* editorial body, berkeleyMono for code/kbd.
|
||||
* 3. Hover semantic is text→crimson (`--danger`), not bg-darken.
|
||||
* Component CSS reading `--accent-hover` still gets the schema's
|
||||
* darken formula because some artifacts (CTA pills with accent bg)
|
||||
* do need it; the brand-signature crimson hover is component-level
|
||||
* not token-level.
|
||||
*
|
||||
* Schema decisions specific to Cursor:
|
||||
* - --surface-warm binds to a real warmer tier (#ebeae5 — the
|
||||
* "Surface 300" button-default), not aliased to surface. Cursor's
|
||||
* surface scale 100→500 is a hallmark; the schema slot maps to the
|
||||
* middle tier that buttons rest on.
|
||||
* - --fg-2, --meta, --border-soft bind to oklab-fallback rgba values
|
||||
* at distinct alpha levels (0.9 / 0.4 / 0.06) rather than aliasing,
|
||||
* because Cursor genuinely has the richer ramp.
|
||||
* - --tracking-display is set to -0.03em (the 72px hero value
|
||||
* normalized to em). Smaller display sizes in components should
|
||||
* scale tracking proportionally; the schema only carries one slot.
|
||||
* - --elev-raised binds to Cursor's signature 28px/70px diffused
|
||||
* shadow rather than the schema fallback. This is the depth move
|
||||
* that makes Cursor feel like a print publication.
|
||||
* - --focus-ring is depth-only (0 4px 12px), not the halo formula.
|
||||
* Cursor never paints cool-blue rings.
|
||||
* - --ease-standard: ease (per DESIGN.md §Interaction & Motion), not
|
||||
* the schema's cubic-bezier. Brand authenticity over micro-control.
|
||||
*
|
||||
* Tokens NOT lifted (intentional):
|
||||
* - The fine-grained sub-8px spacing scale (1.5px, 2px, 2.5px, 3px,
|
||||
* 5px, 6px) used for icon/text micro-alignment is component-internal
|
||||
* in this fixture. Promote to C-extension via BRAND_EXTENSIONS only
|
||||
* if cross-component reuse demands it.
|
||||
* - The named surface scale 100/200/300/400/500 is encoded via the
|
||||
* three schema slots (--bg / --surface / --surface-warm). The
|
||||
* extreme tiers (100 lightest, 500 deepest) live as inline
|
||||
* declarations in components.html where needed.
|
||||
* - The timeline state colors (Thinking peach, Grep sage, Read blue,
|
||||
* Edit lavender) are decorative state markers, not brand surface
|
||||
* tokens. They belong in component CSS for the AI timeline element,
|
||||
* not in :root.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ──────────────────────────────────────────
|
||||
* Cream canvas that defines the entire warm system. Default's
|
||||
* `#fafafa → #ffffff` ladder gets replaced by `#f2f1ed → #e6e5e0`,
|
||||
* with the warmer surface tier (#ebeae5) bound to --surface-warm
|
||||
* for buttons that rest on the page background. */
|
||||
--bg: #f2f1ed; /* Surface 200 — warm off-white */
|
||||
--surface: #e6e5e0; /* Surface 400 — card / lifted */
|
||||
--surface-warm: #ebeae5; /* Surface 300 — button default */
|
||||
|
||||
/* ─── Foreground ramp (4 levels) ────────────────────────────────
|
||||
* Cursor genuinely has a 4-tier ramp: solid for headings/body,
|
||||
* 90% for "light surface" button labels, 55% for secondary text,
|
||||
* 40% for link underlines and metadata. All bind to the same
|
||||
* oklab-fallback rgba (warm brown) at different alphas. */
|
||||
--fg: #26251e; /* warm near-black */
|
||||
--fg-2: rgba(38, 37, 30, 0.9); /* solid headings on light surfaces */
|
||||
--muted: rgba(38, 37, 30, 0.55); /* secondary text */
|
||||
--meta: rgba(38, 37, 30, 0.4); /* metadata, link decoration */
|
||||
|
||||
/* ─── Border (2 levels) ─────────────────────────────────────────
|
||||
* DESIGN.md §Color Palette specifies oklab-space borders as the
|
||||
* brand signature. The CSS-compatible fallback (rgba) is what
|
||||
* actually ships per DESIGN.md §Agent Prompt Guide rule 3. */
|
||||
--border: rgba(38, 37, 30, 0.1); /* primary border, 10% warm brown */
|
||||
--border-soft: rgba(38, 37, 30, 0.06); /* row separators, ghost-button bg */
|
||||
|
||||
/* ─── Accent ──────────────────────────────────────────────────────
|
||||
* Cursor Orange — primary CTAs, link color, ONE hero accent per
|
||||
* screen. Hard cap of 2 visible uses per screen still applies via
|
||||
* lint. Note: the signature hover semantic in DESIGN.md is text
|
||||
* shifting to --danger (crimson) on buttons; the schema's
|
||||
* --accent-hover is reserved for the bg-darken case (when accent
|
||||
* IS the bg, e.g. accent-pill CTA). */
|
||||
--accent: #f54e00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ────────────────────────────────────────────────────
|
||||
* --danger is Cursor's signature interaction color (hover crimson
|
||||
* on buttons), so it gets the brand-specific warm value rather
|
||||
* than the schema fallback's pure red. --success is a muted
|
||||
* teal-green (warm-shifted). --warn keeps the schema fallback;
|
||||
* Cursor's marketing site has no native warn token. */
|
||||
--success: #1f8a65; /* muted teal-green */
|
||||
--warn: #eab308;
|
||||
--danger: #cf2d56; /* warm crimson — hover signature */
|
||||
|
||||
/* ─── Typography ──────────────────────────────────────────────────
|
||||
* Three voices, three roles:
|
||||
* --font-display: CursorGothic for headings + UI labels
|
||||
* --font-body: jjannon serif for editorial body (literary warmth)
|
||||
* --font-mono: berkeleyMono for code, kbd, terminal text
|
||||
* The three-voice system is the typographic signature; component
|
||||
* CSS should never substitute fewer voices for "simplicity". */
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
/* Type scale — distilled from DESIGN.md §Typography Hierarchy.
|
||||
* Cursor has more than 8 sizes in production (caption 11, body
|
||||
* sans 16, body serif sm 17.28, body serif 19.2, title small 22,
|
||||
* sub-heading 26, section 36, hero 72); the schema's 8 slots
|
||||
* cover the spine. 17.28px / 19.2px live inline in components.html
|
||||
* where the body-serif distinction matters. */
|
||||
--text-xs: 11px; /* caption, system micro */
|
||||
--text-sm: 14px; /* button label, system caption */
|
||||
--text-base: 16px; /* body sans, ui body */
|
||||
--text-lg: 19.2px; /* body serif (1.20rem) */
|
||||
--text-xl: 22px; /* title small */
|
||||
--text-2xl: 26px; /* sub-heading */
|
||||
--text-3xl: 36px; /* section heading */
|
||||
--text-4xl: 72px; /* display hero */
|
||||
|
||||
/* Leading + tracking — DESIGN.md §Typography Hierarchy.
|
||||
* --leading-tight=1.10 is Cursor's hero rhythm (matches the
|
||||
* 72px display); brands with relaxed display rhythms set 1.20.
|
||||
* --tracking-display=-0.03em is the 72px-normalized hero tracking
|
||||
* (-2.16px / 72px). Smaller display sizes in components.html
|
||||
* use proportional inline overrides. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.03em;
|
||||
|
||||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||||
* 8px-rooted scale from DESIGN.md §Layout Principles (with the
|
||||
* --space-1=4px tier kept for icon/dot rhythm). Cursor's
|
||||
* sub-8px micro-scale (1.5/2/2.5/3/5/6) is component-internal —
|
||||
* see the elev-ring / icon-rule decisions in components.html. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — DESIGN.md §Responsive Behavior collapsing
|
||||
* strategy: "Section spacing: 80px+ → 48px → 32px on mobile". */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Border Radius Scale: comfortable 8px (primary
|
||||
* buttons/cards/menus), featured 10px (larger containers), full
|
||||
* pill 9999px (tags/filters). Schema's --radius-md gets 10px
|
||||
* rather than 12px to honor the cursor-specific featured tier;
|
||||
* --radius-lg keeps 12px because no Cursor surface uses 16px+. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ───────────────────────────────────────────────────
|
||||
* Cursor's depth signature (DESIGN.md §Depth & Elevation): no
|
||||
* crisp drop shadows. Border ring + diffused atmospheric lift.
|
||||
* --elev-flat: pages, text blocks
|
||||
* --elev-ring: standard card edge (1px warm-brown ring)
|
||||
* --elev-raised: signature heavy-blur shadow with oklab ring,
|
||||
* used for elevated cards / popovers / modals. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
0 28px 70px rgba(0, 0, 0, 0.14),
|
||||
0 14px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px var(--border);
|
||||
|
||||
/* ─── Focus ───────────────────────────────────────────────────────
|
||||
* DESIGN.md §Interaction & Motion: "Shadow-based focus:
|
||||
* rgba(0,0,0,0.1) 0px 4px 12px for depth-based focus indication.
|
||||
* Consistent warm tone in all focus states — no cold blue focus
|
||||
* rings." Implemented as box-shadow so it layers without
|
||||
* affecting layout. */
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* ─── Motion ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Interaction & Motion specifies 150ms color / 200ms
|
||||
* shadow with `ease` easing. Cursor uses the keyword `ease`
|
||||
* rather than a custom cubic-bezier; component authors should
|
||||
* not rebind to a more aggressive curve. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
/* ─── Layout ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Grid & Container: "Max content width: approximately
|
||||
* 1200px". Gutters not explicitly specified; using cross-brand
|
||||
* defaults that match default. */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
Reference in new issue
Block a user