Design System Inspiration of POZAlabs

1. Visual Theme & Atmosphere

POZAlabs (포자랩스) is Korea's leading generative-music AI company, and its design language lives in two deliberately different registers. The corporate site (pozalabs.com) is austere and gallery-like: a pure white canvas (#ffffff) carrying a single oversized Garet display headline in pure black (#000000) — "Ignite your creativity" set at roughly 129.6px, weight 400, with a 158px line-height that lets the words breathe like a museum wall label. Beneath it, a code-syntax tagline — with pozalabs as technology: expand(your_creativity) — is typeset in the Hack monospace face, signalling that this is an engineering house that treats creativity as something you can call like a function. The result reads as confident, artful, and unhurried: no gradients, no chrome, no shadow — just type, black, and white.

The product surface (musia.ai, the MUSIA AI-composition app) is where the brand's chromatic identity appears. Here the palette turns purple: a signature periwinkle (#aba1fa) is the pervasive accent — it colors links, the language selector, and every product wordmark (MUSIA ONE, MUSIA PLUGIN) — while a saturated violet (#6242e1) anchors accent blocks and gradients. The UI is built on deep purple-inks: near-black #030112 for selected controls, a dark purple-ink #150e2d for text on inverted CTAs, and immersive dark sections in #201d30 and #090719. Interactive chrome is unmistakably pill-shaped — segmented feature chips at 28px radius, primary CTAs at 20px — rendered in Inter/Pretendard at a bold 24px/700. The font stack shifts from the editorial Garet + Sanchez + Hack trio on the corporate site to a functional Inter + Pretendard + Source Sans Pro system in the app.

What unifies the two surfaces is restraint with depth. Both are essentially shadow-free — live inspection returned box-shadow: none across heroes, nav, and cards on both domains. Separation is achieved through flat contrast (black type on white, white chips on dark purple) and generous whitespace rather than elevation. The overall impression is of a company that is technically serious but creatively warm: the monochrome corporate face says "research lab," the periwinkle product face says "for creators," and the pill geometry keeps a professional AI tool from feeling intimidating.

Key Characteristics:

• Two-register system: monochrome black-on-white corporate site, periwinkle-purple MUSIA product
• Oversized Garet display headline (~130px, weight 400) as the corporate hero anchor
• Code-syntax tagline in Hack monospace — expand(your_creativity) — an engineering-house signature
• Signature periwinkle accent (#aba1fa) reserved for links, wordmarks, and the language selector
• Saturated violet (#6242e1) for accent blocks; deep purple-inks (#030112, #150e2d, #201d30, #090719) for surfaces
• Pill-everything product geometry — 28px feature chips, 20px CTAs, 8px small controls
• Bold Inter/Pretendard at 24px/700 for product feature labels; quiet Source Sans Pro body
• Flat, shadow-free depth on both surfaces — contrast and whitespace do the separating

2. Color Palette & Roles

Primary & Brand

• Periwinkle (#aba1fa): The signature brand accent. The most pervasive color on the MUSIA product surface — links, product wordmarks, the language-selector outline, and active nav text. This is POZAlabs' "brand purple."
• Saturated Violet (#6242e1): Deeper, more saturated companion violet used for accent blocks, highlight fills, and gradient anchors.

Ink & Dark Surfaces

• Ink (#030112): Near-black purple-tinted ink. Background of selected segmented chips and the darkest control fills; also primary body ink on the product.
• Deep Purple-Ink (#150e2d): A dark purple-black used for text on inverted (white) CTAs sitting inside dark sections.
• Dark Surface (#201d30): The workhorse dark section / feature-card background — a muted purple-charcoal.
• Darkest (#090719): The deepest immersive section background, near-black with a violet undertone.
• Pure Black (#000000): The corporate site's headline and body ink, and the fill of the light-hero primary CTA.

Neutral & Surface

• White (#ffffff): Page background on both surfaces, text on dark/purple, and inverted-CTA fill.
• Muted Chip Grey (#cecdd5): Fill for unselected segmented chips — a cool light grey that recedes behind the ink-filled selected chip.
• Light Surface (#eeedf2): A soft off-white surface for alternating light panels and card grounds.
• Hairline (#eeeeee): Thin borders and dividers on light surfaces.
• Muted Grey Text (#9f9daa): Tertiary text, captions, and metadata on light backgrounds.

3. Typography Rules

Font Family

• Display (corporate): Garet — a geometric sans used for the oversized corporate hero headline and nav. Weight 400 even at display sizes, giving the black type an even, poster-like presence.
• Editorial companions (corporate): Sanchez (a slab serif) and Hack (monospace, used for the expand(your_creativity) code-syntax tagline).
• UI (product): Inter (with Pretendard as the Korean companion) — carries all MUSIA nav, buttons, and feature chips.
• Body (product): Source Sans Pro with Noto Sans KR fallback — the document default for paragraph and reading text.

Hierarchy

Principles

• Two type systems, two jobs: Garet (plus Sanchez/Hack) is the editorial, brand-poster voice of the corporate site; Inter/Pretendard is the functional product voice. They never swap surfaces.
• Display lives at weight 400: The corporate hero does not shout with heavy weight — it uses sheer scale (~130px) and generous line-height instead. Boldness (700) is reserved for the product's 24px feature labels.
• Uppercase + wide tracking for product nav: MUSIA nav items are uppercase Inter at 18px with a deliberate 0.99px tracking, giving the app a crisp, technical header.
• Monospace as a brand signal: The Hack code-syntax tagline is a typographic statement of identity — music generation framed as a callable function.

4. Component Stylings

Buttons

Primary CTA (Light Hero)

• Background: #000000
• Text: #ffffff
• Radius: 20px
• Height: 72px
• Font: 24px / 700 / Inter
• Use: Primary call-to-action on the light hero — "TRY FOR FREE"

Inverted CTA (Dark Section)

• Background: #ffffff
• Text: #150e2d
• Radius: 20px
• Padding: 16px 40px
• Height: 68px
• Font: 24px / 700 / Inter
• Use: "TRY FOR FREE" on a dark purple section — inverts to white fill

Language Selector (Outline)

• Text: #aba1fa
• Border: 3px solid #aba1fa
• Radius: 8px
• Padding: 11px 16px
• Height: 40px
• Font: 12px / 700 / Inter
• Use: Language toggle ("ENGLISH") — periwinkle outline button

Inputs

Inline Text / Search

• Text: #333333
• Font: 14px Source Sans Pro
• Use: Minimal inline text/search field — transparent background, no visible chrome until focus (the marketing surface keeps form fields deliberately bare)

Cards & Containers

White Panel

• Background: #ffffff
• Radius: 8px
• Use: White content panel / product card on light sections (shadow-free)

Dark Feature Card

• Background: #201d30
• Text: #ffffff
• Radius: 20px
• Use: Immersive dark purple feature card / section block

Badges

Selected Feature Chip

• Background: #030112
• Text: #ffffff
• Radius: 28px
• Padding: 12px 28px
• Font: 24px / 700 / Inter
• Use: Selected segmented chip ("Songwriting", "AI Recommended Music", "Simple UI/UX")

Unselected Feature Chip

• Background: #cecdd5
• Text: #030112
• Radius: 28px
• Padding: 12px 28px
• Font: 24px / 700 / Inter
• Use: Unselected segmented chip in the same feature row

Navigation

Product Nav (MUSIA)

• Background: transparent (over dark hero)
• Text: #ffffff
• Font: 18px / 400 / Inter
• Active: #ffffff text; inactive links at 50% white opacity
• Use: MUSIA top nav — "PRODUCTS", "PRICING", "CONTENTS", "SUPPORT"

Corporate Nav

• Text: #000000
• Font: 16px / 400 / Garet
• Use: Corporate site nav — "About", "Service", "Research", "Contact", "Recruit"

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.pozalabs.com/ (corporate, live computed style); https://musia.ai/ (MUSIA product, live computed style); https://blog.pozalabs.com/ (official brand blog) Tier 2 sources: getdesign.md/pozalabs — SPA shell only, no brand tokens; styles.refero.design/?q=pozalabs — no genuine POZAlabs/MUSIA entry (search returns unrelated brands) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 28px, 40px, 64px
• Notable: Feature chips use 12px 28px padding; primary CTAs use 16px 40px — generous, tappable hit areas that keep the pill controls comfortable at 24px type

Grid & Container

• Corporate: centered single-column, the ~130px Garet headline as the sole anchor with vast surrounding whitespace
• Product: alternating light and dark full-width bands; feature options presented as a horizontal row of segmented pill chips
• Dark immersive sections (#201d30, #090719) break up light content bands for rhythm
• Rounded section masks: the product hero uses a large bottom radius (up to 120px) to soften the transition between bands

Whitespace Philosophy

• Gallery over density: the corporate site treats emptiness as content — the headline floats in negative space like a poster
• Flat segmentation: sections separate by background swap (white ↔ dark purple) and light-surface tint (#eeedf2), not by shadow
• Pill rhythm: the repeated 28px-radius chip creates a consistent horizontal cadence across feature/tool rows

Border Radius Scale

• Small (8px): language selector, small white panels
• Medium (20px): primary and inverted CTAs
• Large (28px): segmented feature chips — the product workhorse
• XL (40px): larger media/cards
• Full (9999px): fully-round pills where used

6. Depth & Elevation

Shadow Philosophy: POZAlabs is a shadow-free system on both surfaces. Live inspection returned box-shadow: none across the corporate hero and nav and across the MUSIA product hero, chips, and cards. Depth is communicated entirely through flat contrast — pure black type on white, white chips on deep purple-ink (#030112), and immersive dark bands (#201d30, #090719) — plus generous whitespace. When emphasis is needed the system reaches for color (periwinkle #aba1fa, saturated violet #6242e1) or scale, never elevation. This keeps the AI tool feeling clean, fast, and modern rather than skeuomorphic.

7. Do's and Don'ts

Do

• Keep the corporate face monochrome — black (#000000) type on white (#ffffff), no color
• Use oversized Garet at weight 400 for corporate display headlines — scale is the emphasis, not weight
• Reserve periwinkle (#aba1fa) as the product's signature accent — links, wordmarks, outlines
• Use pill geometry throughout the product — 28px chips, 20px CTAs, 8px small controls
• Build dark sections from the purple-ink family (#030112, #201d30, #090719), not neutral black
• Use bold Inter/Pretendard at 24px/700 for product feature labels
• Separate sections with flat contrast and #eeedf2 tint, not shadows
• Keep the Hack monospace code-syntax voice for taglines — it signals the engineering identity

Don't

• Introduce drop shadows for elevation — POZAlabs is flat on every surface
• Mix the corporate monochrome and product purple on the same surface — the registers stay separate
• Spread periwinkle across many product elements — it dilutes the single-accent signal
• Use heavy weights for the corporate display headline — Garet stays at weight 400
• Use neutral grey/black for dark sections — reach for the purple-ink family
• Use sharp square corners on product controls — chips and CTAs are pills
• Swap the font systems (Garet into the product, Inter into the corporate hero)
• Add a second saturated accent hue — violet is the only brand color

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTAs at 68-72px height, full pill — unmistakable targets
• Feature chips at 56px height with 12px 28px padding — comfortably tappable
• Language selector at 40px height with a 3px periwinkle outline

Collapsing Strategy

• Corporate hero: Garet headline scales down on mobile, weight 400 maintained
• Product feature chip row: horizontal wrap/scroll on narrow viewports
• Light/dark alternating bands maintain full-width treatment
• Rounded section masks reduce their radius on smaller viewports

Image Behavior

• Product screenshots and media sit in shadow-free cards at 8-20px radius across breakpoints
• Corporate imagery/animation carries no shadow, consistent with the flat system

9. Agent Prompt Guide

Quick Color Reference

• Brand accent: Periwinkle (#aba1fa)
• Saturated accent: Violet (#6242e1)
• Corporate ink / primary CTA: Pure Black (#000000)
• Product ink / selected chip: Ink (#030112)
• Dark section text-on-CTA: Deep Purple-Ink (#150e2d)
• Dark surfaces: #201d30, #090719
• Background: White (#ffffff)
• Light surface: #eeedf2
• Unselected chip: Muted Chip Grey (#cecdd5)
• Muted text: #9f9daa; Hairline: #eeeeee

Example Component Prompts

• "Create a corporate hero on pure white. Single Garet headline at 130px weight 400, line-height 158px, pure black #000000: 'Ignite your creativity'. Below it a monospace (Hack) code-syntax tagline in black. Vast surrounding whitespace, no shadow."
• "Design a MUSIA feature selector: a horizontal row of pill chips at 28px radius, 12px 28px padding, 24px/700 Inter. Selected chip is #030112 background with white text; unselected chips are #cecdd5 background with #030112 text."
• "Build a primary CTA: black #000000 fill, white text, 20px radius, 24px/700 Inter, ~72px tall — 'TRY FOR FREE'. On a dark purple section, invert it: white #ffffff fill with #150e2d text, 16px 40px padding."
• "Create a dark feature section: #201d30 background, white text, 20px radius cards. Accent links and the language-selector outline in periwinkle #aba1fa (3px border, 8px radius)."

Iteration Guide

1. Corporate = monochrome black/white + Garet; product = periwinkle purple + Inter/Pretendard. Keep them separate.
2. Periwinkle (#aba1fa) is the single product accent — don't spread it
3. No shadows — separate with contrast, #eeedf2 tint, and whitespace
4. Pill geometry — 28px chips, 20px CTAs, 8px small controls
5. Dark sections come from the purple-ink family (#030112, #201d30, #090719), never neutral
6. Display headlines use scale (weight 400); product labels use weight 700
7. Keep the Hack monospace code-syntax voice for brand taglines

---

10. Voice & Tone

POZAlabs' voice is creative, technologist, and quietly ambitious — an engineering house that talks about music the way a developer talks about tools. The corporate headline "Ignite your creativity" and the code-syntax tagline expand(your_creativity) set the register: aspirational about human creativity, playful about the technology underneath, never hype-driven. On the product (MUSIA) the copy turns plain and functional — feature chips are labeled with concrete verbs and nouns ("Songwriting", "AI Recommended Music", "Simple UI/UX", "Web Based") — treating the creator as a maker who wants to get to work, not a lead to be closed.

Voice samples (verbatim from live surfaces):

• "Ignite your creativity" — corporate hero headline (aspirational). (verified live 2026-07-02, pozalabs.com)
• "with pozalabs as technology: expand(your_creativity)" — corporate tagline in Hack monospace (technologist-playful). (verified live 2026-07-02, pozalabs.com)
• "TRY FOR FREE" — MUSIA primary CTA (direct, low-pressure). (verified live 2026-07-02, musia.ai)

Forbidden register: hype superlatives about "revolutionary AI", fear-of-missing-out urgency, undefined ML jargon left unexplained, exclamation-heavy marketing. The brand's confidence comes from spare type and real collaborations, not adjectives.

11. Brand Narrative

POZAlabs (포자랩스) was founded in 2018 in Seoul as an AI music-generation company, with 허원길 (Heo Won-gil) as CEO. Its founding premise is captured in the homepage headline — to "ignite" and "expand" human creativity — by using generative models to make original, commercially usable music accessible to anyone, not just trained composers. The name and the code-syntax tagline (expand(your_creativity)) frame the mission as an engineering problem: creativity as a capability you can amplify with technology.

The company's flagship is MUSIA (musia.ai) — an AI composition platform spanning MUSIA ONE (a web app for generating royalty-free music) and MUSIA PLUGIN (a DAW plugin for producers). Around it POZAlabs runs Poza Studio for commercial music and sound production and Viodio, a background-music subscription aimed at creators and small businesses. The design system's two registers mirror this dual audience: the monochrome corporate site speaks to partners and press as a research lab, while the periwinkle MUSIA product speaks to creators as an approachable tool.

POZAlabs positions itself at the frontier of generative audio through visible, verifiable collaboration rather than marketing claims. Its official newsroom documents work with Samsung, Google, and SM Entertainment on aespa spatial-audio content powered by Eclipsa/IAMF audio technology at CES 2025 (announced as a world-first application of IAMF technology to AI music generation), alongside commercial projects with partners such as Pinkfong ("Baby Shark") and major Korean construction and media brands. What the brand refuses, visible in its design: the busy, gradient-heavy chrome of typical AI startups (it stays flat and monochrome on the corporate face) and hype-driven copy (it lets scale, restraint, and real partnerships carry the message).

12. Principles

1. Creativity is a capability to amplify. The mission is to expand what people can make, not to replace them. UI implication: frame AI features as creator tools ("Songwriting", "Instrument"), keep the interface approachable with friendly pill controls.
2. Two audiences, two registers. A research lab for partners; an approachable tool for creators. UI implication: keep the corporate monochrome face and the periwinkle product face visually distinct — never blend them.
3. Confidence through restraint. Spare type and real collaborations, not superlatives. UI implication: oversized Garet headlines in negative space; no decorative shadow or gradient clutter.
4. Flat and fast. Modern, shadow-free surfaces signal a contemporary AI product. UI implication: separate with contrast and whitespace; reserve depth cues for color, not elevation.
5. One accent, one signal. Periwinkle (#aba1fa) means brand and action on the product. UI implication: reserve the accent for links, wordmarks, and key outlines so the identity reads instantly.

13. Personas

Personas below are fictional archetypes informed by publicly observable POZAlabs / MUSIA user segments (indie video creators, music producers, small-business marketers, enterprise media partners), not individual people.

정하늘, 27, 서울. A YouTube creator who needs royalty-free background music for weekly uploads. Uses MUSIA ONE to generate mood-matched tracks in minutes. Chose it because the pill-chip feature selector made composing feel like picking options, not learning a DAW.

Marcus Lee, 34, Los Angeles. An indie music producer who runs the MUSIA PLUGIN inside his DAW for quick idea starters and stems. Values that the tool feels professional and unfussy — bold labels, no gimmicks — and that outputs are commercially clearable.

김서연, 41, 경기. A marketing lead at a mid-size brand sourcing custom sound for campaigns through Poza Studio. Trusts POZAlabs because its newsroom shows real, named collaborations (CES, major partners) rather than vague AI promises.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is quiet and functional, consistent with the flat aesthetic. Segmented chips respond to selection with a subtle scale/opacity shift as the fill swaps from #cecdd5 to #030112; content bands and cards fade-in from below at motion-standard / ease-enter. The rounded section masks (large bottom radii) reveal as bands scroll into view. No bounce or spring — a professional AI tool signals steadiness, not gimmickry. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.