video/.agents/skills/visual-style/references/connectors/paper-design.md

paper.design Connector

Apply a visual-style.md to paper.design documents.

Overview

paper.design is a professional design tool for creating user interfaces. This connector maps visual-style.md fields to paper.design document defaults and AI layout guidance.

Field Mapping

visual-style.md field	paper.design usage
colors.primary	Document color palette (primary colors)
colors.accent	Document color palette (accent colors)
colors.neutral	Document color palette (neutral colors)
typography.display.family	Default display font
typography.body.family	Default body font
typography.caption.family	Default caption font
style_prompt_full	AI layout suggestion prompt
mood.keywords	Design direction keywords
mood.avoid	Design constraint checklist
assets.reference_images	Style board references
layout.grid	Artboard grid system
layout.alignment	Default alignment rules

Applying the Style

1. Set up the color palette

When creating new artboards, apply the colors from the style:

Background: colors.primary[0].hex
Text: colors.primary[1].hex
Accent elements: colors.accent[0].hex
Secondary elements: colors.neutral[0].hex

2. Configure typography

Load the specified fonts and set defaults:

Display/Headlines: typography.display.family, typography.display.weight
Body text: typography.body.family, typography.body.weight
Labels/Captions: typography.caption.family, typography.caption.weight

3. Apply layout rules

Follow layout.grid for artboard structure:

• "12 columns" → Set up 12-column grid
• "Strict modular grid" → Enable grid snapping
• "Flush left" → Left-align all text blocks

4. Use style_prompt_full for AI guidance

When using AI features in paper.design, include the style_prompt_full in your prompt:

Create a landing page hero section.

Visual style:
[PASTE style_prompt_full HERE]

Constraints:
[ITEMS FROM mood.avoid]

Example: Applying Swiss Style

Given mueller-brockmann-swiss.visual-style.md:

Color setup:

• Background: #000000 (Pure Black)
• Text: #FFFFFF (Pure White)
• Accent: #0066FF (Electric Blue)
• Grid lines: #CCCCCC (Grid Gray)

Typography:

• All text: Helvetica family
• Headlines: Helvetica Bold, uppercase
• Body: Helvetica Regular, flush left
• Captions: Helvetica Light, small, uppercase

Layout:

• 12-column modular grid
• All elements snap to grid
• No centered text
• Strong diagonal compositions within orthogonal structure

Design constraints (from mood.avoid):

• No organic or curved shapes
• No gradients
• No stock photography
• No rounded corners
• No decorative elements

Workflow

1. Read the style — Load the visual-style.md file
2. Create artboard — Set dimensions from layout.aspect_ratio
3. Apply background — Use colors.primary[0].hex
4. Set up grid — Follow layout.grid specification
5. Configure fonts — Load typography.* families
6. Build content — Follow mood.keywords for direction
7. Review — Check against mood.avoid constraints

Design Brief Format

When starting a new design in paper.design, generate a brief from the style:

## Design Brief

**Style:** [name]

**Color Palette:**
- [colors.primary[0].name]: [hex] — [role]
- [colors.primary[1].name]: [hex] — [role]
- [colors.accent[0].name]: [hex] — [role]

**Typography:**
- Display: [typography.display.family] [weight]
- Body: [typography.body.family] [weight]

**Layout:** [layout.grid], [layout.alignment]

**Mood:** [mood.keywords joined]

**Avoid:** [mood.avoid joined]

Tips

• Start with the grid — Set up layout.grid before placing elements
• Typography first — Let typography.rules guide hierarchy decisions
• Check constraints regularly — Reference mood.avoid while designing
• Use reference images — If assets.reference_images has URLs, import them as a style board