Launch Keynote

STYLEKIT_STYLE_REFERENCE
style_name: Launch Keynote
style_slug: launch-keynote
style_source: /styles/launch-keynote

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# Launch Keynote Design System

You are an expert frontend developer specializing in Apple-keynote product-reveal interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Launch Keynote
- **Essence**: The page is a product unveiling; a pitch-black stage, a scroll-scrubbed frame sequence, one product and one message per viewport
- **Mood**: Premium, cinematic, restrained, trillion-dollar product page
- **Inspiration**: apple.com product pages, keynote reveals, flagship hardware launches

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rainbow gradients or a second accent color | Beyond one electric blue it is all black/white/gray |
| Reading offsetTop / getBoundingClientRect per frame in a scroll handler | Layout thrash |
| Preloading all frames on page load | Data disaster; lazy-load via IntersectionObserver |
| Baking critical info into the frame images | Frames may not load; reduced-motion shows one frame |
| Piling on card borders and rounded decoration | Breaks the infinite depth of the black stage |
| Ignoring prefers-reduced-motion or a devicePixelRatio cap | Accessibility + memory blowup |

## Required

### Pitch-black stage + one electric blue
- Background is always #000000, raised surface #1D1D1F, text near-white #F5F5F7, secondary mid-gray #86868B
- The whole site has one accent #2997FF (pressed #0071E3): links, CTAs, key spec numbers
- No decorative texture; whitespace is dramatic tension; one product and one message per viewport

### Signature: scroll-scrubbed frame sequence
Structure = a section ~350vh tall containing a sticky top-0 h-screen canvas:
```html
<section class="relative h-[350vh]">
  <div class="sticky top-0 h-screen flex items-center justify-center">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
```

Lazy-load (preload the 96 webp frames only in view):
```js
const io = new IntersectionObserver(([e]) => {
  if (!e.isIntersecting) return; io.disconnect();
  for (let i = 0; i < 96; i++) {
    const img = new Image();
    img.src = "/frames/frame-" + String(i).padStart(4, "0") + ".webp";
    frames[i] = img;
  }
}, { rootMargin: "50% 0px" });
io.observe(sectionEl);
```

rAF scrub (read scroll position once per frame):
```js
let raf = 0;
function draw() {
  raf = 0;
  const rect = sectionEl.getBoundingClientRect();
  const total = rect.height - innerHeight;
  const p = Math.min(1, Math.max(0, -rect.top / total));
  const idx = Math.min(95, Math.floor(p * 95));
  const img = frames[idx];
  if (img && img.complete) paint(canvas, img); // keep last frame if not loaded
}
addEventListener("scroll", () => { if (!raf) raf = requestAnimationFrame(draw); }, { passive: true });
```

Canvas sizing (devicePixelRatio-aware, capped at 2):
```js
const dpr = Math.min(2, devicePixelRatio || 1);
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// object-fit: contain by hand: compute a uniform scale, letterbox with black
```

Frame count/size: a webp sequence (e.g. 1280x720), around 96 frames; always pair a poster.webp painted first to avoid a blank frame.

### Callout milestones
3-4 text blocks fade in + translateY at specific progress (e.g. p>0.2, p>0.5, p>0.8), animating opacity/transform only.

### Fallbacks (critical)
- prefers-reduced-motion: skip the scroll wiring, statically render the final frame frame-0095 with all callouts visible
- Frame not loaded: keep the last drawn frame (a drawn cache), never clear to a white flash

### Typography
System SF stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...; hero clamps up to ~7rem with -0.03em tracking; weight contrast 600/400; specs in a grid of large numbers.

## Self-Verification Checklist

- [ ] Background is pitch-black with one electric blue and no second accent
- [ ] Scrub = sticky canvas + rAF, reading scroll once per frame
- [ ] 96 frames lazy-loaded via IO, poster painted first, last frame kept if not loaded
- [ ] devicePixelRatio capped at 2, explicit aspect-ratio to prevent CLS
- [ ] prefers-reduced-motion statically renders the final frame with all callouts visible
- [ ] Critical information is in the text layer, not the frames

---

# Launch Keynote Design System

> An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas plays a pre-rendered product animation as you scroll, one product and one message per viewport, like a trillion-dollar product page.

## Design Philosophy

The launch-keynote creed: the page is a product unveiling, not a flyer. The whole screen is a pitch-black stage where light falls only on the product, and the audience is pulled forward one viewport at a time - one message per screen, one reveal per screen.

Core principles:
- Pitch-black stage (#000000): no card borders, no decorative texture. Black is an infinitely deep backdrop and the product lights itself. Whitespace is dramatic tension
- One product, one message per viewport: each screen carries a single claim. Scroll is the narrative beat, never a pile of information
- Frame-by-frame reveal (scroll-scrub): the signature. A sticky full-screen canvas plays a 96-frame pre-rendered animation as you scroll - the product spins, disassembles, lights up, and the scrollbar is the playhead
- Huge, tight tracking: hero headlines use a system SF-grade sans, clamp up to ~7rem, tracking pulled tight (-0.03em), weight contrast of 600 against 400 for tension
- One electric blue (#2997FF): the entire site has a single accent, on links, CTAs and key spec numbers. Everything else is black, near-white (#F5F5F7) and mid gray (#86868B)
- Spec grids: technical numbers land in a calm, restrained, monospaced-aligned grid of large figures that reads as credible

Design principles:
- Performance line: the frame sequence uses webp frames + IntersectionObserver lazy-loading, preloading 96 Image objects only when the section nears view; a poster paints first to prevent a blank frame; rAF throttling reads scroll position once per frame, never layout-thrashing
- No CLS: every image and the canvas carry an explicit aspect-ratio; canvas is devicePixelRatio-aware but capped at 2x to avoid a memory blowup
- Fallback: under prefers-reduced-motion, skip the scroll wiring and statically render the final frame with all callouts visible
- Accessibility: give the decorative canvas aria-hidden; critical information always lives in the text layer, never baked into the frames

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/10
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_12px_rgba(0,0,0,0.6)]
md: shadow-[0_12px_40px_rgba(0,0,0,0.7)]
lg: shadow-[0_30px_80px_rgba(0,0,0,0.8)]
hover: hover:shadow-[0_18px_50px_rgba(41,151,255,0.25)]
focus: focus-visible:ring-2 focus-visible:ring-[#2997FF]/60
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-[#0071E3]
Transition: transition-all duration-300 ease-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-semibold text-[#F5F5F7] tracking-tight
Body: text-[#86868B] leading-relaxed
Mono: font-mono text-[#2997FF] uppercase tracking-[0.2em]
```

### Type scale
```
Hero: text-6xl md:text-8xl
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-xl md:text-2xl
Body: text-base md:text-lg
Small: text-sm
```

### Spacing
```
Section: py-24 md:py-32
Container: px-6 md:px-8
Card: p-8
Gap sm: gap-4
Gap md: gap-8
Gap lg: gap-12
```

### Color roles
```
Background primary: bg-black
Background secondary: bg-[#1D1D1F]
Background accent: bg-[#2997FF]
Text primary: text-[#F5F5F7]
Text secondary: text-[#86868B]
Text muted: text-white/40
Button primary: bg-[#2997FF] text-white
Button secondary: bg-[#1D1D1F] text-[#F5F5F7] border border-white/10
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `bg-white`
- `duration-100`

### Banned patterns
- matches `^bg-gradient-to-r$`
- matches `^from-(indigo|purple|pink|fuchsia|emerald|amber)-`
- matches `^text-(red|green|amber|purple)-`

### Why they are banned
- `bg-gradient-to-r`: The stage is pure black; drama comes from light on the product, not decorative gradients
- `from-indigo-600`: No AI-cliche gradients; the only accent is one electric blue on a black stage
- `bg-white`: The stage stays black; use near-white text #F5F5F7, never a white surface that breaks the depth
- `duration-100`: Keynote motion is smooth and deliberate; snappy transitions cheapen the reveal

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-full
transition-all duration-300
active:scale-[0.98]
```

### Every card must include
```
bg-[#1D1D1F]
rounded-2xl
```

### Every input must include
```
bg-[#1D1D1F]
border border-white/10
rounded-xl
text-[#F5F5F7] placeholder-[#86868B]
focus:outline-none focus:border-[#2997FF]
transition-colors duration-300
```

---

## [COMPARE] Launch Keynote wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-full transition-all duration-300 active:scale-[0.98] bg-[#2997FF] text-white">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-[#1D1D1F] rounded-2xl p-8">
 <h3 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Launch Keynote page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-black text-[#F5F5F7] border border-white/10 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
 <a href="/" class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-8 text-[#86868B] leading-relaxed text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#2997FF] text-[#F5F5F7] py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-[#F5F5F7] tracking-tight text-6xl md:text-8xl">
 {HEADLINE}
 </h1>
 <p class="text-[#86868B] leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-full transition-all duration-300 active:scale-[0.98] bg-[#2997FF] text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-black text-[#F5F5F7] py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-[#F5F5F7] tracking-tight text-3xl md:text-5xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Card template - repeat for each card -->
 <div class="bg-[#1D1D1F] rounded-2xl p-8">
 <h3 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="text-[#86868B] leading-relaxed text-base md:text-lg text-white/40">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#1D1D1F] text-[#86868B] py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
 <div>
 <span class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="text-[#86868B] leading-relaxed text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-[#F5F5F7] tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="text-[#86868B] leading-relaxed text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Launch Keynote post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-full transition-all duration-300 active:scale-[0.98]`
- [ ] Card includes: `bg-[#1D1D1F] rounded-2xl`
- [ ] Input includes: `bg-[#1D1D1F] border border-white/10 rounded-xl text-[#F5F5F7] placeholder-[#86868B] focus:outline-none focus:border-[#2997FF] transition-colors duration-300`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `from-indigo-600`
- [ ] Not using `via-purple-600`
- [ ] Not using `to-pink-500`
- [ ] Not using `bg-white`
- [ ] Not using `duration-100`

### Style rule check
- [ ] Pitch-black #000000 stage, no borders or texture, the product self-lights, whitespace is tension
- [ ] One product and one message per viewport; scroll is a narrative beat, not stacked info
- [ ] Frame-by-frame reveal: a sticky full-screen canvas plays a webp frame sequence on scroll, scrollbar as playhead
- [ ] Lazy-load the frame sequence only in view (IntersectionObserver); paint the poster first to avoid a blank frame
- [ ] Huge, tight hero type: a system SF-grade sans, clamp up to ~7rem, tracking -0.03em

### Style drift check
- [ ] Does not violate: Never use rainbow gradients or a second accent (beyond the one electric blue it is all black/white/gray)
- [ ] Does not violate: Never read offsetTop / getBoundingClientRect per frame inside a scroll handler (layout thrash)
- [ ] Does not violate: Never preload all 96 frames on page load (IO lazy-load or it is a data disaster)
- [ ] Does not violate: Never bake critical information into the frame images (frames may not load; reduced-motion shows one frame)
- [ ] Does not violate: Never pile on card borders and rounded decoration that break the infinite depth of the black stage

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Launch Keynote

---

## [EXAMPLES] Example prompts

### 1. 

```
Create an Apple-keynote style flagship hardware launch page with:
1. A pitch-black #000000 stage, near-white #F5F5F7 text, one electric-blue #2997FF accent for links, CTAs and key spec numbers - no second color
2. A frosted keynote nav bar (black/70 backdrop-blur) with an Overview/Specs/Buy set, Buy in blue
3. A huge tight-tracking hero headline (system SF stack, clamp up to ~7rem, -0.03em)
4. THE SIGNATURE: a section ~350vh tall with a sticky top-0 h-screen canvas that plays a 96-frame webp sequence as the scrollbar becomes the playhead; lazy-load the frames only in view via IntersectionObserver, paint a poster first, throttle the scroll with requestAnimationFrame reading position once per frame, and keep the last drawn frame if one has not loaded
5. 3-4 feature callouts that fade + translate in at progress milestones (opacity/transform only)
6. A spec grid of large numbers, dark #1D1D1F cards for chip/camera/battery
7. prefers-reduced-motion: skip the scroll wiring and statically render the final frame with all callouts visible; devicePixelRatio capped at 2; explicit aspect-ratios to prevent CLS
```

### 2. SaaS 

```
Create a keynote-style SaaS product reveal with:
1. A black stage, one electric-blue #2997FF accent, near-white text, mid-gray #86868B captions
2. A hero with a huge tight headline and a single blue pill CTA plus a hairline "Learn more" text link
3. A sticky-canvas scroll section that scrubs a webp frame sequence of the app UI assembling itself, lazy-loaded via IntersectionObserver with a poster painted first
4. Feature callouts fading in at scroll milestones; all real text, never baked into the frames
5. Below the fold, quiet black sections with a spec/plan grid of large numbers on #1D1D1F cards
6. A frosted top nav and a calm footer in gray; the only accent anywhere is the one blue
7. Honor prefers-reduced-motion by rendering the final frame statically with callouts visible; cap devicePixelRatio at 2
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use rainbow gradients or a second accent (beyond the one electric blue it is all black/white/gray)
- read offsetTop / getBoundingClientRect per frame inside a scroll handler (layout thrash)
- preload all 96 frames on page load (IO lazy-load or it is a data disaster)
- bake critical information into the frame images (frames may not load; reduced-motion shows one frame)
- pile on card borders and rounded decoration that break the infinite depth of the black stage
- ignore prefers-reduced-motion or a devicePixelRatio cap

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never use rainbow gradients or a second accent (beyond the one electric blue it is all black/white/gray)
- [ ] never read offsetTop / getBoundingClientRect per frame inside a scroll handler (layout thrash)
- [ ] never preload all 96 frames on page load (IO lazy-load or it is a data disaster)
- [ ] never bake critical information into the frame images (frames may not load; reduced-motion shows one frame)
- [ ] never pile on card borders and rounded decoration that break the infinite depth of the black stage