# ClubbyUp — website assets

Everything here is final and ready to upload. SVG wherever a vector works; PNG only where
the platform demands raster (favicons, Open Graph, email).

```
logo/      the mark and the lockup, all colourways
site root  favicons, app icons, web manifest
social/    Open Graph cards, wide banner, square social video
cards/     four feature tiles
video/     hero loop, logo sting
brand-tokens.css design tokens (also imported by app/globals.css)
brand-preview.html   previews and downloads for every supplied asset
```

## The lockup

`logo/lockup-*.svg` is the mark plus the wordmark. **The wordmark is outlined**, so it
renders identically whether or not Inter has loaded — no FOUT, no fallback font, no layout
shift. Size it by height and let the width follow.

| File | Where |
|---|---|
| `lockup-duo.svg` | default. Navy C, purple member, navy word. Nav bar, docs, invoices. |
| `lockup-navy.svg` | single colour, when the purple dot is too much |
| `lockup-purple.svg` | purple mark, navy word — marketing pages |
| `lockup-on-dark.svg` | lavender mark, white word — on navy |
| `lockup-mono-white.svg` / `lockup-mono-black.svg` | one colour, for print and partner decks |

```html
<a href="/" aria-label="ClubbyUp home">
  <img src="/logo/lockup-duo.svg" alt="ClubbyUp" height="32">
</a>
```

`logo/lockup-*@2x.png` are raster fallbacks for email clients, which mostly refuse SVG.

## The mark alone

`logo/mark.svg` (purple) is the default. Also `mark-navy`, `mark-white`, `mark-lavender`,
and `mark-duo` (navy C, purple member).

`logo/tile-*.svg` put the mark on a 12px rounded tile — use for avatars, app icons, and
anywhere the mark needs its own background.

`logo/mark-animated.svg` draws the C, then pops the member into its mouth. Pure CSS, no
JavaScript, ~800 bytes, honours `prefers-reduced-motion`. Good in a nav on first paint or
on an empty state. `mark-animated-on-dark.svg` is the lavender version.

Clear space: keep the mark's own height of empty space on every side. Minimum lockup
height is 20px; below that use the mark alone.

## Favicon

`favicon.svg` is the one modern browsers use, and it carries a **wider-aperture** drawing of
the C. At 16px the standard stroke closes the counter and the mark turns into a blob; the
wide version keeps daylight in it. The PNGs are already generated from the right variant.

```html
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="icon" href="/favicon-16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a1530">
```

The favicons and `site.webmanifest` live directly in `public/`, served at the site root.
Root metadata in `app/layout.tsx` wires them into every app page.

## Hero video

22 seconds, silent, and it loops seamlessly — the seam measures SSIM 0.9999, so the restart
is invisible. Serve the WebM first; it is a third of the size.

```html
<video autoplay muted loop playsinline preload="metadata"
       poster="/video/hero-poster.jpg" aria-label="A tour of ClubbyUp">
  <source src="/video/hero-1080.webm" type="video/webm">
  <source src="/video/hero-1080.mp4"  type="video/mp4">
</video>
```

`hero-720.mp4` is the mobile cut — swap it in under a `(max-width: 768px)` media query, or
just serve it to everyone on a slow connection. Autoplay only works when the video is
`muted`; keep that attribute.

`video/logo-sting.mp4` is a 3.2s navy logo animation for the top of YouTube uploads.
`logo-sting-alpha.mov` is the same thing with a real alpha channel (ProRes 4444) for
dropping over footage in an editor. There is no alpha WebM — use `mark-animated.svg` on the
web instead, which is better anyway: scalable, transparent, and a thousandth of the size.

## Social

| File | Size | Where |
|---|---|---|
| `social/og-default.png` | 1200x630 | default Open Graph / Twitter card |
| `social/og-proof.png` | 1200x630 | traction card — 50+ users, 35+ clubs, the schools |
| `social/banner-wide.png` | 1600x400 | email header, GitHub social preview |
| `social/square-1080.mp4` | 18s, 1080x1080 | Instagram, LinkedIn |

```html
<meta property="og:title" content="ClubbyUp — run your club, skip the spreadsheets">
<meta property="og:description" content="Roster, attendance and points, all in one place.">
<meta property="og:image" content="https://clubbyup.com/social/og-default.png">
<meta property="og:url" content="https://clubbyup.com">
<meta name="twitter:card" content="summary_large_image">
```

## Feature tiles

`cards/card-checkin`, `card-protect`, `card-points`, `card-analytics` — 760x520, one per
pastel tint, for a features grid. They are pictures of copy, not copy: if you want to edit
the words, ask the designer to regenerate the original artwork rather than retyping over
the PNG. The editable source is not included in this pack. Feature pages include descriptive
alternative text alongside real HTML headings and explanations.

## Application integration

- Navigation and footer use the outlined lockup, selected automatically for light/dark mode.
- Auth screens and dashboard loading states use the reduced-motion-aware animated mark.
- The homepage hero uses the mobile MP4 or desktop WebM/MP4, with a pause button.
  Reduced-motion and data-saver users see the poster until they choose Play.
- The homepage keeps the hero video as its main visual, explains the full meeting
  workflow on navy, and uses all four feature tiles in a supporting grid.
- All four feature tiles accompany their matching explanations on `/features`;
  the full product preview is also on `/demo`.
- The dashboard sidebar uses the navy lockup when expanded and purple/navy app tiles
  when collapsed. Loading states use the animated mark; empty and first-meeting states
  use the lavender tile.
- Onboarding uses the purple lockup. After club creation, the 3.2-second logo sting plays
  once without blocking any action; reduced-motion/data-saver users see a static lockup.
- The square social video and poster power the on-demand overview in the sidebar,
  onboarding, empty workspace, and first-meeting checklist, plus the About page preview.
  Overview dialogs never autoplay; closing them unmounts the video.
- The wide banner is a working signup link on the informational pages, with a legible
  HTML equivalent on mobile instead of shrinking the banner's text.
- Member check-in, kiosk, and meeting presentation screens carry a small branded footer.
  Logos switch to the monochrome-black lockup (or navy mark) when printed.
- Default sharing metadata uses `social/og-default.png`.
- Every asset remains downloadable in `/brand-preview.html`. Email-only PNG lockups,
  white monochrome artwork, and the editor-only alpha MOV are retained for their intended
  export workflows rather than downloaded by the application. Colour variants are used
  where they fit the surface, not rotated randomly for variety.
- `og-proof.png` is supplied promotional artwork, not a live usage counter. Its school names
  must not be presented as institutional endorsements. Re-verify metrics before new campaigns.

## Rules worth keeping

- Purple `#5645d4` is the CTA colour. Not body text, not large fills.
- On navy the mark is lavender `#d6b6f6`, never white — white flattens against a headline.
- Buttons are 8px rectangles. Cards are 12px. Pills are for badges and tabs only.
- Don't recolour the mark outside the files here, don't add a gradient to it, and don't put
  it inside a circle — the C already is one.
- The schools are set as text, never university logos. Those are trademarks, and using them
  in a promo implies an endorsement that doesn't exist.