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.

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'
      '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-grid] {
    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 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  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'
      '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.