Visang Textbooks

Overview

Visang Textbooks operates at the intersection of Korean educational heritage and contemporary digital accessibility, serving 100+ million cumulative learners across elementary, middle, and high school markets. The brand embodies 'Vibrant Clarity'—a design philosophy that transforms complex pedagogical content into an inviting, energetic visual experience. The interface celebrates the brand's 40+ year legacy through a palette of sky blues (#00b0e1), soft pastels (#dbeeff, #c2f5c8, #fee99f), and warm accents (#fddddd, #ffc7c7), creating an atmosphere that feels both authoritative and approachable. The emotional response is one of confidence and discovery: students and educators encounter a platform that respects their intelligence while making learning feel effortless and even joyful.

The brand voice is direct, encouraging, and pedagogically grounded. Visang speaks in imperative, action-oriented language: 'Discover your learning path,' 'Master the fundamentals,' 'Join our community of learners.' The vocabulary avoids corporate jargon, instead using concrete, subject-specific terminology that resonates with Korean K-12 contexts. Tone is warm but never patronizing—the platform assumes users are capable and motivated. Example sentence in brand voice: '개념+유형 X 링티 어름방학 플러스 학습단 모집' (Concept + Type × Ringti Summer Break Plus Learning Group Recruitment)—notice the specificity, the product naming, the inclusive call to action.

Colors

The Visang color system prioritizes accessibility and emotional resonance over minimalism. Primary (#00b0e1) is the signature cyan-blue used on all CTAs, navigation highlights, and interactive states—it appears 183 times across the site, anchoring user attention to actionable elements. This is paired with a rich secondary (#007dc5) for supporting accents and tertiary warm tones (#ffc7c7, #fddddd) for promotional highlights and seasonal campaigns. The surface stack is deliberately light and clean: surface (#ffffff) provides the neutral canvas, while surface-container variants (#eef2f3, #e8ecee, #e0e5e6) create subtle visual hierarchy through 4–8px shifts in luminance. On-surface text (#222222) is a warm near-black that reduces eye strain on long reading sessions. Accent colors are deployed

Typography

The type system balances two distinct voices: Paperlogy (a Korean serif font) for display and headline scales, and Suit (a Korean sans-serif) for body and label scales. This pairing creates visual interest while maintaining legibility across screen sizes. Paperlogy at 60px (display) or 40px (headline-lg) conveys authority and editorial presence—ideal for hero sections and campaign messaging. Suit at 16px (body-md) with 24px line-height (1.5x) ensures comfortable reading for instructional content and product descriptions. Font weights are conservative: 400 for body text, 600 for labels and interactive elements, 700 only for emphasis. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain Korean character legibility. On small labels over busy backgrounds (e.g., badge text on

Layout

The layout follows a 12-column grid with a fixed max-width of 1280px, centered on viewport. This accommodates both desktop (1280px+) and tablet (768–1024px) breakpoints without awkward reflow. White-space is generous: lg spacing (40px) separates major sections (hero, featured products, reviews), md spacing (24px) divides cards and component groups, and sm spacing (12px) provides breathing room within components. The hero section spans full-width with 64px top/bottom padding, establishing visual dominance. Product cards are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile—each card receives md padding (24px) and is separated by gutter spacing (24px). The search input and navigation occupy a fixed header with 12px vertical padding, maintaining 48px total height

Elevation & Depth

Depth in Visang is achieved through a restrained shadow and layering system that avoids the flat-design trap while maintaining clarity. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the neutral plane. Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border in outline-variant (#c6d0d2), creating a subtle lift. Level 3 (Modals, Dropdowns, Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border, signaling modal priority. Hover states on cards transition to Level 3 shadow over 200ms (ease-out), providing tactile feedback with

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are generous enough to feel approachable and modern, yet restrained enough to maintain professional credibility in an educational context. Buttons use full rounding (border-radius: 9999px, or {rounded.full}) at 48px height, creating pill-shaped CTAs that feel inviting and clickable. Cards use xl rounding (1.5rem / 24px) for product displays and featured content, balancing softness with definition. Input fields use DEFAULT rounding (0.5rem / 8px) for a more utilitarian feel—they are functional, not decorative. Badges and chips use full ro

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons use {colors.primary} (#00b0e1) background with {colors.on-primary} (white) text, {rounded.full} (9999px), and 12px horizontal padding. Height is fixed at 48px for touch accessibility. On hover, background transitions to #0099cc over 200ms (ease-out), with no shadow change. Focus state adds a 3px outline in rgba(0, 176, 225, 0.3). Secondary buttons are transparent with a 2px border in {colors.primary}, same height and padding, text color {colors.primary}. On hover, background becomes {colors.surface-container-high} (#e0e5e6). Icon buttons (search, menu, cart) are circular (48px × 48px) with {colors.primary} background and centered SVG icons. All buttons use {typography.label-md} (14px, 600 weight).

Conta

Do's and Don'ts

**Do**

• Do use {colors.primary} (#00b0e1) for all primary CTAs, search buttons, and active navigation states—it is the brand's signature accent and must appear on every page.
• Do apply {spacing.lg} (40px) between major sections (hero, product grid, reviews) to create visual breathing room and reduce cognitive load.
• Do use Paperlogy for headlines (display, headline-lg, headline-md) and Suit for body text—this pairing is distinctly Korean and reinforces brand identity.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, chips) to ensure touch accessibility on mobile devices.
• Do transition all hover states over 200ms (ease-out) to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use secondary (#007dc5) or tertiary pastels (#ffc7c7, #fee99f) as primary CTAs—reserve them for supporting accents and promotional highlights only.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on any component; the design language is soft and approachable, not dramatic.
• Don't mix Paperlogy and Suit within the same line of text—each font family should occupy its own typographic scale (display/headline vs. body/label).
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding breaks the visual grammar and feels inconsistent.
• Don't apply more than one shadow or border to a single component—layering multiple effects creates visual noise and contradicts the 'Vibrant Clarity' philosophy.