feat: structured design system in ui-design.pen (#95)
* feat: restructure ui-design.pen as complete design system
Major restructuring of the design canvas into 5 organized sections:
0. Cover — title, TOC with links to all sections
1. Foundations — colors, typography, spacing scale, heights, shadows
2. Components — 23 reusable components (atoms, molecules, organisms)
3. Full Layouts — 5 app variants at 1440×900
4. Feature Specs — 65 existing frames reorganized into 10 functional groups
Components created (reusable, defined once):
- Atoms: StatusDot, Separator, Badge, Button (Primary/Secondary/Ghost),
Input, IconButton
- Molecules: InspectorHeader, NoteListItem, Tab (Active/Inactive),
PropertyRow, RelationshipPill, SidebarFilterItem, SectionLabel,
SectionCountHeader, AddButton, RelGroupLabel, CommandPaletteItem,
EditableValue
- Organisms: Toast, AIChatMessage
Variables added (22 new):
- Spacing: --spacing-xs through --spacing-3xl (4px to 40px)
- Heights: --height-titlebar, --height-tabbar, --height-statusbar, etc.
- Shadows: --shadow-sm, --shadow-md, --shadow-lg
- Search colors: --search-bg, --search-input-bg (replacing hardcoded hex)
- Font: --font-mono
Hardcoded colors replaced with variables in existing frames.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat: zero hardcoded colors + 6th layout (Focus Mode)
- Replace all 82 remaining hardcoded hex colors with CSS variables
- Add 11 new variables: search theme colors, traffic lights, white overlay
- Total variables: 79 (zero hardcoded fills in entire canvas)
- Add 6th full layout: Focus Mode — Distraction-free Writing (1440×900)
- All 6 layout variants now complete
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: add .claude-done summary
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 18:18:35 +01:00
|
|
|
{"version":"2.8","children":[{"type":"frame","id":"ds_cover","name":"0 \u2014 Cover","x":0,"y":0,"width":1440,"height":"fit_content(400)","fill":"$--background","layout":"vertical","gap":32,"padding":[80,60],"theme":{"Mode":"Light"},"children":[{"type":"text","id":"ds_title","content":"Laputa Design System","fill":"$--foreground","fontFamily":"Inter","fontSize":48,"fontWeight":"700","letterSpacing":-1.5},{"type":"text","id":"ds_subtitle","content":"Wiki-linked knowledge management for deep thinkers","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":18,"lineHeight":1.5},{"type":"rectangle","id":"ds_div","width":"fill_container","height":1,"fill":"$--border"},{"type":"frame","id":"ds_toc","name":"TOC","layout":"vertical","width":"fill_container","gap":16,"children":[{"type":"text","id":"ds_toc_t","content":"Table of Contents","fill":"$--foreground","fontFamily":"Inter","fontSize":20,"fontWeight":"600"},{"type":"frame","id":"ds_toc_items","layout":"vertical","width":"fill_container","gap":8,"children":[{"type":"text","id":"ds_t1","fill":"$--primary","fontFamily":"Inter","fontSize":14,"fontWeight":"500","content":"1. Foundations \u2014 Colors, Typography, Spacing, Shadows, Heights"},{"type":"text","id":"ds_t2","fill":"$--primary","fontFamily":"Inter","fontSize":14,"fontWeight":"500","content":"2. Components \u2014 Atoms, Molecules, Organisms"},{"type":"text","id":"ds_t3","fill":"$--primary","fontFamily":"Inter","fontSize":14,"fontWeight":"500","content":"3. Full Layouts \u2014 6 app variants at 1440\u00d7900"},{"type":"text","id":"ds_t4","fill":"$--primary","fontFamily":"Inter","fontSize":14,"fontWeight":"500","content":"4. Feature Specs \u2014 All screens grouped by functional area"}]}]}]},{"type":"frame","id":"sec1_hdr","name":"1 \u2014 Foundations","x":0,"y":500,"width":1440,"height":60,"fill":"$--foreground","padding":[0,60],"alignItems":"center","theme":{"Mode":"Light"},"children":[{"type":"text","id":"sec1_hdr_lbl","content":"1 \u2014 FOUNDATIONS","fill":"$--background","fontFamily":"Inter","fontSize":24,"fontWeight":"700","letterSpacing":2}]},{"type":"frame","id":"mOf4J","x":0,"y":600,"name":"Color Palette \u2014 shadcn/ui Theme (Light)","theme":{"Mode":"Light"},"width":1440,"fill":"$--background","layout":"vertical","gap":32,"padding":40,"children":[{"type":"text","id":"rmJdn","name":"cTitle","fill":"$--foreground","content":"Color Palette \u2014 shadcn/ui Theme Variables (Light)","fontFamily":"Inter","fontSize":28,"fontWeight":"700","letterSpacing":-0.5},{"type":"text","id":"V79Zu","name":"cSub","fill":"$--muted-foreground","textGrowth":"fixed-width","width":"fill_container","content":"All colors from src/index.css. Variables support light/dark mode via .dark class.","lineHeight":1.5,"fontFamily":"Inter","fontSize":14,"fontWeight":"normal"},{"type":"text","id":"Xbdzq","name":"primLbl","fill":"$--foreground","content":"Primary Colors","fontFamily":"Inter","fontSize":18,"fontWeight":"600"},{"type":"frame","id":"NyoC7","name":"primRow","width":"fill_container","gap":16,"children":[{"type":"frame","id":"Inb1x","name":"sw1","width":"fill_container","layout":"vertical","gap":8,"children":[{"type":"rectangle","cornerRadius":8,"id":"HRsVC","name":"sw1b","fill":"$--background","width":"fill_container","height":60,"stroke":{"align":"inside","thickness":1,"fill":"$--border"}},{"type":"text","id":"jV89s","name":"sw1n","fill":"$--foreground","content":"--background","fontFamily":"Inter","fontSize":12,"fontWeight":"500"},{"type":"text","id":"qOUUY","name":"sw1v","fill":"$--muted-foreground","content":"L: #FFFFFF / D: #0f0f1a","fontFamily":"Inter","fontSize":11,"fontWeight":"normal"}]},{"type":"frame","id":"QytAQ","name":"sw2","width":"fill_container","layout":"vertical","gap":8,"children":[{"type":"rectangle","cornerRadius":8,"id":"TMuHH","name":"sw2b","fill":"$--foreground","width":"fill_container","height":60},{"type":"text","id":"k9qK4","name":"sw2n","fill":"$--foreground","content":"--foreground","fontFamily":"Inter","fontSize":12,"fontWeight":"500"},{"type":"text","id":"BfEn7","name":"sw2v","fill":"$--muted-foreg
|