# BRAND.md — profmarek.com / Prof. Marek Kowalkiewicz

> Read this **before producing any asset** for Prof. Marek: web pages, slides,
> social graphics, LinkedIn assets, podcast covers, documents, email banners.
> It defines the visual and verbal identity. If you change the brand, update
> this file. For site architecture and deploy rules, see `AGENTS.md`.

The brand lives in two registers at once: **academic authority** (a professor
who does the research) and **stage energy** (a keynote speaker with live
coding demos and strong opinions). Every asset should carry both — rigour in
the details, nerve in the headlines.

## Colour

Two neutrals families + one loud accent. Vermilion is the signature; if an
asset uses only one colour beyond neutrals, it is vermilion.

| Token | Hex | Role |
|---|---|---|
| `ink` | `#0D0D12` | Primary dark background (near-black, warm-leaning) |
| `coal` | `#16161D` | Raised surfaces on ink (cards, panels) |
| `paper` | `#F5F0E6` | Primary light background |
| `cream` | `#FAF7EF` | Lightest surface; text on dark backgrounds |
| `vermilion` | `#E6007E` | **THE brand colour.** CTAs, accent words, key highlights |
| `cobalt` | `#2E3B9E` | Secondary accent — sparing; quotes, tertiary markers |
| `amber` | `#F5B921` | Secondary accent — sparing; badges, warm highlights |
| `sand` | `#E7DFCE` | Subtle borders/dividers on light surfaces |

Rules:

- Backgrounds **alternate light/dark** on long pages — never two dark or two
  light sections adjacent. Order on the one-pager: paper → ink → cream →
  cream(podcasts) → ink → paper → ink(footer).
- Vermilion is an **accent**, not a fill. Never flood large areas with it —
  it appears as CTAs, one italic accent word per headline, eyebrows, icons,
  underlines.
- Amber and cobalt are seasoning, one per asset at most, and never compete
  with vermilion for attention in the same viewport.
- On dark: body text is `cream` at 60–70% opacity for secondary copy, full
  cream for primary. On light: `ink` at 60–70% / full ink, same logic.
- Secondary accents on dark backgrounds use low-opacity glows
  (e.g. `vermilion/10`–`/15` blurred orbs), never solid blocks.

## Typography

Three typefaces, three distinct jobs. Do not substitute.

| Typeface | Role | Usage |
|---|---|---|
| **Archivo** | Display (`font-display`) | Headlines, buttons, eyebrows, labels — **always UPPERCASE**, extra-bold/black, tight tracking (`leading` 0.95–1.02) |
| **Fraunces** | Serif italic (`font-serif`) | The human counterpoint — light **italic lowercase** accent words inside headlines, book titles, pull quotes |
| **Inter** | Body (`font-sans`) | Paragraphs, captions, UI text — sentence case, relaxed leading |

The signature headline move:

```
MAKING SENSE OF THE
ECONOMY OF *algorithms*
```

Archivo black uppercase for the statement; **one** Fraunces light-italic
lowercase word or short phrase in vermilion carrying the personality. Never
more than one italic phrase per headline. Never italicise more than ~3 words.

- Eyebrows/labels: Archivo, `text-xs`, bold, uppercase, letter-spacing 0.25em.
- Buttons: Archivo, `text-sm`, bold, uppercase, letter-spacing wider.
- Numbers/stats: Archivo, oversized, uppercase label beneath in Inter.
- No all-caps Inter anywhere. No title-case Archivo. No roman (non-italic)
  Fraunces in headlines.

## Voice

Confident, plain-spoken, slightly wry. He is a professor who demos, not a
guru who predicts.

**Do:**
- Short declaratives. "Ten minutes of conversation, twenty minutes with a
  coding agent."
- Concrete over abstract: name the thing, the number, the organisation.
- Dry humour is welcome — one wink per asset, not three.
- First person singular ("I work with leaders…") on the site and personal
  assets.
- The framing line: *"Everything in these talks already exists — it's just
  unevenly distributed."*

**Don't:**
- No futurism, no predictions, no "the future of work is here". He is **not
  a futurist** — never use that word about him.
- No hype vocabulary: revolutionary, game-changer, cutting-edge, unleash,
  supercharge, journey, passion.
- No doom either. "No hype, no doom, no listicles" is the editorial line.
- No LinkedIn-ese broetry (one-sentence-paragraph
  chains with fake profundity).

Naming: **"Prof. Marek"** is the stage/brand name (site nav, banners). Full
"Prof. Marek Kowalkiewicz" for first formal mention in documents.
"Marek" alone is fine in running copy after first mention.

## Logo — the "Prof. Marek" mark (NOT the "A")

The **site/personal logo** is the vermilion abstract mark (three angular
shapes, an upward arrow). It is **not** the "A" from *The Economy of
Algorithms* cover — that "A" is the *book and podcast* mark, and appears on
podcast covers, social avatars, and monogram fallback tiles. Do not use the
"A" where the personal logo is meant (nav, email signatures, press kits).

**Public files** (self-hosted, hotlink-safe):

- `https://profmarek.com/brand/prof-marek-logo.png` — master, transparent
  background, 512×512
- `https://profmarek.com/brand/prof-marek-logo-solid.png` — solid vermilion
  silhouette on transparent
- `https://profmarek.com/brand/prof-marek-logo-white.png` — white knockout
  for dark backgrounds
- `https://profmarek.com/brand/prof-marek-logo-180.png` — 180px, avatars
  and favicon-adjacent uses

Rules: keep it vermilion on light (cream/paper) or white on dark (ink/coal);
never on vermilion itself, never recoloured to anything else, never rotated
or stretched. The "A" stays vermilion on its own book/podcast materials.

## Imagery

- **Photos**: real stage/workshop shots, cropped **deliberately** — fixed
  aspect ratios with a chosen focal anchor, never `object-cover`
  centre-guessing. Warm stage light beats corporate stock. He often wears
  colourful sneakers on stage; that contrast (professor + sneakers) is on
  brand.
- **Client/media logos**: always **pre-baked grayscale** (grayscale +
  contrast ~1.15 baked into the PNG, transparency preserved). Never CSS
  filters, never colour-on-hover. On the site marquee they're ordered by
  impressiveness, most impressive first.
- **Podcast covers**: self-hosted official artwork at 1400×1400, never
  hotlinked, never recoloured.
- **Texture**: dark sections carry a 5% film-grain overlay; large blurred
  colour orbs (vermilion/amber at 10–15% opacity) provide depth. Restraint:
  one orb per section.

## Buttons & calls to action

- Primary: vermilion pill, cream uppercase Archivo text. Hover: cream
  background, ink text, slight lift. One primary button per view.
- Ghost on dark: cream outline pill → fills cream on hover.
- Ghost on light: ink outline pill → fills ink, text goes cream.
- CTA copy is a verb phrase: "Book Marek to speak", "Listen to the show",
  "Browse all podcast appearances". Never "Submit", never "Click here".
- All enquiry CTAs resolve to the on-site contact form (`#contact`).
  Typeform is retired; never link to it.

## Layout & spacing

- Generous whitespace: sections breathe at 96–128px vertical padding
  (`py-24 md:py-32`), content max-width 7xl, gutters 24–40px.
- Cards: 16–24px radius, hairline borders (`ink/10` on light, `cream/10` on
  dark), soft shadows only on hover for light cards.
- Numbered sections ("01 — Speaking") with a vermilion numeral, hairline
  rule, and uppercase eyebrow — the site's structural signature.

## Asset-specific notes

- **LinkedIn banner**: 1584×396; keep the bottom-left quadrant clear
  (profile photo overlaps at roughly x 28–196, y 278–446). Frame 1 of any
  slideshow doubles as the static banner for most viewers.
- **LinkedIn slideshow frames**: 1080×1080, one idea per frame, URL or CTA
  on the final frame (arrow glyphs like → are **not** in Fraunces — put
  URLs on their own line with a vermilion underline instead).
- **One-pagers / PDFs**: same type system; Archivo headlines, Fraunces
  italic accents, Inter body; vermilion for section markers; generous
  margins; the personal logo top-left or bottom-right.

## Quick test before shipping

1. Is vermilion doing the accent work, alone? (amber/cobalt only if needed)
2. Exactly one Fraunces italic accent phrase per headline?
3. Archivo headlines uppercase, Inter never uppercase?
4. Backgrounds alternate light/dark with no same-tone neighbours?
5. Zero hype words, zero predictions, zero "futurist"?
6. Logos grayscale-baked, covers self-hosted, photos deliberately cropped?