# Brand visual language Human Guide

## What This Is For
Visual shape communicates personality. It gives the agent a clearer input/output frame for brand and messaging: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Brand visual language agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for brand visual language.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Brand visual language guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- **Large Cards & Modals:** Typically use a larger radius than buttons (e.g., if buttons are 4px, large cards might be 8px or 12px) to maintain a consistent visual tone.
- **Logo:** Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
- **Product photography or illustration style:** Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
- **Typography:** A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
- **Competitor landscape:** Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.
- Brand font has poor legibility at small sizes (display fonts, decorative typefaces)
- Brand font lacks the weights needed for UI hierarchy (no regular, no medium)
- Brand font has no body or reading variant defined
- Brand font loads poorly (performance, licensing, web rendering)
- Keep the brand font for headings and display — this is where brand identity lives
- Add a secondary typeface for body text that is **complementary in tone**, not competing
- Match shape language: a geometric brand font pairs with a geometric body font; a humanist display pairs with a humanist body

## Decision Points And Nuance
The original skill emphasizes: Shape Language, Radius for Large Surfaces, Reading Shape from an Existing Brand, Typography and Shape, Extending Brand Typography, Iconography, Use the standard icon; never invent one for a solved concept, Consistency Across Elements, Review Checklist, Supporting file: skills/extract-design/SKILL.md.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- Avoid two display fonts or two highly characterful fonts together
- **Do this sparingly.** Two typefaces is a deliberate extension. Three typefaces is almost always too many. Document the decision and the rationale so future designers do not add a third.
- Icon style must match the brand's shape language. Mixing icon styles — some thin, some bold, some filled, some outlined — breaks visual cohesion even when individual icons are correct.
- **Rule:** Use one icon library and one weight throughout. If mixing is unavoidable (e.g. a specialised icon not available in the chosen library), match stroke width and corner style manually.
- Use the standard icon; never invent one for a solved concept

## Copy-And-Paste Prompt
```text
Use the Brand visual language human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the dembrandt/dembrandt-skills skill entry for `brand-visual-language`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# Brand Visual Language

Visual shape communicates personality. A rounded corner says something different to the user than a sharp one — and that message arrives before they read a single word. The shapes in typography, border-radius, and iconography should tell a consistent story.

## Shape Language

| Shape | Tone | Associated with |
|---|---|---|
| **Rounded, pill-shaped** | Friendly, approachable, playful, modern | Consumer apps, health, kids, lifestyle, social |
| **Softly rounded (8–12px)** | Professional, warm, accessible | SaaS, productivity, general B2B |
| **Lightly rounded (2–4px)** | Precise, structured, efficient | Enterprise tools, finance, data platforms |
| **Sharp / no radius** | Technical, serious, authoritative | Developer tools, security, industrial |

Every component — cards, inputs, modals, badges — should follow the same radius logic.

## Radius for Large Surfaces

The perceived "roundedness" of an element changes with its scale. A radius that looks soft on a button may look sharp on a large container.

- **Large Cards & Modals:** Typically use a larger radius than buttons (e.g., if buttons are 4px, large cards might be 8px or 12px) to maintain a consistent visual tone.
- **Wells and Background Sections:** For large background areas or "wells," a smaller radius (2px–8px) is often used to provide structure and define the region without making it feel like a "floating" component. This keeps the focus on the content within, rather than the container itself.

## Reading Shape from an Existing Brand

Before choosing a radius, look at the brand's existing materials:

- **Logo:** Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
- **Product photography or illustration style:** Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
- **Typography:** A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
- **Competitor landscape:** Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.

> **Read the real shape language, don't infer it (dembrandt engine, optional).** For a brand that already ships a product, extract its actual radius, type, and tone from the live site rather than guessing from the logo: `get_brand_identity` and `get_design_tokens` return computed values off the DOM. See [`extract-design`](../extract-design/SKILL.md).

## Typography and Shape

Typeface shapes carry the same tonal signals:

| Type style | Tone |
|---|---|
| Geometric sans (circular letterforms) | Modern, clean, slightly playful |
| Humanist sans (varied stroke widths) | Warm, readable, professional |
| Grotesque sans (neutral, utilitarian) | Serious, efficient, no-frills |
| Serif | Authoritative, established, editorial |
| Rounded sans | Friendly, approachable, informal |
| Monospace | Technical, developer-facing, precise |

The typeface and the border-radius should not contradict each other. A rounded, friendly typeface paired with sharp 0px corners creates visual dissonance.

## Extending Brand Typography

Brand books often specify a display or heading font but leave body text underdefined — a single weight, no reading size, no fallback. This is common with luxury, fashion, or legacy brands where the brand identity was built for print, not screen.

When the brand book is insufficient for UI purposes, extend it deliberately:

**When extension is justified:**
- Brand font has poor legibility at small sizes (display fonts, decorative typefaces)
- Brand font lacks the weights needed for UI hierarchy (no regular, no medium)
- Brand font has no body or reading variant defined
- Brand font loads poorly (performance, licensing, web rendering)

**How to extend:**
- Keep the brand font for headings and display — this is where brand identity lives
- Add a secondary typeface for body text that is **complementary in tone**, not competing
- Match shape language: a geometric brand font pairs with a geometric body font; a humanist display pairs with a humanist body

```
Brand heading font (display, h1–h3): maintains identity
↓
Secondary body font (body, labels, UI copy): legibility and completeness
```

**Pairing principles:**
- Contrast in role, not in personality — the two fonts should feel like they belong to the same product
- Avoid two display fonts or two highly characterful fonts together
- A neutral, high-quality sans (Inter, DM Sans, Söhne) pairs safely with most brand fonts
- If the brand font is a serif, a clean sans body is the natural complement — and vice versa

**Do this sparingly.** Two typefaces is a deliberate extension. Three typefaces is almost always too many. Document the decision and the rationale so future designers do not add a third.

## Iconography