Bespoke Launchpads — CSS Presets

A gallery of paste-ready CSS presets for the Custom CSS field in the admin UI. Each preset is a different point on the "how extreme can a bespoke look?" spectrum — from a clean recolor of the default layout all the way to a full-bleed hero microsite that doesn't look like a launchpad at all.

Use these as starting points. Pick the one closest to the partner's brand, paste it in, then swap colors, fonts, and images.

note

Every preset scopes its rules under [data-launch] — the attribute that's always present on a bespoke launchpad wrapper, regardless of slug. Paste-and-go: no find-replace required. Image URLs and @import URLs do still need to point at assets you host.

If you want to lock a stylesheet to a specific launchpad slug for safety (e.g. you're hand-rolling CSS that you don't want copy-pasted between drops), use [data-launch='<your-slug>'] instead. Either form works.

How to use a preset

1. Pick a preset below.
2. Paste the entire CSS block into the launchpad's Custom CSS field in the admin.
3. Save. The page at /launchpad/<id> (or /launchpad/<slug>) picks it up immediately.
4. Iterate by editing the CSS in the admin and re-saving — no deploys.

The section-targeting reference (data-section values, data-launchpad-grid, locked behaviors) lives in the Design Guide. Read that first if you haven't.

note

These presets are for a single launchpad's Custom CSS field, not a bundle's. A bundle has its own bespoke page with its own Custom CSS field, and these presets do essentially nothing there — the bundle page renders data-launch but never data-launchpad-grid, so every grid-template-areas rule below is inert on it, and its only heading is [data-section='bundle-title'] h1.

Bundle drops have an extra siblings section. If a launchpad belongs to a bundle, its page renders a row of cross-sell cards linking to the other drops in that bundle (data-section='siblings'). Every preset below that redefines grid-template-areas already lists a siblings area, so the row lands in the right place automatically. On standalone drops that row sizes to zero height — though unless the preset's gap is 0 it leaves one gap-sized band of whitespace there (drop the siblings line if you want none). If you write your own grid-template-areas, add a siblings row or the cards fall back to auto-placement. See the Design Guide → Bundle siblings for the section's DOM and the full hook list.

Styling the bundle siblings row

Drop this into any preset to restyle the cross-sell cards. It's a no-op on drops that aren't in a bundle.

[data-launch] {
  /* Hide the "More in <Bundle>" label if you don't want it. */
  [data-section='siblings'] > div > span:first-child {
    display: none;
  }
  /* Card grid: force a fixed column count instead of auto-fill. */
  [data-section='siblings'] > div > div {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  /* Each card is an <a>. Restyle border, radius, hover. */
  [data-section='siblings'] a {
    border: 2px solid var(--launchpad-border);
    border-radius: var(--launchpad-radius);
    padding: 10px;
  }
  [data-section='siblings'] a:hover {
    border-color: var(--launchpad-accent);
    transform: translateY(-2px);
  }
  [data-section='siblings'] img {
    aspect-ratio: 1;
    border-radius: var(--launchpad-radius-sm);
  }
}

To hide the row entirely (e.g. you don't want cross-sell on a particular drop): [data-section='siblings'] { display: none; }.

1. Minimal Stack — light, single column

The most conservative bespoke. Single centered column, generous spacing, system font, accents in one color. Drops the image-on-left sticky behavior. Attributes hidden. Good for single-item drops.

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

[data-launch] {
  --launchpad-bg: #ffffff;
  --launchpad-surface: #f7f7f8;
  --launchpad-surface-strong: #efeff1;
  --launchpad-border: #e6e6e8;
  --launchpad-border-strong: #cfcfd2;
  --launchpad-accent: #111111;
  --launchpad-accent-hover: #000000;
  --launchpad-accent-contrast: #ffffff;
  --launchpad-text: #0a0a0a;
  --launchpad-text-muted: #4a4a4a;
  --launchpad-text-subtle: #767679;
  --launchpad-text-faint: #9a9a9d;
  --launchpad-link: #0066ff;
  --launchpad-font-display: 'Inter', system-ui, sans-serif;
  --launchpad-font-body: 'Inter', system-ui, sans-serif;
  --launchpad-radius: 10px;
  --launchpad-radius-lg: 16px;

  [data-launchpad-grid] {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    grid-template-areas:
      'image'
      'title'
      'supply'
      'siblings'
      'quantity'
      'mint'
      'items'
      'pricebreaks';
    gap: 1.5rem;
  }
  [data-section='image'] { position: static; }
  [data-section='image'] img {
    border-radius: var(--launchpad-radius-lg);
    aspect-ratio: 1;
    object-fit: cover;
  }
  [data-section='attributes'] { display: none; }

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

2. Dark Luxe — auction-house aesthetic

Black background, ivory text, serif display, thin gold accents. Side-by-side layout preserved but with editorial-style typography. Think Sotheby's / Phillips.

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');

[data-launch] {
  --launchpad-bg: #0a0a0a;
  --launchpad-surface: #141414;
  --launchpad-surface-strong: #1c1c1c;
  --launchpad-border: #2a2a2a;
  --launchpad-border-strong: #3a3a3a;
  --launchpad-accent: #c9a961;
  --launchpad-accent-hover: #d8b878;
  --launchpad-accent-contrast: #0a0a0a;
  --launchpad-text: #f4f1ea;
  --launchpad-text-muted: #c8c4ba;
  --launchpad-text-subtle: #8e8a82;
  --launchpad-text-faint: #6a665e;
  --launchpad-link: #c9a961;
  --launchpad-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --launchpad-font-body: 'Inter', system-ui, sans-serif;
  --launchpad-radius: 0px;
  --launchpad-radius-lg: 0px;

  [data-launchpad-page] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 4rem 2rem;
    gap: 2rem 5rem;
  }
  [data-section='image'] img {
    border: 1px solid var(--launchpad-border);
    background: transparent;
  }
  [data-section='title'] h1 {
    font-family: var(--launchpad-font-display);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  [data-section='title'] p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--launchpad-text-muted);
  }
  [data-section='title'] > div:first-child {
    background: transparent;
    border: 1px solid var(--launchpad-accent);
    color: var(--launchpad-accent);
    letter-spacing: 0.2em;
    padding: 6px 14px;
  }
  [data-section='mint'] {
    border-top: 1px solid var(--launchpad-border);
    padding-top: 2rem;
  }
  [data-section='mint'] button {
    border-radius: 0;
    font-family: var(--launchpad-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    padding: 18px;
  }
}

3. Cyberpunk Neon — extreme, animated

Saturated magenta + cyan on near-black, monospace, animated gradient background, glowing buttons. Demonstrates pseudo-elements, @keyframes, and text-shadow glow.

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Orbitron:wght@500;700;900&display=swap');

[data-launch] {
  --launchpad-bg: #06060d;
  --launchpad-surface: rgba(255 0 200 / 0.06);
  --launchpad-surface-strong: rgba(0 240 255 / 0.08);
  --launchpad-border: rgba(255 0 200 / 0.35);
  --launchpad-border-strong: rgba(0 240 255 / 0.6);
  --launchpad-accent: #ff00c8;
  --launchpad-accent-hover: #00f0ff;
  --launchpad-accent-contrast: #06060d;
  --launchpad-text: #f0f6ff;
  --launchpad-text-muted: #b8c1ff;
  --launchpad-text-subtle: #8088cc;
  --launchpad-text-faint: #5560aa;
  --launchpad-link: #00f0ff;
  --launchpad-font-display: 'Orbitron', system-ui, sans-serif;
  --launchpad-font-body: 'JetBrains Mono', ui-monospace, monospace;
  --launchpad-radius: 2px;
  --launchpad-radius-lg: 2px;

  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255 0 200 / 0.18), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(0 240 255 / 0.18), transparent 50%),
    var(--launchpad-bg);
  background-attachment: fixed;

  &::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(0 240 255 / 0.03) 3px,
      rgba(0 240 255 / 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
  }

  > * { position: relative; z-index: 2; }

  [data-section='title'] h1 {
    font-family: var(--launchpad-font-display);
    font-weight: 900;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--launchpad-accent);
    text-shadow:
      0 0 8px rgba(255 0 200 / 0.8),
      0 0 24px rgba(255 0 200 / 0.4);
  }
  [data-section='image'] img {
    border: 1px solid var(--launchpad-border-strong);
    box-shadow:
      0 0 0 1px var(--launchpad-accent) inset,
      0 0 40px rgba(0 240 255 / 0.25);
  }
  [data-section='mint'] {
    border: 1px solid var(--launchpad-border-strong);
    padding: 1.25rem;
    background: rgba(0 0 0 / 0.4);
    backdrop-filter: blur(8px);
  }
  [data-section='mint'] button {
    background: transparent;
    border: 1px solid var(--launchpad-accent);
    color: var(--launchpad-accent);
    font-family: var(--launchpad-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow: 0 0 12px rgba(255 0 200 / 0.5), inset 0 0 12px rgba(255 0 200 / 0.15);
    animation: cyber-pulse 2.4s ease-in-out infinite;
  }
  [data-section='mint'] button:hover:not(:disabled) {
    background: var(--launchpad-accent);
    color: var(--launchpad-accent-contrast);
  }
  @keyframes cyber-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255 0 200 / 0.5), inset 0 0 12px rgba(255 0 200 / 0.15); }
    50%      { box-shadow: 0 0 28px rgba(255 0 200 / 0.9), inset 0 0 24px rgba(255 0 200 / 0.35); }
  }
}

4. Brutalist — high-contrast, monospace, hard edges

Jet black on cadmium yellow, monospace everywhere, no rounded corners, hard 4px offset shadows on buttons. Pushes typography aggressively.

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Archivo+Black&display=swap');

[data-launch] {
  --launchpad-bg: #fff200;
  --launchpad-surface: #fff200;
  --launchpad-surface-strong: #000000;
  --launchpad-border: #000000;
  --launchpad-border-strong: #000000;
  --launchpad-accent: #000000;
  --launchpad-accent-hover: #ff2a00;
  --launchpad-accent-contrast: #fff200;
  --launchpad-text: #000000;
  --launchpad-text-muted: #000000;
  --launchpad-text-subtle: #000000;
  --launchpad-text-faint: #333333;
  --launchpad-link: #ff2a00;
  --launchpad-font-display: 'Archivo Black', system-ui, sans-serif;
  --launchpad-font-body: 'Space Mono', ui-monospace, monospace;
  --launchpad-radius: 0px;
  --launchpad-radius-lg: 0px;

  [data-launchpad-grid] {
    max-width: 1200px;
    padding: 3rem 2rem;
    gap: 0;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      'image title'
      'image supply'
      'image siblings'
      'image quantity'
      'image mint'
      'items items'
      'pricebreaks pricebreaks';
  }
  [data-section='image'] img {
    border: 4px solid #000;
    background: #fff;
  }
  [data-section='title'],
  [data-section='supply'],
  [data-section='quantity'],
  [data-section='mint'] {
    border-left: 4px solid #000;
    padding: 1.5rem 2rem;
  }
  [data-section='title'] h1 {
    font-family: var(--launchpad-font-display);
    font-size: 4rem;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0;
  }
  [data-section='title'] > div:first-child {
    background: #000;
    color: #fff200;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    font-family: var(--launchpad-font-body);
  }
  [data-section='attributes'] { display: none; }
  [data-section='mint'] button {
    border: 4px solid #000;
    background: #000;
    color: #fff200;
    border-radius: 0;
    font-family: var(--launchpad-font-display);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 20px;
    box-shadow: 6px 6px 0 0 #000;
    transition: transform 0.08s, box-shadow 0.08s;
  }
  [data-section='mint'] button:hover:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 0 #000;
    background: var(--launchpad-accent-hover);
    color: #000;
  }
  > header {
    background: #000;
    border-bottom: 4px solid #000;
    color: #fff200;
  }
  > header a { color: #fff200; }
}

5. Editorial Magazine — oversized hero, asymmetric

Image dominates the page on desktop (2/3 width), title sets large with a serif display face, items render as a vertical stack inset under the image. Closer to a long-form editorial feature than a product page.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;900&family=Inter:wght@300;400;500&display=swap');

[data-launch] {
  --launchpad-bg: #faf7f2;
  --launchpad-surface: #ffffff;
  --launchpad-surface-strong: #f0ebe2;
  --launchpad-border: #e2dccf;
  --launchpad-border-strong: #c8c0ae;
  --launchpad-accent: #8a2a1d;
  --launchpad-accent-hover: #6f2018;
  --launchpad-accent-contrast: #ffffff;
  --launchpad-text: #1a1410;
  --launchpad-text-muted: #4f4540;
  --launchpad-text-subtle: #7a6f68;
  --launchpad-text-faint: #a39a91;
  --launchpad-link: #8a2a1d;
  --launchpad-font-display: 'Playfair Display', 'Times New Roman', serif;
  --launchpad-font-body: 'Inter', system-ui, sans-serif;
  --launchpad-radius: 0;
  --launchpad-radius-lg: 0;

  [data-launchpad-grid] {
    max-width: 1320px;
    padding: 5rem 2.5rem;
    grid-template-columns: 2fr 1fr;
    gap: 3rem 5rem;
    grid-template-areas:
      'image  title'
      'image  supply'
      'image  siblings'
      'image  quantity'
      'image  mint'
      'image  pricebreaks'
      'items  items'
      'attributes attributes';
  }
  [data-section='image'] {
    top: 3rem;
  }
  [data-section='image'] img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: 0 30px 60px -20px rgba(26 20 16 / 0.35);
  }
  [data-section='title'] h1 {
    font-family: var(--launchpad-font-display);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--launchpad-text);
  }
  [data-section='title'] p {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--launchpad-text-muted);
    max-width: 36ch;
  }
  [data-section='title'] > div:first-child {
    background: var(--launchpad-accent);
    color: var(--launchpad-accent-contrast);
    border-radius: 0;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    padding: 6px 12px;
  }
  [data-section='mint'] button {
    border-radius: 0;
    font-family: var(--launchpad-font-body);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 18px;
  }
  [data-section='items'] {
    border-top: 1px solid var(--launchpad-border);
    padding-top: 3rem;
    margin-top: 2rem;
  }
}

6. Hero Overlay — full-bleed bg, floating mint card

Image leaves the layout entirely and becomes a fixed full-viewport background. The mint controls float in a translucent card centered over it with backdrop-filter: blur(). Closest visually to a launch landing page, not a product page. Only works for single-item drops — hides items, attributes, pricebreaks.

Requires a high-res hero image URL — replace https://YOUR-HOST/hero.jpg with the real one.

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

[data-launch] {
  --launchpad-bg: #000;
  --launchpad-surface: rgba(20 20 24 / 0.6);
  --launchpad-surface-strong: rgba(20 20 24 / 0.8);
  --launchpad-border: rgba(255 255 255 / 0.18);
  --launchpad-border-strong: rgba(255 255 255 / 0.4);
  --launchpad-accent: #ffffff;
  --launchpad-accent-hover: #f0f0f0;
  --launchpad-accent-contrast: #000000;
  --launchpad-text: #ffffff;
  --launchpad-text-muted: rgba(255 255 255 / 0.78);
  --launchpad-text-subtle: rgba(255 255 255 / 0.6);
  --launchpad-text-faint: rgba(255 255 255 / 0.4);
  --launchpad-link: #ffffff;
  --launchpad-font-display: 'Manrope', system-ui, sans-serif;
  --launchpad-font-body: 'Manrope', system-ui, sans-serif;
  --launchpad-radius: 14px;
  --launchpad-radius-lg: 20px;

  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(0 0 0 / 0.2) 0%, rgba(0 0 0 / 0.7) 100%),
    url('https://YOUR-HOST/hero.jpg') center / cover no-repeat fixed,
    #000;

  [data-launchpad-grid] {
    min-height: calc(100vh - 60px);
    max-width: 520px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    place-content: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    grid-template-areas:
      'title'
      'supply'
      'siblings'
      'quantity'
      'mint';
  }
  [data-section='image'],
  [data-section='items'],
  [data-section='attributes'],
  [data-section='pricebreaks'] {
    display: none;
  }
  [data-section='title'] {
    text-align: center;
    align-items: center;
  }
  [data-section='title'] h1 {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.0;
    text-shadow: 0 2px 24px rgba(0 0 0 / 0.5);
  }
  [data-section='title'] p {
    font-size: 1.05rem;
    color: var(--launchpad-text-muted);
    max-width: 32ch;
    text-shadow: 0 1px 12px rgba(0 0 0 / 0.5);
  }
  [data-section='title'] > div:first-child {
    background: rgba(255 255 255 / 0.12);
    border: 1px solid rgba(255 255 255 / 0.3);
    color: #fff;
    backdrop-filter: blur(8px);
    letter-spacing: 0.2em;
  }
  [data-section='supply'],
  [data-section='quantity'],
  [data-section='mint'] {
    background: rgba(20 20 24 / 0.55);
    border: 1px solid var(--launchpad-border);
    backdrop-filter: blur(16px);
    padding: 1.25rem 1.5rem;
    border-radius: var(--launchpad-radius);
  }
  [data-section='mint'] button {
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-weight: 800;
    padding: 18px;
    font-size: 1.05rem;
  }
  [data-section='mint'] button:hover:not(:disabled) {
    background: #f0f0f0;
  }
  > header {
    background: transparent;
    border-bottom: none;
    backdrop-filter: blur(12px);
  }
}

Picking a preset

If you want…	Start with
Recolored default, conservative	Minimal Stack
Auction / luxury feel	Dark Luxe
Web3-native, animated, edgy	Cyberpunk Neon
High-contrast, design-forward	Brutalist
Editorial, image-led storytelling	Editorial Magazine
Doesn't read as a product page at all	Hero Overlay

Notes on extremity

The presets above stay within the bespoke-launchpad rules in the Design Guide:

• Every rule scoped under [data-launch] (or [data-launch='<slug>'] if you want explicit per-launch locking).
• No new sections invented — they only re-style, reorder, or hide the existing data-section blocks.
• Custom fonts/images loaded by absolute URL.
• The minimal top bar still renders.

Things you can't do via CSS alone (and which would need engineering):

• New page sections (video hero with controls, FAQ accordion, scroll-driven animations beyond what CSS supports).
• Replacing the mint flow / button behavior.
• Removing the top bar.
• Loading partner JavaScript.

If a design needs any of that, raise it before pasting CSS — it's a separate engineering effort, not a bespoke launchpad.