Brand & Design System

Logo

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

CH Monogram — Light

CH Monogram — Dark

C Mark

Text Wordmark

Headshots

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

Close-up — Square

Smiling — Square

Front-facing — Square

Media Kit

Bios, topics, and quick facts for podcasts, press, and speaking introductions.

Topics & Expertise

Quick Facts

Social Links

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.

Surfaces

Every card is a three-layer sandwich: a resting silver frame, an accent gradient revealed on hover, and a white content well. The 12px padding (p-3) is what turns the gradient layers into a border.

<div class="group relative overflow-hidden rounded-3xl p-3">
  <!-- 1. resting silver frame -->
  <div class="absolute inset-0 bg-gradient-to-b
       from-[#fcfcfc] to-[#b9b9b9]
       transition-opacity group-hover:opacity-0" />
  <!-- 2. accent gradient revealed on hover -->
  <div class="absolute inset-0 opacity-0
       transition-opacity group-hover:opacity-100"
       style="background: linear-gradient(
         to bottom, #3b82f6, #8b5cf6, #ec4899)" />
  <!-- 3. white content well -->
  <div class="relative rounded-xl border
       border-black/15 bg-white">…</div>
</div>

Image Treatments

Two signature photo treatments: a warm light-leak screened over images, and a metallic ring around circular avatars.

Warm Light-Leak

Original

Light-leak applied

mix-blend-mode: screen;
background:
  radial-gradient(ellipse at 85% 15%,
    rgba(255,120,100,0.4) 0%, transparent 50%),
  radial-gradient(ellipse at 10% 80%,
    rgba(255,200,100,0.2) 0%, transparent 50%),
  radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,0.1) 0%, transparent 70%);

Metallic Avatar Ring

background: linear-gradient(
  to bottom, #999, #4d4d4d);
padding: 4px;
box-shadow:
  inset 0 8px 8px rgba(255,255,255,0.5),
  inset 0 -8px 8px rgba(77,77,77,0.2);

Gradient Ring — Active

The metallic ring's active state — the 12 accent gradients crossfade around the avatar on the 24s cycle.

Gradient Halo

Gradient border with a soft blurred halo — the wallpaper “lit card” treatment applied to a photo.

Silver Frame

Photos sit inside the resting silver card border — the default treatment for headshots and project shots.

Status Chip

Active

Frosted white pill with a status dot, floated over imagery — used on project cards.

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.

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.

Motion

Motion is soft and physical — small translates, gentle scales, long crossfades. Nothing snaps. Click a token to copy it.

Hover transforms: cards lift 4px (-translate-y-1), buttons scale to 1.02 and press to 0.98, inline images zoom to 1.05–1.10. Sections fade in and rise 2rem the first time they scroll into view.

Typography

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

Wallpapers

Desktop wallpapers built from this design system — hairline rings, gradient arcs, and pill bars on the silver base. 6K resolution (6016×3384), free to use. Click a card to download.

Orbits

Concentric hairline rings with Twilight and Peach gradient arcs

Reeds

Vertical gradient pill bars rising from the bottom edge

Haze

Minimal corner arcs with a whisper of Peach

Ten More Variations

orbits-left

orbits-sunrise

orbits-duo

orbits-quiet

haze-cool

haze-amber

haze-duo

reeds-wide

reeds-falling

rings-scatter

Each opens a live generator that renders at your window size — screenshot at any viewport for custom resolutions.

Usage Rules

Keep the brand looking its best by following these guidelines.