How do I install the Brand Guidelines skill?

Run npx skillmds add majiayu000/brand-guidelines-11 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Brand Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Brand Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Brand Guidelines free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Apache-2.

Who published Brand Guidelines?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Brand Guidelines by majiayu000 — Agent Skill

Name: Brand Guidelines
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

Brand Guidelines

Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.

majiayu000 6fd49f8 2 files · 3.1 KB Updated Sep 9, 2026 567 repo stars

File contents

Brand Guidelines Application

Purpose

Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.

Core Brand Elements

Colors

Define your brand palette with CSS variables:

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

Typography

/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Spacing

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Application Examples

Buttons

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

Cards

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Headers

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

Document Templates

Google Docs

Heading 1: Display font, 24pt, Brand Dark
Heading 2: Display font, 18pt, Brand Primary
Body: Body font, 11pt, Brand Text
Links: Brand Primary, underlined

Presentations

Title slides: White text on Brand Primary background
Content slides: Brand Dark text on white
Accent elements: Brand Secondary or Accent

Best Practices

Consistency: Use exact brand colors, never approximate
Contrast: Ensure 4.5:1 minimum for text readability
Hierarchy: Use size and weight to establish importance
Whitespace: Generous spacing feels premium
Logo usage: Maintain clear space around logo

---name: brand-guidelines-11description: Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.license: Apache-2.0--- # Brand Guidelines Application ## Purpose Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials. ## Core Brand Elements ### Colors Define your brand palette with CSS variables: ```css :root { --brand-primary: #1a73e8; --brand-secondary: #34a853; --brand-accent: #ea4335; --brand-dark: #202124; --brand-light: #f8f9fa; --brand-text: #3c4043; --brand-text-muted: #5f6368; } ``` ### Typography ```css /* Primary font for headings */ --font-display: 'Product Sans', 'Google Sans', system-ui; /* Body font */ --font-body: 'Roboto', 'Inter', -apple-system, sans-serif; /* Monospace for code */ --font-mono: 'Roboto Mono', 'Fira Code', monospace; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; ``` ### Spacing ```css --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; ``` ## Application Examples ### Buttons ```css .btn-primary { background: var(--brand-primary); color: white; padding: var(--space-2) var(--space-4); border-radius: 4px; font-family: var(--font-body); font-weight: 500; } ``` ### Cards ```css .card { background: white; border: 1px solid var(--brand-light); border-radius: 8px; padding: var(--space-6); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } ``` ### Headers ```css h1 { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--brand-dark); font-weight: 500; } ``` ## Document Templates ### Google Docs - Heading 1: Display font, 24pt, Brand Dark - Heading 2: Display font, 18pt, Brand Primary - Body: Body font, 11pt, Brand Text - Links: Brand Primary, underlined ### Presentations - Title slides: White text on Brand Primary background - Content slides: Brand Dark text on white - Accent elements: Brand Secondary or Accent ## Best Practices 1. **Consistency**: Use exact brand colors, never approximate 2. **Contrast**: Ensure 4.5:1 minimum for text readability 3. **Hierarchy**: Use size and weight to establish importance 4. **Whitespace**: Generous spacing feels premium 5. **Logo usage**: Maintain clear space around logo

Frequently asked questions