Design System Inspiration of Gaudio Lab

1. Visual Theme & Atmosphere

Gaudio Lab (가우디오랩) is a Korean AI-audio technology company, and its website reads like a research lab that learned restraint from consumer product design. The canvas is almost entirely pure white (#ffffff), sectioned by wide bands of full-bleed video and near-black immersive blocks (#1e1e1f) where the sound-wave imagery lives. Against that quiet ground, a single saturated sky-blue (#00b7ff) does all the pointing — it is the only chromatic accent in the whole system, reserved for the "Contact us" / "문의하기" call-to-action and the outline of the "All products" button. The eye is trained: blue means act. Everything else is calibrated grayscale, so the interface feels engineered and trustworthy rather than decorated.

The typographic personality is deliberately split across a hybrid stack, which is the tell that this is an engineering-led site rather than an agency showpiece. The English marketing layer runs in Poppins — geometric, rounded, and confident, climbing to a heavy weight 900 for section titles like "The Science of Sound". The functional chrome (nav, milestone stats, blog cards) is straight Roboto on Material UI, carrying the MUI default ink of rgba(0,0,0,0.87) and a 0.15px tracking on its <h1> stats. Korean copy resolves through the system stack into Noto Sans KR, where the brand hero "우리는 좋은 소리를 만들고 좋은 소리는 우리를 만듭니다" ("We make good sound, and good sound makes us") is set at a commanding 80px / weight 700. On the newer marketing sections the heading ink shifts to a crisper near-black #111214.

What distinguishes Gaudio Lab is its refusal of elevation. Live inspection found box-shadow: none across the hero, nav, CTAs, headings, and cards — nothing floats. Separation comes from flat sky-tinted panels (#f0f9ff), thin #d6d6d6 hairlines around 12px-radius news cards, and hard cuts into dark sections (#1e1e1f, and a deeper navy #12354e). Geometry mixes two ideas cleanly: full pills (9999px) for product-list rows and the circular app-launcher, and a tight small-radius scale (4px / 6px CTAs, 12px / 16px cards) for everything structural. Text steps down through a cool neutral ladder — #d3d5da faint labels on dark, #9ca3af muted captions, #fafafa near-white on the blue CTA — a flat, fast, science-forward aesthetic that lets the audio content, not the chrome, do the talking.

Key Characteristics:

• Single saturated sky-blue (#00b7ff) as the only accent — reserved for the primary CTA and the outline button
• Hybrid type stack: Poppins (EN display, up to weight 900), Roboto/MUI (body + chrome), Noto Sans KR (Korean)
• Near-black marketing ink (#111214) alongside the MUI default rgba(0,0,0,0.87) on chrome
• Shadowless system — no box-shadow anywhere; separation via tint, hairline, and dark bands
• Dual geometry — full pills (9999px) for product rows/launcher, tight 4-16px radii for CTAs and cards
• Dark immersive bands (#1e1e1f, #12354e) hosting sound-wave and film imagery
• Cool neutral ladder (#d3d5da → #9ca3af) for text hierarchy against white and dark
• Near-white label (#fafafa) on the blue CTA instead of pure white — a subtle MUI softness

2. Color Palette & Roles

Primary / Brand

• Gaudio Sky (#00b7ff): The signature bright sky-blue and the system's single action color. It is the "Contact us" / "문의하기" CTA background, the "All products" outline button's border and text, and appears as a background fill roughly nine times across the homepage (rgb(0, 183, 255)). Nothing else competes with it.
• On-Primary (#fafafa): The near-white label color that sits on the blue CTA (rgb(250, 250, 250)) — softer than pure white, an MUI convention.

Ink & Text

• Ink (#111214): Near-black used for headings and body on the newer marketing sections (rgb(17, 18, 20), 130+ observed instances). The Material UI chrome layer additionally uses rgba(0,0,0,0.87) as its default body/heading ink, so both blacks coexist by layer.
• Muted (#9ca3af): Muted cool grey for secondary and caption text.
• Faint (#d3d5da): Faint light-grey used for low-emphasis labels on dark sections (rgb(211, 213, 218)).

Surface & Border

• Canvas (#ffffff): The dominant page background — pure white, and the fill of the "Watch the Film" button and news cards.
• Surface (#f0f9ff): A faint sky-tinted panel background used for light feature blocks — the palest echo of the brand blue.
• Hairline (#d6d6d6): The thin border/divider color around the 12px-radius news cards in the shadowless card system (rgb(214, 214, 214)).

Dark Sections

• Night (#1e1e1f): Near-black background for the immersive dark bands that host sound-wave and video imagery (rgb(30, 30, 31)).
• Ocean (#12354e): A deep navy-teal used as an accent dark-section background (rgb(18, 53, 78)).

3. Typography Rules

Font Family

• Display (EN): Poppins — geometric sans for English marketing headlines and the "Watch the Film" button. Loaded at weights 400 / 500 / 700, and pushed to 900 for the largest section titles.
• Body / UI: Roboto (Material UI base, with Helvetica, Arial fallback) — nav, milestone stats, blog/news cards, and body copy. Weights 300-700 loaded.
• Korean: Noto Sans KR (resolved through the -apple-system, system-ui stack) — Korean headlines and copy, e.g. the 80px brand hero.

Hierarchy

Principles

• Split by layer, not by whim: Poppins persuades (English marketing display), Roboto informs (chrome + body), Noto Sans KR speaks Korean. Each font owns one job and never trespasses.
• Weight carries hierarchy: The system leans on weight jumps — Poppins 900 for section titles, Roboto 700 for stats, 500 for card titles and nav, 400 for body — more than on size alone.
• Two blacks by design: Marketing sections use the crisp #111214; the MUI chrome keeps its native rgba(0,0,0,0.87). This is a real, observable duality, not an inconsistency to paper over.
• Numbers as headlines: Milestone figures ("50M", "119", "35") are set as large Roboto <h1> stats with 0.15px tracking — data is promoted to display type.

4. Component Stylings

Buttons

Header CTA (Primary)

• Background: #00b7ff
• Text: #fafafa
• Radius: 6px
• Padding: 8px 16px
• Height: 32px
• Font: 14px / 500 / Roboto
• Use: Header "Contact us" / "문의하기" — the persistent primary action

Hero CTA (Primary)

• Background: #00b7ff
• Text: #ffffff
• Radius: 4px
• Height: 44px
• Font: 16px / 500 / Roboto
• Use: In-page hero "Contact us" call-to-action

Outline (Secondary)

• Text: #00b7ff
• Border: 1px solid #00b7ff
• Radius: 4px
• Height: 44px
• Font: 16px / 500 / Roboto
• Use: "All products" — secondary action beside the hero CTA

Watch the Film (Overlay)

• Background: #ffffff
• Text: #111214
• Radius: 4px
• Padding: 16px 40px
• Height: 62px
• Font: 18px / 500 / Poppins
• Use: White film-launch button over the brand hero video

App Launcher (Icon)

• Radius: 9999px
• Height: 40px
• Use: Circular "Open app launcher" icon button in the header

Navigation

Nav Menu Item

• Text: #111214
• Radius: 6px
• Padding: 8px 16px
• Height: 36px
• Font: 14px / 500 / Roboto
• Active: #00b7ff text
• Use: Top nav items ("Products", "Technology", "Blog & News", "Careers", "About us" / "제품", "기술")

Cards & Containers

News Card

• Background: #ffffff
• Border: 1px solid #d6d6d6
• Radius: 12px
• Shadow: none
• Use: Blog & news thumbnail card — hairline separation, no elevation

List Items

Product Row

• Text: #111214
• Radius: 9999px
• Height: 64px
• Font: 16px / 400 / Roboto
• Use: Product rows in the app-launcher menu (GSA, Gaudio Sing, GTS, LM1, Gaudio Studio Pro)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) Tier 1 sources: https://www.gaudiolab.com/ , https://www.gaudiolab.com/company/brand , https://www.gaudiolab.com/ko/company/brand Tier 2 sources: getdesign.md/gaudiolab (0 DESIGN.md files — empty); styles.refero.design/?q=gaudio (not listed — generic trending grid only) Conflicts unresolved: none (Tier 2 supplied no competing values)

5. Layout Principles

Spacing System

• Base unit: 8px (MUI-derived), with 4px micro-steps
• Scale: 4px, 8px, 12px, 16px, 24px, 40px, 64px
• Notable: CTA padding lands at 8px 16px (header) and the large film button at a generous 16px 40px

Grid & Container

• Full-bleed hero video/imagery bands alternate with centered content columns
• Product entries are listed as full-pill (9999px) rows inside the app-launcher menu
• Blog & news arranged as a grid of 12px-radius cards
• Milestone/stat sections present large Roboto numbers in a horizontal row

Whitespace Philosophy

• Content over chrome: generous white (#ffffff) space frames the audio/video content so the imagery, not the UI, holds attention.
• Flat segmentation: sections separate by background swap — white, sky-tinted #f0f9ff, or near-black #1e1e1f — rather than by borders or shadows.
• Immersive dark bands: full-width #1e1e1f / #12354e blocks create rhythm and host the sound-wave visuals.

Border Radius Scale

• Small (4px): hero CTA, outline button, film button
• Medium (6px): header CTA, nav menu items
• Large (12px): news/blog cards
• XL (16px): larger feature containers
• Full (9999px): product-list rows, app-launcher icon button

6. Depth & Elevation

Shadow Philosophy: Gaudio Lab is a fully shadowless system — live inspection returned box-shadow: none on the hero, nav, CTAs, headings, and cards. Depth is communicated entirely through flat means: sky-tinted panels (#f0f9ff), thin #d6d6d6 hairlines, and hard cuts into near-black bands (#1e1e1f, #12354e). When the design needs to draw the eye it reaches for the one saturated blue (#00b7ff) or a dark band, never elevation. This keeps the interface feeling fast, clean, and technical — appropriate for an audio-engineering company whose product lives in the sound, not the screen.

7. Do's and Don'ts

Do

• Reserve sky-blue (#00b7ff) for the single primary action — CTA fill and the outline button, nothing else
• Use Poppins for English display headlines, up to weight 900 for section titles
• Use Roboto (MUI) for nav, stats, cards, and body — keep the chrome consistent
• Set Korean copy in Noto Sans KR, and let the brand hero run large (80px / 700)
• Keep the system shadowless — separate with #f0f9ff tint, #d6d6d6 hairlines, and dark bands
• Use near-black #111214 for marketing headings; accept rgba(0,0,0,0.87) on MUI chrome
• Use full pills (9999px) for product rows and the app-launcher, tight 4-6px radii for CTAs
• Promote key numbers (50M, 119, 35) to large Roboto stat headlines

Don't

• Spread the blue across many elements — it dilutes the single-action signal
• Add drop shadows for elevation — the system is deliberately flat
• Mix a second saturated accent color alongside #00b7ff
• Set English display type in Roboto — Poppins owns the marketing headline voice
• Use pure black for the near-white CTA label — it is #fafafa, softer by intent
• Apply pill radii to structural cards — cards stay at 12-16px, pills are for rows/launcher
• Let Korean and English headings share a font — each locale keeps its own stack

8. Responsive Behavior

Breakpoints

Touch Targets

• Header CTA at 32px height, hero CTA and outline button at 44px — comfortably tappable
• Nav menu buttons at 36px with 8px 16px padding
• App-launcher icon at 40px, full-circle target

Collapsing Strategy

• Hero: Korean 80px / English 48px headlines scale down; weight maintained
• Product list: full-pill rows stack vertically in the app-launcher on narrow viewports
• News grid: multi-column → 2-up → single column
• Dark immersive bands keep full-width treatment; internal padding reduces

Image Behavior

• Hero and section video/imagery run full-bleed and crop rather than shrink
• News cards keep 12px radius and their #d6d6d6 hairline (no shadow) at all sizes

9. Agent Prompt Guide

Quick Color Reference

• Primary action: Gaudio Sky (#00b7ff)
• CTA label: On-Primary (#fafafa) / white (#ffffff)
• Marketing heading: Ink (#111214)
• Chrome ink: rgba(0,0,0,0.87) (MUI default)
• Background: Canvas (#ffffff)
• Tinted panel: Surface (#f0f9ff)
• Muted text: #9ca3af; Faint on dark: #d3d5da
• Card hairline: #d6d6d6
• Dark bands: Night (#1e1e1f), Ocean (#12354e)

Example Component Prompts

• "Create a header CTA: #00b7ff background, #fafafa text, 6px radius, 8px 16px padding, 32px tall, 14px/500 Roboto. Label 'Contact us'."
• "Build a hero row: white background. English section title in Poppins 48px weight 900, #111214. Primary CTA (#00b7ff bg, white text, 4px radius, 44px tall) next to an outline button (transparent, 1px solid #00b7ff, #00b7ff text, 4px radius, 44px tall)."
• "Design a news card: white #ffffff background, 1px solid #d6d6d6 border, 12px radius, no shadow. Card title 18px Roboto weight 500, line-height 28px."
• "Create a dark immersive band: #1e1e1f background, Korean headline in Noto Sans KR 80px weight 700, white text. Optional white 'Watch the Film' button (16px 40px padding, 4px radius, #111214 text, 18px Poppins)."

Iteration Guide

1. #00b7ff is the single action color — never spread it
2. Poppins for EN display, Roboto for chrome/body, Noto Sans KR for Korean
3. No shadows — separate with #f0f9ff tint, #d6d6d6 hairlines, dark bands
4. Two blacks: #111214 marketing / rgba(0,0,0,0.87) MUI chrome
5. Pills (9999px) for product rows + launcher; 4-16px radii for everything structural
6. Promote key numbers to large Roboto stat headlines

---

10. Voice & Tone

Gaudio Lab's voice is precise, wonder-tinged, and quietly authoritative — an audio research lab that treats sound as both science and emotion, and says so plainly. The English tagline "Where sound is, Gaudio Lab is there." and the section header "The Science of Sound" set the register: declarative, curiosity-forward, never hype. The company frames itself through evidence — "Over 40 audio experts including 9 Ph.D" — rather than adjectives, and lets awards (CES Innovation Awards) and numbers (50M daily users) do the boasting. Korean copy carries a warmer, almost poetic note: "우리는 좋은 소리를 만들고 좋은 소리는 우리를 만듭니다" ("We make good sound, and good sound makes us").

Voice samples (verbatim from live surfaces):

• "Where sound is, Gaudio Lab is there." — brand-page hero subtitle (mission-framed). (verified live 2026-07-02, /company/brand)
• "Sound is the most fundamental means of connecting with people or touching their emotions." — "The Science of Sound" section. (verified live 2026-07-02, /company/brand)
• "우리는 좋은 소리를 만들고 좋은 소리는 우리를 만듭니다" — Korean brand hero. (verified live 2026-07-02, /ko/company/brand)

Forbidden register: hype superlatives, exclamation-heavy marketing, undefined buzzwords, and any framing that hides the engineering behind vague "magic". Sound is presented as science first, feeling second — never as a gimmick.

11. Brand Narrative

Gaudio Lab (가우디오랩) is a Seoul-based AI-audio technology company, spun out of academic sound research and, by its own homepage timeline, marking its 10th anniversary in 2025 (founded circa 2015). Its founding premise is stated directly on the brand page: "We provide an excellent sound experience through innovative technologies" — and, more memorably, "Where sound is, Gaudio Lab is there." The company positions sound as a rigorous science ("Sound is science, from smartphone to movie theaters") staffed by "over 40 audio experts including 9 Ph.D" dedicated to R&D.

The product line spans spatial and generative audio: GSA (Spatial Audio), Gaudio Sing (AI Karaoke), GTS / Gaudio Text Sync, LM1 (Loudness Normalizer), Gaudio Studio Pro (AI Content Localization), and Gaudio Developers, an API platform for audio AI. By its published milestones the company reports 50M worldwide daily users of its technologies, 16.9 billion KRW (~$13M) in Series B funding, 119 items of intellectual property, and 35 partners and investors including Genie Music, Melon, KT Alpha Shopping, and META48 — plus CES Innovation Awards 2026 for a fourth consecutive year.

What Gaudio Lab refuses, visible in its design: the ornamented, shadow-heavy look of consumer entertainment brands and the buzzword-first pitch of generic "AI" startups. What it embraces: a flat, shadowless, mostly-monochrome canvas where a single sky-blue points to action, evidence-based copy, and full-bleed sound-wave imagery that keeps the focus on what the company actually makes — sound.

12. Principles

1. Sound is science first. The brand leads with rigor ("The Science of Sound", "9 Ph.D"), not spectacle. UI implication: present capabilities with concrete numbers and evidence; keep chrome plain so the content reads as credible.
2. One color, one action. Sky-blue (#00b7ff) is the sole saturated hue. UI implication: reserve #00b7ff exclusively for the primary CTA and its outline sibling so the next step is never ambiguous.
3. Flat and fast. The system is shadowless by choice. UI implication: separate with tint (#f0f9ff), hairlines (#d6d6d6), and dark bands — never elevation — to keep the interface quick and technical.
4. Let the sound imagery lead. Full-bleed video and waveform visuals carry the emotion. UI implication: frame media generously in white and dark bands; the UI recedes so the audio content dominates.
5. Evidence over adjectives. Milestones, awards, and user counts replace hype. UI implication: promote key numbers to large stat headlines; avoid superlatives in copy.

13. Personas

Personas below are fictional archetypes informed by publicly observable Gaudio Lab audiences (audio/ML engineers, media & broadcast partners, and consumer product teams), not individual people.

정민호, 34, 서울. A media-tech product manager at a Korean streaming service evaluating Gaudio's dialogue-separation and loudness tools. Trusts the brand because it argues from Ph.D depth and measurable results, not marketing gloss.

Sarah Nguyen, 29, Los Angeles. An audio ML engineer integrating the Gaudio Developers API for content localization. Values the plain, evidence-first documentation tone and the single clear CTA when she needs to reach the team.

김하윤, 41, 판교. A broadcast/OTT partnerships lead assessing Gaudio for IBC-grade spatial audio. Reassured by the shadowless, no-nonsense site — it reads like an engineering company that ships, matching the CES-award track record.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and composed — matching the flat, science-forward aesthetic. The product carousel (Swiper) slides at motion-standard / ease-enter; the app-launcher pill rows and CTAs respond to hover/press with a subtle opacity/scale shift; full-bleed video bands crossfade at motion-slow. No bounce or spring — an audio-engineering company signals precision, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and autoplaying carousels pause; the site remains fully functional.