brand-visual-language

Name: brand-visual-language
Author: dembrandt

27stars5forks

How to install brand-visual-language?

dembrandt/dembrandt-skills/brand-visual-language

$npx -y skills add dembrandt/dembrandt-skills --skill brand-visual-language

Installs into the current project.

Summary

A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography, border-radius, and iconography communicates personality before a single word is read. Use when establishing a design system, choosing icon l

Files · 1

View on GitHub

SKILL.md

1	# Brand Visual Language
2
3	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.
4
5	## Shape Language
6
7	\| Shape \| Tone \| Associated with \|
8	\|---\|---\|---\|
9	\| Rounded, pill-shaped \| Friendly, approachable, playful, modern \| Consumer apps, health, kids, lifestyle, social \|
10	\| Softly rounded (8–12px) \| Professional, warm, accessible \| SaaS, productivity, general B2B \|
11	\| Lightly rounded (2–4px) \| Precise, structured, efficient \| Enterprise tools, finance, data platforms \|
12	\| Sharp / no radius \| Technical, serious, authoritative \| Developer tools, security, industrial \|
13
14	Every component — cards, inputs, modals, badges — should follow the same radius logic.
15
16	## Radius for Large Surfaces
17
18	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.
19
20	- 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.
21	- 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.
22
23	## Reading Shape from an Existing Brand
24
25	Before choosing a radius, look at the brand's existing materials:
26
27	- Logo: Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
28	- Product photography or illustration style: Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
29	- Typography: A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
30	- Competitor landscape: Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.
31
32	> 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).
33
34	## Typography and Shape
35
36	Typeface shapes carry the same tonal signals:
37
38	\| Type style \| Tone \|
39	\|---\|---\|
40	\| Geometric sans (circular letterforms) \| Modern, clean, slightly playful \|
41	\| Humanist sans (varied stroke widths) \| Warm, readable, professional \|
42	\| Grotesque sans (neutral, utilitarian) \| Serious, efficient, no-frills \|
43	\| Serif \| Authoritative, established, editorial \|
44	\| Rounded sans \| Friendly, approachable, informal \|
45	\| Monospace \| Technical, developer-facing, precise \|
46
47	The typeface and the border-radius should not contradict each other. A rounded, friendly typeface paired with sharp 0px corners creates visual dissonance.
48
49	## Extending Brand Typography
50
51	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.
52
53	When the brand book is insufficient for UI purposes, extend it deliberately:
54
55	When extension is justified:
56	- Brand font has poor legibility at small sizes (display fonts, decorative typefaces)
57	- Brand font lacks the weights needed for UI hierarchy

People who liked this also viewed

6 picks

Type

brand-visual-language

27stars5forks

View on GitHub

How to install brand-visual-language?

dembrandt/dembrandt-skills/brand-visual-language

$npx -y skills add dembrandt/dembrandt-skills --skill brand-visual-language

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Brand Visual Language
2
3	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.
4
5	## Shape Language
6
7	\| Shape \| Tone \| Associated with \|
8	\|---\|---\|---\|
9	\| Rounded, pill-shaped \| Friendly, approachable, playful, modern \| Consumer apps, health, kids, lifestyle, social \|
10	\| Softly rounded (8–12px) \| Professional, warm, accessible \| SaaS, productivity, general B2B \|
11	\| Lightly rounded (2–4px) \| Precise, structured, efficient \| Enterprise tools, finance, data platforms \|
12	\| Sharp / no radius \| Technical, serious, authoritative \| Developer tools, security, industrial \|
13
14	Every component — cards, inputs, modals, badges — should follow the same radius logic.
15
16	## Radius for Large Surfaces
17
18	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.
19
20	- 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.
21	- 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.
22
23	## Reading Shape from an Existing Brand
24
25	Before choosing a radius, look at the brand's existing materials:
26
27	- Logo: Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
28	- Product photography or illustration style: Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
29	- Typography: A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
30	- Competitor landscape: Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.
31
32	> 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).
33
34	## Typography and Shape
35
36	Typeface shapes carry the same tonal signals:
37
38	\| Type style \| Tone \|
39	\|---\|---\|
40	\| Geometric sans (circular letterforms) \| Modern, clean, slightly playful \|
41	\| Humanist sans (varied stroke widths) \| Warm, readable, professional \|
42	\| Grotesque sans (neutral, utilitarian) \| Serious, efficient, no-frills \|
43	\| Serif \| Authoritative, established, editorial \|
44	\| Rounded sans \| Friendly, approachable, informal \|
45	\| Monospace \| Technical, developer-facing, precise \|
46
47	The typeface and the border-radius should not contradict each other. A rounded, friendly typeface paired with sharp 0px corners creates visual dissonance.
48
49	## Extending Brand Typography
50
51	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.
52
53	When the brand book is insufficient for UI purposes, extend it deliberately:
54
55	When extension is justified:
56	- Brand font has poor legibility at small sizes (display fonts, decorative typefaces)
57	- Brand font lacks the weights needed for UI hierarchy

People who liked this also viewed

6 picks

Type