Facilitation-value-tool grossman-brand

Christopher Grossman's facilitation brand style guide. Use when creating new lead magnet pages, landing pages, or tools to maintain consistent brand look and feel.

install

source · Clone the upstream repo

git clone https://github.com/iwant2facilitate/facilitation-value-tool

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/iwant2facilitate/facilitation-value-tool "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.agents/skills/grossman-brand" ~/.claude/skills/iwant2facilitate-facilitation-value-tool-grossman-brand && rm -rf "$T"

manifest: .agents/skills/grossman-brand/SKILL.md

source content

Christopher Grossman — Brand Style Guide

Use this guide when building any new page or lead magnet to stay on brand.

Theme

Mode: Dark theme by default (
```
class="dark"
```
on
```
<html>
```
)
Overall feel: Premium, modern, professional — clean dark backgrounds with subtle colored glows and glassmorphism cards

Typography

Display font (headings):
```
Outfit
```
— weights 300–700, applied via
```
font-display
```
class with
```
tracking-tight
```
Body font:
```
Inter
```
— weights 300–600, applied via
```
font-sans
```
Base font size:
```
text-lg
```
(18px) on body
Google Fonts import:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Brand Colors (HSL)

Category Colors

Category	Color	HSL Value	CSS Variable
Scope	Blue	212 90% 60%	`--logo-blue`
Discover	Teal	180 70% 45%	`--logo-teal`
Empathize	Green	140 70% 45%	`--logo-green`
Inspire	Yellow	50 90% 55%	`--logo-yellow`
Plan	Orange	25 90% 55%	`--logo-orange`
Lead	Red	350 90% 65%	`--logo-red`
Accent	Purple	260 80% 70%	`--logo-purple`

UI Colors (Dark Theme)

Element	HSL Value
Background	224 45% 4%
Foreground	210 40% 98%
Card	224 40% 7%
Primary	212 90% 60%
Secondary	224 30% 15%
Muted foreground	215 20% 65%
Border	224 30% 15%
Border radius	0.75rem

Background Treatment

Subtle radial gradient glows on the body, fixed position:

body {
  background-image: 
    radial-gradient(at 0% 0%, hsla(var(--logo-blue) / 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(var(--logo-purple) / 0.1) 0px, transparent 50%);
  background-attachment: fixed;
}

Card Style

Glassmorphism cards with:

bg-card/50 backdrop-blur-sm border-white/5 shadow-xl

Colored gradient accent bar at top:

absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-{color1} to-{color2} opacity-50

Footer areas:
```
bg-white/[0.02] border-t border-white/5
```

Interactive Elements

Buttons / Selectable Options

Default:
```
border border-white/5 bg-white/5
```

Hover:

hover:bg-white/10 hover:border-primary/50

Selected:
```
border-primary bg-primary/10
```
Rounded:
```
rounded-xl
```
Transitions:
```
transition-all
```

Slider value badges

font-mono font-semibold bg-white/5 border border-white/10 px-2 py-1 rounded-md

Primary CTA Buttons

Full-width gradient:

bg-gradient-to-r from-logo-blue to-logo-teal

White text, bold, rounded-xl, with shadow:
```
shadow-lg shadow-logo-blue/20
```
Arrow icon on right side

Header

Sticky, blurred:

sticky top-0 z-50 w-full border-b border-white/5 bg-background/60 backdrop-blur-xl

Logo (

logo.png

, 32×32) + tool name in

font-display font-semibold text-lg

Gradient Text

Headline accent text uses gradient fill:

<span class="text-transparent bg-clip-text bg-gradient-to-r from-logo-blue to-logo-purple">text</span>

Section Accent Bars

Each section card gets a thin gradient bar at the top:

Part 1 (costs):
```
from-logo-blue to-logo-teal
```
Part 2 (quiz):
```
from-logo-purple to-logo-red
```
Recommendation:
```
from-logo-teal to-logo-blue
```

Separators

```
bg-white/5
```

Contact

Email: iwant2facilitate@gmail.com
Logo:
```
client/public/logo.png
```
(multicolor pin markers on black background)

Key Design Principles

Glassmorphism: Semi-transparent cards with backdrop blur
Subtle borders:
```
border-white/5
```
or
```
border-white/10
```
— never harsh
Color through accents: Background stays dark, color comes from gradient bars, text gradients, and category-specific highlights
Smooth transitions: All interactive elements use
```
transition-all
```

Centered start screens: Initial landing uses

min-h-[calc(100vh-8rem)] flex flex-col justify-center items-center

Smooth scrolling: Custom
```
requestAnimationFrame
```
animation with ease-in-out cubic for quiz-style reveals

Workshop Chooser Template

Reference:

.agents/skills/grossman-brand/workshop-chooser-template.md

When building a new lead magnet, read the workshop chooser template for the reusable page architecture (quiz flow, recommendation engine, email capture, proposal card). The template documents exactly which sections to customize (start card + Part 1) and which sections stay the same.