Switch between the rendered Visual preview and the Raw DESIGN.md.
The Golden Screen Cinemas design system embodies the energy and excitement of premium cinema experiences. It combines a sophisticated dark palette with vibrant accent colors—most notably an electric golden yellow that commands attention and conveys premium ticketing actions. The visual identity balances minimalist elegance with bold call-to-action elements, creating an immersive digital experience that mirrors the theatrical atmosphere. Montserrat typography provides modern, geometric sophistication, while generous whitespace ensures content breathes and remains scannable. The design philosophy prioritizes user engagement through high-contrast interactive elements and maintains a premium entertainment brand positioning with cinematic hero imagery and dynamic color transitions.
Key Characteristics
#FFEE00) as the dominant accent for CTAs and highlights#212529): Primary text, backgrounds, and foundational UI elements; used extensively across the platform#000000): Deep shadows, text contrast, and emphasis overlays#111111): Secondary dark tone for subtle differentiation#FFEE00): Primary call-to-action buttons, promotional highlights, and branded accent; the signature color of GSC's interactive elements#FFC107): Secondary warning and promotional states#0DCAF0): Complementary accent for interactive states and badges#0D6EFD): Links, active states, and primary interactive elements#198754): Confirmation states, positive actions, and status indicators#FFFFFF): Primary text on dark backgrounds, card backgrounds, primary surface#F8F9FA): Subtle background tints and light surfaces#E9ECEF): Dividers, disabled states, and secondary backgrounds#DEE2E6): Border strokes and subtle separators#ADB5BD): Placeholder text, secondary labels, and disabled text#6C757D): Secondary text and subdued elements#495057): Tertiary text and de-emphasized content#343A40): Dark card and container backgroundsrgba(0, 0, 0, 0.5)): Semi-transparent overlays on image cards and hero sections#373B3E): Subtle background tone variations#DC3545): Error states, destructive actions, and alerts#198754): Positive confirmations and successful states#FFEE00): Urgent promotions and attention-grabbing elementsPrimary Font: Montserrat
Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifFallback Stack: System fonts for reliability across platforms
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Montserrat | 27px | 700 | 32.4px | 0px | Hero headlines, main page titles |
| Heading / H3 | Montserrat | 18px | 700 | 22.5px | 0px | Section headings, subheadings |
| Subheading / H2 | Montserrat | 15.75px | 400 | 18.9px | 0px | Secondary headings, section titles |
| Body Text | Montserrat | 18px | 400 | 27px | 0px | Primary content, descriptions |
| Button / Label | Montserrat | 18px | 700 | 27px | 0px | Interactive button text |
| Span / Highlight | Montserrat | 22.5px | 400 | 22.5px | 0px | Callouts, emphasis text |
| Caption / Small | Montserrat | 11.8125px | 400 | 17.7188px | 0px | Metadata, small text, fine print |
Background Color: #FFEE00
Text Color: #212529
Font: Montserrat, 18px, weight 700
Padding: 12px 24px
Border Radius: 6.75px
Border: none
Box Shadow: 0px 4px 12px rgba(0, 0, 0, 0.15)
Line Height: 27px
Hover State: Background #E8DD00, Box Shadow 0px 6px 16px rgba(0, 0, 0, 0.25)
Active State: Background #D4C700, Box Shadow inset 0px 2px 4px rgba(0, 0, 0, 0.2)
Disabled State: Background rgba(255, 238, 0, 0.5), Text Color rgba(33, 37, 41, 0.5)
Background Color: transparent
Text Color: #FFEE00
Font: Montserrat, 18px, weight 700
Padding: 12px 24px
Border Radius: 6.75px
Border: 2px solid #FFEE00
Box Shadow: none
Line Height: 27px
Hover State: Background rgba(255, 238, 0, 0.1), Border 2px solid #E8DD00
Active State: Background rgba(255, 238, 0, 0.2)
Background Color: transparent
Text Color: #FFFFFF
Font: Montserrat, 18px, weight 400
Padding: 9px 0px
Border Radius: 0px
Border: none
Box Shadow: none
Line Height: 27px
Hover State: Text Color #FFEE00, Box Shadow 0px 2px 0px #FFEE00
Active State: Text Color #E8DD00
Disabled State: Text Color rgba(255, 255, 255, 0.3)
Background Color: transparent
Text Color: #FFFFFF
Font: Montserrat, 18px, weight 400
Padding: 9px
Border Radius: 0px
Border: none
Height: 45px
Width: 45px
Box Shadow: none
Hover State: Text Color #FFEE00, Background rgba(255, 238, 0, 0.05)
Active State: Text Color #E8DD00
Background Color: transparent
Border Radius: 4px
Width: 304.75px
Height: 457.125px
Padding: 0px
Border: none
Box Shadow: 0px 4px 12px rgba(0, 0, 0, 0.3)
Overflow: hidden
Hover State: Box Shadow 0px 8px 20px rgba(0, 0, 0, 0.4), Transform scale(1.02)
Background Color: rgba(0, 0, 0, 0.5)
Position: absolute (bottom)
Width: 100%
Padding: 30px
Text Color: #FFFFFF
Font: Montserrat, 18px, weight 400
Line Height: 27px
Transition: opacity 0.3s ease
Hover State: opacity 1, Background rgba(0, 0, 0, 0.7)
Background Color: #212529
Border Radius: 4px
Padding: 20px
Text Color: #FFFFFF
Box Shadow: 0px 2px 8px rgba(0, 0, 0, 0.2)
Background Color: rgba(0, 0, 0, 0.7)
Border: 2px solid #FFEE00
Border Radius: 4px
Padding: 20px
Text Color: #FFFFFF
Box Shadow: 0px 4px 12px rgba(255, 238, 0, 0.2)
Hover State: Border 2px solid #E8DD00, Box Shadow 0px 6px 16px rgba(255, 238, 0, 0.3)
Background Color: #FFFFFF
Border: 1px solid #DEE2E6
Border Radius: 4px
Padding: 12px 16px
Font: Montserrat, 18px, weight 400
Text Color: #212529
Line Height: 27px
Focus State: Border 2px solid #0D6EFD, Box Shadow 0px 0px 0px 4px rgba(13, 110, 253, 0.1)
Disabled State: Background #F8F9FA, Text Color #ADB5BD, Opacity 0.6
Color: #ADB5BD
Font: Montserrat, 18px, weight 400
Opacity: 1
Font: Montserrat, 18px, weight 700
Color: #212529
Margin Bottom: 8px
Background Color: #212529
Height: 65px
Padding: 9px 20px
Display: flex
Align Items: center
Justify Content: space-between
Box Shadow: 0px 2px 8px rgba(0, 0, 0, 0.1)
Font: Montserrat, 18px, weight 400
Color: #FFFFFF
Padding: 9px 16px
Border Radius: 0px
Text Decoration: none
Position: relative
Hover State: Color #FFEE00
Active State: Color #FFEE00, Bottom Border 2px solid #FFEE00
Background Color: #111111
Border Radius: 4px
Box Shadow: 0px 8px 20px rgba(0, 0, 0, 0.3)
Padding: 8px 0px
Min Width: 200px
Z Index: 1000
Font: Montserrat, 18px, weight 400
Color: #FFFFFF
Padding: 12px 20px
Hover State: Background rgba(255, 238, 0, 0.1), Color #FFEE00
Background Color: #FFEE00
Text Color: #212529
Font: Montserrat, 11.8125px, weight 700
Padding: 4px 12px
Border Radius: 4px
Display: inline-block
Background Color: rgba(13, 110, 253, 0.1)
Text Color: #0D6EFD
Font: Montserrat, 11.8125px, weight 700
Padding: 4px 12px
Border Radius: 4px
Background Color: transparent
Text Color: #212529
Font: Montserrat, 18px, weight 400
Padding: 16px 20px
Border Bottom: 2px solid transparent
Line Height: 27px
Hover State: Color #FFEE00, Background rgba(255, 238, 0, 0.05)
Active State: Color #FFEE00, Border Bottom 2px solid #FFEE00
Base Unit: 4px
Spacing Scale:
4px — Micro spacing (button padding, tight groups)8px — Extra small (icon spacing, compact layouts)16px — Small (component padding, light density)20px — Medium (standard padding, default margins)28px — Large (section margins, moderate spacing)56px — Extra large (major section breaks)60px — Section dividers72px — Page-level spacing, hero sectionsUsage Context:
4px used for internal button/component padding8px used for spacing between tightly grouped elements (icon groups, form controls)16px used for card padding and component internal spacing20px used for standard container padding and section margins28px used for vertical rhythm between major content sections56px used for spacing between hero sections and main content60px and 72px used for major page breaks and theme transitionsMax Width: 1440px
Column Strategy: 12-column grid with flexible gutters
Section Patterns:
Whitespace is intentional and hierarchical. Large vertical spacing (56px–72px) separates major sections and emphasizes content importance. Horizontal padding (20px standard, 16px compact) maintains breathing room around text and components. Movie cards and promotional sections use 20px gutters for coherent grouping. Negative space guides the eye toward primary CTAs (the golden yellow buttons) and prevents visual overwhelm across dark backgrounds. Mobile layouts reduce horizontal margins to 12px minimum while preserving vertical rhythm.
0px — Navigation bars, full-width sections, hero banners (sharp, architectural)4px — Cards, containers, image borders, modals (subtle, modern)6.75px — Buttons, input fields, badges (friendly, actionable)20px — Modals with large padding, promotional cards (softer, welcoming)| Level | Treatment | Use |
|---|---|---|
| None (0) | No shadow, flat design | Navigation bar, full-width sections, hero backgrounds |
| Raised (1) | 0px 2px 8px rgba(0, 0, 0, 0.2) | Cards, containers, inactive elements |
| Elevated (2) | 0px 4px 12px rgba(0, 0, 0, 0.3) | Movie cards, standard buttons, promotional elements |
| Floating (3) | 0px 6px 16px rgba(0, 0, 0, 0.25) | Hover state for primary buttons, active dropdowns |
| Modal (4) | 0px 8px 20px rgba(0, 0, 0, 0.4) | Modals, overlays, highest-priority interactive elements |
| Highlight (accent) | 0px 4px 12px rgba(255, 238, 0, 0.2) | Promotion cards, golden accent elements |
Shadow Philosophy: Shadows create subtle depth without obscuring content. The shadow palette uses pure black with varying opacity (0.2–0.4) rather than colored shadows, maintaining the dark, sophisticated aesthetic. Shadows increase on hover and active states to reinforce interactivity. Golden yellow promotional elements use accent-colored shadows (low opacity) to tie highlights back to the brand. All shadows use soft, blurred edges (4px–20px blur radius) for cinema-theater sophistication.
#FFEE00 (golden yellow) exclusively for primary CTAs and promotional highlights#FFEE00 is the canonical golden yellow| Breakpoint Name | Width | Key Layout Changes |
|---|---|---|
| Mobile | 320px–767px | Single column, 12px side margins, reduced padding (12px), full-width cards |
| Tablet | 768px–1023px | 8-column grid, 16px side margins, 2-column card layout, stacked navigation |
| Desktop | 1024px–1439px | 12-column grid, 20px side margins, 3–4-column card layout, full navigation |
| Wide Desktop | 1440px+ | Max-width 1440px container, centered, full feature set |
Mobile (320px–767px):
Tablet (768px–1023px):
Desktop (1024px+):
Primary CTA: Golden Yellow (#FFEE00)
Primary Text: Dark Neutral (#212529)
Primary Background (Dark): Off-Black (#111111 to #212529)
Secondary Background (Light): White (#FFFFFF)
Heading Text: White (#FFFFFF) on dark or Dark Neutral (#212529) on light
Links & Interaction: Primary Blue (#0D6EFD)
Error / Destructive: Error Red (#DC3545)
Success / Positive: Success Green (#198754)
Disabled / Muted: Muted Gray (#6C757D to #ADB5BD)
Borders & Dividers: Soft Gray (#DEE2E6)
Primary CTA Always Yellow: Every "Buy Now," ticket purchase, or main promotional button must use #FFEE00 background with #212529 text, font-weight 700, 18px Montserrat. Apply 0px 4px 12px rgba(0, 0, 0, 0.3) shadow; hover increases shadow to 0px 6px 16px rgba(0, 0, 0, 0.25) and changes background to #E8DD00.
Navigation Bar Fixed: Background #212529, height 65px, links are 18px Montserrat weight 400 in white. Links turn golden yellow on hover. No radius; full-width with box shadow 0px 2px 8px rgba(0, 0, 0, 0.1). Collapse into hamburger menu below 768px.
Movie Cards Consistent Sizing: All cards 304.75px wide, 457.125px tall, border-radius 4px, with overlay box-shadow 0px 4px 12px rgba(0, 0, 0, 0.3). Image covers full card; overlay (50% black, padding 30px) reveals on hover. Hover transforms to scale(1.02) and increases shadow to 0px 8px 20px rgba(0, 0, 0, 0.4).
Spacing Hierarchy Strict: Use 20px padding for standard containers, 16px for compact layouts, 12px minimum on mobile. Vertical spacing between sections: 56px for major breaks, 28px for moderate separation. Movie grids use 20px gutters consistently.
Typography Locked to Montserrat: H1 = 27px weight 700, H2 = 15.75px weight 400, H3 = 18px weight 700, Body = 18px weight 400, Small = 11.8125px weight 400. All line heights follow the hierarchy table. No custom sizes; stick to defined scale.
Contrast First: Minimum 4.5:1 WCAG AA. White text on dark backgrounds, dark text on light backgrounds. Never use yellow text below 18px; use golden yellow only for 18px+ interactive elements or 11.8px badges with high opacity.
Shadow Depth Simple: Raised = 0px 2px 8px rgba(0, 0, 0, 0.2), Elevated = 0px 4px 12px rgba(0, 0, 0, 0.3), Floating = 0px 6px 16px rgba(0, 0, 0, 0.25), Modal = 0px 8px 20px rgba(0, 0, 0, 0.4). Always black-based, never colored except accent highlights (0px 4px 12px rgba(255, 238, 0, 0.2)).
Responsive Stacking: Mobile single-column with 12px margins. Tablet 2-column (768px+). Desktop 3–4 columns (1024px+). Buttons always full-width on mobile, inline on desktop. Navigation collapses to hamburger below 768px.
Focus & Accessibility: All interactive elements (buttons, links, inputs) require visible focus states (outline or background change). Minimum 44px × 44px touch targets on mobile. No opacity-only color indicators; pair with text, icon, or contrast change. Test keyboard navigation; tabindex should follow logical reading order.
Promotional Consistency: Promotion cards use dark background rgba(0, 0, 0, 0.7), 2px #FFEE00 border, padding 20px, corner radius 4px, with accent shadow 0px 4px 12px rgba(255, 238, 0, 0.2). Text remains white 18px weight 400. Include a primary golden button inside each card.