Initial commit

skills/ui-styling/references/canvas-design-system.md

@@ -0,0 +1,320 @@
+# Canvas Design System
+
+Visual design philosophy, systematic composition, and sophisticated visual communication.
+
+## Design Philosophy Approach
+
+Canvas design operates through two-phase process:
+
+### Phase 1: Design Philosophy Creation
+
+Create visual philosophy - aesthetic movement expressed through form, space, color, composition. Not layouts or templates, but pure visual philosophy.
+
+**What is created:** Design manifesto emphasizing:
+- Visual expression over text
+- Spatial communication
+- Artistic interpretation
+- Minimal words as visual accent
+
+**Philosophy structure (4-6 paragraphs):**
+- Space and form principles
+- Color and material approach
+- Scale and rhythm guidance
+- Composition and balance rules
+- Visual hierarchy system
+
+### Phase 2: Visual Expression
+
+Express philosophy through canvas artifacts:
+- 90% visual design
+- 10% essential text
+- Museum-quality execution
+- Systematic patterns
+- Sophisticated composition
+
+## Core Principles
+
+### 1. Visual Communication First
+
+Information lives in design, not paragraphs. Express ideas through:
+- Color zones and fields
+- Geometric precision
+- Spatial relationships
+- Visual weight and tension
+- Form and structure
+
+### 2. Minimal Text Integration
+
+Text as rare, powerful gesture:
+- Never paragraphs
+- Only essential words
+- Integrated into visual architecture
+- Small labels, huge impact
+- Typography as visual element
+
+### 3. Expert Craftsmanship
+
+Work must appear:
+- Meticulously crafted
+- Labored over with care
+- Product of countless hours
+- From absolute top of field
+- Master-level execution
+
+### 4. Systematic Patterns
+
+Use scientific visual language:
+- Repeating patterns
+- Perfect shapes
+- Dense accumulation of marks
+- Layered elements
+- Patient repetition rewards sustained viewing
+
+## Design Movement Examples
+
+### Concrete Poetry
+**Philosophy:** Communication through monumental form and bold geometry.
+
+**Expression:**
+- Massive color blocks
+- Sculptural typography (huge words, tiny labels)
+- Brutalist spatial divisions
+- Polish poster energy meets Le Corbusier
+- Ideas through visual weight and spatial tension
+- Text as rare, powerful gesture
+
+### Chromatic Language
+**Philosophy:** Color as primary information system.
+
+**Expression:**
+- Geometric precision
+- Color zones create meaning
+- Typography minimal - small sans-serif labels
+- Josef Albers' interaction meets data visualization
+- Information encoded spatially and chromatically
+- Words only anchor what color shows
+
+### Analog Meditation
+**Philosophy:** Quiet visual contemplation through texture and breathing room.
+
+**Expression:**
+- Paper grain, ink bleeds
+- Vast negative space
+- Photography and illustration dominate
+- Typography whispered (small, restrained)
+- Japanese photobook aesthetic
+- Images breathe across pages
+- Text appears sparingly - short phrases only
+
+### Organic Systems
+**Philosophy:** Natural clustering and modular growth patterns.
+
+**Expression:**
+- Rounded forms
+- Organic arrangements
+- Color from nature through architecture
+- Information through visual diagrams
+- Spatial relationships and iconography
+- Text only for key labels floating in space
+- Composition tells story through spatial orchestration
+
+### Geometric Silence
+**Philosophy:** Pure order and restraint.
+
+**Expression:**
+- Grid-based precision
+- Bold photography or stark graphics
+- Dramatic negative space
+- Typography precise but minimal
+- Small essential text, large quiet zones
+- Swiss formalism meets Brutalist material honesty
+- Structure communicates, not words
+- Every alignment from countless refinements
+
+## Implementation Guidelines
+
+### Subtle Reference Integration
+
+Embed conceptual DNA without announcing:
+- Niche reference woven invisibly
+- Those who know feel it intuitively
+- Others experience masterful abstract composition
+- Like jazz musician quoting another song
+- Sophisticated, never literal
+- Reference enhances depth quietly
+
+### Color Approach
+
+**Intentional palette:**
+- Limited colors (2-5)
+- Cohesive system
+- Purposeful relationships
+- oklch color space for precision
+- Each shade carries meaning
+
+**Example palette:**
+```
+--color-primary: oklch(0.55 0.22 264)
+--color-accent: oklch(0.75 0.18 45)
+--color-neutral: oklch(0.90 0.02 264)
+--color-dark: oklch(0.25 0.15 264)
+```
+
+### Typography System
+
+**Thin fonts preferred:**
+- Light weights (200-300)
+- Clean sans-serifs
+- Geometric precision
+- Small sizes for labels
+- Large sizes for impact moments
+
+**Font integration:**
+- Search `./canvas-fonts` directory
+- Download needed fonts
+- Bring typography onto canvas
+- Part of art, not typeset digitally
+
+### Composition Rules
+
+**Systematic approach:**
+- Repeating patterns establish rhythm
+- Perfect geometric shapes
+- Clinical typography
+- Reference markers suggest imaginary discipline
+- Dense accumulation builds meaning
+- Layered patterns reward attention
+
+**Spacing discipline:**
+- Nothing falls off page
+- Nothing overlaps
+- Every element within canvas boundaries
+- Proper margins non-negotiable
+- Breathing room and clear separation
+- Professional execution mandatory
+
+### Canvas Boundaries
+
+**Technical specs:**
+- Single page default (multi-page when requested)
+- PDF or PNG output
+- High resolution
+- Clean margins
+- Contained composition
+- Flawless formatting
+
+## Multi-Page Design Systems
+
+When creating multiple pages:
+
+### Approach
+- Treat first page as single page in coffee table book
+- Create more pages along same philosophy
+- Distinctly different but cohesive
+- Pages tell story tastefully
+- Full creative freedom
+
+### Consistency Elements
+- Shared color palette
+- Consistent typography system
+- Related compositional approach
+- Visual language continuity
+- Philosophical thread throughout
+
+### Variation Strategy
+- Unique twist per page
+- Different focal points
+- Varied spatial arrangements
+- Complementary patterns
+- Progressive visual narrative
+
+## Execution Checklist
+
+Before finalizing:
+
+- [ ] Philosophy guides every decision
+- [ ] 90% visual, 10% text maximum
+- [ ] Text minimal and integrated
+- [ ] Nothing overlaps or falls off page
+- [ ] Margins and spacing pristine
+- [ ] Composition cohesive with art
+- [ ] Appears meticulously crafted
+- [ ] Master-level execution evident
+- [ ] Sophisticated, never amateur
+- [ ] Could be displayed in museum
+- [ ] Proves undeniable expertise
+- [ ] Formatting flawless
+- [ ] Every detail perfect
+
+## Quality Standards
+
+### What to Avoid
+- Cartoony aesthetics
+- Amateur execution
+- Text-heavy composition
+- Random placement
+- Overlapping elements
+- Inconsistent spacing
+- Obvious AI generation
+- Lack of refinement
+
+### What to Achieve
+- Museum quality
+- Magazine worthy
+- Art object status
+- Countless hours appearance
+- Top-of-field craftsmanship
+- Philosophical coherence
+- Visual sophistication
+- Systematic precision
+
+## Refinement Process
+
+### Initial Pass
+Create based on philosophy and principles.
+
+### Second Pass (Critical)
+- Don't add more graphics
+- Refine what exists
+- Make extremely crisp
+- Respect minimalism philosophy
+- Increase cohesion with art
+- Make existing elements more artistic
+- Polish rather than expand
+
+### Final Verification
+User already said: "It isn't perfect enough. Must be pristine, masterpiece of craftsmanship, as if about to be displayed in museum."
+
+Apply this standard before delivery.
+
+## Output Format
+
+**Required files:**
+1. Design philosophy (.md file)
+2. Visual expression (.pdf or .png)
+
+**Philosophy file contains:**
+- Movement name
+- 4-6 paragraph philosophy
+- Visual principles
+- Execution guidance
+
+**Canvas file contains:**
+- Visual interpretation
+- Minimal text
+- Systematic composition
+- Expert-level execution
+
+## Use Cases
+
+Apply canvas design for:
+- Brand identity systems
+- Poster designs
+- Visual manifestos
+- Design system documentation
+- Art pieces and compositions
+- Conceptual visual frameworks
+- Editorial design
+- Exhibition materials
+- Coffee table books
+- Design philosophy demonstrations