brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

33|6|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill brand-visual-language-dembrandt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: brand-visual-language
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/brand-visual-language
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill brand-visual-language-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent visual choices across an interface by aligning shape, typography, iconography, and component styling with a coherent brand personality.

Core Features & Use Cases

  • Shape Language: Choose consistent border-radius tokens for buttons, inputs, cards, modals, wells, and badges based on whether the brand feels friendly, precise, technical, or authoritative.
  • Typography and Iconography: Select complementary typefaces, extend incomplete brand typography systems, and maintain consistent icon weight, corner style, and usage.
  • Visual Consistency Reviews: Audit design systems and existing interfaces for contradictions between typeface tone, radius logic, icon libraries, and overall brand personality.
  • Use Case: Use this Skill when a SaaS product feels too corporate, when components use mismatched corner radii, or when a team needs to select an icon library that fits its brand.

Quick Start

Ask the brand visual language skill to define a cohesive radius, typography, and iconography system for this interface based on its desired personality.

Frequently Asked Questions about brand-visual-language

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a cohesive visual language for my UI?

Create a cohesive visual language by aligning shape logic, typography, iconography, and component styling with your brand personality. This ensures interface elements like buttons, inputs, and cards maintain consistent visual rules across consumer, SaaS, or enterprise products.

Why do my interface components have mismatched corner radii?

Mismatched corner radii occur when design systems lack standardized border-radius tokens. Defining consistent shape logic for buttons, cards, and modals based on your brand personality—friendly, precise, or authoritative—resolves these visual contradictions.

How do I choose an icon library that fits my brand identity?

Choose an icon library by matching its weight and corner style to your brand personality and typography. Consistent iconography requires evaluating whether the visual tone aligns with your overall design system and interface styling.

Can I audit my existing design system for visual consistency?

Audit existing design systems by reviewing interfaces for contradictions between typeface tone, radius logic, icon libraries, and brand personality. This visual consistency review identifies misalignments across components in SaaS, finance, or technical products.

How do I extend an incomplete brand typography system?

Extend incomplete brand typography systems by selecting complementary typefaces that match your desired brand personality. Pair typefaces carefully to ensure visual consistency across all interface elements within your design system.

What border radius should I use for UI components?

Border-radius tokens for UI components depend on your brand personality: friendly brands use larger radii, precise or technical brands use smaller ones, and authoritative brands use sharp angles. Apply consistent shape logic across buttons, inputs, cards, and modals.