mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
* feat(design-systems): add structured tokens for cursor brand Introduces design-systems/cursor/tokens.css + components.html, the third structured brand after default and kami. Brings the prose DESIGN.md into the schema-checked form so agents picking the cursor design system get the structured token channel (PR-D #1544) instead of having to re-derive Cursor's warm-cream palette, three-voice typography (CursorGothic / jjannon / berkeleyMono), oklab borders, and depth-based focus from prose every turn. Why now: PR-D made the structured channel default-on, but it only materially helps the 2 brands shipping tokens.css today. To expand batch-design-system-test (#1515) coverage beyond default + kami, we are hand-authoring 5 high-profile brands (cursor first as template, then apple / stripe / airbnb / vercel) before the bulk derive script (PR-B). These five also serve as the byte-identical oracle the future derive script must reproduce. Brand-specific schema decisions, captured in the tokens.css header: - Surface: 3-tier cream ladder (#f2f1ed → #ebeae5 → #e6e5e0). --surface-warm binds to a real intermediate tier, not aliased. - Foreground: 4-tier ramp via rgba(38,37,30,a) at 1.0 / 0.9 / 0.55 / 0.4 — Cursor genuinely has the richer ramp. - Borders: oklab origins shipped as rgba fallbacks per DESIGN.md §Agent Prompt Guide rule 3. - --tracking-display: -0.03em (the 72px hero value normalized to em). Smaller display sizes scale tracking proportionally inline. - --elev-raised: signature 28/70px diffused atmospheric shadow. - --focus-ring: depth-only (0 4px 12px), never the cool-blue halo. - --ease-standard: ease (per DESIGN.md), not the schema cubic-bezier. - --danger: warm crimson #cf2d56, used for the brand-signature hover-text-shift on buttons. components.html demonstrates the full surface (hero with 72px CursorGothic + jjannon serif lead, three-voice typography, warm- surface CTA with crimson hover, accent-orange pill CTA used once, oklab-fallback bordered cards, AI timeline signature element with the warm pastel state colors, jjannon-serif input with 4-12 depth focus). :root paste is byte-identical to tokens.css. Verified: - pnpm guard — 13/13 checks pass, including all 8 design-system sub-checks now reporting "3 brands" (default + kami + cursor): - token-fixture sync: 3 brand pairs aligned - A1/A2/B-slot required tokens: all 3 brands declare 26 A1 + 26 A2 + 4 B-slot - unknown token allowlist: 185 declarations across 3 brands all match shared schema or brand extensions - flag parity: 146 prose-only brands byte-identical, 3 structured diverge as expected Co-authored-by: Cursor <cursoragent@cursor.com> * fix(design-systems): correct h2/h3 line-height in cursor components fixture Per DESIGN.md §Hierarchy, 36px section headings use line-height 1.20 and 26px sub-headings use 1.25. The shared h1/h2/h3 rule was locking all three to --leading-tight (1.10), baking wrong vertical rhythm into the oracle fixture. Co-authored-by: Cursor <cursoragent@cursor.com> * feat(design-systems): add structured tokens for apple, stripe, airbnb, vercel brands Batch follow-up to #1652 (cursor). Adds tokens.css + components.html for the remaining four high-profile brands, using cursor as the format/template oracle. Each brand encodes its specific identity: - apple: SF Pro tight-compressed display (--leading-tight 1.05), system-blue accent, SF Symbols grid, frosted glass surfaces - stripe: sohne-var weight-300 anti-convention signature, --leading-tight 1.10 (matches all heading spec values exactly), indigo accent - airbnb: Cereal weight-700 display with Rausch coral, --leading-tight 1.20 with per-size overrides (h2→1.18, h3→1.25) - vercel: Geist 600 compressed display, --leading-tight 1.10 with per-size overrides (h2→1.20, h3→1.33 per DESIGN.md §Typography) pnpm guard: 13/13 checks pass; flag-parity now shows 6 structured brands and 143 prose-only brands. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local> Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|---|---|---|
| .. | ||
| components.html | ||
| DESIGN.md | ||
| tokens.css | ||