지니 DESIGN.md

Design System Inspiration of Genie Music

Overview

Visual Theme & Atmosphere

Genie (지니) is the music-streaming service of 케이티지니뮤직 (KT Genie Music), a KT-affiliated company in Seoul whose own history starts in 2000 with the personal music-broadcast site Muzcast.com. The company ran KTF's mobile music portal 도시락 from 2005, became kt music in 2009, launched the "New genie" service in 2013 and took over the genie business in 2014, the year it says it offered the world's first lossless (FLAC) streaming. It renamed itself 지니뮤직 in 2017, absorbed CJ디지털뮤직 in 2018, merged genie and Mnet.com into one platform in 2019, and in 2025 renamed itself again to 케이티지니뮤직 and released a conversational "AI DJ" with genie App 6.0. The company describes itself as "음악을 사랑하는 사람들을 행복하게 하는 기업" and presents genie as an AI platform built on big data, with realtime and daily charts, personalised quick picks, playlists and Dolby Atmos. The service's own title line is "음악, 그리고 설레임".

On www.genie.co.kr that product reads as a dense, working catalogue. Every captured page is a white canvas carrying charts, rows and filters at a 12px base in grey #444444, with headings and navigation in near-black #27282d. The one interactive colour is a clear blue #0096ff: it marks the selected chart scope, the current page number, the NEW ALBUM labels and the 웹플레이어 link, and the navigation turns to it on hover (probed on 지니차트; all eight items share the gnb-menu class). Controls are small and square: 24px outlined row buttons with 4px corners and a #a6afb6 edge, 22px segmented toggles with 3px outer corners, 15px text tabs. Play, add and download marks are sprite images on transparent buttons, so the page's colour comes from text, not fills. Of 1,307 recorded elements, one carries a shadow.

Key Characteristics:

• One interactive blue, #0096ff, for selection, navigation hover and the web-player link; no filled primary action on the captured pages
• A 12px base with near-black #27282d headings, #444444 body text and a grey staircase (#666666, #8b8b8b, #969697)
• Small square controls: 0px radius by default, 3px on toggles, 4px on outlined buttons and page numbers
• Outlined #ffffff row buttons with a #a6afb6 edge that darkens to #27282d on hover
• Local selected colours on the chart pages: a grey #a5a5a5 period segment, a red #d62952 rank toggle, a salmon #f68074 HOT filter
• Flat surfaces separated by #f6f6f6 tab strips and #cccccc hairlines

Primary tasks

• Check the realtime chart and switch it between 실시간, 일간, 주간, 월간 and 누적.
• Switch the home chart between scopes such as 종합 and 국내.
• Play or collect a whole list with 전체듣기 and 담기.
• Browse new releases by album type with the 앨범 종류 filter.
• Search for music from the header search field.

Brand Narrative

케이티지니뮤직 runs genie, one of Korea's music-streaming services, from 한석타워 in 역삼동, 강남구, Seoul, with 서인욱 as chief executive (company footer). Its company page lists a long lineage: Muzcast.com (2000), paid streaming from July 2003 alongside music services run for portals and game sites such as 엠파스, Nate.com and 넷마블, KTF's 도시락 music portal (2005), KTF affiliation (2007) and the name KTF뮤직 (2008), kt music (2009), the ollehmusic portal (2011), the KMP홀딩스 merger (2013), the genie business (2014), 지니뮤직 (2017), the CJ디지털뮤직 merger (2018), the genie–Mnet.com integration (2019), genie 5.0 under the line "새로운 즐거움의 시작" (2020), the purchase of the e-book service 밀리의 서재 (2021), a concert division and the AI-music startup 주스 (2022), and in 2025 the name 케이티지니뮤직 with "AI DJ" and genie App 6.0.

The service page frames genie since the 2013 "New genie" launch as a service that "음악 서비스 시장을 선도하며 끊임없이 진화" and that uses AI and big data to fit each listener's taste. It names six features: 빠른 선곡 (personalised quick picks), 지니 차트 (realtime and daily charts), 추천 플레이리스트, 돌비애트모스, 위젯 and 오디오. The corporate site shows the wider business around the service: 공연 (the StayG stage), 투자/유통 and album and music production.

The web product keeps the chart at its centre: the home page opens on chart scope tabs and ranked rows, and the chart page adds period, rank-share and chart-type controls.

Principles

The first principle is the company's own statement; the rest describe what the captured pages do.

1. Happiness for people who love music. "음악을 사랑하는 사람들을 행복하게 하는 기업" is the company's stated purpose (company page).
2. The chart comes first. Home opens on the chart with scope tabs; /chart/top200 adds period, share and chart-type controls.
3. Selection is the only colour. Grey text everywhere, and #0096ff (or a local red, salmon or grey) only on the selected or hovered item.
4. Weight before size. Selected items move from 400 to 700 at the same 12px.
5. Flat and outlined. Edges and strips, not shadows or fills, separate the catalogue.

Personas

Personas below are fictional archetypes informed by publicly observable Korean music-streaming users, not individual people or company research.

Seo-yeon, 24, Seoul. Opens genie every morning to check the 실시간 chart. Measures the site by how quickly she can see the top of the chart and press 전체듣기.

Min-jae, 31, Busan. Got genie with his mobile plan. Uses the chart and a few saved lists; cares that play and download controls are where he left them.

Hyun-woo, 38, Daegu. Follows specific artists and switches between 실시간, 일간 and 주간 during a comeback week. The period control and the rank toggle are his working tools.

Ji-woo, 19, Incheon. Browses new releases by album type with the 앨범 종류 filter, starting from HOT.

Colors

Every token below was read on 2026-09-30 from www.genie.co.kr, /chart/top200 and /newest/song by the deterministic collector, and the hover, pressed and focus values by the fixed keyboard probe on the home page. The tokens describe the logged-out genie website; the genie app was not captured and none of its values is claimed.

Primary

• Genie Blue (#0096ff): The fill-free primary of the captured product. It is the text colour of the selected chart scope tab (종합, 12px / 700, and 추천 in a second tab pair), the colour the navigation turns on hover, press and focus (probe on 지니차트, #27282d → #0096ff; all eight items share the gnb-menu class), the 웹플레이어 link in the header of all three pages, the NEW ALBUM category labels on home, and the label and 1px border of the current page number on /newest/song. It is the primary because it is the only non-neutral colour the product renders in selected, navigation-hover and accent roles on every page. No captured control has a coloured fill: play, add and download controls are sprite icons on transparent buttons or white outlined buttons, so there is no filled action to measure instead.

Local selected colours

• Rank Red (#d62952): The selected 1위 label of the 1위 / 2위 toggle beside the chart-share graph on /chart/top200 (12px / 700); 2위 is #8b8b8b. One element.
• HOT Salmon (#f68074): The selected HOT item of the 앨범 종류 filter on /newest/song (12px / 700); the other items are #444444. One element.
• Period Grey (#a5a5a5): The fill of the selected 실시간 segment of the period control, with #ffffff text and a #9c9c9c border. Unselected segments are #fafafa with #656565 text and a #cccccc edge.

Text

• Heading (#27282d): Navigation items, home section titles, and the labels of the outlined row buttons and 컨텐츠 더보기.
• Body (#444444): The document default on all three pages, chart-type tabs, filter items and the header 이용권 구매 and 로그인/회원가입 labels.
• Secondary (#666666): Page numbers on /newest/song. It is also the computed colour of the per-row 더보기 icon buttons (140 records), whose visible mark is a sprite.
• Muted (#8b8b8b): Unselected chart scope tabs, artist names in chart rows, dates and the unselected 2위.
• Muted Alt (#969697): DJ names (a.dj) and the labels of the toggle boxes beside them on home.
• Toggle Grey (#656565): Unselected period segments and 집계기준 on /chart/top200.

Surface & Borders

• White (#ffffff): Outlined row buttons, the search field, page numbers, 집계기준 and the current chart-type tab. The body computes a transparent background, so the page white is the browser canvas.
• Surface (#f6f6f6): The chart-type tab strip and its unselected tabs on /chart/top200 and /newest/song.
• Soft Surface (#f7f8f9): The 컨텐츠 더보기 button on home (fill and border).
• Outline (#a6afb6): The 1px edge of the outlined row buttons at rest.
• Border (#cccccc): Page numbers, 집계기준, the period segments and the list arrows on home.

Brand assets, not tokens

• The genie logo and the play, add and download marks are images. The collector does not read image or sprite colours, so no logo or icon colour is claimed.
• The June record's pink primary was not rendered by any of the 1,307 recorded elements or by the probe and is not part of this palette. #d62952, the June record's primary hover, renders only as the selected 1위 label; no hover to it was observed.

Typography

Font Family

• Live surface use: none resolved. The body and almost every element compute dotum, 돋움, sans-serif, "Segoe UI Symbol" (1,239 observed uses). Navigation items, home section titles, the search field and 컨텐츠 더보기 compute "Malgun Gothic", "맑은 고딕", dotum first (56 uses). Page numbers and the chart-page date heading compute Tahoma, Helvetica, sans-serif (7 uses). None of these is served as a web font; all three are operating-system faces that the capture machine did not have, so the collector reports dotum and Tahoma as unresolved and Malgun Gothic only as an OS stack. They are recorded as declared families, never substituted, and none is a typography token.
• Official distributed font assets: the site's stylesheet declares @font-face rules for NanumSquare (/resources/commons/font/NanumSquareR.eot and .woff on www.genie.co.kr) and Spoqa Han Sans (/resources/commons/font/SpoqaHanSansBold.woff2, .woff, .ttf). Neither face is used by any recorded element on these three pages. No licence file was opened, so no licence is stated.
• Official product use: no genie or KT Genie Music page opened this session names the service's typefaces; not claimed.
• Declared only (no visible use): NanumSquare and Spoqa Han Sans, 0 observed uses each.
• Unresolved: dotum, Malgun Gothic and Tahoma in the capture environment, as above. Times (3 uses, the root default) and a (2 uses on page-arrow anchors) are browser defaults and parsing leftovers, not brand faces.

Hierarchy

Principles

• 12px carries the catalogue: rows, tabs, filters and the document default all sit at 12px; 11px carries buttons and captions, and 18px appears only in navigation and section titles.
• Weight marks selection: selected tabs, the selected rank and HOT filter, the selected period segment and the current page number all step from 400 to 700 as well as changing colour.
• Normal tracking: no recorded element sets letter-spacing except one 11px button at -1px.

Layout

Spacing System

• Measured paddings, not a declared scale: 0px 8px on text tabs; 27px between navigation items (right padding) with 14px below; 11px 14px 0px on chart-type tabs; 0px 6px 0px 26px on outlined row buttons, whose icon takes the 26px; 1px 8px on filter items; 26px of icon space before 이용권 구매.
• The most frequent recorded spacing values are 1px, 6px, 16px, 14px and 27px.

Grid & Container

• Captured at a 1440 × 900 desktop viewport only. Content sits in fixed-width blocks rather than a fluid grid: the chart-type strip is 710px wide, the header search field 322px.
• Header: logo, search field and a utility row (이용권 구매, 웹플레이어, 로그인/회원가입), then the navigation bar. Main: charts, lists and filters. The chart and newest pages share the same header and chart-type strip.

Whitespace Philosophy

• Rows over air: chart rows run at 22px lines and list controls at 24px; separation comes from #f6f6f6 strips and #cccccc hairlines rather than large gaps.
• Colour as wayfinding: the only non-grey text on a page is the selected state, so #0096ff (and the local reds and salmon) doubles as a "you are here" marker.

Border Radius Scale

• 0px: the default — 1,268 recorded elements, including navigation, tabs, rows and the search field
• 3px: toggle-sized controls (집계기준, the 75 × 22 toggle boxes beside the DJ names on home, the period control's outer corners) — 13 elements
• 4px: outlined row buttons, 컨텐츠 더보기 and page numbers — 24 elements
• 5px: 8 recorded elements the capture did not identify; not a token

Responsive Behavior

Breakpoints

No breakpoint was measured. The pages were captured at 1440 × 900 only, and no mobile layout is declared.

Touch Targets

Measured control sizes are desktop-sized and below 44px: outlined row buttons 24px tall, period segments and 집계기준 22px, text tabs 15px, page numbers 28 × 28, navigation items 38px, the search field 38px.

Collapsing Strategy

Not measured.

Image Behavior

Album covers in chart rows are 48 × 48 links on home; square 151 × 151 list tiles sit near the top of home. Nothing else about image scaling was measured.

Elevation & Depth

Shadow Philosophy: the captured pages are flat. Of 1,307 recorded elements, only the selected period segment carries a shadow, a faint inset that makes it read as pressed in. Hierarchy comes from #f6f6f6 strips, #cccccc and #a6afb6 edges and the grey text staircase. The menus behind 로그인/회원가입 and 집계기준 were not opened, so no overlay elevation is declared.

Motion & Easing

Only the transitions the probe read are stated:

• 지니차트, 웹플레이어, 이용권 구매 and 전체듣기 (the probed navigation item, header links and outlined row button): transition: background-color 0.25s ease, position 0.25s ease, color 0.15s ease.
• Chart scope tabs: transition: all 0s (no animation).

No other duration or easing was measured. The duration and easing tables of the earlier record were not grounded in any observation and were removed.

Components

Buttons

Outlined row button

• Background: #ffffff
• Text: #27282d
• Border: 1px solid #a6afb6
• Radius: 4px
• Padding: 0px 6px 0px 26px (the icon sits in the left padding)
• Height: 24px
• Font: 11px / 400 / 23px
• Hover: border #27282d
• Pressed: border #27282d
• Focus: 1px dotted #27282d outline
• Use: 전체듣기, 담기, 앨범 and 다운 above chart lists (72 × 24 on home; 53–97 × 24 on /chart/top200)

Content more button

• Background: #f7f8f9
• Text: #27282d
• Border: 1px solid #f7f8f9
• Radius: 4px
• Padding: 0px 22px 2px 0px
• Height: 40px
• Font: 14px / 400 (declared Malgun Gothic)
• States: rest only; not probed
• Use: 컨텐츠 더보기 under the editor section on home, 168 × 40

Count button

• Background: #ffffff
• Text: #656565
• Border: 1px solid #cccccc
• Radius: 3px
• Height: 22px
• Font: 11px / 400 / 21px
• States: rest only; it opens a layer and was not clicked
• Use: 집계기준 beside the period control on /chart/top200, 66 × 22

Header links

• 웹플레이어: text #0096ff, 12px / 700, 60 × 18; hover and pressed add a solid #0096ff underline; focus draws a 1px dotted #0096ff outline
• 이용권 구매: text #444444, 12px / 700 / 18px, padding 0px 4px 0px 26px (leading icon), 85 × 18; hover and pressed add a solid underline; focus draws a 1px dotted outline
• 로그인/회원가입: text #444444, 14px / 400 / 24px, padding 0px 18px 0px 5px, 112 × 22; rest only (it opens a menu and was not clicked)

Tabs & Navigation

Global navigation (GNB)

• Text: #27282d, 18px / 700 / 27px (declared Malgun Gothic)
• Padding: 0px 27px 14px 0px; items 58–89 × 38
• Hover: text #0096ff (0.15s colour transition; probed on 지니차트, and the other items share its class)
• Pressed: text #0096ff
• Focus: text #0096ff plus a 1px dotted #0096ff outline
• Use: 지니차트, 최신음악, 장르음악, 뮤직비디오, 영상, 추천, 매거진, 뮤직허그 on every page

Chart scope tabs

• Unselected: text #8b8b8b, 12px / 400, padding 0px 8px, 37 × 15
• Selected: text #0096ff, 12px / 700
• States: hover shows no change; pressed and focus draw a 1px dotted outline in the label colour; transition all 0s
• Use: 종합 / 국내 and a third scope tab above the home chart; 추천 and its partner under a lower section heading

Chart-type tabs

• Background: #f6f6f6; selected #ffffff
• Text: #444444, 12px / 400 / 18px
• Padding: 11px 14px 0px; 110–120 × 37 (selected 109 × 38)
• Use: the tab strip across the top of /chart/top200 and /newest/song (710px wide)

Period control

• Unselected segments: background #fafafa, text #656565, 1px #cccccc top and bottom edges, 47 × 22, 11px / 400 / 22px
• Selected (실시간): background #a5a5a5, text #ffffff, border 1px #9c9c9c, 11px / 700, inset shadow rgba(0, 0, 0, 0.05) 1px 1px 0px 0px, 59 × 22
• Corners: 3px on the two outer corners only
• Use: 실시간 / 일간 / 주간 / 월간 / 누적 on /chart/top200

Rank toggle

• Unselected: text #8b8b8b, 12px / 400, padding 0px 0px 0px 13px, 40 × 15
• Selected: text #d62952, 12px / 700
• Use: 1위 / 2위 beside 실시간 차트 점유율 그래프 on /chart/top200

Album-type filter

• Items: text #444444, 12px / 400 / 18px, item padding 1px 8px, 20px tall
• Selected (HOT): text #f68074, 12px / 700
• Use: 앨범 종류 on /newest/song

Pagination

• Numbers: background #ffffff, text #666666, border 1px solid #cccccc, radius 4px, 28 × 28, 12px / 400 / 26px (declared Tahoma)
• Current: text #0096ff, border 1px solid #0096ff, 12px / 700
• Use: under the /newest/song list

Inputs

Header search field

• Background: #ffffff
• Text: #444444
• Padding: 1px 2px
• Height: 38px (322px wide)
• Font: 14px / 400 (declared Malgun Gothic)
• Frame: the input itself computes no border and no radius; the visible frame belongs to an element the collector did not record, so none is declared
• States: rest only; nothing was typed

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of www.genie.co.kr plus a fixed keyboard-probe state read of the home page and first-party company context) Tier 1 sources: https://www.genie.co.kr/ ; https://www.genie.co.kr/chart/top200 ; https://www.genie.co.kr/newest/song ; https://www.geniemusic.co.kr/music/overview.do ; https://www.geniemusic.co.kr/love/GENIE.do Tier 2 sources: getdesign.md/genie (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=genie (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Empty, loading, error and disabled states were not observed and are not declared. The collector recorded no interaction events (interactionCount 0); that does not mean the site has no other states.

Live state probe, 2026-10-16 (https://www.genie.co.kr/), more-button: pressed — outline #27282d dotted 1px; focus — outline #27282d dotted 1px.

Do's and Don'ts

Do

• Use #0096ff for selection and navigation hover: the selected tab, the current page, the hovered navigation item
• Keep the catalogue at 12px and step selected items to weight 700
• Use white outlined row buttons with a 1px #a6afb6 edge that darkens to #27282d on hover
• Keep controls square or nearly square: 0px by default, 3px on toggles, 4px on buttons and page numbers
• Separate sections with #f6f6f6 strips and #cccccc hairlines
• Draw keyboard focus as a 1px dotted outline in the label colour, as the site does

Don't

• Don't add coloured fills to actions; no captured control has one
• Don't use a pink as genie's primary; the June record's pink rendered nowhere on the captured pages
• Don't add shadows beyond the one inset on a selected segment
• Don't round controls into pills or cards into large radii
• Don't present Inter, a system UI face or any other font as dotum or Malgun Gothic
• Don't enlarge body text past 12px for list and chart content

Do's and Don'ts (Brand Philosophy)

Do

• Keep the chart as the entry point, with its scope, period and filter controls close to the list
• Let grey text and 12px rows carry the catalogue, with colour only on the selected item
• Keep the warmth of "음악, 그리고 설레임" in titles and service copy, and the controls terse

Don't

• Don't turn the chart into large editorial cards
• Don't spread #0096ff into backgrounds or decoration
• Don't carry exclamation-led benefit copy into the working controls

Voice & Tone

genie's copy is short, plain Korean. The service title line "음악, 그리고 설레임" (the <title> of every captured page) carries the emotional note; the working interface uses bare nouns and verbs.

Controls speak in nouns (전체듣기, 집계기준); explanations are complete, polite sentences; the service page adds exclamation-led benefit lines. The working catalogue carries no slogans.

Agent Prompt Guide

Quick Color Reference

• Selection, navigation hover, web-player link: #0096ff
• Headings and navigation: #27282d
• Body text: #444444
• Page numbers: #666666
• Muted labels and artist names: #8b8b8b
• DJ names: #969697
• Outlined button edge: #a6afb6
• Hairline: #cccccc
• Tab strip: #f6f6f6
• Canvas and outlined fills: #ffffff

Example Component Prompts

• "Build a chart toolbar: white outlined buttons 24px tall with a 1px #a6afb6 border and 4px radius, label 11px / 400 in #27282d, 26px of left padding for an icon; on hover the border turns #27282d."
• "Create chart scope tabs: 12px text with 0 8px padding, unselected #8b8b8b at 400, selected #0096ff at 700, no hover change, a 1px dotted outline in the label colour on focus."
• "Create a segmented period control: 22px segments in #fafafa with #656565 11px labels and #cccccc top and bottom edges; the selected segment #a5a5a5 with white 700 text, a #9c9c9c border and a faint inset shadow; 3px on the outer corners only."
• "Create the navigation bar: 18px / 700 items in #27282d with 27px between them, turning #0096ff on hover and press."

Iteration Guide

1. Keep list and chart content at 12px; use 700 for selected items
2. Reserve #0096ff for selection, navigation hover and the web-player link
3. Keep radii at 0, 3 or 4px
4. Use outlines and grey strips, not shadows or fills
5. Focus is a 1px dotted outline in the label colour
6. Leave the font family to the site's declared dotum and Malgun Gothic; never present another face as them

---