imweb

Overview

imweb is a comprehensive e-commerce and website-building platform serving Korean merchants and entrepreneurs. The design system embodies a "Professional Clarity" aesthetic—clean, minimal, and purposefully functional. The interface prioritizes information hierarchy and accessibility, using a restrained color palette (primarily white surfaces with blue accents) to reduce cognitive load and guide users through complex support documentation. The brand personality is helpful, straightforward, and trustworthy: users come to imweb's FAQ to solve problems quickly, and the UI reflects that mission through generous whitespace, clear typography, and predictable interaction patterns. Voice example: "Search for your question above, or browse by category to find answers in seconds."

Colors

The color system is anchored by a professional blue primary (#1a6dff) reserved exclusively for interactive elements—call-to-action buttons, active tabs, and focus states. This blue is never used for body text or backgrounds, preserving its signal strength as the brand's accent. Secondary blue (#337ab7) provides a softer supporting accent for secondary actions and informational contexts. The surface stack is built on pure white (#ffffff) with carefully calibrated grays: surface-container-highest (#dddddd) for subtle dividers, surface-container (#eeeeee) for secondary backgrounds, and on-surface (#333333) for primary text. Error states use a warm red (#a94442) with a light pink container (#f2dede) for validation messaging. All interactive elements use the primary blue with 200ms ease-in-out

Typography

The type system pairs Montserrat (geometric, modern) with Noto Sans KR (legible, culturally appropriate) to serve both English and Korean content seamlessly. Display (56px, 700 weight) anchors hero sections and major page titles with -0.02em letter-spacing for visual tightness. Headline-lg (36px, 700) and headline-md (28px, 600) structure content hierarchy with consistent 8px line-height increments. Body-md (16px, 400) is the workhorse for FAQ content and descriptions, set at 24px line-height (1.5x) for comfortable reading. Label-md (14px, 600) is applied to button text and tab labels with 0.01em tracking for clarity at small sizes. All text over busy backgrounds or in dense lists receives a subtle text-shadow: 0 1px 2px rgba(0,0,0,0.08) to ensure legibility.

Layout

The page uses a fluid 12-column grid with a max-width container of 1240px, centered on desktop and full-width on mobile (breakpoint: 768px). The FAQ search bar sits at the top with 24px gutter spacing on both sides, followed by a category filter row (also 24px gutter). Content cards are laid out in a single column on mobile, two columns on tablet (768px+), and three columns on desktop (1024px+). Vertical rhythm is maintained through consistent 40px (lg spacing) between major sections and 24px (md spacing) between related items. The sticky header (72px height on desktop, 48px on mobile) uses surface-container-highest (#dddddd) as a subtle divider at the bottom (1px solid border). All padding inside cards follows the md token (24px), with internal list items using sm spacing (12px) for compa

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, spread shadows that suggest layering without drama. Standard cards use md elevation (0 3px 8px rgba(0,0,0,0.15)) to lift slightly from the white background. On hover, cards transition to lg elevation (0 8px 24px rgba(0,0,0,0.12)) with a 200ms ease-in-out timing function, signaling interactivity. Input fields and buttons use no shadow by default, relying instead on a 1px border (outline color #d0d0d0) and a focus state with a 3px inset box-shadow in primary blue at 10% opacity (0 0 0 3px rgba

Shapes

The shape language follows "Minimal Pragmatism"—rounded corners are used sparingly and purposefully to signal interactivity without sacrificing the professional aesthetic. Buttons and input fields use the DEFAULT radius (4px), a subtle softening that feels modern without being playful. Cards and modals use lg radius (10px) to create a slightly more approachable container feel. Tab buttons and badges use md radius (6px) as a middle ground. The full radius (9999px) is reserved for circular avatars and pill-shaped badges. This conservative approach keeps the interface feeling corporate and trustw

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use the brand blue (#1a6dff) background with white text, 40px height, 8px 20px padding, and 4px border-radius. On hover, the background darkens to #0052cc with a 200ms transition. Secondary buttons use a light gray background (#dddddd) with dark text and a 1px outline border; on hover, they shift to a lighter gray (#e8e8e8) and the text color changes to primary blue. All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing. Tab buttons are transparent by default with a 2px transparent bottom border; when active, the border becomes primary blue and the text color shifts to primary blue as well.

Containers & Surfaces Cards are the primary content container, using white backgrou

Do's and Don'ts

**Do**

• Do use primary blue (#1a6dff) exclusively for interactive elements—buttons, links, active states, and focus indicators—to maintain a clear visual hierarchy.
• Do maintain 24px (md spacing) as the default padding inside cards and 40px (lg spacing) between major content sections to create breathing room.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes to signal interactivity without feeling sluggish.
• Do use body-md (16px, 400 weight) for FAQ content and descriptions to ensure comfortable reading at 1.5x line-height (24px).
• Do reserve the full radius (9999px) for circular avatars and pill-shaped badges only; use 4px for buttons and 10px for cards.

**Don't**

• Don't use primary blue for body text, backgrounds, or non-interactive elements—it dilutes the accent's signal strength and creates visual confusion.
• Don't apply shadows heavier than lg elevation (0 8px 24px rgba(0,0,0,0.12)) to any component; the system relies on subtle depth, not dramatic drop-shadows.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 6px, lg: 10px, xl: 16px, full: 9999px)—consistency is critical for a professional appearance.
• Don't mix Montserrat and Noto Sans KR in the same text element; use Montserrat for headlines and Noto Sans KR for body content, or use both in the font-family stack in that order.
• Don't apply transitions longer than 200ms to interactive elements; anything slower feels unresponsive and breaks the sense of immediacy.