MenFem Brand Skill

Overview

Apply consistent dark-first brand colors, typography, and visual styling to all outputs. Think Monocle, Hodinkee - sophisticated, editorial, cinematic.

Brand Personality: Provocative Challenger - bold, contrarian, question everything. Substantive provocation, not clickbait.

When to Use This Skill

Use this skill when:

• Building UI components with brand styling
• Creating documents that need brand formatting (reports, presentations, PDFs)
• Applying color schemes to visualizations or graphics
• Formatting text with brand typography
• Generating image or video prompts
• Creating social media content (Instagram, YouTube, Twitter/X)
• Designing newsletters with email-safe dark styling
• Creating thumbnails (Anti-YouTube style)
• Ensuring visual consistency across artifacts

Source of Truth

All brand specifications live in docs/brand/. Read the appropriate file for your task:

Start with docs/brand/README.md for a hub linking to all brand documentation.

Quick Reference (Read Full Docs for Details)

Dark-First Color Palette

Text Opacity Scale

100%   text-white / text-bone         Primary headings
70%    text-white/70                  Body text
50%    text-white/50                  Placeholders
10%    border-white/10                Card borders

Universal Principles

• Dark backgrounds (noir, charcoal, smoke) for all content areas
• Copper as SOLE warm accent (no terracotta, sand, sage)
• Sharp corners (0px radius) on all components except form inputs
• Smooth transitions (300-500ms duration)
• Solid CTAs (bg-brand-copper hover:bg-brand-rust)
• UPPERCASE for section headers and buttons
• 4.5:1 contrast minimum for accessibility

Anti-YouTube Thumbnail Style

DO: Dark cinematic backgrounds, bold UPPERCASE text, high-contrast photography, copper accent on ONE element, mysterious mood

DON'T: Exaggerated faces, arrows/circles, bright yellow/red/neon, cluttered compositions, emoji overlays

Behavioral Instructions

When Building UI Components

1. Read docs/brand/quick-reference.md for the full component pattern library
2. Use dark card pattern: bg-brand-charcoal border border-white/10
3. Apply hover effects: hover:border-brand-copper/50 hover:shadow-xl hover:shadow-brand-copper/10
4. Verify accessibility (contrast ratios, focus states)

When Creating Social Media Content

1. Read docs/brand/social-media.md for platform-specific templates
2. Use noir backgrounds, copper accents only
3. Follow Anti-YouTube style for thumbnails
4. Include AI prompt guidance for image generation

When Creating Newsletters

1. Read docs/brand/newsletter.md for dark digest format
2. Use charcoal background (#1A1A1A), copper accents
3. Structure as curated digest (3-5 items)
4. Apply email-safe styling patterns

When Generating Image/Video Prompts

1. Read the relevant prompt doc (docs/brand/prompts/image-generation.md or video-generation.md)
2. Include style keywords: "dark masculine luxury, editorial photography, noir background, copper accent"
3. Reference Anti-YouTube principles for thumbnails
4. Add to "Proven Examples" section in the doc if generation succeeds

When Creating Documents (PDFs, Reports)

1. Read docs/brand/pdfs-reports.md for layout specs
2. Use dark backgrounds (charcoal) with white/bone text
3. Copper accents for headers and highlights only
4. Check brand checklist before finalizing

Priority When Ambiguous

If docs don't cover a specific case:

1. Default to dark background (noir or charcoal)
2. Use copper as sole warm accent
3. Maintain sharp corners
4. Add smooth transitions
5. Ask user if still unclear

Brand Checklist

Before finalizing any branded output:

• Dark background (noir, charcoal, or smoke)
• Copper is the ONLY warm accent
• Text is white or bone (never brown on dark)
• Sharp corners (0px radius) except form inputs
• UPPERCASE for headings and buttons
• Smooth transitions (300-500ms)
• Solid copper CTAs (not gradient)
• 4.5:1 contrast ratio for text
• Editorial, sophisticated feel (not clickbait)

Related Skills

• content-refiner — For writing methodology, voice, and story structure (what things say)
• newsletter-style — For React Email templates with email-safe brand styling

This skill handles what things look like. For what things say, use content-refiner.