mcpField
B
brand-guidelines

brand-guidelines

github.com/moizibnyousafDesign & UI1.2k121 installsUpdated 6w ago
Repository

About brand-guidelines

brand-guidelines is a skill for applying consistent branding to documents, presentations, web pages, and marketing materials. It outlines colors, typography, spacing, and component examples for creators who need a coherent visual style.

Key features

  1. 01Define brand colors with CSS variables
  2. 02Set typography and spacing rules
  3. 03Style buttons, cards, and headers
  4. 04Apply guidance to document and slide templates
  5. 05Check contrast and visual hierarchy

Use cases

  1. 01Align visual styles across web and marketing materials
  2. 02Create document templates based on brand rules
  3. 03Set title and content slide styles

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill brand-guidelines

After installing, type/brand-guidelinesin Claude Code to confirm it loaded.

Details

From the project README

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

  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

Comments

Markdown supported