# corey.co Design System

The complete design language for corey.co and the Corey Haines brand.
Human-browsable version with live demos: https://corey.co/brand
Assets referenced below are served from https://corey.co.

## Principles

- Neutral, refined base — silver gradients and warm grays let the work speak.
- Color is a reward, not a default: the 12 accent gradients appear on
  interaction (hover, active states) or as single quiet accents, never as
  large static fills.
- Round over square: pills, circles, rings, and generous corner radii are
  the brand's native shapes.
- Motion is soft and physical — small translates, gentle scales, long
  crossfades. Nothing snaps.

## Colors

### Core palette

| Token | Value | Use |
|---|---|---|
| Brand Gray | `#4d4d4d` | Headings, icons, primary text |
| Body Text | `rgba(77,77,77,0.8)` | Body copy |
| Hover / Active | `#000000` | Text hover states |
| Background | `#ffffff` | Page background |
| Borders / Dividers | `#eeeeee` | Hairline borders, rules |

### UI gradients (silver system)

| Token | Value | Use |
|---|---|---|
| Card Border — Default | `linear-gradient(to bottom, #fcfcfc, #b9b9b9)` | Resting card frame |
| Button — Primary | `linear-gradient(to bottom, #999, #4d4d4d)` | Dark pill buttons, avatar ring |
| Card Border — Angled | `linear-gradient(113deg, #fcfcfc 0%, #b9b9b9 84%)` | Alternate frame angle |
| Card Border — Reverse | `linear-gradient(203deg, #fcfcfc 18%, #b9b9b9 100%)` | Alternate frame angle |

### Accent gradients (the 12)

Applied as `linear-gradient(to bottom, from, via, to)` on card borders
during hover, or as conic gradients on pill-button borders. Any gradient
can be used for any component; they also cycle as a set (see Motion).

| Name | From | Via | To |
|---|---|---|---|
| Sunset | `#ef4444` | `#f97316` | `#eab308` |
| Emerald | `#22c55e` | `#10b981` | `#06b6d4` |
| Twilight | `#3b82f6` | `#8b5cf6` | `#ec4899` |
| Neon | `#00bfff` | `#0015ff` | `#ff00ea` |
| Coral | `#f43f5e` | `#ec4899` | `#d946ef` |
| Ocean | `#6366f1` | `#3b82f6` | `#06b6d4` |
| Citrus | `#eab308` | `#84cc16` | `#22c55e` |
| Aurora | `#14b8a6` | `#6366f1` | `#a855f7` |
| Amber | `#f59e0b` | `#d97706` | `#b45309` |
| Peach | `#fb7185` | `#f9a8d4` | `#fbbf24` |
| Cosmos | `#9333ea` | `#7c3aed` | `#4f46e5` |
| Prism | `#ef4444` | `#06b6d4` | `#eab308` |

Source of truth in code: `src/lib/gradients.ts` (`HOVER_GRADIENTS`).

## Typography

Geist Sans everywhere; Geist Mono for code and technical content.

| Style | Spec |
|---|---|
| H1 | 56px (up to 124px on the homepage hero) / Medium / tracking-tight / leading 1.1 |
| H2 | 24px / Medium |
| Body | 18px / Light / leading-relaxed / `rgba(77,77,77,0.8)` |
| Small / captions | 14px / Regular / `rgba(77,77,77,0.6)` |
| Eyebrow labels | 14px / Medium / uppercase / tracking-wider / `rgba(77,77,77,0.5)` |
| Code | Geist Mono, 13–14px |

## Shape & radius

Base radius token: `--radius: 0.625rem` with a scale from `radius-sm`
(base − 4px) through `radius-4xl` (base + 16px).

In practice: cards use `rounded-3xl` outer / `rounded-xl` inner; buttons,
chips, tags, and bars are fully rounded (`rounded-full`). Circles and
rings (avatar rings, status dots) are core brand shapes.

## Surfaces — the card recipe

Every card is a sandwich of three layers:

```html
<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 duration-300 group-hover:opacity-0"></div>
  <!-- 2. accent gradient revealed on hover (any of the 12, or GradientCycle) -->
  <div class="absolute inset-0 opacity-0 transition-opacity duration-300
              group-hover:opacity-100"
       style="background: linear-gradient(to bottom, #3b82f6, #8b5cf6, #ec4899)"></div>
  <!-- 3. white content well -->
  <div class="relative rounded-xl border border-black/15 bg-white">…</div>
</div>
```

The 12px padding (`p-3`) is what turns the gradient layers into a border.

## Image treatments

### Warm light-leak

The signature photo treatment: three radial gradients screened over any
image (avatars, project shots) to add warmth.

```css
.light-leak::after {
  content: "";
  position: absolute; inset: 0;
  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

Round images get a metal ring: 4px padding, `linear-gradient(to bottom,
#999, #4d4d4d)` background, plus inset bevel shadows:

```css
box-shadow:
  inset 0 8px 8px rgba(255,255,255,0.5),
  inset 0 -8px 8px rgba(77,77,77,0.2);
```

### Gradient avatar ring (active state)

Interactive avatar rings crossfade the 12 accent gradients instead of the
gray — 2s per gradient, 24s full cycle, random start offset per instance
(see `src/components/avatar-ring.tsx`).

### Gradient halo

The wallpaper "lit card" treatment applied to a photo: wrap the image in
a 3px accent-gradient border (rounded-2xl), and place a blurred copy of
the same gradient behind it (`-inset-1`, `blur-lg`, ~40% opacity) as a
soft halo.

### Silver frame

Photos sit inside the resting silver card border: an outer rounded-2xl
container with `linear-gradient(to bottom, #fcfcfc, #b9b9b9)` and 8px
padding, image inside with `border: 1px solid rgba(0,0,0,0.15)`.

### Status chip

A frosted white pill floated over imagery (project cards): `bg-white/80`
+ `backdrop-blur`, fully rounded, containing a 8px status dot
(`#22c55e` active / `#999` inactive) and a 12px medium label.

## Motion

### Tokens

| Token | Value | Use |
|---|---|---|
| Micro | 200ms ease-out | Text color, small scales (hover 1.02–1.10, active 0.97–0.98) |
| Hover | 300ms ease-out | Card lift (`-translate-y-1`), gradient border crossfade, image zoom (scale 1.05–1.10) |
| Slide-in | 350ms `cubic-bezier(0.22, 1, 0.36, 1)` | Slide/deck enter: fade + 2rem translate-x |
| Crossfade | 500ms | Gradient cycle opacity transitions |
| Scroll reveal | 700ms ease-out | Sections fade in + rise 2rem on first view (IntersectionObserver, threshold 0.15) |

### Signature animations

- **Gradient cycle** — the 12 accent gradients crossfade in sequence:
  2s per gradient, 24s full loop, each instance starts at a hash-based
  random offset so neighbors never sync. (`gradient-fade` keyframes,
  `src/components/gradient-cycle.tsx`)
- **Pill button spin** — conic accent gradient rotates continuously behind
  a white pill: `gradient-spin` 4s linear, layered with the 24s crossfade.
  (`src/components/pill-button.tsx`)
- **Cursor shimmer** — a soft white radial (`rgba(255,255,255,0.7)` core,
  600px default radius) tracks the cursor across card surfaces.
  (`src/components/cursor-shimmer.tsx`)

## Wallpapers

Desktop wallpapers built from this system, 6016×3384 (6K), free to use:

- https://corey.co/wallpapers/orbits-6k.png — concentric hairline rings + gradient arcs
- https://corey.co/wallpapers/reeds-6k.png — vertical gradient pill bars
- https://corey.co/wallpapers/haze-6k.png — minimal corner arcs

Generators (self-contained HTML, render at the browser window size;
screenshot at any viewport for custom resolutions):

- https://corey.co/wallpapers/generator.html?variant=orbits (also: reeds, haze)
- https://corey.co/wallpapers/variations.html?variant=orbits-left (also:
  orbits-sunrise, orbits-duo, orbits-quiet, haze-cool, haze-amber,
  haze-duo, reeds-wide, reeds-falling, rings-scatter)

## Logo & assets

- CH monogram: https://corey.co/ch-logo.svg (also .png)
- C mark: https://corey.co/c-logo.svg (also .png)
- Text wordmark: https://corey.co/corey-text.svg
- Headshots: https://corey.co/headshots/headshot-closeup.jpg, headshot-smiling.jpg, headshot-portrait.jpg

## Usage rules

Do: use the logo on white or very light backgrounds; invert to white on
dark; keep clear space equal to the height of the "C"; minimum size 24px;
stick to the palette above.

Don't: stretch, skew, recolor, rotate, or crop the logo; add shadows or
effects to it; place it on busy or low-contrast backgrounds; use accent
gradients as large static fills.