@hienlh/ppm 0.9.81 → 0.9.83

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

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