# The Wise Operator — Brand System

**Last updated:** 2026-02-22
**Maintained by:** Scott Krukowski

This is the canonical reference for all design, content, tone, and visual decisions on scottkrukowski.com and any Wise Operator properties. When anything conflicts with another document, this wins.

---

## Part 1: Content Strategy — The Three Energy Layers

Content is not uniform. It operates at three strategic intensities. These are not tones — they are energy states.

### Layer 1: Foundational Authority
**Default state. 70–80% of all output.**

Purpose: Build trust. Demonstrate thinking. Document systems. Develop intellectual gravity.

Tone: Thoughtful, measured, narrative-driven, operationally grounded.

Rules:
- No artificial urgency
- No viral theatrics
- No exaggerated claims
- Write as if speaking to a smart, skeptical executive

This layer compounds identity over time. Every post, every page, every glossary term is Layer 1 unless otherwise activated.

### Layer 2: Embedded Commercial Clarity
**Always active inside Layer 1. Not a separate mode.**

Every authority piece should subtly:
- Point toward structured implementation
- Highlight tangible before/after states
- Clarify operational improvement

Example: *"If you are buried in disorganized project files, structured retrieval and standardized naming remove daily cognitive friction."*

This is not promotion. It is intelligent articulation of value. Commercial clarity is precision — not hype.

### Layer 3: Campaign Acceleration
**Explicitly activated only. 10–20% of output.**

Used for: newsletter drives, product launches, e-book releases, workshops, consulting pushes, File Clarity campaigns, major distribution moments.

When activated, tone shifts intentionally:
- Higher energy
- More direct
- Clear urgency
- Stronger emotional charge
- Broader hooks
- Scarcity and urgency framing are on the table
- Guilt, FOMO, and emotional persuasion are permitted
- "Unlock" and "leverage" are permitted here

Not allowed even in Campaign mode:
- Empty hyperbole: "revolutionary," "game-changing," "cutting-edge," "groundbreaking," "next-level"
- Fabricated numbers or fake social proof
- Claims that don't map to a real operational advantage

### Velocity Discipline

> Authority builds gravity.
> Embedded commercial clarity builds readiness.
> Campaign acceleration triggers movement.

The rhythm: **Depth. Depth. Depth. Surge. Depth. Depth. Surge.**

If acceleration becomes constant, authority erodes. If authority never accelerates, revenue stagnates.

### Instruction to Claude

Before generating any content, determine: is this Layer 1 (Authority + Embedded Clarity) or Layer 3 (Campaign Acceleration)?

**Default: Layer 1 + embedded Layer 2. Always.**

Only shift to Layer 3 when Scott explicitly says "accelerate," "push this," "campaign mode," or similar direct instruction.

---

## Part 2: Voice & Writing Rules

### This is what The Wise Operator sounds like

- Sentences that move. Not long. Not clipped. Paced.
- Technical precision without jargon walls
- Personal, direct, first-person — but not casual
- Collegial with the reader, not performative
- The reader is a smart, non-technical business professional who is ready to learn
- Every technical term either defines itself in context or links to `/glossary/[slug]`

### Hard rules (all layers)

- **No em dashes.** Use a comma, a period, or rewrite the sentence.
- **No empty hyperbole:** revolutionary, game-changing, cutting-edge, groundbreaking, next-level, transformative (without specifics)
- **No hedging openers:** "In today's world," "Now more than ever," "In the rapidly evolving landscape of"
- **No external links in blog posts** — internal links only. External links live only on glossary pages in "Try It" sections.
- **Link all technical terms** to `/glossary/[slug]`. Tools, frameworks, concepts — all of them.

### Layer 1 specific — avoid

- "Unlock," "leverage" as verbs — save for Layer 3
- Strong CTAs or urgency language
- Starting posts with a question
- Ending sections with rhetorical questions instead of statements
- Calling something a "journey" or "deep dive"
- Three-word bullet points with no substance

### Layer 3 specific — permitted

- "Unlock," "leverage," scarcity, FOMO, guilt framing
- Time-bound language ("This closes Friday," "Last chance")
- Bold, confident self-positioning
- Emotional charge and urgency

### This is what The Wise Operator does NOT sound like (any layer)

- Resume speak: "Results-oriented professional with demonstrated experience in..."
- Agency speak: "We leverage best-in-class solutions to drive ROI..."
- Creator fluff: "I was today years old when I learned..."
- Academic distance: "It can be argued that AI tools may potentially..."

### Persona reminder

The target reader is a non-technical professional who wants to go beyond AI as a consumer product. Not a developer. Not a student. Someone who has heard "prompt engineering" and wants to know what it means for their work. Scott is the bridge. Not the professor. Not the vendor. The bridge.

---

## Part 3: Design System

### The Palette (TWO Canonical Tokens)

These are the official color values. All components, pages, and utilities should reference these variables.

| Token | Value | Usage |
|-------|-------|-------|
| `--two-bg` | `#07090d` | Page background, dark sections |
| `--two-bg-2` | `#0b0f16` | Slightly lifted surfaces |
| `--two-surface` | `rgba(255,255,255,0.04)` | Card backgrounds |
| `--two-surface-2` | `rgba(255,255,255,0.06)` | Hover/elevated card state |
| `--two-border` | `rgba(255,255,255,0.10)` | Borders, dividers |
| `--two-border-strong` | `rgba(255,255,255,0.16)` | Hover/active borders |
| `--two-text` | `#f2e6d2` | Primary body text (warm ivory) |
| `--two-text-2` | `rgba(242,230,210,0.78)` | Secondary body text |
| `--two-text-3` | `rgba(242,230,210,0.60)` | Captions, metadata, kickers |
| `--two-heading` | `#f7ead6` | Headings |
| `--two-gold` | `#f4b24d` | Primary accent — CTAs, highlights |
| `--two-gold-2` | `#ffce73` | Gold highlight / hover |
| `--two-blue` | `#3aa7ff` | Systems/structure accent |
| `--two-blue-2` | `#7fd0ff` | Blue highlight / hover |
| `--two-success` | `#33d6a6` | Success states |
| `--two-warn` | `#ffbf47` | Warning states |
| `--two-danger` | `#ff5c7a` | Error states |

**Color usage rules:**
- Gold (`--two-gold`) = primary CTA buttons, accent lines, key highlighted terms, hover states
- Blue (`--two-blue`) = code blocks, architecture/systems contexts, secondary actions
- Never use gold and blue fighting each other on the same element
- White text on dark backgrounds: always use `--two-text` or `--two-heading`, not pure `#ffffff`
- Green (`--two-success`) is for state feedback only, not primary CTAs

### Typography

| Role | Font | Notes |
|------|------|-------|
| Headings (h1–h4) | **Playfair Display** (serif) | Loaded from Google Fonts. Editorial. |
| Body text | **Inter** (sans-serif) | Loaded from Google Fonts. Clean, readable. |
| Code / mono | `ui-monospace, SFMono-Regular, Menlo` | System stack |

**Type scale:**

| Variable | Size | Use |
|----------|------|-----|
| `--two-fs-1` | 0.875rem (14px) | Captions, tags, kickers |
| `--two-fs-2` | 1rem (16px) | Body default |
| `--two-fs-3` | 1.125rem (18px) | Lead text, large body |
| `--two-fs-4` | 1.35rem (~22px) | h4, subheadings |
| `--two-fs-5` | 1.75rem (28px) | h3, section labels |
| `--two-fs-6` | 2.25rem (36px) | h2, section headlines |
| `--two-fs-7` | 3rem (48px) | h1, hero title |

**Typography rules:**
- Headings: always Playfair Display, `--two-heading` color
- Kickers (small all-caps labels above a headline): `--two-fs-1`, `letter-spacing: 0.14em`, `text-transform: uppercase`, `--two-text-3` color
- Body paragraphs: Inter, `--two-text-2`
- Never mix serif and sans-serif at the same heading level

### Border Radius

| Token | Value | Use |
|-------|-------|-----|
| `--two-r-sm` | 10px | Small UI elements |
| `--two-r-md` | 14px | Buttons, inputs |
| `--two-r-lg` | 18px | Cards |
| `--two-r-xl` | 24px | Campaign banners, hero cards |

### Spacing

| Token | Value |
|-------|-------|
| `--two-1` | 6px |
| `--two-2` | 10px |
| `--two-3` | 14px |
| `--two-4` | 18px |
| `--two-5` | 24px |
| `--two-6` | 32px |

### Effects

| Token | Value | Use |
|-------|-------|-----|
| `--two-shadow` | `0 12px 40px rgba(0,0,0,0.55)` | Elevated cards, modals |
| `--two-shadow-soft` | `0 8px 24px rgba(0,0,0,0.38)` | Default card shadow |
| `--two-ring` | `0 0 0 3px rgba(244,178,77,0.25)` | Focus ring (gold) |

### Background Treatment
The site background is a layered gradient — not flat black:
```css
background:
  radial-gradient(1200px 800px at 20% 10%, rgba(244,178,77,0.10), transparent 55%),
  radial-gradient(900px 650px at 70% 45%, rgba(58,167,255,0.10), transparent 55%),
  linear-gradient(180deg, var(--two-bg), var(--two-bg-2));
```
Warm gold glow upper-left. Cool blue glow mid-right. Deep near-black base. This creates atmosphere — not flatness.

---

## Part 4: Component Patterns

### Cards
- Background: `linear-gradient(180deg, var(--two-surface), rgba(255,255,255,0.02))`
- Border: `1px solid var(--two-border)`
- Border radius: `var(--two-r-lg)` (18px)
- Shadow: `var(--two-shadow-soft)`
- Hover: `translateY(-2px)`, border upgrades to `--two-border-strong`
- Padding: `var(--two-6)` (32px) default, `var(--two-5)` (24px) tight variant

### Buttons

**Primary (gold):** Gold-tinted gradient background, gold border, gold glow on hover. Use for main CTAs.

**Secondary (blue):** Blue-tinted gradient, blue border. Use for structural/secondary actions.

**Ghost:** Transparent background, default border. Use for low-emphasis actions.

All buttons: `border-radius: var(--two-r-md)`, `padding: 12px 16px`, smooth transitions.

### Tags / Pills
- Padding: `6px 10px`, `border-radius: 999px`
- Default: `--two-border`, `--two-text-2`
- Gold variant: `rgba(244,178,77,0.28)` border, warm gold text
- Blue variant: `rgba(58,167,255,0.26)` border, cool blue text

### Nav
- Background: `rgba(7,9,13,0.62)` with `backdrop-filter: blur(12px)` — frosted dark glass
- Border bottom: `1px solid rgba(255,255,255,0.10)`
- Logo: The Wise Operator PNG, `height: 28px` nav-friendly, subtle gold drop shadow
- Links: `--two-text-2` default, `--two-text` on hover

### Campaign Banner
Used for Layer 3 moments only. Radial gradient overlay (gold + blue), gold border, elevated glow on primary CTA.

---

## Part 5: Anti-Patterns

**Design anti-patterns:**
- Pure white (`#ffffff`) text on dark backgrounds — use `--two-text` warm ivory
- Pure black (`#000000`) as background — use `--two-bg` (`#07090d`)
- Green as a primary CTA color — green is for success states only
- Mixing old light-gray body background with new dark components
- Gold glows on more than one or two elements per view — reserve for hero and featured CTAs
- More than two font families on any page

**Content anti-patterns:**
- Starting a post with a question
- Starting a sentence with "I" as the first word
- Calling something a "journey" or "deep dive"
- Empty hyperbole: revolutionary, game-changing, cutting-edge, transformative (without specifics)
- Padding a post to hit a word count
- Three-word bullet points with no operational substance

---

## Part 6: CSS Migration Status

The current `global.css` uses the old brand token system (light background, dark foreground). The nav has been migrated to dark. The rest of the site still uses light tokens.

**Migration needed (separate task):**
- [ ] Update `@theme` in `global.css` to TWO tokens
- [ ] Update body background to dark gradient
- [ ] Audit all components for hardcoded light colors
- [ ] Replace `--color-*` references with `--two-*` in all components
- [ ] Update `prose` utility for dark-background blog reading
- [ ] Verify Lighthouse score after migration

Do not touch CSS until a full component audit is done. The migration is its own PR.