YUIL Robotics

Overview

YUIL Robotics operates at the intersection of industrial precision and digital minimalism. The brand serves manufacturing enterprises across South Korea and beyond, delivering collaborative and articulated robotic systems that transform factory automation. The design aesthetic embraces 'Technical Minimalism'—a philosophy that strips away ornament to expose functional clarity, using a neutral grayscale palette punctuated by a vibrant electric blue (#007aff) that signals interactivity and innovation. The UI evokes trust through restraint: clean typography, generous whitespace, and purposeful color deployment create an environment where complex robotic specifications feel accessible and controllable. The emotional response is one of precision without coldness—a sense that every pixel serves the user's mission to automate intelligently.

The brand voice is direct, technical, and solution-oriented. Vocabulary leans toward specification language ('payload capacity', 'collaborative workspace', 'automation efficiency') without sacrificing clarity for non-specialists. Tone is confident but not arrogant; the copy assumes the user is serious about industrial transformation. Example sentence in brand voice: 'The YMX-250 delivers 250kg payload capacity with ±0.05mm repeatability—precision engineered for your production line.'

Colors

The color system is built on a foundation of high-contrast grayscale that reflects the industrial, no-nonsense character of manufacturing. Primary surface colors range from #ffffff (bright, clean backgrounds) through #e9ecef (subtle container differentiation) to #151515 (primary text, near-black for maximum readability at 16px body size). The outline palette (#6c757d for standard dividers, #999999 for secondary separators) provides visual rhythm without distraction. The primary accent color is #007aff—a vivid electric blue deployed on all interactive elements (buttons, links, focus states, badges). This blue appears in only 3–5% of the interface, making it a powerful signal: when a user sees #007aff, they know they can act. Secondary accent is #666666 (mid-gray) used for disabled states an

Typography

The type system centers on Pretendard, a modern Korean-optimized sans-serif that balances technical precision with humanist warmth—critical for a brand serving Korean manufacturing enterprises. The hierarchy spans eight levels: display (60px, 700 weight, -0.03em tracking) for hero statements; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight) for card headers; body-lg (18px, 400 weight, 28px line-height) for feature descriptions; body-md (16px, 400 weight, 24px line-height) for standard body copy; label-md (14px, 600 weight, 0.01em tracking) for buttons and interactive labels; label-sm (12px, 500 weight, 0.02em tracking) for metadata and captions. Weight distribution is deliberate: headlines use 600–700 weight to c

Layout

The page layout follows a 12-column fluid grid with a max-width container of 1280px, ensuring content remains readable on desktop while adapting gracefully to tablets and mobile. The spacing scale is semantic: unit (8px) serves as the base increment; xs (4px) for micro-adjustments; sm (12px) for tight grouping; md (24px) for standard section padding and card spacing; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. Gutter width is fixed at 24px between grid columns. Hero sections (like the YMX-250 showcase) use full-width backgrounds with centered content containers, creating visual breathing room around product imagery. Card-based layouts employ md (24px) padding with lg (40px) margin between card groups. Whitespace is treated as a first-class design elem

Elevation & Depth

Depth in this system is conveyed through subtle shadows and layering, not through bright highlights or glassmorphism. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on hover states and subtle UI elements; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and dropdowns; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals, popovers, and primary containers. The lg shadow is the most prominent in the system and appears on the custom select dropdown panel (border-radius: 4px, background: #fff, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)). Shadows use only bla

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and consistently to soften industrial edges without sacrificing the technical character. The rounded scale includes six stops: sm (0.25rem / 4px) for small UI elements like badges and tight inputs; DEFAULT (0.5rem / 8px) for standard buttons, input fields, and list items; md (0.75rem / 12px) for cards and moderate containers; lg (1rem / 16px) for larger cards and modals; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for pills and circular elements. Buttons use DEFAULT (8px) radi

Components

Action Elements Buttons are the primary interaction mechanism and use a two-tier system. Primary buttons (backgroundColor: rgba(21, 21, 21, 0.7), textColor: #ffffff, padding: 13px 26px, height: 44px, fontWeight: 300, rounded: 8px) are rendered with semi-transparent dark backgrounds to create subtle depth without relying on bright colors. The 300 font-weight (lighter than standard 400) is intentional, reflecting the brand's minimalist aesthetic and the Pretendard font's optical weight at small sizes. On hover, the background darkens to rgba(21, 21, 21, 0.85) over 200ms ease-out, providing clear feedback. Secondary buttons mirror the primary style, allowing for visual consistency across CTAs. The 'Join' button observed in the hero uses this exact treatment. Focus states apply a 3px box-s

Do's and Don'ts

**Do**

• Do use #007aff (primary blue) exclusively for interactive elements—buttons, links, focus states, and badges—to create a consistent signal for user action.
• Do maintain the grayscale foundation (#ffffff, #e9ecef, #151515) for 85%+ of the interface; reserve color for 5–10% of the screen to maximize its impact.
• Do apply 24px (md spacing) padding to cards and 40px (lg spacing) between major sections to create visual rhythm and prevent cognitive overload.
• Do use Pretendard at 400 weight for body copy and 600–700 weight for headlines; avoid weights below 300 or above 700 to maintain technical clarity.
• Do pair button hover states with 200ms ease-out transitions and elevation changes with 240ms cubic-bezier(0.4, 0, 0.2, 1) for consistent motion language.
• Do test all text at 16px body size against #ffffff backgrounds to ensure WCAG AAA contrast (14.5:1 minimum with #151515 text).

**Don't**

• Don't use decorative shadows or glassmorphism effects; shadows serve only to indicate elevation and interactivity (max 0 8px 16px rgba(0, 0, 0, 0.12)).
• Don't apply rounded corners larger than 12px to standard UI elements (buttons, inputs, cards); reserve xl (24px) and full (9999px) for hero sections and pills only.
• Don't mix primary blue (#007aff) with secondary colors (orange #ff9800, gray #666666) on the same interactive element; each color should own its semantic role.
• Don't reduce font-weight below 300 or increase letter-spacing above 0.05em on body copy; this breaks readability and contradicts the technical aesthetic.
• Don't use more than three elevation levels (sm, md, lg) in a single view; excessive shadow layering creates visual noise and obscures hierarchy.
• Don't apply color transitions longer than 240ms or use easing functions other than ease-out or cubic-bezier(0.4, 0, 0.2, 1); faster, simpler motion feels more responsive and technical.