Studio Dragon

Overview

Studio Dragon is a premium storyteller group specializing in high-quality drama production and content creation across Asia. The design system embodies **Cinematic Minimalism**—a visual language that prioritizes narrative clarity, editorial sophistication, and dramatic tension through restrained color palettes and precise typography. The brand serves content creators, industry professionals, and global audiences seeking premium storytelling; the UI evokes a sense of curated excellence, where every visual element serves the story. The emotional response is one of prestige and accessibility: users feel they are entering a world of professional-grade content creation, yet the interface remains approachable and intuitive.

The brand voice is authoritative yet warm, precise yet human. Studio Dragon speaks in the language of cinema: structured, intentional, and layered. Vocabulary patterns emphasize narrative ("story," "character," "production"), craftsmanship ("premium," "curated," "refined"), and global reach ("Asia," "worldwide," "cross-cultural"). The tone avoids hype; instead, it lets the work speak. Example sentence in brand voice: "Every frame tells a story—discover how Studio Dragon brings yours to life."

Colors

The color system balances a near-monochromatic foundation with a single, vibrant accent. **Primary (#f90228)** is the brand's signature red—a vivid, energetic accent used exclusively on call-to-action buttons, interactive states, and key brand moments. It appears sparingly but with high impact, commanding attention without overwhelming the interface. **Secondary (#0a0259)** is a deep navy-purple, reserved for footer backgrounds and premium container states, evoking cinematic depth and corporate authority. **Tertiary (#222222)** is a near-black neutral, used for body text, headers, and structural elements, ensuring legibility and visual hierarchy. **Surface stack** ranges from pure white (#ffffff) at the base through carefully calibrated grays (#f8f8f8, #eeeeee, #e8e8e8) to support layering

Typography

The type system pairs **Inter** (sans-serif, geometric, modern) for display and headline scales with **Noto Sans KR** (humanist, multilingual-optimized) for body and label scales. This pairing communicates premium editorial design: Inter's precision conveys cinematic framing and structural clarity, while Noto Sans KR's warmth ensures accessibility across Korean, Japanese, Chinese, and Latin scripts. Display (72px, 700 weight, -0.04em letter-spacing) anchors hero sections with dramatic presence; headline-lg (64px, 700 weight) commands attention on section titles; headline-md (46px, 700 weight) provides visual rhythm on subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) ensure comfortable reading at 14px base font-size on body elements.

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1280px, centered with symmetric margins. Page rhythm is governed by a **modular spacing scale**: lg (40px) separates major sections (hero, content blocks, footer), md (24px) divides subsections and card groups, sm (12px) provides breathing room within components. The hero section (#homeArea) spans full viewport width (100%) with a fixed height of 500px on desktop, scaling to 950px on tablets and 510px on mobile, creating a cinematic aspect ratio (16:9 on desktop). Section titles (.secTitle) use 72px font with 60px left padding and a 40×40px decorative icon, establishing a consistent visual anchor. Content containers maintain 24px horizontal gutter on desktop, reducing to 20px on mobile (max-width: 767px). T

Elevation & Depth

Depth is achieved through **layered shadows and subtle surface differentiation**, not through color darkening. Level 1 (Base): white background (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Containers): 0 4px 12px rgba(0, 0, 0, 0.08) shadow with 1px border at #cccccc, creating gentle separation from the base. Level 3 (Elevated/Modals & Hover States): 0 12px 24px rgba(0, 0, 0, 0.15) shadow with surface-container-high (#e0e0e0) background, signaling interactive prominence. Floating social icons use 0px 12px 24px 0px rgba(0, 0, 0, 0.12) shadow with rgba(255, 2

Shapes

The shape philosophy is **Architectural Precision**—rounded corners are used strategically to soften hard edges while maintaining structural clarity. Buttons and primary interactive elements use 6px border-radius (lg in the scale), balancing approachability with professional restraint. Cards and content containers use 6px or 12px (lg or xl) depending on visual weight; portfolio cards typically use 6px, while modal overlays and premium containers use 12px. Input fields and form controls use 4px (DEFAULT), maintaining a compact, technical appearance. Floating social icons use 50% (full) border-r

Components

Action Elements **Buttons** come in three primary variants: primary (solid red #f90228 background, white text, 48px height, 12px 24px padding, 6px radius), secondary (transparent background, red text, 1px red border, 48px height), and ghost (rgba(255, 255, 255, 0.8) background, near-black text, 1px white border, 38px height, 50% radius for floating social icons). All buttons use label-md typography (14px, 500 weight). Hover states transition background-color over 200ms using cubic-bezier(0.2, 0, 0, 1) easing; primary buttons darken to #e60020, secondary buttons fill with #ffebee, and ghost buttons brighten to rgba(255, 255, 255, 0.95). Focus states apply a 3px border in primary red or a 0 0 0 3px box-shadow in rgba(249, 2, 40, 0.1). Active states maintain the hover appearance with an a

Do's and Don'ts

**Do**

• Do use primary red (#f90228) exclusively on high-priority CTAs, focus indicators, and interactive state changes—never on backgrounds or body text.
• Do maintain 24px horizontal gutter on desktop and 20px on mobile; use lg spacing (40px) to separate major sections and create editorial breathing room.
• Do apply 6px border-radius to buttons and cards, 12px to modals and elevated containers, and 50% to floating social icons—never use 0px or radii larger than 16px.
• Do use Inter for display and headline scales (72px–46px) and Noto Sans KR for body and labels (18px–13px) to balance cinematic precision with multilingual accessibility.
• Do apply 0 4px 12px rgba(0, 0, 0, 0.08) shadow to standard cards and 0 12px 24px rgba(0, 0, 0, 0.15) to elevated states; transition shadows over 300ms on hover.
• Do ensure all interactive elements have visible focus states: 3px border in primary red or 0 0 0 3px rgba(249, 2, 40, 0.1) box-shadow for keyboard navigation.

**Don't**

• Don't use primary red (#f90228) on backgrounds, body text, or non-interactive elements—it is reserved for CTAs and state indicators only.
• Don't apply border-radius larger than 16px or smaller than 2px; the system uses 4px, 6px, 12px, and 50% exclusively.
• Don't mix Inter and Noto Sans KR within the same text block; use Inter for headlines and Noto Sans KR for body copy.
• Don't use shadows larger than 0 12px 24px rgba(0, 0, 0, 0.15) or apply multiple stacked shadows; maintain a single, clean shadow per layer.
• Don't reduce line-height below 1.4 on body text or increase letter-spacing above 0.1em on body scales—maintain readability on screens.
• Don't use color to convey information alone; always pair color changes with text labels, icons, or other visual cues for accessibility.