Design System Inspiration of POZAlabs

Overview

Visual Theme & Atmosphere

POZAlabs (포자랩스, Pozalabs inc.) is a Seoul AI-music company. Its company page gives its vision as “Ignite your creativity” and its mission as “Spread the joy of music with AI”. It lists its DNA as Tenacious, Prominent, Inspiring, Playful and Spread. What sets it apart, by its own account, is where its data comes from. POZAlabs says it does not train on existing recordings, only on material its in-house composers write for AI training, so its soundtracks can be used without copyright worries. It manages the production, sale and distribution of that music itself. Its dataset paper, ComMU: Dataset for Combinatorial Music Generation, was accepted at NeurIPS, and an automated pipeline from sampling to mixing and mastering can produce a soundtrack in five minutes. The service page lists three products: eapy, “a canvas for music”; LAIVE, an AI music generator; and viodio, an AI background-music subscription for creators. It also takes custom commissions from film, drama, game and advertising clients, with credits including the TV dramas 빈센조 (2021) and 닥터 로이어 (2022), 네이버 MYBOX, and the 2022 World Knowledge Forum theme. Its blog continues the commercial work with sound projects for 롯데건설, 핑크퐁’s 아기상어, 포스코이앤씨 and 투니버스.

The website is black on white. The home page carries one sentence, “Ignite your creativity”, set in Garet at 129.6px, weight 400, on a 158px line and aligned right. Under it sits a code-style line: “with pozalabs as technology: expand(your_creativity)”. The inner pages keep the same palette and the same restraint. Headlines drop to weight 300 at 40–60px. Navigation, lists and body copy use Garet at weight 350, in black or #666666. The only rounded forms are a 9999px language pill and 8px album tiles. Colour comes from the album artwork and one dark band on the service page. That band’s text is set in #e7e7e7 and #a0a0a0, but its background colour was not read.

Key Characteristics:

• Monochrome: #000000 headlines and current navigation, #666666 for secondary text, #333333 for the pill and hover
• Garet everywhere, at 129.6px / 400 for the hero and weight 300 for display text; Korean falls through to Pretendard Variable
• Few rounded forms: a 9999px outlined pill, 8px album tiles; everything else square
• One shadow on the site: rgba(0, 0, 0, 0.05) 2px 4px 10px 0px under the album tiles
• Plain text links: the current page is black, the others grey, and hover adds a #333333 underline

Primary tasks

• Understand what POZAlabs builds and how its training data differs
• Browse its products (eapy, LAIVE, viodio) and open one with 보러 가기
• Listen through the mood albums on the company page
• Request custom music for a film, drama, game or advertisement

Brand Narrative

POZAlabs presents itself as a group of specialists from different fields: “각 분야 최고의 전문가들이 모인 집단”. Developers share with non-developers and composers with non-composers, and the aim is “a music-creation culture without precedent”. The company page explains the technical position behind that. The training data is written by in-house composers rather than taken from existing recordings. The resulting soundtracks are produced, sold and distributed by POZAlabs itself, so they carry no copyright-infringement risk. The dataset work was recognised when ComMU was accepted at NeurIPS. Automation covers the whole chain from sampling to mastering.

The products turn that position into tools for different users: eapy for sketching musical ideas on a shared canvas (real-time MIDI samples, YouTube upload, .mp3 / .wav / .MIDI, link sharing), LAIVE for anyone who wants to be “a singer-songwriter or producer”, and viodio for creators who need licence-free background music that can be monetised on every social platform. Commissioned work for broadcasters, brands and venues continues on the blog. Its newsroom includes “포자랩스 2024 연말 결산 & 2025 로드맵”. The company’s registered address is in Seocho-gu, Seoul; the representative is 허원길.

Principles

1. Own the data. POZAlabs builds on music written for training. UI implication: state rights and terms plainly, next to the product.
2. Monochrome frame, colourful content. The site stays black and white while album artwork carries colour. UI implication: let media supply colour and keep the chrome neutral.
3. Scale over weight. Display type is large and light. UI implication: size headlines up rather than bolding them.

Personas

These are fictional archetypes drawn from the audiences POZAlabs’ pages address — creators (viodio), would-be songwriters (LAIVE, eapy) and B2B clients commissioning music. They are not real people.

정하늘, 27, 서울. A video creator who needs background music she can monetise without claims, and subscribes to viodio.

김서연, 41, 경기. A brand marketer who sends a reference track and commissions a custom soundtrack for a campaign.

이도윤, 23, 부산. A student who sketches song ideas on eapy’s canvas and shares the board with a friend by link.

Colors

Every token below was read on 2026-09-30 from www.pozalabs.com/ko/, /ko/about/ and /ko/service/ by the deterministic collector, and hover values by the fixed keyboard probe. The tokens describe POZAlabs’ corporate site. Its products (eapy, LAIVE, viodio) were not captured, and none of their values is claimed.

Primary

• Black (#000000): The current item in the header navigation. On /ko/about/ 소개 renders #000000 while 서비스 renders #666666; on /ko/service/ it is the other way round. On home every navigation item is #000000. It is also the colour of every headline and of the document text. It is the primary because the site is monochrome. The owner rule then calls for the measured primary action fill, and the one filled action on the site, 보러 가기 on /ko/service/, has a fill no tool read. Its label is #ffffff, but the label, its link and two wrappers are all transparent (probe), so the fill lives on a layer outside the probe’s scope. The primary therefore rests on the selected navigation state instead. If that fill is later measured and proves chromatic, it takes precedence.

Text & Neutral

• Ink (#000000): The home hero, service headlines, album titles and feature lists.
• Secondary (#666666): Non-current navigation items, the service kickers (AI 생성 음악), section labels on /ko/about/ and the footer.
• Charcoal (#333333): The English pill label, the lead copy on /ko/about/, and the hover colour and underline of navigation items.
• Border Hover (#949494): The English pill’s border on hover and press. At rest the border is rgba(0, 0, 0, 0.2).
• White (#ffffff): The 보러 가기 labels, and the header and navigation background (probe ancestor read).

Dark band

• Inverse (#e7e7e7) and Inverse Muted (#a0a0a0): Text on the dark closing band of /ko/service/. The band’s background was not captured, so no colour is claimed for it.

Not tokens

• The earlier record’s periwinkle #aba1fa, violet #6242e1, purple inks #030112, #150e2d, #201d30, #090719 and greys #cecdd5, #eeedf2, #9f9daa came from musia.ai. Its footer names a different company, (주)크리에이티브마인드. All of them were removed.
• The POZAlabs logo is an image and was not measured.

Typography

Font Family

• Live surface use: all 241 captured elements compute Garet, "Pretendard Variable", -apple-system, "system-ui", system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif. Garet is loaded / high (241 observed uses) and self-hosted at www.pozalabs.com/static/GaretBook-….woff2, declared at weight 400. The site computes weight 350 for navigation and body copy; the only Garet face loaded is that 400 Book file, so 350 renders with it. Garet has no Hangul, so Korean text falls through to Pretendard Variable, loaded from jsDelivr (cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/…/PretendardVariable.subset.*.woff2). A same-day headless read found Garet 400, Pretendard Variable (45–920), Hack 400 and 700, and Sanchez 400 loaded on home.
• Official distributed font assets: Pretendard’s LICENSE (Kil Hyung-jin) and Sanchez’s OFL.txt (LatinoType) both state the SIL Open Font License 1.1. Hack’s LICENSE.md states the MIT License, with the Bitstream Vera License for the Bitstream Vera Sans Mono material it builds on. All three were opened on 2026-09-30. No licence text for Garet was opened, so no licence is stated for it.
• Official product use: no POZAlabs page opened this session names its typefaces, so no statement of official product use is made.
• Declared or loaded without an observed role: Hack (subset files /static/hack-regular-subset-….woff2, hack-bold-subset-….woff2) and Sanchez (/static/sanchez-v17-latin-regular-….woff2) are loaded on home, but no captured element computes them first, so they have no role here. The code-style tagline’s own element computes Garet; a child in Hack was not recorded. GaretHeavy (700) is declared but was not loaded.
• Unresolved: none.

Hierarchy

All captured type has letter-spacing: normal.

Principles

• Scale, not weight: the hero is 129.6px at weight 400, and headlines at 40–60px drop to 300. Nothing on the captured pages is set bold.
• One family: Garet sets every Latin glyph; Pretendard Variable fills in for Hangul at the same size.

Layout

• The home page is a single 1440 × 900 screen: a right-aligned hero, the code-style line and the header. The other pages are long single columns (4,707px for /ko/about/, 6,536px for /ko/service/).
• Observed spacing: 7px 14px in the pill, 20px vertical rhythm in feature lists, 20px side padding on the footer line.
• Radius: 0 by default, 8px on album tiles, 9999px on the language pill.

Responsive Behavior

The capture ran at 1440 × 900 only. The class names carry sm: variants, but no small-screen layout was measured and none is claimed. The earlier record’s breakpoint table was unsourced and was removed.

Elevation & Depth

Of the 241 captured elements, 16 carry a shadow: the album tiles on /ko/about/, at rgba(0, 0, 0, 0.05) 2px 4px 10px 0px. Everything else computes box-shadow: none. The earlier record’s “shadow-free on every surface” claim is corrected.

Motion & Easing

The language pill computes transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1). Navigation items and the 보러 가기 label compute transition: all 0s. The album tiles carry an active:scale-95 class for small screens, which was not measured. The earlier record’s duration and cubic-bezier tables were not grounded in any capture and were removed.

Components

Buttons & links

Language pill

• Text: #333333, 14px / 350 / 20px Garet, with a globe icon
• Border: 1px rgba(0, 0, 0, 0.2); radius 9999px; padding 7px 14px; 102 × 36
• Hover / pressed: border #949494 after a 0.15s cubic-bezier(0.4, 0, 0.2, 1) transition; label unchanged
• Use: English, at the right of the header on every page

Navigation item

• Text: #666666 (non-current), #000000 (current page, and all items on home); 16px / 350 / 28px Garet
• Hover / pressed: #333333 with a solid #333333 underline, no transition; the current item does not change
• Use: 홈, 소개, 서비스, 연구, 문의, 채용 on a white header

Service call-to-action

• Label: 보러 가기 in #ffffff, 18px / 350 / 30px Garet
• Its dark fill sits on a layer the probe does not compare, so no background colour is declared
• Use: under eapy, LAIVE and viodio on /ko/service/

Cards & lists

• Album tile: 190 × 190 artwork, radius 8px, shadow rgba(0, 0, 0, 0.05) 2px 4px 10px 0px, title below in 20px / 350; 16 mood albums on /ko/about/.
• Feature list item: 20px / 350 / 32px #000000, 20px vertical padding, 800px wide, under each service.

States

Only observed states are listed.

The earlier record’s empty, loading, error, success, skeleton and disabled treatments described musia.ai flows or had no source, and were removed.

Do’s and Don’ts

Do

• Keep the site black on white; use #666666 for secondary and non-current text
• Let size carry display type (129.6px at 400; 40–60px at 300)
• Mark the current page in #000000 and hover with a #333333 underline
• Keep rounding to the pill and the 8px tile

Don’t

• Introduce a brand hue from the product sites into this surface; none renders on the captured pages
• Bold the headlines
• Add shadows beyond the faint album-tile shadow

Voice & Tone

POZAlabs writes in two modes. Short English slogans set the brand’s ambition, and plain Korean sentences explain the technology and the terms of use.

Voice samples (verbatim, 2026-09-30):

• “Ignite your creativity” — home hero and vision (pozalabs.com/ko/, /ko/about/)
• “포자랩스는 기존 음원을 학습하여 음악을 생성하지 않습니다.” — /ko/about/
• “누구나 쉽게 음악을 만들고, 소유하고, 함께 나눌 수 있는 새로운 창작 문화를 만듭니다.” — /ko/about/

Agent Prompt Guide

Quick Color Reference

• Ink, primary and current navigation: #000000
• Secondary: #666666; hover and pill label: #333333; pill hover border: #949494
• Text on a dark band: #e7e7e7, #a0a0a0
• Background: white #ffffff

Example Component Prompts

• “A white hero with one right-aligned line in Garet, 129.6px, weight 400, 158px line-height, #000000: ‘Ignite your creativity’. Under it a 32px code-style line: ‘with pozalabs as technology: expand(your_creativity)’.”
• “A header of plain text links in Garet 16px / 350: the current page #000000, the others #666666, hover #333333 with an underline; at the right an outlined pill (1px rgba(0, 0, 0, 0.2), radius 9999px, 7px 14px, 14px label #333333) whose border turns #949494 on hover.”
• “A grid of 190 × 190 album tiles with 8px radius and a faint rgba(0, 0, 0, 0.05) 2px 4px 10px 0px shadow, titles 20px / 350 below.”