Brand Guidelines

Everything you need to represent the Corey Haines brand consistently. Use these assets and guidelines for press, speaking events, collaborations, and partner materials.

Logo

The CH monogram is the primary logo mark. Use it wherever the brand needs to be identified at a glance.

CH monogram

CH Monogram — Light

CH monogram on dark background

CH Monogram — Dark

C mark

C Mark

Corey Haines text wordmark

Text Wordmark

Headshots

Approved headshots for press, speaking events, and partner materials. Right-click to save or use the download links below.

Corey Haines headshot — close-up

Close-up — Square

Corey Haines headshot — smiling

Smiling — Square

Corey Haines headshot — front-facing

Front-facing — Square

Colors

A neutral, refined palette that lets the work speak for itself. Click any swatch to copy its value.

Core Palette

UI Gradients

Hover Accent Gradients

Colorful gradients appear on card borders during hover. Any gradient can be used for any section or component. Hover the cards below to preview.

Hover me

Sunset

Red → Orange → Yellow

Hover me

Emerald

Green → Teal → Cyan

Hover me

Twilight

Blue → Violet → Pink

Hover me

Neon

Cyan → Blue → Magenta

Hover me

Coral

Rose → Pink → Fuchsia

Hover me

Ocean

Indigo → Blue → Cyan

Hover me

Citrus

Yellow → Lime → Green

Hover me

Aurora

Teal → Indigo → Violet

Hover me

Amber

Orange → Amber → Gold

Hover me

Peach

Salmon → Pink → Apricot

Hover me

Cosmos

Purple → Violet → Indigo

Hover me

Prism

Red → Cyan → Yellow

Interaction Patterns

Animated patterns that define the brand's interactive language across the site.

Animated Gradient Cycling

On hover, card borders cycle through all 12 accent gradients with a smooth crossfade. Each card starts at a random offset so adjacent cards don't sync.

Project Alpha

Hover to see cycling gradient

Case Study

Hover to see cycling gradient

Latest Post

Hover to see cycling gradient

2s per gradient, 24s full cycle, hash-based random start offset per instance

Cursor Shimmer

A soft radial glow follows the cursor across card surfaces on hover, adding depth and interactivity. Move your cursor across the cards above to see it in action.

Pill Buttons

Action buttons feature a spinning conic gradient border that cycles through all accent colors on hover. The inner pill stays white. Each button starts at a random phase.

Typography

Geist Sans for headings and body. Geist Mono for code and technical content.

Geist Sans — Primary

Aa

H1 — 56px / Medium

Section Heading

H2 — 24px / Medium

Body text looks like this. Clean, readable, and light.

Body — 18px / Light

Small text for captions and labels.

Small — 14px / Regular

Geist Mono — Code

Aa

Used for code blocks and technical content

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Usage Rules

Keep the brand looking its best by following these guidelines.

Do

  • +Use the logo on white or very light backgrounds
  • +Invert to white when placed on dark backgrounds
  • +Maintain clear space equal to the height of the “C” around the logo
  • +Keep the logo at a minimum size of 24px
  • +Use the provided brand colors

Don't

  • Stretch, skew, or distort the logo
  • Recolor the logo with non-brand colors
  • Add drop shadows, gradients, or effects to the logo
  • Place on busy or low-contrast backgrounds
  • Rotate or crop the logo