King Kong Ad

Overview

King Kong Ad is a performance marketing agency that transforms brand growth through data-driven advertising strategies. The design system embodies a 'Playful Futurism' aesthetic—combining retro sci-fi illustration (rocket ships, space stations, planets) with bold, energetic typography and high-contrast color blocking. The brand serves Korean e-commerce and food service businesses seeking rapid market penetration via Naver and Google advertising. The visual language evokes optimism, momentum, and technological prowess: the user feels they're launching their brand into the stratosphere. The tone is confident yet approachable, speaking in direct, action-oriented language without corporate jargon. Example: '킹콩애드와 함께라면, 여러분의 브랜드는 우주로 날아갑니다' (With King Kong Ad, your brand soars into the cosmos).

Colors

The color palette is deliberately high-energy and binary: a bright, saturated yellow (#fee500) serves as the primary accent—the signature CTA color that commands attention on every page, used for buttons, highlights, and interactive states. Secondary red (#d64932) provides urgency and emotional weight, deployed on error states, badges, and secondary CTAs. Tertiary navy (#25325e) anchors the hero section and provides depth, creating a dramatic backdrop for the yellow and red accents. The surface stack is clean white (#ffffff) with subtle grays (#f9fafb, #f3f4f6, #e5e7eb) for container hierarchy. On-surface text is pure black (#000000) for maximum legibility. The inverse-surface (#1f2937) is reserved for dark overlays and modals. Primary (#fee500) is never used for body text; it exists purel

Typography

The type system uses Archivo as the primary display font, paired with Pretendard for fallback and emoji support. Display (90px, 700 weight, -0.8px letter-spacing) is reserved for hero headlines and brand moments—the extreme size and negative tracking create visual impact and convey confidence. Headline-lg (44px, 700 weight) is used for section titles and major CTAs. Headline-md (32px, 600 weight) breaks up content into digestible chunks. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 500 weight) and body-md (16px, 400 weight) handle descriptive copy and form labels. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are applied to buttons, badges, and micro-interactions. All headline sizes use negative letter-spacing (-0.48px to -0.8px) to tighten the vis

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered with 16px horizontal gutters on mobile and tablet. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-spacing within components, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section occupies the full viewport height (var(--full-h)) with 196px top padding, creating a dramatic entry point. Cards and containers use md (24px) padding internally. Form inputs use sm (12px) padding with a 12px bottom border for visual separation. White-space is generous but purposeful: the hero breathes with large margins, while card grids use 24px gaps to maintain visual clarity. Container max-width i

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) for minimal lift. Level 3 (Elevated Cards/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) for moderate depth. Level 4 (Floating Elements): box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1) for pronounced separation. Hover states on cards transition to the next elevation level (Level 2 → Level 3) over 150ms. The hero section uses a full-bleed background image wit

Shapes

The shape philosophy is 'Geometric Friendliness'—combining sharp, technical edges with rounded corners to balance the playful sci-fi aesthetic with professional credibility. Buttons use full radius (9999px) to create pill-shaped CTAs that feel approachable and clickable. Cards use lg radius (1rem / 16px) for a softer, more inviting container. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. Badge components use full radius (9999px) to match button styling and create visual cohesion. The hero section and major sections use no border-radius (0px) to anchor the

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg-[#fee500], text-black, rounded-full, 48px height, 12px 24px padding, label-md weight 600) are used for main CTAs like 'Quantum Jump' and contact forms. On hover, the background transitions to #fef2f2 (light cream) over 150ms, maintaining the yellow text color. Secondary buttons (transparent background, 2px border in #d64932, text-[#d64932], rounded-full) are used for alternative actions and navigation. Tertiary buttons (bg-[#25325e], text-white, rounded-lg) appear in modals and secondary contexts. All buttons use transition-all 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Cards use bg-[#f3f4f6] with rounded-lg (16px) and padding-md (24px). On hover, the backgrou

Do's and Don'ts

**Do**

• Do use the yellow primary (#fee500) exclusively for interactive elements—buttons, links, focus states—to create a consistent call-to-action language across the site.
• Do apply negative letter-spacing (-0.48px to -0.8px) on all headline sizes to reinforce the energetic, forward-moving brand personality.
• Do maintain 150ms transition timing (cubic-bezier(0.4, 0, 0.2, 1)) on all hover and focus state changes to create snappy, responsive feedback.
• Do use the full-radius (9999px) border-radius on all primary buttons and badges to create a cohesive, approachable interaction pattern.
• Do layer shadows subtly (0 1px 2px for cards, 0 4px 12px for elevated elements) rather than using dramatic drop-shadows to maintain the clean, professional aesthetic.

**Don't**

• Don't use the yellow primary (#fee500) for body text, backgrounds, or non-interactive elements—it is reserved exclusively for CTAs and highlights.
• Don't apply rounded corners to the hero section or major structural containers; keep them sharp (0px radius) to anchor the design with architectural confidence.
• Don't use system fonts or generic sans-serif fallbacks; always specify Archivo with Pretendard as the primary font stack to maintain brand consistency.
• Don't exceed 150ms transition timing on interactive elements; faster transitions feel jarring, slower ones feel sluggish and undermine the energetic brand voice.
• Don't mix elevation levels within a single card or container—maintain consistent shadow depth to preserve visual hierarchy and prevent visual confusion.