LoopyLuci Anthropic Brand Styling
Apply Anthropic's official brand colors and typography to any artifact — slide decks, documents, HTML pages, or visual assets.
Brand Colors
Main Colors
| Name | Hex | Usage |
|---|---|---|
| Dark | #141413 |
Primary text and dark backgrounds |
| Light | #faf9f5 |
Light backgrounds and text on dark |
| Mid Gray | #b0aea5 |
Secondary elements |
| Light Gray | #e8e6dc |
Subtle backgrounds |
Accent Colors
| Name | Hex | Usage |
|---|---|---|
| Orange | #d97757 |
Primary accent |
| Blue | #6a9bcc |
Secondary accent |
| Green | #788c5d |
Tertiary accent |
Typography
| Role | Font | Fallback |
|---|---|---|
| Headings | Poppins | Arial |
| Body Text | Lora | Georgia |
Font Management
- Use system-installed Poppins and Lora fonts when available
- Automatic fallback to Arial (headings) and Georgia (body)
- No font installation required
Code Example: Brand CSS
:root {
--brand-dark: #141413;
--brand-light: #faf9f5;
--brand-orange: #d97757;
--brand-blue: #6a9bcc;
--brand-green: #788c5d;
--font-heading: 'Poppins', Arial, sans-serif;
--font-body: 'Lora', Georgia, serif;
}
Common Pitfalls
- ❌ Forgetting font fallbacks — Always specify Arial/Georgia
- ❌ Using 8-digit hex colors — Alpha in hex corrupts PPTX files
- ❌ Low contrast — Brand light gray on white is hard to read
Verification Checklist
- All colors use exact hex values from brand palette
- Typography uses correct fonts with proper fallbacks
- Accent colors cycle properly (orange → blue → green)
- Text has sufficient contrast against its background