Harim Holdings

Overview

Harim Holdings is a Korean agribusiness conglomerate that transforms farm-to-table sustainability into visual language. The brand embodies 'Warm Corporate Minimalism'—a design philosophy that pairs clean, neutral grayscale surfaces (white #ffffff, grays #cccccc–#333333) with a signature warm-orange accent (#fcb034) that signals trust, food quality, and forward momentum. The aesthetic avoids cold corporate sterility by introducing teal-green supporting colors (#80b2b3, #94babb) that evoke natural ecosystems and agricultural heritage. The UI communicates precision and care: every interaction feels deliberate, every surface breathes.

The brand voice is authoritative yet approachable—a senior executive who speaks plainly about complex supply chains and sustainability. Tone: measured, honest, never hyperbolic. Vocabulary favors concrete nouns (farm, table, ecosystem, innovation) over abstract adjectives. Example sentence in brand voice: '우리는 자연에서 식탁까지—생태계의 건강을 지키며 최고의 신선함을 전합니다' (We connect nature to table—preserving ecosystem health while delivering uncompromising freshness).

Colors

The color system is anchored by a warm-orange primary (#fcb034) used exclusively for call-to-action buttons, active navigation states, and brand-critical interactive elements. This accent appears sparingly but decisively, creating visual hierarchy without noise. The surface stack—from #ffffff (surface) through #cccccc (surface-container-highest) to #333333 (on-surface text)—provides a neutral, professional foundation that lets content breathe. Secondary colors (#80b2b3 teal and #94babb sage-green) are reserved for supporting UI elements, data visualization, and ESG-related sections, evoking agricultural and environmental themes without competing with primary. Error states use a warm red (#f13830) that harmonizes with the orange accent rather than jarring against it. All interactive states

Typography

The type system uses Pretendard as the primary typeface, a Korean-optimized sans-serif that balances geometric clarity with humanist warmth—critical for a brand serving both Korean and international audiences. Display (60px, 700 weight, -0.03em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter letter-spacing (-0.02em, -0.01em) creating visual cohesion. Body text (16–18px, 400 weight, 24–28px line-height) maintains 1.5× line-height ratio for readability across mobile and desktop. Labels (12–14px, 500–600 weight, 0.02–0.03em tracking) use increased letter-spacing to signal UI affordances and distinguish them from body content. On small labels over busy b

Layout

The layout system uses a 12-column grid with a fixed max-width of 1200px, centered on desktop and fluid on mobile (440px minimum viewport). Horizontal rhythm is governed by the spacing scale: md (24px) for section gutters, lg (40px) for major section separation, and sm (12px) for component-level padding. Container max-widths of 1200px and 1300px (observed in raw CSS) are normalized to 1200px for consistency. White-space is generous—sections are separated by at least 40px vertical rhythm, and card-based layouts use 24px gutters between items. The layout avoids visual clutter by limiting content width to 1200px and centering it, creating natural breathing room on ultra-wide displays. Mobile layouts collapse to single-column at 440px, with padding reduced to 12px (sm spacing) and font sizes s

Elevation & Depth

Depth is conveyed through subtle, layered shadows rather than dramatic drop-shadows. Level 1 (base surfaces) uses no shadow—surfaces sit flush against the background. Level 2 (cards, input fields) applies elevation.sm (0px 1px 2px rgba(0, 0, 0, 0.06)), a barely-perceptible lift that signals interactivity without visual noise. Level 3 (modals, popovers, hover states) escalates to elevation.md (0px 2px 4px rgba(0, 0, 0, 0.08)), creating clear separation. Level 4 (tooltips, dropdowns) uses elevation.lg (0px 4px 12px rgba(0, 0, 0, 0.12)) for maximum prominence. Shadows are always soft and spread (

Shapes

The shape philosophy is 'Technical Warmth'—sharp enough to feel modern and precise, rounded enough to feel approachable. Border-radius follows a strict scale: sm (2px) for minimal rounding on inputs and small UI elements, DEFAULT (4px) for standard cards and buttons, md (5px) for slightly more prominent surfaces, lg (8px) for larger interactive components, xl (15px) for hero sections and modals, and full (50%) for circular badges and avatars. Buttons use md (5px) radius, creating a subtle softness that invites interaction without appearing childish. Cards use DEFAULT (4px) or md (5px) dependin

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses {colors.primary} (#fcb034) background with {colors.on-primary} (#333333) text, 44px height, 12px vertical / 24px horizontal padding, and {rounded.md} (5px) radius. On hover, the background shifts to {colors.primary-fixed-dim} (#fa9433) and box-shadow elevates to 0px 2px 4px rgba(0, 0, 0, 0.12), with all transitions running 200ms ease-out. On active/press, the background becomes {colors.inverse-primary} (#f77b32) and transform: scale(0.98) provides tactile feedback. button-secondary uses a transparent background with a 2px solid border in {colors.primary}, and on hover, the background fills with {colors.primary-container} (#ffd8a8) while text shifts to {colors.on-primary-container}. Both button variants use

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fcb034) exclusively for primary CTAs, active states, and brand-critical moments—never for backgrounds or body text.
• Do maintain 24px (md spacing) gutters between major sections and 12px (sm spacing) between components to preserve breathing room.
• Do apply {elevation.sm} (0px 1px 2px rgba(0, 0, 0, 0.06)) as the default shadow; escalate to {elevation.md} only on hover or focus.
• Do use Pretendard typeface for all UI text; fall back to system fonts only when Pretendard fails to load.
• Do enforce 5px ({rounded.md}) border-radius on buttons and 4px ({rounded.DEFAULT}) on inputs to maintain visual consistency.
• Do use {colors.on-surface-variant} (#666666) for secondary text and {colors.outline-variant} (#949fa8) for borders to avoid harsh contrast.

**Don't**

• Don't use {colors.primary} (#fcb034) for body text, backgrounds, or decorative elements—it must remain a signal color for interaction.
• Don't apply shadows with pure black (#000000); always use rgba(0, 0, 0, 0.06–0.12) to maintain warmth.
• Don't mix border-radius values arbitrarily; stick to the defined scale (2px, 4px, 5px, 8px, 15px, 50%) to avoid visual fragmentation.
• Don't use hard corners (0px radius) on interactive elements; minimum 4px radius signals affordance.
• Don't exceed 1200px container max-width on desktop; center content and allow generous side margins instead.
• Don't apply transitions longer than 200ms on interactive elements; faster feedback (150ms) feels more responsive.