Luca Rossi 943f6e3bc7 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 17:18:35 +00:00

41 KiB

Raw Blame History

View Raw