Panic — Sticker-Sheet Studio Charm

A night-sky game hero, diagonal section cuts, and a sticker sheet of app icons — a product roster told with hand-drawn glee.

Source capture · 2026-09-05Open full image ↗

Design notes

Mood

A studio that clearly loves what it makes. Warm, funny, collector-ish — serious craft wearing a sticker sheet.

Colors

Near-black night hero and footer bracketing a light warm-grey middle; vivid purple-to-magenta section headings (#8A2BE2 → #C724B1 range), cyan text links, a Playdate-yellow (#FFB949) hardware moment, and full-colour icon art throughout. Colour lives in the objects, not the canvas.

Type

Rounded friendly sans set LARGE for section lines ('Panic codes Mac apps for developers.') in saturated purple/magenta, each led by a small emoji-scale icon; a hand-lettered game logo lockup in the hero; tiny utilitarian footer text.

Layout

Vertical showcase: photographic hero with centered logo badge → diagonal white/dark section cuts → centered heading + loose icon grids (3-up apps, 4-up game stickers) → a single centered hardware render → dark footer of icon-led helper links with inline form widgets.

Motion

Toy-like: stickers wobble or tilt on hover, diagonal sections slide past each other on scroll, the handheld gently rotates or bounces.

Texture

Photographic night texture up top; flat light-grey middle; icons carry glossy depth and white sticker borders; diagonal edges give the page a cut-paper feel.

Imagery

A photographic night-scene game-art hero with a chunky multi-colour logo lockup, sticker-style rounded app/game icons with white die-cut borders in a loose grid, and one saturated yellow handheld-console render. Tool: kie-ai Seedream for the game-art hero, sticker icon set, and hardware render; Pexels for a night-sky photographic base if needed. Icons must feel like a peeled sticker sheet, not a uniform grid.

Don't

No corporate grid rigidity, no monochrome restraint, no uniform icon sizing, no straight horizontal section breaks — the moment it stops feeling hand-assembled it's dead.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withAny AI toolCodexClaudeCursorChatGPTGeminiv0 / LovableI want toBuild a screenAudit my UIWrite a design brief

Tech stackUse the existing project stackReact / Next.jsAstroVue / NuxtSvelte / SvelteKitHTML / CSS / JavaScriptSwiftUIFlutter

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text# My project [Describe the product, audience, and screen you want to improve] Stack: Use the existing project stack Task: Implement the interface and verify the result in the existing project. ## Tool guidance (Any AI tool) Use available project tools to inspect, implement, and test. State any unavailable capabilities. # Design reference: Panic — Sticker-Sheet Studio Charm Source: https://panic.com Swipefile reference: https://swipefile.design/ref/panic-playful/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. ## Objective Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets. ## Reference notes - mood: A studio that clearly loves what it makes. Warm, funny, collector-ish — serious craft wearing a sticker sheet. - colors: Near-black night hero and footer bracketing a light warm-grey middle; vivid purple-to-magenta section headings (#8A2BE2 → #C724B1 range), cyan text links, a Playdate-yellow (#FFB949) hardware moment, and full-colour icon art throughout. Colour lives in the objects, not the canvas. - typography: Rounded friendly sans set LARGE for section lines ('Panic codes Mac apps for developers.') in saturated purple/magenta, each led by a small emoji-scale icon; a hand-lettered game logo lockup in the hero; tiny utilitarian footer text. - layout: Vertical showcase: photographic hero with centered logo badge → diagonal white/dark section cuts → centered heading + loose icon grids (3-up apps, 4-up game stickers) → a single centered hardware render → dark footer of icon-led helper links with inline form widgets. - motion: Toy-like: stickers wobble or tilt on hover, diagonal sections slide past each other on scroll, the handheld gently rotates or bounces. - texture: Photographic night texture up top; flat light-grey middle; icons carry glossy depth and white sticker borders; diagonal edges give the page a cut-paper feel. - dont: No corporate grid rigidity, no monochrome restraint, no uniform icon sizing, no straight horizontal section breaks — the moment it stops feeling hand-assembled it's dead. ## Acceptance criteria - Existing project conventions, design tokens, working functionality, and unrelated changes are preserved. - Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product. - Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap. - Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled. - Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported. - Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service. ## Quality bar Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Copy promptDownload .md

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.