visual-emphasis-and-hierarchy

Name: visual-emphasis-and-hierarchy
Author: dembrandt

278installs5forks

How to install visual-emphasis-and-hierarchy?

dembrandt/dembrandt-skills/visual-emphasis-and-hierarchy

$npx -y skills add dembrandt/dembrandt-skills --skill visual-emphasis-and-hierarchy

Installs into the current project.

Summary

The most important actions and content in a UI should be visually prominent — through size, colour, weight, and position. Visual hierarchy guides the user's eye to what matters most and signals which action is primary. Use when designing button groups, CTAs, dashboards, cards, or

Files · 1

View on GitHub

SKILL.md

1	# Visual Emphasis and Hierarchy
2
3	Every screen has a most-important thing. Visual hierarchy is the design work that makes sure the user's eye finds it first — without requiring the user to read everything and decide for themselves.
4
5	Emphasis is achieved through size, colour, weight, contrast, and position. These tools work because they are relative: an element looks important because it differs from what surrounds it.
6
7	## The Hierarchy Ladder
8
9	Design every action group and content area with a clear hierarchy:
10
11	\| Level \| Role \| Visual treatment \|
12	\|---\|---\|---\|
13	\| Primary \| The one action the user should most likely take \| Filled, brand colour, largest button in the group \|
14	\| Secondary \| An alternative action of moderate importance \| Outlined or ghost, neutral colour, same or slightly smaller size \|
15	\| Tertiary \| Rarely needed, destructive, or low-priority \| Text link or subtle ghost, smaller, visually recessive \|
16	\| Disabled \| Unavailable \| Low contrast, no hover state — signals "not yet" \|
17
18	There should be at most one primary action per view or per logical section. Two filled buttons side by side cancel each other out — both feel equally important, so neither guides the user.
19
20	## Size as Emphasis
21
22	A larger button, heading, or element draws the eye before a smaller one. Use size deliberately:
23
24	- The primary CTA is the largest interactive element in its group
25	- Page headings are larger than section headings, which are larger than labels
26	- A featured product, plan, or option can be physically larger than its peers to signal recommendation
27
28	Size differences must be perceptible — a 2px difference reads as inconsistency, not hierarchy. Use your modular scale for type; use meaningful size steps for components.
29
30	## Colour as Emphasis
31
32	Colour is the strongest emphasis signal and therefore the most easily overused.
33
34	- One brand colour for primary actions — used sparingly so it retains its signal
35	- Secondary and tertiary actions should be neutral (grey, outlined) so the primary colour stands out
36	- Status colours (red, orange, green) should never appear on primary CTAs — they carry their own semantic meaning
37
38	## Brand Colour as Large Areas
39
40	Brand primary colours work well as large background regions — hero sections, feature banners, section dividers. This is different from using brand colour on interactive elements.
41
42	The rule: pick one role and commit to it per view.
43
44	- Brand colour as a large area → buttons and links on that section use white or a high-contrast neutral, not the brand colour again
45	- Brand colour on interactive elements → backgrounds stay neutral so the colour retains its signal
46
47	Used as a bold background, brand colour communicates identity and energy. Used simultaneously on both backgrounds and buttons, it loses all signal — everything blends together.
48
49	## Contrast and Whitespace as a Focal Point
50
51	Emphasis is not just about what you add (colour, size), but also what you remove (distraction).
52
53	The "Contrast + Space" Rule: To create a powerful focal point, combine a high-contrast element (or a bold brand colour) with generous whitespace (negative space) around it.
54	- Isolation: Whitespace acts as a frame, isolating the primary action or message.
55	- Visual Silence: By removing competing elements nearby, you ensure the user's eye has only one logical place to land.
56	- Scale: A small high-contrast button in a large empty field can have more "pull" than a giant button in a crowded layout.
57
58	Use whitespace deliberately to "push" the user's attention toward the primary goal.
59
60	```
61	✓ Dark brand-colour hero section + white CTA button
62	✓ White p

People who liked this also viewed

6 picks

Type

visual-emphasis-and-hierarchy

278installs5forks

View on GitHub

How to install visual-emphasis-and-hierarchy?

dembrandt/dembrandt-skills/visual-emphasis-and-hierarchy

$npx -y skills add dembrandt/dembrandt-skills --skill visual-emphasis-and-hierarchy

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Visual Emphasis and Hierarchy
2
3	Every screen has a most-important thing. Visual hierarchy is the design work that makes sure the user's eye finds it first — without requiring the user to read everything and decide for themselves.
4
5	Emphasis is achieved through size, colour, weight, contrast, and position. These tools work because they are relative: an element looks important because it differs from what surrounds it.
6
7	## The Hierarchy Ladder
8
9	Design every action group and content area with a clear hierarchy:
10
11	\| Level \| Role \| Visual treatment \|
12	\|---\|---\|---\|
13	\| Primary \| The one action the user should most likely take \| Filled, brand colour, largest button in the group \|
14	\| Secondary \| An alternative action of moderate importance \| Outlined or ghost, neutral colour, same or slightly smaller size \|
15	\| Tertiary \| Rarely needed, destructive, or low-priority \| Text link or subtle ghost, smaller, visually recessive \|
16	\| Disabled \| Unavailable \| Low contrast, no hover state — signals "not yet" \|
17
18	There should be at most one primary action per view or per logical section. Two filled buttons side by side cancel each other out — both feel equally important, so neither guides the user.
19
20	## Size as Emphasis
21
22	A larger button, heading, or element draws the eye before a smaller one. Use size deliberately:
23
24	- The primary CTA is the largest interactive element in its group
25	- Page headings are larger than section headings, which are larger than labels
26	- A featured product, plan, or option can be physically larger than its peers to signal recommendation
27
28	Size differences must be perceptible — a 2px difference reads as inconsistency, not hierarchy. Use your modular scale for type; use meaningful size steps for components.
29
30	## Colour as Emphasis
31
32	Colour is the strongest emphasis signal and therefore the most easily overused.
33
34	- One brand colour for primary actions — used sparingly so it retains its signal
35	- Secondary and tertiary actions should be neutral (grey, outlined) so the primary colour stands out
36	- Status colours (red, orange, green) should never appear on primary CTAs — they carry their own semantic meaning
37
38	## Brand Colour as Large Areas
39
40	Brand primary colours work well as large background regions — hero sections, feature banners, section dividers. This is different from using brand colour on interactive elements.
41
42	The rule: pick one role and commit to it per view.
43
44	- Brand colour as a large area → buttons and links on that section use white or a high-contrast neutral, not the brand colour again
45	- Brand colour on interactive elements → backgrounds stay neutral so the colour retains its signal
46
47	Used as a bold background, brand colour communicates identity and energy. Used simultaneously on both backgrounds and buttons, it loses all signal — everything blends together.
48
49	## Contrast and Whitespace as a Focal Point
50
51	Emphasis is not just about what you add (colour, size), but also what you remove (distraction).
52
53	The "Contrast + Space" Rule: To create a powerful focal point, combine a high-contrast element (or a bold brand colour) with generous whitespace (negative space) around it.
54	- Isolation: Whitespace acts as a frame, isolating the primary action or message.
55	- Visual Silence: By removing competing elements nearby, you ensure the user's eye has only one logical place to land.
56	- Scale: A small high-contrast button in a large empty field can have more "pull" than a giant button in a crowded layout.
57
58	Use whitespace deliberately to "push" the user's attention toward the primary goal.
59
60	```
61	✓ Dark brand-colour hero section + white CTA button
62	✓ White p

People who liked this also viewed

6 picks

Type