Design System Inspiration of CGV

1. Visual Theme & Atmosphere

CGV is Korea’s multiplex cinema brand and a consumer-facing service for finding films, choosing a theatre, and moving toward a viewing experience. Its recognizable expression pairs the practical density of a ticketing and programme surface with cinema-oriented moments: black #121212 text and outlines, an open white #ffffff canvas, small screen-format labels, compact movie metadata, and rounded actions around discovery. That restrained public-web palette does not by itself establish a historical CGV logo or corporate colour system; it describes the supplied current surface only. CGV introduced the multiplex format in Korea with Gangbyeon in 1998 and has evolved its stated Cultureplex proposition beyond a conventional screening venue. Its 2024 sustainability report describes a rebranding campaign around “Deep Dive Space,” positioning the business around immersive experience, special formats, CGV-only content, and expanded space use.

The captured interface is crisp and utility-led rather than theatrical by default. Square list rows coexist with 4px format badges, 16px media corners, 20px outline actions, and 25px category chips. This reference keeps those role-specific geometries separate instead of inventing a universal radius or a red primary action from brand familiarity.

Key Characteristics:

• White #ffffff public canvas with near-black #121212 information hierarchy
• Loaded Pretendard across the captured public surface
• #f4f4f4 / #454545 rounded category treatment and #d9d9d9 outline actions
• Compact 10px, 14px, 15px, and 22px observed text roles
• Static evidence for buttons, badges, and a navigation row; no interaction state values

2. Color Palette & Roles

Current public-surface colors

• Foreground (#121212): dominant captured text, border, and dark surface value.
• Canvas (#ffffff): repeated page and outlined-action surface.
• Subtle control (#f4f4f4): observed category-chip background and border.
• Secondary text (#454545): category-chip foreground.
• Line (#d9d9d9): observed rounded outline-action border.
• Signal (#fc5555): a low-frequency public text/border observation; it is preserved as a signal value, not promoted to a primary or state palette.

No verified current error, success, warning, hover, pressed, or focus palette was supplied. Those groups are omitted.

3. Typography Rules

Font evidence boundary

Font family

• Current public UI family: Pretendard followed by the observed system fallbacks.
• The supplied font evidence links nine CGV CDN Pretendard webfont sources and backs the computed family with a loaded FontFace.
• Pretendard’s own distribution is under the SIL Open Font License 1.1; that licence describes the font project, not a CGV-owned font asset.

Observed hierarchy

4. Component Stylings

Current verified components

Category Chip

• Background: #f4f4f4
• Text: #454545
• Border: 1px solid #f4f4f4
• Radius: 25px
• Padding: 0px 16px
• Height: 40px
• Font: 15px / 400 / Pretendard
• States: Default only at home::[data-omd-capture="36"]; no hover, focus, pressed, disabled, or error state observed.
• Use: Public main-category tab

Outline Action

• Background: #ffffff
• Text: #121212
• Border: 1px solid #d9d9d9
• Radius: 20px
• Padding: 9px 24px
• Font: 14px / 500 / Pretendard
• States: Default only at home::[data-omd-capture="128"]; no hover, focus, pressed, disabled, or error state observed.
• Use: Rounded public movie-card action

Screen Format Badge

• Background: rgba(0, 0, 0, 0.55)
• Text: #121212
• Radius: 4px
• Padding: 0px 5px
• Height: 20px
• Font: 11px / 700 / Pretendard
• Use: Movie-card screen-format marker

Menu Row

• Background: transparent
• Text: #121212
• Radius: 0px
• Height: 40px
• Font: 10px / 400 / Pretendard
• Use: Observed public navigation/menu row

The capture contains 383 component variants over three supplied public surfaces. Only the selector-backed static variants above are canonical tokens; 0 interaction observations means no interactive states are inferred.

---

Verified: 2026-07-13 Tier 1 sources: https://cgv.co.kr/ · https://img.cgv.co.kr/company/sustainabilityStrategy/Report/2024/2024_CJCGV_SUSTAINABILITY_REPORT_kor.pdf Tier 2 sources: https://getdesign.md/cgv (attempted; unavailable) · https://styles.refero.design/?q=cgv (attempted; unavailable) Conflicts unresolved: none

5. Layout Principles

• Use white public surfaces and a near-black information hierarchy where the captured CGV pattern is relevant.
• Keep dense content roles compact: 10px metadata, 8/10/16/24px recurring spacing, and 40px category/menu controls where specifically observed.
• Treat rounded controls as role-specific: 25px category chip, 20px outline action, 16px media, and 4px badge.
• Do not generalize the supplied home capture into authenticated seat selection, payment, or theatre-operation layouts.

6. Iconography & Imagery

• Movie artwork and screen-format labels carry much of the public discovery context; the verified badge sits as a compact overlay.
• swiper-icons is declared-only and is not promoted as a CGV icon token.
• No CGV brand-icon grid, illustration style, or imagery treatment beyond these supplied public observations is specified here.

7. Do's and Don'ts

Do

• Preserve a clear contrast hierarchy with #121212 content on #ffffff surfaces.
• Use the verified rounded category and outline-action patterns only in their observed public roles.
• Keep screen-format metadata compact and subordinate to movie information.

Don't

• Treat the low-frequency #fc5555 observation as a universal CGV primary or error colour.
• Add hover, focus, pressed, disabled, or error component values from assumptions.
• Substitute Roboto, swiper-icons, or a system fallback as though it were the loaded Pretendard UI family.

8. Responsive Behavior

• The supplied evidence confirms public components across three capture surfaces but does not establish a responsive breakpoint system.
• Preserve the observed component values only where they remain appropriate; breakpoint, navigation collapse, and seat-map behavior are unresolved.

9. Accessibility Notes

• Maintain the observed high-contrast #121212 / #ffffff reading hierarchy when applying these public patterns.
• The supplied capture has no focus or error-state observation; accessible focus treatment and form validation styling require separate verified evidence.
• Do not rely on screen-format badge colour alone to convey movie-format information.

10. Voice & Tone

The corporate material frames CGV around immersive, differentiated cultural experience; public UI copy should be direct, experience-oriented, and concise rather than overly cinematic.

• “영화와 상영 시간을 선택하세요.” (illustrative; no claim of current CGV copy)
• “특별관 정보를 확인하세요.” (illustrative; no claim of current CGV copy)
• “예매 내용을 다시 확인하세요.” (illustrative; no claim of current CGV copy)

11. Brand Narrative

CGV opened Gangbyeon in 1998 as Korea’s first multiplex and later formed the CJ CGV corporate identity through the CJ Village / CJ Golden Village lineage. The official history describes a shift away from the single-screen cinema model toward a cultural space that connects film viewing with adjacent lifestyle experiences.

The current corporate narrative calls this direction Cultureplex: a comprehensive cultural and lifestyle space built around differentiated viewing environments, services, and content. In 2024 CGV documented a “Deep Dive Space” rebranding campaign, connecting special-format expansion, CGV-only content, and broader use of physical space to a more immersive experience.

This narrative is official brand context, not a substitute for UI evidence. The canonical tokens remain limited to the supplied public-web capture.

12. Principles

1. Evolve beyond a screening transaction. CGV’s official mission frames the brand as more than a film-viewing environment. UI implication: connect practical selection steps to confirmed format and venue context.
2. Make differentiated experiences legible. Special formats and content are part of the stated direction. UI implication: present verified format information as clear, compact metadata.
3. Design for cultural use, not only attendance. The Cultureplex proposition treats the venue as a broader cultural space. UI implication: avoid reducing supporting discovery content to decoration when it informs a real visit.
4. Keep practical decisions clear. A cinema service still needs reliable choices around title, time, location, and format. UI implication: preserve strong text hierarchy and explicit actions.

13. Personas

These are stakeholder groups stated or directly implied by first-party CGV materials, not fictional personas or synthetic research.

• Moviegoers: people choosing a film, a theatre, and a viewing format; the public experience should keep essential selection information clear.
• Cultureplex visitors: audiences using a cinema venue as a broader cultural and leisure destination, consistent with CGV’s stated Cultureplex direction.
• Special-format audiences and partners: people engaging with differentiated formats such as 4DX or ScreenX; format claims should remain accurate and specific.

14. States

No visual state system was captured. The following content requirements are not token values and must be designed only with separately verified visual evidence.

15. Motion & Easing

No duration, easing, transition, or animated-state value is present in the supplied evidence. No motion token is prescribed for CGV in this reference.