gh-rafaelcalleja-claude-market-place-plugins-claudekit-skills/skills/ui-styling/references/canvas-design-system.md

# 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