KBS DESIGN.md

Design System Inspiration of KBS

Overview

Visual Theme & Atmosphere

KBS is South Korea's public broadcaster. Its own history traces radio broadcasting to 1927, television to 1961 and the establishment of 한국방송공사 as a public broadcasting corporation to 1973. Today its services include television, radio and KBS+ digital media. KBS introduction and history

The identity combines the KBS wordmark with a globe-like symbol. KBS explains the globe as its place in a developing world, the internal lines as information flowing across Korea, and the overall form as drawn from Taegeuk's yin and yang. On the measured homepage, white branding and navigation sit over large programme artwork; dark content bands carry news, video thumbnails and programme posters. Cyan highlights help distinguish content categories and live-broadcast information. The visual reading is grounded in the captured homepage, while the symbol's meaning comes from the official CI page.

KBS's 2025–2027 plan centres on trust, innovation, public interest, enjoyment and diversity. It describes a direction spanning terrestrial broadcasting, online and mobile content, with AI among its planned service technologies. KBS medium-term plan

The measured homepage is the Korean-language surface at www.kbs.co.kr/, with HTML lang="ko", no redirect and dark mode active. Its immediate tasks are opening live broadcasts, finding programmes and browsing news or recorded video.

Brand Narrative

The historical thread runs from radio through television to today's broadcast and digital services. KBS's introduction describes universal access to quality programmes across income levels and geography. Its CI gives that public-service identity a globe form and flowing information lines. A useful design reading is to retain clear routes into live services and programme discovery alongside expressive programme artwork. KBS introduction, KBS CI

Principles

KBS's stated strategic directions are trust, innovation, public interest, enjoyment and diversity. For this measured surface, carry those facts into a practical reference through clear content labels, distinct content groupings, prominent live-broadcast entry points and the observed type and colour hierarchy. These implementation suggestions are a reading of the page, not a published KBS UI-principles document. 2025–2027 plan

Personas

No user-persona research was verified.

Colors

The live page exposes 374 computed root custom properties. Every property name also occurs in the two KBS stylesheets linked by that page. The palette below preserves their names, with foreground explicitly mapped to the paragraph ink and --common-txt. Colours are normalized from the captured short or uppercase hex values.

The remaining named hues are palette evidence, without verified error, success or warning roles. The text census is dominated by white (211 samples), but paragraph ink is #dddddd (one sample); those are different observations.

The official corporate CI palette is a separate evidence domain: KBS Purple Blue is RGB 9/0/62 (#09003e, Pantone 275C), KBS Blue RGB 34/130/185 (#2282b9, Pantone 2925C), and KBS Orange RGB 255/156/0 (#ff9c00, Pantone 165C). These published RGB values are not substituted for the live UI blues. Official CI colours

Typography

Official product-use statement: no opened corporate or CI prose identifies a product-wide interface font.

Live-loaded: document.fonts reports Noto Sans, normal style, at 300, 400, 500 and 700. This is the only family in the structured typography tokens. The homepage stylesheet names it Noto Sans but maps its sources to Noto Sans CJK KR / NotoSansKR Hestia files. For each weight it offers local sources followed by EOT, WOFF and OTF URLs on res.static.kbs.co.kr. The census confirms loaded faces, rather than which local or network source supplied them. At weight 400 the CSS contains both DemiLight and Regular declarations, so the individual file remains unresolved. Homepage stylesheet

Official distributed assets: the deployed CSS exposes font-source URLs. No public font-distribution page or licence was verified, and no font files were downloaded.

Declared-only: the CSS also defines Noto Sans at 100 and 900, absent from the loaded-face census. Its fallback stack names Apple SD Gothic Neo, 애플 SD 산돌고딕 Neo, Helvetica Neue and Roboto; none appears in that loaded-face list. VideoJS is declared for player icons and is also absent from the loaded list. These declarations receive no specimens or additional family tokens.

Unresolved: the exact 400-weight font resource, actual local-versus-network source, and a company-wide font policy. Substitute: none chosen.

Additional root scale values are page title 30px, page subtitle 24px, item title 18px, item subtitle 16px, description 14px, and badge 12px. These describe captured declarations, not measurements of every corresponding component. Hero stylesheet

Layout

Use a wide promotional stage followed by content bands. The captured desktop page has a 1200px content column, matching --wrap-width; survey controls span x=113 to x=1313. The hero is configured at 613px high. News and video rows mix large features with smaller thumbnails, while the programme strip shows six poster links.

The survey measures paired feature links at 592px each, four smaller video links at 288px each, and the selected programme poster at 186.7px wide. Root spacing declarations are --margin-sec: 72px, --margin-tit: 24px and --padding-comp: 48px. Preserve their named scope instead of applying all three to every card.

Responsive Behavior

Only the 1440 × 1000 desktop viewport was measured; mobile layouts, breakpoints and the light-mode surface were not measured.

Elevation & Depth

All six sampled controls have box-shadow: none at rest. The interface separates content through artwork, dark surface bands and typography. Header tokens configure rgba(0 0 0 / 72%), blur(20px) and 0 0 50px rgba(0 0 0 / 25%); the parked drama-link snapshot records that translucent header background. The hero text-shadow token is 1px 1px 3px #3a3a3a.

Motion & Easing

The hero-next link's raw computed transition is all 0.2s ease-out 0s. Its measured hover and pointer-held state use opacity 1 and expanded 57.6 × 57.6px bounds.

The root image-transition token is --transition-img: transform .3s ease-in-out, derived from --common-transition: .3s ease-in-out. These are captured custom-property values. The programme card link itself computes to all 0s ease 0s; its image is the hover target. No additional easing curve, carousel interval or reduced-motion behaviour was verified.

---

Measurement evidence: homepage survey and two states captures on 2026-11-03 Korea time; raw data, exact selectors, control identities, transition strings, source quotes and limitations are recorded in report.md and verification.md. Corporate narrative and CI pages support only the facts attributed to them; live tokens come from the measured homepage and its linked CSS.

Components

Programme poster link — program-card. The measured link is “옥탑방의 문제아들 2TV 화 20:30 방송”, with a 186.7 × 339.4px box, square corners, no padding, border or shadow, and a transparent background over the #3a3a3a programme strip. Its visible title is white #ffffff, 18px / 400; schedule text is #8f8f8f. The image scales to 1.03 on hover. Keyboard focus scales the whole link to 0.99. A held pointer combines that focused-link contraction with the image hover. These distinct targets matter when reproducing the interaction.

Hero carousel next — hero-next. “다음 버튼” is an icon link with role="button", 48 × 48px, square corners and no padding, border or shadow. It is transparent over changing hero artwork. Its external SVG sprite is visible; the inherited white 13px / 400 text belongs to a hidden label. Hover and measured pointer press change opacity from 0.4 to 1 and visual bounds from 48 × 48px to 57.6 × 57.6px. Focus has only the browser's auto ring.

The other measured controls remain prose references. The hero CTA is a 120 × 34px white #ffffff link with #140661 text, square corners, 8px 12px padding and 12px / 700 type. The secondary “라이트 모드” button is 130 × 56px, #1e1f21 with #dddddd text, a 2px #535353 border, 14px padding and a 50px pill radius. The drama and search links are transparent, square, unpadded and white. No visible search input appeared in the survey.

The root --common-radius is 16px. It does not override the measured square corners of these links. Only the programme card and carousel arrow have authored interaction changes sufficient for structured components.

States

The second capture used hideOverlays: true; the search trigger still remained covered by its sticky header. Both captures closed the chatbot prompt through .chatbot-btn__close, labelled “닫기”. No consent rejection was recorded and no consent banner was visible in the inspected viewport screenshots.

The no-change scope covers the element and its pseudo-elements, descendants and their pseudo-elements, plus recorded ancestors: one descendant and one ancestor for the theme button, zero descendants and three ancestors for drama navigation. It compares colours, backgrounds, borders, drawn outlines, shadows, opacity, transforms, filters, visibility, size, decoration, image and mask properties, media sources and supported SVG internals. The drama-link parked snapshot reads weight 500 after scrolling, versus 700 at page top; the no-change verdict does not establish an invariant font across header modes. Browser auto outlines are observations rather than brand ring tokens. No disabled visual treatment was measured.

Do's and Don'ts

• Keep the captured dark canvas, light text hierarchy and content imagery together.
• Use the live UI blues for the interface and the documented CI values when discussing corporate identity.
• Distinguish the programme card's image hover from its whole-link focus transform.
• Preserve square geometry where it was measured; use the theme control's pill treatment only in that context.
• Keep advertising, translation widgets and chatbot surfaces out of the product component set.
• Add no search-input, disabled-state, font-substitution or brand focus-ring value without evidence.

Voice & Tone

Navigation uses direct Korean destination and action labels: “온에어 바로가기”, “프로그램 바로가기”, “검색” and “메뉴 열기”. Use similarly short labels that tell the visitor where a control leads. No broader editorial voice was assessed from programme copy.

Agent Prompt Guide

“Build a Korean programme-browsing surface with the measured dark KBS palette: #1e1f21 canvas, #3a3a3a programme band, #dddddd paragraph ink, white titles and #0090d4 accents. Use the live-loaded Noto Sans family. A programme poster link is 186.7 × 339.4px, square and unpadded, with an 18px / 400 visible title. Hover enlarges its image to 1.03; keyboard focus contracts the whole link to 0.99. Keep those transforms on their measured targets.”