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 12px, 13px, 14px, 15px, and 22px observed text roles; the 10px on the page body and its wrappers is the inherited root size, not a rendered label (corrected 2026-09-30)
• Rest values for tabs, buttons, fields, a select, a bottom sheet, poster cards, badges, and a navigation row, plus two class-marked selected tabs; the bundle holds no hover, pressed, or focus frame

Primary tasks

• Find a film and choose a theatre to watch it in
• Pick a screening by title, time, location, and format
• Choose a special-format screening such as 4DX or ScreenX

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. The bundle records it on one element per capture, the btn_reserve outline button (§4).
• Component-local colours recorded in §4, not promoted to palette roles: #707070 (footer links, the chart text button, and the bottom-sheet close label on a #f5f5f5 fill), #e9e9e9 (search shortcut pill border), #000000 (search field text), and the translucent fills rgba(18, 18, 18, 0.2) (poster like button) and rgba(0, 0, 0, 0.55) (screen-format badge).

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

Corrected 2026-09-30: a "Screen marker" row (11px / 700 / 19px) described the screen-format badge, but all 15 sampled badges record no text (textLength 0), so it was not a rendered text style and is withdrawn. The 10px / 400 / 10px on the page body, wrappers, the menu row, and icon buttons is the root size those elements inherit, not a label.

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
• Selected: background #121212, border 1px #121212, text #ffffff, 15px / 700 — the tab with class maintab_tabTitleActive (home::[data-omd-capture="35"], 86px × 40px)
• States: rest on four tabs (home::[data-omd-capture="36"] to "39") plus the class-marked selected tab; the bundle holds no hover, pressed, or focus frame.
• 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: rest on 33 movie-card actions per capture; the bundle holds no hover, pressed, or focus frame.
• Use: Rounded public movie-card action, home::[data-omd-capture="49"] (104px × 31px). Corrected 2026-09-30: the July record cited capture "128", a copy that renders 30px × 10px on a scaled carousel slide; its computed values are the same.

Screen Format Badge

• Background: rgba(0, 0, 0, 0.55)
• Radius: 4px
• Padding: 0px 5px
• Height: 20px
• Use: Movie-card screen-format marker (span.badge.screenType.img). Corrected 2026-09-30: the July record gave it text #121212 and 11px / 700 type, but all 15 sampled badges record no text (textLength 0); the colour is inherited and no label style is claimed.

Menu Row

• Background: transparent
• Radius: 0px
• Height: 40px
• Use: Observed public navigation/menu row (li.mets01390_linkItem, 200px × 40px, five per capture). Corrected 2026-09-30: the July record gave it text #121212 and 10px / 400 type; those equal the page body's inherited values on a container, so no label style is claimed.

Line tab

Rest (line-tab): text #121212, 15px / 500 / 15px Pretendard, tracking -0.225px, padding 2px 0px 8px, 25px high; home::[data-omd-capture="42"] (button.linetabMini_tabTitle, 74px × 25px) and four siblings ("43" to "46"). The capture records no border on the tab element.

Selected: the tab with class linetabMini_tabTitleActive ("41") sets 700 and tracking -0.3px; its text stays #121212.

Search field and shortcut pills

Search field (search-input): transparent fill, text #000000, border 1px #121212, 8px radius, padding 0px 52px 0px 16px, 530px × 46px, 14px / 400 / 19.6px; home::[data-omd-capture="141"] (input.mainSearch_mainSearchInput), empty in the capture. The 52px right padding matches the 52px × 46px search button beside it ("143", radius 0px 8px 8px 0px).

Shortcut pill (search-shortcut-pill): background #ffffff, text #121212, border 1px #e9e9e9, 30px radius, padding 0px 12px, 46px high, 13px / 500 / 13px; home::[data-omd-capture="145"] (button.mainSearch_searchBtn, 78px × 46px). The two with class mainSearch_withImg ("144", "146") use 0px 12px 0px 6px padding.

Poster like button and poster card

Like button (like-button): fill rgba(18, 18, 18, 0.2), 50% radius, 36px × 36px on the largest poster; home::[data-omd-capture="51"] (button.btn-like.dark), 22-23 per capture. Copies on the smaller carousel slides render 27-33px, so only the largest size is recorded. Its own #121212 and 10px / 400 are the page body's inherited values, so no label style is claimed.

Poster card (poster-card): 12px radius, 254px × 362px (div.mainMovieChartCard_imgArea holding img.mainMovieChartCard_poster). Of the 33 poster areas per capture, the largest records the shadow rgba(18, 18, 18, 0.24) 0px 20px 25px 0px; the other 32 record a zero-alpha shadow and smaller rects.

Reserve button

Rest (reserve-button): transparent fill, text and 1px border #fc5555, 4px radius, 8px padding, 60px × 29px, 11px / 500 / 11px, tracking -0.165px; home::[data-omd-capture="152"] (button.btn_reserve; "151" on the other two captures), one per capture, inside the video article below its player. The article's player controls (button.btn_play, .btn_muted, .btn_fullscreen) belong to an embedded player and are not promoted.

Text buttons

Chart text button (text-link-button): text #707070, 14px / 400 / 19.6px, tracking -0.21px, 77px × 20px, column gap 2px; home::[data-omd-capture="47"] (button.mainMovieChart_linkBtn) at the end of the line-tab row.

Footer link (footer-link): text #707070, 12px / 400 / 16.8px, padding 0px 9px 0px 0px, 17px high; home::[data-omd-capture="21"] to "28" (button.cgv-footer-link). The last link of each row ("23", "25", "28") has 0px padding.

Select

Rest (common-select): transparent fill, text #121212, border 1px #d9d9d9, 10px radius, padding 0px 16px, 200px × 48px, 14px / 400 / 19.6px; home::[data-omd-capture="29"] (select.select_commonSelect), below the footer links.

Bottom sheet

Open (bottom-sheet): background #ffffff, radius 24px 24px 0px 0px, padding 20px 0px 32px, 600px × 391px, flush with the bottom of the 900px viewport (top 509px); div.main-modal-container inside div.cgv-modal.cgv-bot-modal.active (role dialog), open in all three captures.

Close button (sheet-close-button): background #f5f5f5, text #707070, 6px radius, padding 8px 10px, 40px × 28px, 12px / 400 / 12px; home::[data-omd-capture="8"] (button.mmns00008_close). Beside it, button.mmns00008_today ("7") is a fill-less #707070 14px / 400 / 19.6px text button.

Round outline pill

Rest (round-outline-pill): transparent fill, text and 1px border #ffffff, 100px radius, padding 0px 12px, 90px × 34px, 12px / 500 / 16.8px; home::[data-omd-capture="30"] (button.mets01390_roundBtn), under white 22px / 700 and 14px / 700 text (p.mets01390_title, p.mets01390_txt). The fill behind the three is not in the capture.

The capture contains 383 component variants over three captures of the same URL (https://cgv.co.kr/); surface-2 and surface-3 repeat the home's elements and computed styles with small rect differences, so every citation above uses home. Only the selector-backed variants above are canonical tokens. Not promoted: the carousel-library arrows (button.swiper-button-prev / -next, colour #007aff, no text), the embedded video controls, and two class markers with no unmarked sibling to compare against (button.cgv-footer-content-title.active, the search banner's mainSearch_active). No showtime, seat, or booking-flow control is in the bundle. Corrected 2026-09-30: the July text read interactionCount: 0 as the reason no states exist; that counter covers opened dialogs, tabs, and menus. States are absent because the bundle holds no ::state-* sample for any of its 1,220 elements, so no hover, pressed, or focus value is declared.

---

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: 12-14px metadata, 8/10/16/24px recurring spacing, and 40px category/menu controls where specifically observed (10px is the inherited root size, not a metadata style; corrected 2026-09-30).
• 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

Observed: two class-marked selected tabs — the main-category tab (maintab_tabTitleActive: #121212 fill and border, #ffffff label at 700) and the movie-chart line tab (linetabMini_tabTitleActive: 700, tracking -0.3px) — and the bottom sheet, open in all three captures. The bundle holds no hover, pressed, or focus frame for any element, so none is declared. Two class markers have no unmarked sibling to compare against (button.cgv-footer-content-title.active, the search banner's mainSearch_active), so neither is recorded as a state. 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.