Douzone Bizon DESIGN.md

Design System Inspiration of Douzone Bizon

Overview

Visual Theme & Atmosphere

Douzone Bizon provides business software including ERP, business platforms and groupware. Its company page places these within the Douzone ICT Group's “Work&Life” offering across business, finance, commerce, healthcare and the public sector. The company describes its progression from ERP into AI, cloud and data services. Company

The identity combines two circular forms with a blue corporate colour. Douzone's CI explanation assigns the circles meanings of harmony and cooperation between paired worlds, including customers and company, tradition and advanced technology. Its wordmark description pairs soft curves with sharp strokes. The live homepage carries that blue accent through utility controls, navigation underlines and media-card labels, against white surfaces and dark photographic/video areas. Square media cards coexist with rounded header utilities and a tall rounded contact link. CI and corporate fonts; homepage survey and state captures, 2026-11-03.

The current slogan is “Authentic Innovation, AX and More.” The official history records its announcement in April 2026; the vision page describes a move beyond AI transformation toward changes customers can experience in their businesses. This gives the reference a business-outcome emphasis grounded in the company's own writing. History, Vision

The measured homepage is the Korean site at www.douzone.com/main/index.jsp, reached from /, with HTML lang="ko". The measurements describe this public corporate and product-marketing surface; the logged-in WEHAGO, Amaranth 10 and OmniEsol interfaces were not measured.

Primary tasks

• Explore solutions and products through the main navigation and solution shortcut.
• Read news, seminars and product announcements in the media grid.
• Follow a purchase-consultation link.

Brand Narrative

The group's history records ERP specialist Douzone Dass in June 2003, the acquisition and renaming of the listed Daedong company as Douzone Bizon in June 2006, and the Gangchon campus move and D-Cloud centre in 2011. In 2024 it records the ONE AI and OmniEsol launches. Its 2026 slogan announcement places AI transformation within the broader “AX and More” direction. These are distinct milestones, not a claim that the present listed legal entity was founded in 2003. Official history

A September 2026 first-party event report describes ONE AI integrated with OmniEsol, Amaranth 10 and WEHAGO, working with accounting, HR, tax and logistics data. That supports the company's current integration narrative; it supplies no visual tokens for the applications themselves. Official event report

Principles

The documented identity meanings are cooperation and harmony in the two circles, and trust and advanced technology in the blue colour. The current vision emphasizes technology's connection to business change customers experience. Treat these as the stated corporate meanings; the component recipes above are observations of their homepage expression. CI, Vision

Personas

No researched personas were verified.

Colors

Keep the documented CI colour separate from the live UI primary. The CI page specifies #00aaff, RGB 0/170/255, and black #000000. The homepage's computed --primary and --blue are #00aaf0, RGB 0/170/240; the solution-shortcut button uses that measured fill. These are different values, with different evidence. The machine palette below represents the measured homepage. CI colour specification, homepage CSS

Paragraph ink was predominantly white: rgb(255, 255, 255) on 14 sampled <p> elements, rgba(0, 0, 0, 0.5) on two and rgb(118, 118, 118) on one. Preserve these surface-specific differences. Overall text counts alone would give a misleading account of paragraph colour.

The text-panel overlay on the measured media card is a declared linear-gradient(124deg, #00a4ed 6%, #1471ef 93%). Its computed pseudo-element opacity changes from 0 to 1 on hover, press and keyboard focus. These stops come from the matching first-party CSS rule, corroborated by the observed gradient layer; they are not additional root brand tokens. Card CSS

The stylesheet carries a Bootstrap 4.4.1 licence header; the primary used here is its observed #00aaf0 value. Retain colours with demonstrated homepage use; do not turn its remaining framework palette, font stacks or Swiper defaults into a corporate brand palette.

Typography

Evidence classes

• Official product use: no opened source identifies an official typeface for the logged-in product interfaces. The corporate CI page does document dedicated Douzone fonts; it does not establish their use in those products.
• Live-loaded: the survey's loaded faces are Noto Sans KR 400/500/700 normal and Pretendard 400 normal. Noto Sans KR leads the computed body, h1 and button family declarations and the measured controls. Pretendard appears on the top notice's “오늘 하루 보지 않기” label; that does not make it the general interface face.
• Official distributed assets: the CI page presents 더존 제목체 30 (Regular), 50 (Bold), and 더존 본문체 10 (Light), 30 (Regular), 50 (Bold), through image specimens. These are the page's names and numbering, not inferred CSS weights. No font binary or font licence was verified or downloaded. No live specimen is supplied for these unobserved faces. Corporate font documentation
• Declared-only in the census: Noto Sans KR 100/300/900; Roboto 400/500/700; Pretendard 500/600 in inline rules; and swiper-icons 400. The purchase-label CSS also names NotoSansCJKKR, which is absent from the loaded-face list. None is promoted as a separately loaded text face or given a specimen.
• Unresolved: which source alternative supplied Pretendard's loaded bytes, product-app typography, and permission to redistribute the corporate fonts. Substitute: none chosen.

Noto Sans KR's first-party webfont.css declares local-site WOFF2/WOFF sources under /fonts/. Pretendard is imported by main.css from a jsDelivr stylesheet whose 400 rule offers local('Pretendard Regular') and Regular WOFF2/WOFF URLs. The census records that face as loaded but does not identify which alternative was used. Separate inline Pretendard declarations map Medium and Bold files to 500 and 600; these do not prove a loaded 500 or 600 face. Webfont declarations, main stylesheet

Measured control metrics

Headline and category CSS metrics are identified as stylesheet evidence; the other control metrics come from states.json identities and label snapshots. No heading-size scale was measured.

Layout

The desktop media grid has three 384px columns beginning at x=112, 520 and 928 in the 1440px capture. Those coordinates give 24px gutters and a 1200px occupied span. Successive card rows begin at y=961, 1373 and 1785, giving a 24px vertical gap after each 388px card. These are measurements of this grid, not a universal spacing scale.

The card text panel's matching CSS uses 1.5rem 2rem padding; its measured children span 320px within a 384px panel. Header navigation uses a separate 25px horizontal padding. Square editorial cards contrast with the small pill-shaped utility control and the tall 35px-radius contact link. Card layout CSS; survey rows and state identities.

Responsive Behavior

Only desktop 1440×1000 was captured; no mobile layout or breakpoint transition was verified.

Elevation & Depth

The measured press-card anchor has rgba(3, 4, 5, 0.08) 0px 2px 40px 0px box-shadow at rest. Its matching CSS specifies 0 2px 2.5rem rgba(3, 4, 5, 0.08). The measured nav link, solution button, hero link and consultation links have no box-shadow. No wider elevation scale is inferred.

Motion & Easing

The control-level computed transitions in states.json are bottom 0.4s ease-out 0s for the fixed purchase link, all 0.6s ease-in-out 0.7s for the hero detail link, and all 0s ease 0s for the nav link, solution button, news-card anchor and footer link. The hero value describes its captured entrance styling; it does not establish a measured interaction state.

Control-level zero duration does not describe every child. The opened CSS declares all 0.15s ease-in-out on each nav underline, all 0.5s ease-out on the card image and all 0.3s ease-in-out on the card text-panel pseudo-element. These are stylesheet declarations, separately identified from the computed control strings. No custom cubic-bezier curve, reduced-motion behaviour or general motion scale was verified. Navigation CSS, card CSS

Components

The component tokens contain three controls with measured authored changes. Each link is identified as a link even where the registry represents it as a button.

Navigation link — nav-solutions. “솔루션”, #gnb > ul > li:first-child > a, is 104×85px with 0px radius, 0px 25px padding, black text and a transparent background on the white header. The blue ::before and ::after underlines each grow from 0×3px to 52×3px on hover and press. Text stays black. Keyboard focus contributes only a browser auto outline.

Solution shortcut — solution-menu. “솔루션 바로가기” is a 140×30px native button, 60px computed radius, padding 0px 16px 0px 0px, with white text on the UI primary. Hover and press swap its 16×16px ::after background image from ic_dropdown_arr_down_white.png to ic_dropdown_arr_up_white.png. Fill, label colour and geometry remain unchanged in the measured comparison. This is an asset swap, not a measured rotation. The full asset names are corroborated by the opened navigation stylesheet; the state JSON shortens long image URLs.

Press card — news-card. The link to press release id=3505, headed “더존비즈온, 법무법인 세종과 AI 거버넌스·컴플라이언스 시장 공동 공략 나선다”, is 384×388px, square, with 0px anchor padding. Its thumbnail is 384×260px; its white text panel is 384×128px. The category is blue and headline black at rest. Hover and press reveal the gradient text panel, make both labels white and scale the thumbnail to matrix(1.04, 0, 0, 1.04, 0, 0). Keyboard focus scales the image and reveals the same panel but leaves the headline black while the category turns white. An ancestor transform that persisted after blur is excluded from the component's focus description.

Other observed controls remain useful geometry references without becoming component tokens:

No search input appeared in the 68 survey rows. No input component was harvested.

States

The unchanged footer comparison covers the element, its pseudo-elements and three ancestor levels; it has no descendants. The purchase-link comparison covers the element and pseudo-elements plus five descendants, including three empty elements, with no ancestor levels. Their recorded properties include colours, borders, drawn outlines, shadows, opacity, transforms, filters, visibility, dimensions, text decoration and image/mask data. These results do not establish the absence of canvas/video or sibling changes. No disabled, error or loading state was measured.

The measured auto outlines are browser indications, so no brand ring token is created. The news-card focus token records only reversible authored descendant changes, excluding both that ring and the persistent ancestor transform.

Do's and Don'ts

For reproducing these measured controls:

• Use the live UI blue for the solution button, card category and navigation underlines; keep its distinction from the documented CI blue.
• Combine square editorial cards with the measured rounded utility shapes.
• Preserve the card's different headline colours under pointer hover and keyboard focus.
• Keep transparent anchors over their actual white or media surfaces; a transparent anchor is not a black-filled control.
• Leave the unmeasured hero states and unverified product-app fonts unspecified.

Voice & Tone

The homepage uses short Korean task labels such as “솔루션 바로가기” and “자세히보기”, alongside English product names. The vision page frames technology in terms of customers' business possibilities and experienced outcomes. Retain that concrete business vocabulary when writing adjacent interface copy. This is an interpretation of the opened copy, not a published editorial style guide. Vision

Agent Prompt Guide

• “Build a white header with Noto Sans KR 20px/400 navigation. Give the ‘솔루션’ link a 104×85px box, 25px horizontal padding and two blue 3px pseudo-element underlines that each reach 52px on hover and press.”
• “Build a square 384×388px press-card link with a 260px thumbnail and a 128px text panel. On hover and press, scale the image by 1.04, reveal the measured blue gradient and turn both text labels white. On keyboard focus, keep the headline black while the category turns white.”

These prompts reproduce the captured corporate homepage; they do not define the separate product applications.

Governance

Known Gaps

• Contrast, solution-menu. Text #ffffff on #00aaf0 measures 2.62:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.