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.
/plugin marketplace add plurigrid/asi/plugin install plurigrid-asi-skills@plurigrid/asiThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.
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;
}
/* 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;
--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;
.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;
}
.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);
}
h1 {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--brand-dark);
font-weight: 500;
}