gimmick

Overview

gimmick is a Korea-based creative studio that transforms brand narratives into compelling digital experiences through strategic content design and production. The design system embodies **Typographic Brutalism**—a movement that celebrates raw, monumental letterforms and stark black-and-white contrast as the primary visual language, punctuated by an electric lime-green (#4cfc0f) accent that signals energy, innovation, and creative boldness. The aesthetic is deliberately austere: maximum contrast (pure black #000000 on pure white #ffffff), oversized sans-serif headlines (75px+), and minimal ornamentation. This creates an atmosphere of confident minimalism—the UI gets out of the way so the brand's content becomes the hero.

The brand voice is direct, strategic, and unapologetically contemporary. Tone: precise, confident, never flowery. Vocabulary: 'creative strategy,' 'brand value,' 'content pioneer,' 'systematic approach.' Example sentence in brand voice: "We design brand stories that move audiences—through film, campaign, and experience."

Colors

The color system operates on a **high-contrast, accent-driven** philosophy. Primary surface is pure white (#ffffff) with pure black (#000000) as the dominant text color, creating maximum legibility and visual impact. The primary accent is electric lime-green (#4cfc0f), used exclusively for call-to-action buttons, interactive highlights, and brand-critical UI elements—it appears 36 times in the DOM, signaling its role as the signature brand color. Secondary accent is a vibrant blue (#116dff) for secondary interactions and links. The surface stack uses subtle grays (surface-container-high: #e2e2e2, surface-dim: #f4f4f4) to create depth without breaking the monochromatic aesthetic. Tertiary accent (#9e3b1b, a warm brown) is reserved for editorial or heritage content. All surfaces maintain rgb

Typography

The type system is built on **typographic hierarchy through scale and weight, not color variation**. Display (75px, madefor-display-bold) is reserved for hero headlines and brand statements; headline-lg (48px) for section titles; headline-md (36px) for subsections. Body text uses Arial/Helvetica at 16–18px with 400 weight for maximum clarity against the white background. All headlines use 700 weight (bold) to reinforce the brutalist aesthetic. Letter-spacing is tight on display sizes (-0.04em) to create visual density and impact. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (12px) placed over lime-green backgrounds to maintain contrast and legibility. The type pairing communicates 'systematic creativity'—geometric sans-serif (madefor-display) for brand voice, utilitaria

Layout

The layout uses a **fixed 1000px container max-width** centered on desktop, with a 12-column grid model. Page rhythm is driven by lg spacing (40px) for section separation and md spacing (24px) for component padding. The hero section occupies the full viewport height with the oversized 'gimmick' wordmark (75px) anchoring the left side, while the tagline and navigation occupy the top-right—this asymmetry creates visual tension and guides the eye. Sections below the fold use a 2-column or 3-column layout depending on content type (projects, testimonials, etc.). White-space is generous: minimum 40px gutters on desktop, 24px on tablet. The spacing scale is semantic: use lg for major section breaks, md for card padding and button spacing, sm for label-to-input gaps. Container max-width of 1000px

Elevation & Depth

Depth is achieved through **minimal, graphic shadows and stark contrast**, not layered blur or glassmorphism. Level 1 (Base): flat white (#ffffff) with no shadow. Level 2 (Cards/Containers): box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), a subtle 1px lift that preserves the flat aesthetic. Level 3 (Modals/Overlays): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a slightly deeper shadow (4px blur, 12px spread) to signal modal priority. Interactive elements (buttons, inputs) use no shadow by default; on hover, apply the Level 2 shadow to signal state change. The lime-green accent (#4cfc0f) never uses

Shapes

The shape philosophy is **Geometric Minimalism with Functional Precision**. Buttons use 4px border-radius (DEFAULT), a subtle rounding that softens the geometry without compromising the brutalist aesthetic. Cards use 10px (md), slightly more generous to signal containment. The lime-green accent bar (used as a visual divider or CTA underline) has 0px radius—pure rectangles. Input fields use 4px radius to match buttons, creating a cohesive interaction family. The logo and circular elements use 50% (full) radius. This tiered approach—sharp rectangles for accents, subtle rounding for interactive e

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses lime-green (#4cfc0f) background with black text, 44px height, 12px 24px padding, and label-md typography (14px, 600 weight). On hover, shift to primary-container (#228000, a darker green) to signal state change without losing brand identity. Transition: 200ms ease. **button-secondary** uses transparent background with black text and a 1px solid outline (#8f8f8f); on hover, fill with surface-container-high (#e2e2e2). Avoid using secondary buttons for critical CTAs—reserve them for navigation or tertiary actions.

Containers & Surfaces **card** component uses white background (#ffffff) with 10px border-radius and md padding (24px). Apply box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) for subtle depth. On

Do's and Don'ts

**Do**

• Do use the lime-green accent (#4cfc0f) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it is the signature color and should never be diluted.
• Do maintain pure black (#000000) on pure white (#ffffff) for all body text and headlines to maximize contrast and readability; never use gray text on white backgrounds.
• Do apply 4px border-radius to buttons and inputs, 10px to cards, and 0px to accent bars—this tiered approach creates visual hierarchy through geometry.
• Do use madefor-display-bold at 75px+ for hero headlines and Arial at 16–18px for body text; this pairing communicates 'systematic creativity' and brand authority.
• Do reserve lg spacing (40px) for section breaks and md spacing (24px) for component padding; this creates a predictable, grid-based rhythm.
• Do apply box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) to cards and containers; this subtle shadow preserves the flat, graphic aesthetic while signaling depth.

**Don't**

• Don't use colored backgrounds on cards or containers—maintain white (#ffffff) to preserve the monochromatic aesthetic and ensure the lime-green accent remains the focal point.
• Don't apply shadows to the lime-green accent bar or primary buttons; they should read as flat, graphic elements with no depth.
• Don't use secondary or tertiary colors for body text or backgrounds; reserve them for accents, badges, and secondary interactions only.
• Don't round corners beyond 10px on any component; the design system prioritizes geometric precision, not organic softness.
• Don't use more than one accent color per section; lime-green (#4cfc0f) is the primary brand signal and should dominate the visual hierarchy.
• Don't apply text-shadow or text-outline to body text; the high contrast between black and white is sufficient for legibility and brand clarity.