DESIGN.md · explainx registry
BookMyShow
BookMyShow's design system is "The Ticket to Entertainment." It uses a high-contrast red-and-white palette for utility, transitioning into rich, cosmic gradients for discovery and mood.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | BookMyShow |
| colors | background: "#ffffff" foreground: "#121212" brand: "#df1827" # Primary Red muted: "#757575" border: "#eeeeee" card: "#ffffff" accent: "#333290" # Cosmic Cobalt secondary: "#522b86" # Spanish Violet dark: background: "#000000" foreground: "#ffffff" muted: "#a1a1a1" border: "#1f1f1f" card: "#121212" accent: "#df1827" |
| typography | fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" |
| rounded | default: "4px" md: "8px" lg: "12px" full: "9999px" |
Design System: BookMyShow
Overview
BookMyShow's design system is "The Ticket to Entertainment." It uses a high-contrast red-and-white palette for utility, transitioning into rich, cosmic gradients for discovery and mood.
Design Philosophy
- Entertainment First: The UI acts as a digital lobby—clean, exciting, and ready to transport the user to an event.
- Contextual Immersion: Uses dark themes and cinematic gradients for movie browsing, while keeping light themes for ticket management.
- Seamless Flow: Designed to move the user from "Interest" to "Seat Selection" to "Payment" with minimal distraction.
- Vibrant Urgency: The brand red (
#DF1827) is used for "Book Now" and other time-sensitive calls to action.
Colors
- Real Red (#DF1827): The signature brand color used for primary CTAs and status identifiers.
- Cosmic Gradient: A mix of Cosmic Cobalt (
#333290), Spanish Violet (#522B86), and Ruby (#E7165A) used for headers and premium event discovery. - Cinema Black: Pure black used in movie-specific sections to simulate the theater experience.
Typography
- Inter: Ensures that movie titles, timings, and prices are always perfectly legible.
- Scale: Uses large, bold headers for movie titles and vibrant weights for "Special Offers."
Components
- The Movie Card: A vertical poster format with integrated ratings and "Book" button.
- Seat Selection Grid: A high-density, interactive grid with clear status colors (Available, Selected, Sold Out).
- Ticket Stub: A unique, skeuomorphic-inspired component that mimics a physical ticket for successful bookings.
Visual Effects
- Cinematic Overlays: Uses
backdrop-filter: blurand translucent dark backgrounds for movie trailers and details. - Hover Poster Lift: Movie posters lift and show a subtle shadow when hovered.
- Glow Accents: Uses red or violet glows to indicate high-demand "Filling Fast" shows.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is BookMyShow on explainx.ai?
- BookMyShow's design system is "The Ticket to Entertainment." It uses a high-contrast red-and-white palette for utility, transitioning into rich, cosmic gradients for discovery and mood. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide