brand-system

Name: brand-system
Author: appautomaton

9installs3forks

How to install brand-system?

appautomaton/presentation/brand-system

$npx -y skills add appautomaton/presentation --skill brand-system

Installs into the current project.

Summary

Create visual identity systems: color palettes, font pairings, style direction, and rendered preview PDFs. Use when the user needs a cohesive design system before building a deck, presentation, document, or any visual project. Works for consulting engagements, product pitches, pe

Files · 1

View on GitHub

SKILL.md

1	# Brand System
2
3	Create a visual identity system: palette, typography, and style direction, documented in a markdown brief, extracted into a JS config, and rendered as a preview PDF.
4
5	## Artifacts
6
7	All output goes to the user's working directory. Ask for the path if not provided.
8
9	\| File \| What it is \|
10	\|---\|---\|
11	\| `brand-brief.md` \| The primary artifact. Research, rationale, and every design decision in one readable document. \|
12	\| `identity.js` \| A machine-readable extraction of the brief. Importable by downstream build scripts. \|
13	\| `brand-preview.pdf` \| A 3-slide rendered proof: palette, typography, and a combination demo. \|
14
15	Intermediate HTML goes to `/tmp/brand-system/` and is cleaned up after rendering.
16
17	## Reference files
18
19	Load these on demand. Not all are needed for every engagement.
20
21	\| File \| When to load \|
22	\|---\|---\|
23	\| [references/palette-guide.md](references/palette-guide.md) \| When building the color palette: 8-role structure, derivation from anchor color, contrast testing \|
24	\| [references/typography-guide.md](references/typography-guide.md) \| When selecting fonts: pairing lookup table, weight discipline, same-vs-different family guidance \|
25	\| [references/design-landscape.md](references/design-landscape.md) \| When proposing a visual style: 6 active design directions with full specifications (2025-2026) \|
26
27	---
28
29	## How to work
30
31	This is a conversational design process. The brief is built through dialogue: research, propose, refine.
32
33	### 1. Start from what you know
34
35	Read the user's request. Most of the direction is already implied: the subject, the context, the tone. Don't ask questions the request already answers.
36
37	If genuine ambiguity remains, ask the one or two questions that would most change your direction. Good questions resolve a fork in the road.
38
39	Worth asking (only if truly unclear):
40	- "Should this feel institutional and restrained, or is there room for something more contemporary?"
41	- "Is there an existing brand I should align with, or are we starting fresh?"
42
43	Decide yourself (don't ask the user):
44	- What colors to use: research the brand and propose
45	- What font to use: match the context and recommend
46	- How many palette roles: the structure is defined, follow it
47
48	### 2. Research
49
50	Before choosing colors or fonts, look at what exists.
51
52	Known brand → search for their actual colors, typeface, and visual direction. Extract the primary brand color, the typeface family, and the tone.
53
54	New project → search for what works in the space: peer palettes, industry conventions, tone-appropriate examples.
55
56	### 3. Build the palette
57
58	Load [references/palette-guide.md](references/palette-guide.md) for the full role structure and derivation rules.
59
60	The palette grows from an anchor color:
61	- User provides one → build around it
62	- Known brand → extract from research
63	- Fresh → choose based on tone and context
64
65	Eight roles. One accent + three signals. Every color traces to a reason.
66
67	### 4. Choose typography
68
69	Load [references/typography-guide.md](references/typography-guide.md) for the pairing lookup table and rules.
70
71	Find the Google Font that echoes the subject's typographic character. One family for both heading and body is the default. A second family must earn its place.
72
73	### 5. Propose a style direction
74
75	Load [references/design-landscape.md](references/design-landscape.md) for the full catalog of six active design directions.
76
77	The style defines shape language, surface treatment, and compositional rules. It is recorded in the brief and the config, but it is un-opinionated in application: the style direction is a vocabulary that downstream skills interpret for their own medium. This skill defines what the visual language is, not how every slide or page should look.
78
79	Recommend the best fit based on context and offer 1-2 alternatives. Filter by context. Don't present all six.
80
81	Anti-patterns regardless of style:
82	- Rounded cards with shadows → SaaS product UI
83	- Cards nested inside cards → visual noise
84	- Gradient fills on content → marketing, not professional
85	- Inconsistent radius within a single composition
86
87	### 6. Draft the brief, then refine
88
89	Write `brand-brief.md` with everything so far. Present it and ask the user 2-3 targeted questions: the decisions most likely to benefit from their input.
90
91	Identify what to surface based on what you're least certain about. If the accent color was a clear derivation from the brand, don't ask abo

People who liked this also viewed

6 picks

Type

brand-system

9installs3forks

View on GitHub

How to install brand-system?

appautomaton/presentation/brand-system

$npx -y skills add appautomaton/presentation --skill brand-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Brand System
2
3	Create a visual identity system: palette, typography, and style direction, documented in a markdown brief, extracted into a JS config, and rendered as a preview PDF.
4
5	## Artifacts
6
7	All output goes to the user's working directory. Ask for the path if not provided.
8
9	\| File \| What it is \|
10	\|---\|---\|
11	\| `brand-brief.md` \| The primary artifact. Research, rationale, and every design decision in one readable document. \|
12	\| `identity.js` \| A machine-readable extraction of the brief. Importable by downstream build scripts. \|
13	\| `brand-preview.pdf` \| A 3-slide rendered proof: palette, typography, and a combination demo. \|
14
15	Intermediate HTML goes to `/tmp/brand-system/` and is cleaned up after rendering.
16
17	## Reference files
18
19	Load these on demand. Not all are needed for every engagement.
20
21	\| File \| When to load \|
22	\|---\|---\|
23	\| [references/palette-guide.md](references/palette-guide.md) \| When building the color palette: 8-role structure, derivation from anchor color, contrast testing \|
24	\| [references/typography-guide.md](references/typography-guide.md) \| When selecting fonts: pairing lookup table, weight discipline, same-vs-different family guidance \|
25	\| [references/design-landscape.md](references/design-landscape.md) \| When proposing a visual style: 6 active design directions with full specifications (2025-2026) \|
26
27	---
28
29	## How to work
30
31	This is a conversational design process. The brief is built through dialogue: research, propose, refine.
32
33	### 1. Start from what you know
34
35	Read the user's request. Most of the direction is already implied: the subject, the context, the tone. Don't ask questions the request already answers.
36
37	If genuine ambiguity remains, ask the one or two questions that would most change your direction. Good questions resolve a fork in the road.
38
39	Worth asking (only if truly unclear):
40	- "Should this feel institutional and restrained, or is there room for something more contemporary?"
41	- "Is there an existing brand I should align with, or are we starting fresh?"
42
43	Decide yourself (don't ask the user):
44	- What colors to use: research the brand and propose
45	- What font to use: match the context and recommend
46	- How many palette roles: the structure is defined, follow it
47
48	### 2. Research
49
50	Before choosing colors or fonts, look at what exists.
51
52	Known brand → search for their actual colors, typeface, and visual direction. Extract the primary brand color, the typeface family, and the tone.
53
54	New project → search for what works in the space: peer palettes, industry conventions, tone-appropriate examples.
55
56	### 3. Build the palette
57
58	Load [references/palette-guide.md](references/palette-guide.md) for the full role structure and derivation rules.
59
60	The palette grows from an anchor color:
61	- User provides one → build around it
62	- Known brand → extract from research
63	- Fresh → choose based on tone and context
64
65	Eight roles. One accent + three signals. Every color traces to a reason.
66
67	### 4. Choose typography
68
69	Load [references/typography-guide.md](references/typography-guide.md) for the pairing lookup table and rules.
70
71	Find the Google Font that echoes the subject's typographic character. One family for both heading and body is the default. A second family must earn its place.
72
73	### 5. Propose a style direction
74
75	Load [references/design-landscape.md](references/design-landscape.md) for the full catalog of six active design directions.
76
77	The style defines shape language, surface treatment, and compositional rules. It is recorded in the brief and the config, but it is un-opinionated in application: the style direction is a vocabulary that downstream skills interpret for their own medium. This skill defines what the visual language is, not how every slide or page should look.
78
79	Recommend the best fit based on context and offer 1-2 alternatives. Filter by context. Don't present all six.
80
81	Anti-patterns regardless of style:
82	- Rounded cards with shadows → SaaS product UI
83	- Cards nested inside cards → visual noise
84	- Gradient fills on content → marketing, not professional
85	- Inconsistent radius within a single composition
86
87	### 6. Draft the brief, then refine
88
89	Write `brand-brief.md` with everything so far. Present it and ask the user 2-3 targeted questions: the decisions most likely to benefit from their input.
90
91	Identify what to surface based on what you're least certain about. If the accent color was a clear derivation from the brand, don't ask abo

People who liked this also viewed

6 picks

Type