COLEO MARKETING GROUP

Overview

COLEO MARKETING GROUP is a Seoul-based creative agency that transforms brands through digital-first strategy, video production, and social media excellence. The design system embodies 'Architectural Minimalism'—a philosophy that treats negative space as a structural element, not an afterthought. The aesthetic is deliberately austere: a near-white canvas (#f8f8f4) paired with absolute black (#000000) and warm grays (#999999, #6c757d), creating a gallery-like environment where content becomes the hero. The emotional response is one of clarity and precision: users feel they're entering a space where every pixel serves a purpose, where complexity is distilled into elegant simplicity. The brand voice is direct, confident, and internationally minded—speaking to both Korean and global audiences without compromise. Tone: 'Transform your business by being remarkable'—not breathless, not corporate-speak, but a quiet assertion of capability backed by portfolio and process.

Colors

The color palette operates on a principle of 'Monochromatic Hierarchy with Structural Accents.' Primary (#000000) is the dominant structural color, used for typography, borders, and interactive states—it is the skeleton of every layout. Surface (#f8f8f4) is the breathing room, a near-white that sits 4% above pure white (rgb(248, 248, 244)) to prevent eye strain and provide subtle warmth. Secondary grays (#999999 for outlines, #6c757d for tertiary elements, #505050 for containers) create a five-step tonal ladder that guides visual hierarchy without introducing competing hues. On-surface text (#1a1a1a) is reserved for body copy and ensures 16:1 contrast ratio against the light background. Accent colors are deliberately absent from the primary palette—the brand relies on content imagery and v

Typography

The type system pairs two distinct voices: NeueHaasGroteskDisplay55Roman (400 weight) for all display, headline, and title-level text, and Pretendard (400–600 weight) for body and label text. This pairing creates a 'Geometric-Humanist' contrast—the Neue Haas family's geometric precision (used at 64px, 48px, 32px for display/headline/headline-md) conveys authority and modernity, while Pretendard's humanist warmth (used at 18px, 16px, 14px for body/label) ensures readability and approachability. Accent italic text uses SilkSerifLightItalic (400 weight, 20px) sparingly to highlight key phrases—'Creativeness', 'Beyond', 'Remarkable'—creating visual punctuation without ornament. Letter-spacing is tight on display text (-0.02em at 64px) to reinforce geometric density, and opens slightly on body

Layout

The layout operates on a 12-column grid with a 1280px container max-width, centered on desktop and fluid on mobile (320px minimum). The grid uses a 24px gutter (md spacing) between columns, creating a rhythm of 80px column widths on desktop. White-space philosophy: sections are separated by 40px (lg spacing) vertically on desktop, 24px (md spacing) on tablet, and 12px (sm spacing) on mobile. This creates a 'breathing room' effect where content never feels cramped. The hero section (sec01) uses full-width typography at 4.96vw (approximately 64px at 1280px viewport), with 14.58vw left margin on video elements to create asymmetrical balance. Padding within containers is consistently {spacing.md} (24px) on desktop, reducing to {spacing.sm} (12px) on mobile. The layout avoids centered text bloc

Elevation & Depth

Depth in this system is achieved through luminosity and subtle shadow, never through color saturation or blur. The elevation stack consists of three levels: Level 1 (Base) uses no shadow, relying on the surface color (#f8f8f4) as the foundation. Level 2 (Standard Cards, Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a 3px vertical offset and 8px blur radius that suggests a card floating 4–6px above the surface. Level 3 (Modals, Elevated Containers) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a deeper shadow with 8px offset and 24px blur, suggesting 12–16px elevation. All shad

Shapes

The shape philosophy is 'Architectural Precision'—curves are used sparingly and only where they serve a functional purpose. Buttons and inputs use border-radius: 1rem (16px) for a subtle softness that feels contemporary without sacrificing geometric clarity. Cards use border-radius: 1.5rem (24px), slightly more generous than buttons to signal containment and breathing room. The scrollbar thumb uses border-radius: 0.25rem (4px), a tight radius that maintains the minimalist aesthetic. Modals and overlays use border-radius: 0.75rem (12px), a middle ground that balances approachability with struct

Components

Action Elements Buttons exist in two primary states: primary (black background, white text, 1px solid black border) and secondary (white background, black text, 1px solid black border). Both use padding: 12px 24px, height: 48px, and border-radius: 1rem (16px). On hover, primary buttons transition to primary-container (#3e3e3e background, white text) over 0.5s ease; secondary buttons invert to primary state. The 'OUR WORKS' button (worksBtn class) uses a 2.03vw font-size (approximately 26px at 1280px) with a 1.77vw border-radius (approximately 23px), and includes an inline SVG arrow icon (0.75vw × 1.03vw) that animates on hover. Transition timing is 0.5s for all button state changes, using ease timing function.

Containers & Surfaces Cards use background: {colors.surface-container}

Do's and Don'ts

**Do**

• Do use the full-width hero layout (sec01) with asymmetrical text positioning (transform: translate(20%, 0px)) to create dynamic tension and guide the eye through content hierarchy.
• Do apply the 24px gutter spacing consistently across all grid layouts; this creates a predictable rhythm that feels intentional and professional.
• Do transition button and card states over 0.5s ease and 0.3s ease respectively; faster transitions (0.1s) feel jarring, slower ones (1s+) feel sluggish.
• Do use NeueHaasGroteskDisplay55Roman exclusively for headlines and display text; mixing with other sans-serifs dilutes the geometric authority.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals; this 3px offset and 8px blur is the system's standard elevation cue.
• Do reserve SilkSerifLightItalic for accent phrases only ('Creativeness', 'Beyond', 'Remarkable'); overuse dilutes its impact and breaks the minimalist aesthetic.

**Don't**

• Don't use pure white (#ffffff) as the primary surface; the system's #f8f8f4 provides warmth and reduces eye strain without sacrificing clarity.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or with blur radius greater than 24px; this creates a heavy, dated appearance that contradicts the minimalist philosophy.
• Don't center-align body text blocks; the system uses left-alignment or asymmetrical positioning to create visual tension and guide reading flow.
• Don't mix Pretendard with other humanist sans-serifs; the system's type pairing (Neue Haas + Pretendard) is deliberate and should not be substituted.
• Don't use border-radius values between 0.5rem and 1rem on buttons; stick to 1rem (16px) for consistency and to maintain the geometric precision.
• Don't apply color overlays or gradients to the surface background; the system's monochromatic palette is its strength—content imagery provides visual energy, not the UI.