ELUO CNC ELIX

Overview

ELIX is ELUO CNC's flagship AI-driven UX consulting platform, representing the convergence of 20 years of design expertise with cutting-edge artificial intelligence. The design system embodies 'Architectural Minimalism with Digital Energy'—a philosophy that marries austere, geometric precision with vibrant, purposeful color accents. The brand personality is authoritative yet approachable: the interface conveys technical sophistication through clean lines, generous whitespace, and a restrained navy-and-yellow palette, while maintaining warmth through human-centered microcopy and intuitive interaction patterns. The emotional response is one of clarity and confidence—users feel guided by intelligence rather than overwhelmed by complexity.

The voice is direct, precise, and solution-oriented. ELIX speaks in active verbs and concrete outcomes: 'BUILD shortens the process,' 'CREATE with precision,' 'AGENT delivers solutions,' 'CRAFT like an expert.' Vocabulary favors business-technical terms (consultation, transformation, integration, deployment) without jargon barriers. Example sentence in brand voice: 'Your AI strategy transforms from concept to deployment in weeks, not quarters.'

Colors

The color system is built on a high-contrast, minimalist foundation anchored by navy blue (#000080) as the primary brand accent and vibrant yellow (#ffff00) as the secondary energy color. Primary (#000080) appears on all interactive CTAs, navigation highlights, and focus states—it signals authority and trustworthiness in a B2B consulting context. Secondary (#ffff00) is reserved for accent highlights, gradient overlays in hero sections, and visual emphasis on key data points; it provides visual pop without compromising legibility. The surface stack uses a neutral grayscale: surface (#ffffff) as the default canvas, surface-container (#e9ecef) for grouped content, and surface-container-highest (#d0d0d0) for tertiary backgrounds. On-surface text is pure black (#000000) for maximum contrast and

Typography

The type system uses Pretendard as the primary typeface, with AppleSDGothicNeo and Spoqa Han Sans as fallbacks for Korean language rendering—this stack ensures consistent rendering across macOS, iOS, and Android while maintaining the clean, modern aesthetic. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand statements; headline-lg (40px, 700 weight) anchors section titles; headline-md (28px, 600 weight) structures subsections; body-lg (18px, 400 weight, 28px line-height) is the default reading size and appears in all body copy and form labels; body-md (16px, 400 weight) is used for secondary text and descriptions; label-md (14px, 600 weight, 0.01em tracking) styles button text and form labels; label-sm (12px, 500 weight, 0.05em tracking) is applied to ba

Layout

The layout system uses a 12-column grid with a fixed max-width of 1200px, centered on the viewport. Container padding is 24px on desktop (gutter spacing) and 12px on mobile, creating a responsive frame that adapts without reflow. The spacing scale follows a 8px base unit: xs (4px) for micro-adjustments, sm (12px) for component internal spacing, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Whitespace is treated as a first-class design element—sections are separated by lg (40px) vertical spacing minimum, and card-to-card horizontal spacing uses md (24px). The page rhythm alternates between full-width hero sections (video, gradient backgrounds) and constrained content zones (1200px max), creating visual b

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered backgrounds rather than dramatic z-index stacking. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Elevated Card): background #e9ecef with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a 1px border at outline-variant (#bfbfbf), and 24px padding—used for grouped content, form sections, and data cards. Level 3 (Modal/Overlay): background #ffffff with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a 2px border at primary (#000080), and 24px padding—used for modals, popovers, and high-prior

Shapes

The shape philosophy is 'Geometric Precision with Approachable Softness'—corners are rounded just enough to feel contemporary and friendly, but not so much that they appear playful or casual. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a subtle rounded rectangle that feels professional yet modern. Cards and containers use lg (16px) for consistency with buttons, establishing a unified visual language. Input fields and form controls use DEFAULT (0.5rem / 8px) for a tighter, more technical appearance that signals functional precision. Badges and status in

Components

Action Elements Buttons are the primary interaction mechanism and come in two variants: primary (navy background, white text, 2px solid navy border) and secondary (transparent background, navy text, 2px solid navy border). Primary buttons use 48px height with 12px vertical and 24px horizontal padding, set in label-md (14px, 600 weight). On hover, primary buttons transition to primary-container (#1a1a9e) background with a 150ms ease-out timing function (transition: background-color 150ms ease-out, border-color 150ms ease-out). On active/pressed, the background darkens to primary-fixed-dim (#000080) and the button scales to 98% (transform: scale(0.98)) for tactile feedback. Secondary buttons maintain the same dimensions but use transparent backgrounds; on hover, they gain a surface-conta

Do's and Don'ts

**Do**

• Do use navy (#000080) for all primary CTAs and focus states—it is the brand's signature accent and must appear on every interactive element.
• Do apply yellow (#ffff00) sparingly as an accent highlight or gradient overlay in hero sections to create visual energy without overwhelming the interface.
• Do maintain 24px (md spacing) as the default padding and margin for cards, sections, and major layout blocks—consistency reinforces the minimalist aesthetic.
• Do use the full Pretendard font stack (Pretendard, AppleSDGothicNeo, Spoqa Han Sans, Malgun Gothic, sans-serif) to ensure consistent rendering across all devices and languages.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and containers to create subtle depth without visual heaviness.
• Do use label-md (14px, 600 weight) for all button text and form labels to maintain visual hierarchy and readability.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients beyond yellow-to-white, no accent colors other than navy, yellow, and blue.
• Don't apply border-radius greater than lg (16px) on buttons or cards; the brand uses geometric precision, not organic softness.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or larger than 0 8px 24px; heavy shadows contradict the minimalist aesthetic.
• Don't set line-height below 1.5 for body text or below 1.2 for headlines; readability and breathing room are non-negotiable.
• Don't mix typefaces—Pretendard is the only approved font family; system fonts and serif typefaces are forbidden.
• Don't use pure white (#ffffff) text on navy (#000080) without a text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); contrast must be maintained for accessibility.