Apply professional brand colors, typography, and visual standards to artifacts. Use when: (1) applying brand colors to designs, (2) following visual guidelines, (3) ensuring brand consistency, (4) styling documents with company standards. Triggers: "brand colors", "brand guidelines", "company style", "corporate identity", "brand consistency", "visual standards", "style guide".
Apply professional brand colors and typography to artifacts and documents.
:root {
/* Primary */
--brand-primary: #2563eb; /* Main brand color */
--brand-primary-dark: #1d4ed8; /* Hover/active states */
--brand-primary-light: #3b82f6; /* Lighter variant */
/* Secondary */
--brand-secondary: #64748b; /* Supporting color */
--brand-secondary-dark: #475569;
--brand-secondary-light: #94a3b8;
/* Accent */
--brand-accent: #f59e0b; /* Call-to-action, highlights */
--brand-accent-dark: #d97706;
}
:root {
/* Backgrounds */
--neutral-white: #ffffff;
--neutral-50: #f8fafc;
--neutral-100: #f1f5f9;
--neutral-200: #e2e8f0;
/* Text */
--neutral-600: #475569;
--neutral-700: #334155;
--neutral-800: #1e293b;
--neutral-900: #0f172a;
}
:root {
--success: #22c55e;
--success-light: #dcfce7;
--warning: #f59e0b;
--warning-light: #fef3c7;
--error: #ef4444;
--error-light: #fee2e2;
--info: #3b82f6;
--info-light: #dbeafe;
}
:root {
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
/* Headings */
.h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.h2 { font-size: 2rem; font-weight: 600; line-height: 1.25; }
.h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
/* Body */
.body-large { font-size: 1.125rem; line-height: 1.6; }
.body { font-size: 1rem; line-height: 1.6; }
.body-small { font-size: 0.875rem; line-height: 1.5; }
.caption { font-size: 0.75rem; line-height: 1.4; }
/* 4px base unit */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
.btn-primary {
background: var(--brand-primary);
color: white;
padding: var(--space-3) var(--space-6);
border-radius: 0.5rem;
font-weight: 500;
}
.btn-primary:hover {
background: var(--brand-primary-dark);
}
.btn-secondary {
background: transparent;
color: var(--brand-primary);
border: 1px solid var(--brand-primary);
padding: var(--space-3) var(--space-6);
border-radius: 0.5rem;
}
.card {
background: var(--neutral-white);
border: 1px solid var(--neutral-200);
border-radius: 0.75rem;
padding: var(--space-6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.input {
border: 1px solid var(--neutral-200);
border-radius: 0.5rem;
padding: var(--space-3) var(--space-4);
font-size: 1rem;
}
.input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px var(--brand-primary-light);
}
header_style = {
'font': 'Inter',
'size': 28,
'color': '#1e293b',
'weight': 'bold',
'margin_bottom': 16
}
body_style = {
'font': 'Inter',
'size': 11,
'color': '#334155',
'line_height': 1.6
}
slide_theme = {
'title_font': 'Inter',
'title_size': 44,
'title_color': '#0f172a',
'body_font': 'Inter',
'body_size': 24,
'body_color': '#334155',
'accent_color': '#2563eb',
'background': '#ffffff',
'slide_number_color': '#64748b'
}
| Background | Text | Accent |
|---|---|---|
| White | neutral-800 | primary |
| neutral-50 | neutral-900 | primary |
| primary | white | accent |
| neutral-900 | white | primary-light |
| Background | Text | Issue |
|---|---|---|
| primary-light | white | Low contrast |
| neutral-200 | neutral-400 | Insufficient contrast |
| accent | primary | Clashing colors |