@vodailoc/kilo-kit-mcp 1.1.0 → 1.2.0

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

@@ -1,320 +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
+# 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