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