focus-ai-brand

name: focus-ai-brand description: Apply Focus.AI brand guidelines to documents, presentations, websites, and other materials. Supports two sub-brands - Focus.AI Client (services, proposals, client work) and Focus.AI Labs (research, experiments, public content). Use when creating branded materials, applying visual identity, or generating content that needs to follow Focus.AI style. Trigger on "focus.ai style", "focus brand", "labs style", or requests for branded Focus.AI materials.

Focus.AI Design System

A design system that combines Swiss International Style structural rigor with Focus.AI's brand identity. Warm paper backgrounds, editorial typography, rigorous grid, generous whitespace, opacity-based hierarchy, and restrained accent color.

Six Principles

Grid first. Every layout lives on a 12-column grid (editorial pages use a 3-column asymmetric variant). 8px base unit for spacing.
Mobile first, always. Design for 320px, then expand. Use sm:, md:, lg: prefixes systematically.
Whitespace is structure. Generous padding and margins are the design, not waste.
Opacity creates hierarchy. Never introduce a second text color to indicate weight. Use opacity on the primary text color.
Two accents maximum, used sparingly. Primary accent for CTAs and navigation. Secondary accent for decorative highlights only.
Clarity over decoration. Every element earns its place. If it doesn't help the reader focus on what matters, remove it.

Brand Architecture

The Focus.AI
├── Focus.AI (Client)     → Services, products, client-facing work
│   Aesthetic: Editorial magazine, polished, confident
│   Palette: Paper, Ink, Petrol, Vermilion
│
└── Focus.AI Labs         → Research, experiments, public content
    Aesthetic: Bell Labs research report, curious, generous
    Palette: Paper, Void, Rand-Blue, Alert-Red

Rule of thumb: Client work or selling services → Client brand. Sharing learnings or exploring → Labs brand.

Quick Reference

Typography

Family	Font	Usage
Display	Source Serif 4	Cover titles, H1 (paged reports), pull quotes, stat numbers
Sans	Inter	Section headings (h2–h4), body text, UI, navigation
Mono	Courier Prime	Labels, metadata, code, page numbers

Weight rules:

Headings: font-black (900) or font-bold (700) with negative letter-spacing
Body: font-normal (400) or font-medium (500), line-height 1.6
Labels: font-mono, uppercase, wide letter-spacing

Colors at a Glance

Role	Client	Labs
Background	Paper `#faf9f6`	Paper `#f3f2ea`
Primary text	Ink `#161616`	Void `#1a1a1a`
Secondary text	`ink/70` opacity	`void/70` opacity
Tertiary text	`ink/40` opacity	`void/40` opacity
Primary accent	Petrol `#0e3b46`	Rand-Blue `#0055aa`
Secondary accent	Vermilion `#c3471d`	Alert-Red `#d93025`
Border	`#d4d3cf`	`rgba(26,26,26,0.2)`

Never use pure #ffffff or #000000 for backgrounds.

Opacity Hierarchy (Core Rule)

Reduce opacity to de-emphasize — never change the hue:

Full:     text-[ink]           → primary content
Softer:   text-[ink]/70        → secondary labels, supporting text
Quiet:    text-[ink]/40        → captions, metadata
Ghosted:  text-[ink]/20        → disabled, placeholder

Spacing

Base unit: 8px. Every spacing value is a multiple of 8.

Context	Value	Usage
Tight	8px	Inline gaps, icon spacing
Default	16px	Component internal spacing
Between	32px	Between components
Section	48–64px	Section padding (mobile/tablet)
Section	96–128px	Section padding (desktop)

Layout

Two layout modes:

12-column grid — General purpose, Tailwind grid grid-cols-12 gap-8
Asymmetric editorial — [144px label] [1fr content, max 740px] [192px marginalia]

Body text max width: 60ch. Never wider.

Brand Selection Guide

Context	Brand
Client proposals, case studies, service pages	Client
Product marketing, landing pages	Client
Conference analysis, research reports	Labs
Experiments, technical blog posts	Labs
Open source projects	Labs

Commands

`/report` — Generate Report / PDF

Convert markdown to a styled HTML report with smart page breaks.

# Open in browser (Cmd+P to print)
/report file:./my-document.md style:labs

# Generate PDF directly via chrome-driver
/report file:./proposal.md style:client output:./proposal.pdf

# Force paged template in browser
/report file:./analysis.md style:client paged:true

See references/print.md for full details on the paged.js system, smart page-break rules, and component library.

`/deck` — Generate Presentation (.pptx)

Convert markdown to a branded PowerPoint presentation.

/deck file:./content.md style:client output:./presentation.pptx
/deck file:./research.md style:labs output:./research-deck.pptx

See references/presentations.md for slide masters, component patterns, and design rules.

When to Read Reference Files

Task	File
Full color tokens, type scale, CSS properties, dark mode	`references/design-system.md`
12-col grid, asymmetric layout, section spacing, decoration	`references/grid-and-layout.md`
Mobile-first breakpoints, fluid type, responsive checklist	`references/responsive.md`
Tailwind component patterns: buttons, cards, nav, forms	`references/components.md`
Paste-ready Tailwind v3/v4 config, Google Fonts link tags	`references/tailwind-config.md`
`/report` command, paged.js, smart page breaks, PDF workflow	`references/print.md`
`/deck` command, slide masters, PptxGenJS patterns	`references/presentations.md`
AI image generation styles (Renaissance, Bell Labs)	`references/imagery.md`
Voice & tone guidelines, anti-patterns, example transformations	`references/voice.md`
Pre-ship audit checklist	`references/checklist.md`

Gotchas

Never pure white or pure black — Use paper tones and ink/void.
Never font-bold alone on headings — Use font-black (900) with tight negative tracking.
Body text max 60ch — Wider columns hurt legibility.
Generous section padding — Minimum py-12 (48px), standard py-16–py-24 (64–96px).
Labels are always mono — Courier Prime, uppercase, wide letter-spacing.
Border-radius is subtle — 4–8px for cards/buttons. Never fully rounded on large containers.
Opacity, not gray shades — text-ink/70 not text-gray-500.
Warm backgrounds — Even dark mode uses warm charcoal, not cold black.
Source Serif 4 is display only — Never for body text or h2–h4. Only cover titles, h1 in paged reports, pull quotes, stat numbers.
Two accents max — Primary for actions/links, secondary used sparingly for decorative highlights.
Every layout works on mobile — Default classes are mobile. Always add md: / lg: variants.