Bespoke Launchpads — Design Guide

A bespoke launchpad is a launchpad page on CollectorCrypt that looks like its own branded microsite instead of a regular CC page. The functionality is identical to a standard launchpad — buyers see the drop image, the supply remaining, a quantity selector, a mint button, and the items being offered — but the look is fully driven by the partner's brand: their colors, fonts, imagery, and section order.

You don't need to know CSS. You design in Figma; an engineer translates your design into a stylesheet. This page explains what you can change, what's locked, and how to deliver a design that's straightforward to build.

What's the same on every launchpad

Every CollectorCrypt launchpad is made of the same building blocks. A bespoke design rearranges, restyles, and optionally hides them — but you don't get to invent new blocks without an engineering project.

The available sections (and the data-section value the engineer uses to target each) are:

Section	`data-section`	What it shows
Image	`image`	The drop's main image.
Title	`title`	The drop's name, description, and blockchain badge.
Supply	`supply`	Progress bar + "X of Y remaining" + per-unit price.
Items	`items`	A grid/list of the actual collectibles in the drop (only present for multi-item drops).
Attributes	`attributes`	Trait list (rarity, edition, etc.).
Price breaks	`pricebreaks`	Bulk pricing tiers, if applicable.
Quantity	`quantity`	A picker for how many the buyer wants.
Mint	`mint`	Total price + the action button(s) — Connect Wallet, Mint, Sold Out, Pay with Card. After purchase, this becomes a success state with a transaction link.

Image and Title are separate sections — in the default desktop layout they appear side-by-side (image on the left, title on the right) with the image sticky as the buyer scrolls. A bespoke design can keep that arrangement or place them anywhere else.

Sections that have no data for a given launchpad (e.g. no attributes, no price breaks, only one item) are omitted from the DOM entirely. Per-launch CSS that targets a missing section is a no-op.

In addition, every bespoke launchpad has a minimal top bar with the CollectorCrypt logo (or your partner logo) on the left and a "Back to CollectorCrypt" link on the right. The main CC site header and footer are hidden. The top bar can be recolored to match your design but must always be present.

What you can change per launch

Colors — Background, surface, accent, text, button, success/error states. Any color in the page can be themed.

Fonts — One display font (for headings, hero, prices) and one body font (for copy, controls). Reference them by absolute URL in the CSS (Google Fonts @import or self-hosted .woff2).

Imagery — Hero image, optional background pattern/texture, optional partner logo for the top bar. CollectorCrypt does not host bespoke assets — the designer is responsible for hosting them (Google Fonts, partner CDN, S3, etc.).

Section order — Rearrange the sections in any vertical or grid order. For example: hero on top, then mint + supply side-by-side in a row, then items, then attributes hidden.

Section visibility — Hide any of the sections (except mint — buyers need to be able to mint). E.g. hide attributes, hide price breaks, hide legal-on-page (it'll be accessible via a link).

Section spacing and sizing — Padding, margins, max-width, column count of grids (e.g. items can be 2-up, 3-up, 4-up).

Typography details — Font sizes, weights, letter spacing, line height, text transform (uppercase, etc.) on a per-section basis.

Button + control styles — Border radius, fill, hover states, sizing, shadow.

What's locked

These require engineering, not design, and are not part of a bespoke launch:

New sections that don't exist on the default launchpad (e.g. video hero with controls, animated scroll timeline, FAQ accordion, embedded Twitter feed).
New behaviors (e.g. a "reserve a spot" flow before mint, an interactive 3D viewer).
Different mint flow (the actual minting logic is shared across all launchpads).
Removing the top bar entirely (always present for the back-link).

If a partner needs something locked, raise it before design starts — it's a separate engineering project, not part of the bespoke-launchpad template.

Deliverables checklist

For each bespoke launch, hand off:

Figma file with at least:
- Desktop layout (≥1440 wide).
- Mobile layout (375 wide).
- All sections visible (mark any to hide).
- Connect-wallet / mint / sold-out states.
- Hover and pressed states for buttons.
Color tokens named clearly: background, surface, accent, text-primary, text-muted, button-bg, button-text, success, error.
Font URLs — Google Fonts link, or absolute URLs to self-hosted .woff2 files, with the weights you use.
Hero image URL at 2x resolution (and an optional mobile variant URL).
Partner logo URL for the top bar (SVG preferred). This goes into the admin "Custom Logo URL" field directly — it's not in the CSS.

Section visibility map — which sections are visible, in what order. A simple list is fine:

image  |  title           ← side-by-side on desktop
image  |  supply
image  |  mint            ← image still sticky on the left
items
pricebreaks
attributes (HIDDEN)

Slug — a short kebab-case name for the partner (e.g. cool-brand). Optional in the CSS itself (presets scope under [data-launch] with no value, which matches any bespoke wrapper), but useful if you want a stylesheet locked to one specific launchpad: [data-launch='cool-brand'].
Hosted asset URLs — the designer hosts fonts/images/logos somewhere reachable (their CDN, Google Fonts, S3, etc.) and includes the absolute URLs in the CSS. CollectorCrypt does not host bespoke assets.

How it gets built

Designer delivers the Figma + asset URLs.
Anyone fluent in CSS (engineer, partner front-end dev, design-engineer) writes one CSS file translating Figma → CSS rules. No code is committed to the CC repo. The CSS:
- Scopes every rule under [data-launch] (or [data-launch='<slug>'] for explicit per-launch locking — both work, the slug-less form is paste-and-go).
- Overrides --launchpad-* CSS variables to recolor and re-font.
- Reorders sections via grid-template-areas on [data-launchpad-grid].
- Hides unwanted sections with display: none on [data-section='<name>'].
- Uses absolute URLs for any fonts/images (@import url(...), background-image: url(https://...)).
An admin opens the launchpad in the CC admin UI, pastes the CSS into the Custom CSS textarea, fills in the Slug and Custom Logo URL fields, and saves.
The page at /launchpad/<id> automatically picks up the design: global CC header/footer disappear, the minimal top bar appears, and the CSS is injected as a <style> tag.
Designer reviews on staging; iterates with whoever wrote the CSS by editing and re-saving in the admin UI. No deploys required between iterations.
Goes live by setting the launchpad status to Active.

Typical time per bespoke launch: a few hours to translate Figma → CSS (depending on how unusual the design is). Iteration after the initial paste is a few minutes per round-trip since no build/deploy is involved.

Figma template

Use these section labels (and these names) on the Figma artboard so an engineer can match them 1:1 to the markup:

┌──────────────────────────────────────────────────────┐
│ TOP BAR  [logo]                          [back link] │  ← always present, restyle only
├───────────────────────┬──────────────────────────────┤
│                       │  data-section="title"        │
│                       │  [chain badge]               │
│                       │  Drop Name                   │
│                       │  short description           │
│                       ├──────────────────────────────┤
│  data-section="image" │  data-section="supply"       │
│                       │  ▓▓▓▓▓▓▓░░░░░  300/1000      │
│  [drop artwork]       ├──────────────────────────────┤
│                       │  data-section="items"        │
│  (sticky on scroll    │  ┌──┐ ┌──┐ ┌──┐              │
│   in default layout)  │  │  │ │  │ │  │              │
│                       │  └──┘ └──┘ └──┘              │
│                       ├──────────────────────────────┤
│                       │  data-section="attributes"   │
│                       │  • rarity • edition • …      │
│                       ├──────────────────────────────┤
│                       │  data-section="pricebreaks"  │
│                       │  1=$X · 5=$Y · 10=$Z         │
│                       ├──────────────────────────────┤
│                       │  data-section="quantity"     │
│                       │  [−]  [ 1 ]  [+]             │
│                       ├──────────────────────────────┤
│                       │  data-section="mint"         │
│                       │  Total: $X                   │
│                       │  [ MINT NOW ]                │
│                       │  [ Pay with Card ]           │
└───────────────────────┴──────────────────────────────┘

In your Figma file, label each frame with the data-section name so the engineer can match it directly. Hidden sections: still include them in the file, just mark them (hidden) so it's explicit (vs. forgotten).

Starter CSS

Paste this into the Custom CSS field as a starting point, then edit. Scope is [data-launch] so it runs on any bespoke launchpad regardless of slug — no find-replace required.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');

[data-launch] {
  /* 1. Theme tokens — recolor + re-font everything in one place. */
  --launchpad-bg: #fafafa;
  --launchpad-surface: #fff;
  --launchpad-surface-strong: #f0f0f0;
  --launchpad-border: #e6e6e6;
  --launchpad-border-strong: #cdcdcd;
  --launchpad-accent: #f06;
  --launchpad-accent-hover: #d70058;
  --launchpad-accent-contrast: #fff;
  --launchpad-text: #111;
  --launchpad-text-muted: #444;
  --launchpad-text-subtle: #6e6e6e;
  --launchpad-text-faint: #8c8c8c;
  --launchpad-link: #05e;
  --launchpad-font-display: 'Inter', system-ui, sans-serif;
  --launchpad-font-body: 'Inter', system-ui, sans-serif;
  --launchpad-radius: 8px;
  --launchpad-radius-lg: 20px;

  /* 2. Layout — stack everything in a single centered column. */
  [data-launchpad-grid] {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
    grid-template-areas:
      'image'
      'title'
      'supply'
      'mint'
      'items'
      'pricebreaks';
    gap: 2rem;
  }
  [data-section='image'] {
    position: static; /* turn off the sticky-image behavior */
  }
  [data-section='image'] img {
    border-radius: var(--launchpad-radius-lg);
    max-height: 480px;
    object-fit: cover;
  }

  /* 3. Hide sections you don't want. */
  [data-section='attributes'] {
    display: none;
  }

  /* 4. Per-section restyling. */
  [data-section='title'] {
    text-align: center;
    align-items: center;
  }
  [data-section='title'] h1 {
    font-weight: 800;
    font-size: 2.75rem;
    letter-spacing: -0.02em;
  }
  [data-section='mint'] button {
    border-radius: 999px;
    font-weight: 800;
    padding: 16px;
  }
}

Examples of valid bespoke designs

All-default, recolored: same arrangement as above, but with a partner's brand colors, custom fonts, and a partner background. Attributes hidden.
Stacked storytelling: image goes full-bleed at the top (not sticky), then title centered below it, then a two-column row with supply + quantity + mint on one side and items thumbnail strip on the other. Attributes and price breaks tucked below.
Minimal: image full-bleed, title overlaid on top of the image, supply tucked into the corner, mint button only — items, attributes, and price breaks all hidden. (Only viable for single-item, single-price drops.)

For paste-ready CSS in six different directions — minimal, dark luxe, cyberpunk, brutalist, editorial, and a full-bleed hero overlay — see Bespoke Launchpads — CSS Presets.

If you want to go further than these — talk to engineering before designing.

What's the same on every launchpad​

What you can change per launch​

What's locked​

Deliverables checklist​

How it gets built​

Figma template​

Starter CSS​

Examples of valid bespoke designs​