Design

Goal

Design is the transformation of information into something:

• digestible
• clear
• effective
• visually structured

Design is not decoration. Design is communication, structure, and business intent.

When to Use

Use this skill when:

• creating UI or UX screens
• designing dashboards, apps, or websites
• building brand visuals
• designing social posts, PDFs, or layouts
• choosing typography, colors, or layout systems
• improving visual clarity or hierarchy
• reviewing or refining design quality

Core Design Philosophy

Design equals communication, structure, and intent.

Every design must answer:

• what is being communicated
• to whom
• in what context
• what action should be taken

If these are unclear, the design will fail regardless of aesthetics.

Instructions

1. Define the problem:
   • audience
   • message
   • medium
   • goal
2. Structure the information:
   • primary content
   • secondary content
   • remove unnecessary elements
3. Define the layout system:
   • grid
   • spacing
   • alignment
4. Define the typography system:
   • font types based on purpose
   • hierarchy for heading, body, and support text
5. Define the color system:
   • contrast levels
   • palette
   • emphasis colors
6. Refine the visual system:
   • imagery
   • spacing
   • alignment consistency
7. If you need more depth, consult:
   • references/typography.md
   • references/layout.md
   • references/color.md
   • references/ux.md
   • references/production.md

Core Design Pillars

1. Communication
2. Hierarchy
3. Structure
4. Typography
5. Contrast
6. Context
7. Business relevance

Layout Rules

• Always use a grid system.
• Align elements consistently.
• Group related items.
• Use whitespace intentionally.
• Avoid random placement.

Good layout test: If you remove colors and images, the structure should still make sense.

Typography Rules

Font types

• Serif: editorial, traditional, readable
• Sans-serif: modern, UI, digital
• Slab serif: bold headlines
• Script: short expressive accents only
• Decorative: headlines only, never body text

Readability

• Never use decorative fonts for paragraphs.
• Avoid script fonts for long text.
• Ensure font size fits the medium.
• Maintain spacing and line height.

Usage rules

• Limit font families to one or two.
• Create clear hierarchy.
• Match tone to brand and message.

Variable fonts

• Use for flexibility in UI.
• Reduce multiple font file loads.
• Control weights intentionally.

Licensing

• Verify commercial-use rights.
• Never use personal-use fonts in production.
• Track font licenses.

Color Rules

Contrast

• High contrast: strong, urgent, bold
• Low contrast: soft, elegant, calm

Usage

• Use color to guide attention, not just to decorate.

Medium awareness

• RGB for screens
• CMYK for print
• Expect color shifts in print

Imagery Rules

• Images must support the message.
• Avoid cluttered visuals.
• Maintain readability over images.
• Use cropping and overlays intentionally.

Hierarchy Rules

• Define visual priority.
• The user should know where to look first.
• Use size, weight, contrast, and spacing to guide attention.

UX And UI Rules

• Prioritize clarity over style.
• Reduce friction.
• Design for scanning.
• Maintain consistency.
• Design for responsiveness.

Business Context

Design exists to:

• improve communication
• support branding
• increase clarity
• improve conversion

Every design must align with:

• business goals
• product goals
• user goals

Constraints

• Do not design randomly.
• Do not prioritize aesthetics over clarity.
• Do not overuse fonts or colors.
• Do not ignore medium differences such as print versus digital.
• Do not break hierarchy.

Output Format

1. Design Goal
2. Target Audience
3. Information Hierarchy
4. Layout System
5. Typography Plan
6. Color Strategy
7. Visual Strategy
8. UX Considerations
9. Final Design Guidelines

Examples

Bad

• too many fonts
• unclear hierarchy
• random alignment
• low readability

Good

• clear structure
• minimal fonts
• strong hierarchy
• consistent spacing