Hanvit Industrial

Overview

Hanvit Industrial's design system embodies **Technical Minimalism**—a philosophy that prioritizes clarity, precision, and functional elegance over decorative excess. The brand serves mission-critical industrial sectors (energy generation, aerospace, precision manufacturing) where reliability and exactitude are non-negotiable. The visual language combines a clean, light-neutral canvas (predominantly #ffffff and #f9f9f9) with a warm, energetic accent color (#f68931) that signals confidence, innovation, and forward momentum. This aesthetic reflects the brand's core promise: control systems engineered to the highest standards, delivered with transparency and technical rigor.

The tone is authoritative yet approachable—never breathless or casual. Hanvit speaks with the precision of an engineer and the clarity of a trusted partner. Example sentence: "Our servo valves deliver ±0.5% accuracy across 10,000+ operating hours—engineered for the systems that power your industry." The vocabulary emphasizes performance metrics, reliability, and partnership. Every visual element—from typography hierarchy to spacing rhythm—reinforces the message that this is a company that understands complexity and has solved it.

Colors

The color system is built on a **neutral-dominant, accent-driven** model. The surface stack (white #ffffff through light gray #e0e0e0) provides a calm, professional foundation that keeps focus on content and data. Text hierarchy uses two core neutrals: primary text at #272728 (near-black, 39 points of contrast against white) for maximum legibility on technical documentation, and secondary text at #5e5e5e for supporting information and metadata.

The primary accent, #f68931 (warm orange), is reserved exclusively for calls-to-action, interactive states, and brand-critical moments. This color appears on primary buttons (background: #f68931, text: #ffffff), hover states (darkened to #e67e1f), and focus indicators (box-shadow: 0 0 0 3px rgba(246, 137, 49, 0.1)). The primary container (#fff8f3)

Typography

The type system uses **Suit** (Korean-optimized sans-serif) as the primary family, with **Inter** as the Latin fallback, ensuring seamless bilingual rendering across the site. The hierarchy is built on a 4px baseline grid: display (60px, 700 weight, -0.04em tracking) for hero statements; headline-lg (40px, 600 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 long-form content; body-md (16px, 400 weight, 24px line-height) for standard body text; label-md (14px, 600 weight, 0.01em tracking) for buttons and UI labels; label-sm (12px, 500 weight, 0.05em tracking) for metadata and captions. All display and headline sizes use negative letter-spacing (-0.04em to -0.01em) to ti

Layout

The layout system uses a **12-column fluid grid** with a fixed max-width of 1400px, centered on the viewport. The gutter is consistently 24px (md spacing), creating a 48px column gap that provides breathing room without fragmenting the page. Container sections use lg spacing (40px) for vertical rhythm between major sections (hero, product showcase, testimonials, footer), while internal card stacks use md spacing (24px). The page follows a **modular rhythm**: hero sections occupy 100% viewport height with 64px (xl spacing) internal padding; product grids use 3-column layouts on desktop (1400px+), 2-column on tablet (813px–1399px), and single-column on mobile (≤812px), with 24px gaps between cards. Whitespace is treated as a design element—never fill empty space with decoration. The containe

Elevation & Depth

Depth is conveyed through **subtle shadow layering and border definition**, not through color darkening or glassmorphism. The elevation system uses three levels: (1) **Base/Surface** (no shadow, 1px border at #d4d4d4) for cards, inputs, and containers at rest; (2) **Raised/Hover** (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), same 1px border) for interactive elements on hover or focus, signaling interactivity without visual noise; (3) **Elevated/Active** (box-shadow: 0 5px 40px rgba(0, 0, 0, 0.09), same border) for modals, dropdowns, and expanded states. The shadow blur (8px to 40px) increases w

Shapes

The shape philosophy is **Geometric Precision**—rounded corners are used sparingly and consistently to signal modernity without sacrificing the technical, grid-based aesthetic. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like badges and tight inputs; DEFAULT (0.5rem / 8px) for standard buttons, inputs, and cards; md (0.75rem / 12px) for larger cards and panels; lg (1rem / 16px) for hero sections and major containers; xl (1.5rem / 24px) for modals and full-width overlays; full (9999px) for pill-shaped buttons and circular avatars. Buttons use DEFAULT (8px) to

Components

Action Elements Buttons are the primary interaction pattern. **Primary buttons** (background: #f68931, text: #ffffff, padding: 14px 20px, height: 48px, border-radius: 8px) use the brand accent and are reserved for primary CTAs ("Request Quote", "Learn More", "Download Spec Sheet"). Hover state darkens the background to #e67e1f with a 200ms transition. Active state uses #d46f1a. **Secondary buttons** (background: transparent, text: #f68931, border: 1px solid #cccccc, same padding/height) are used for alternative actions or less critical flows. Hover state fills the background with #e9ecef. All buttons use label-md typography (14px, 600 weight) and are keyboard-accessible with focus outline: 3px solid rgba(246, 137, 49, 0.1).

Containers & Surfaces **Cards** (background: #ffffff, bor

Do's and Don'ts

**Do**

• Do use the primary accent (#f68931) exclusively on CTAs and interactive states—never on passive text or backgrounds.
• Do maintain 24px (md spacing) gutters between cards and 40px (lg spacing) between major sections to preserve the minimal aesthetic.
• Do apply 1px borders (#d4d4d4) to all cards and containers to define edges in the light, neutral palette.
• Do use Suit for Korean text and Inter for English to ensure bilingual clarity without font-switching artifacts.
• Do apply 200ms ease-in-out transitions on all hover/focus state changes to provide smooth, professional feedback.
• Do use label-md (14px, 600 weight) for all button text and UI labels to maintain consistent hierarchy.

**Don't**

• Don't use rounded corners larger than 12px (md) on standard cards or buttons—the brand is technical, not playful.
• Don't apply multiple shadows or blur effects; stick to the three-level elevation system (base, raised, elevated).
• Don't use the secondary gray (#666666) or tertiary peach (#feb47b) as primary text colors—reserve them for supporting UI.
• Don't exceed 1400px container width; ultra-wide layouts dilute the focused, grid-aligned aesthetic.
• Don't use color alone to convey status; always pair with text labels or icons for accessibility.
• Don't animate transitions faster than 150ms or slower than 300ms—the brand values precision, not drama.