Design System Inspiration of Scatter Lab

1. Visual Theme & Atmosphere

Scatter Lab (스캐터랩) is the Korean AI company behind Zeta (제타), and its web presence reads less like a consumer product and more like a serious research house presenting its work. The identity is aggressively monochrome — pure white canvas (#ffffff), near-black text, and not a single saturated brand hue anywhere on either the marketing site or the engineering blog. That restraint is itself the statement: a company that builds AI people spend hours talking to chooses to describe itself in black-and-white, letting the typography and the numbers do the persuading.

The homepage (Pretendard, styled-components) is built around big declarative headlines — a 52px weight-700 hero ("zeta: 엔터테인먼트의 새로운 패러다임") over 23px weight-700 section heads, all set in a warm near-black (#222222) rather than pure black. Interactive chrome is deliberately quiet: ghost nav buttons on white with a tiny 4px radius, and a single dark charcoal (#212529) circular scroll-to-top button that is the only filled action in the default viewport. The engineering blog (IBM Plex Sans + Pretendard Variable, Tailwind zinc/gray) shifts register slightly toward editorial long-form: a 44px weight-600 article H1 (#292929), 19px reading paragraphs (#242424), grey category chips, and a single pure-black (#000000) CTA. Two surfaces, two type stacks, one shared conviction — that seriousness looks like restraint.

What distinguishes Scatter Lab is its near-total rejection of decoration. Depth is essentially flat: box-shadow is none across headers, headings, cards, and chips, and the only measured shadow is a two-layer soft lift (rgba(0,0,0,0.04) 0px 1px 2px) on the floating scroll-top button. Separation comes from tinted grey surfaces (#f3f4f6, #fafafa, #ebebeb) and hairline borders (#e4e4e7), never from elevation. The neutral ladder is deep and carefully graded — from #09090b and #242424 for text down through #595959, #71717a, #8c8c8c, and #a1a1aa for progressively quieter meta — giving the pages a precise, editorial greyscale that feels engineered rather than styled.

Key Characteristics:

• Monochrome by conviction — no saturated brand hue on either surface; black, near-black, greys, white only
• Near-black charcoal (#212529) as the homepage's single filled-action color; pure black (#000000) as the blog CTA
• Warm near-black headings (#222222 homepage, #292929/#09090b blog) instead of pure black for body-scale reading text
• Two type stacks by surface: Pretendard weight-700 display on the marketing site, IBM Plex Sans weight-600 on the blog
• Flat depth — box-shadow: none almost everywhere; separation via #f3f4f6 tint and #e4e4e7 hairlines
• Tiny, conservative radii — 4px nav buttons, 6px blog buttons/chips/cards, 24px only on the circular scroll-top
• A long, precisely graded neutral ladder (#242424 → #595959 → #71717a → #8c8c8c → #a1a1aa) for text hierarchy
• Metric-forward, editorial copy ("하루 2시간 40분", "매월 80만 명") — numbers as persuasion, not superlatives

2. Color Palette & Roles

Primary / Action

• Charcoal (#212529): The homepage's single filled-action color — the circular scroll-to-top button and dark chrome. The system's primary_color, a near-black with a faint cool undertone.
• Pure Black (#000000): The blog's primary CTA fill (e.g. the "채용공고" recruitment button) and maximum-contrast accents.
• Nav Charcoal (#212429): Text color of the homepage's ghost nav menu buttons — a hair warmer than the primary charcoal.

Ink / Text

• Ink (#09090b): Blog body and heading ink (Tailwind zinc-950) — the darkest reading color, near-black with a cool cast.
• Heading (Home) (#222222): Homepage headline color — a warm near-black used for the 52px/23px weight-700 heads.
• Heading (Blog) (#292929): Blog article H1 color at 44px weight-600.
• Body (#242424): Blog reading paragraph color at 19px.
• Muted (#71717a): Blog secondary/meta text (zinc-500).
• Muted Warm (#8c8c8c): Homepage muted labels and captions.
• Muted Deep (#595959): Alternate mid-grey for secondary blog text.
• Tag Text (#4b5563): Category chip label color (gray-600).
• Faint (#a1a1aa): Lowest-emphasis labels, timestamps, disabled text (zinc-400).

Surface / Neutral

• Canvas (#ffffff): Page background, card surfaces, text on dark actions.
• Surface (#f3f4f6): Cool-grey tinted band for section separation (blog gray-100).
• Surface Alt (#fafafa): Lightest homepage grey for subtle alternating blocks.
• Band (#ebebeb): Homepage grey band / divider surface.
• Chip (#e5e7eb): Category-chip background (gray-200).
• Hairline (#e4e4e7): Thin card outlines and dividers (zinc-200) — the primary separation device in a shadow-free system.

3. Typography Rules

Font Family

• Marketing site: Pretendard (with -apple-system, Apple SD Gothic Neo, Noto Sans KR fallbacks) — the de-facto Korean product font. Display headlines run at weight 700.
• Blog: IBM Plex Sans with Pretendard Variable / Pretendard companions — an editorial, engineering-flavored stack for long-form article reading. Headlines run at weight 600.

Hierarchy

Principles

• Weight, not color, is the hierarchy signal. With the palette locked to greyscale, emphasis is carried entirely by size and weight (700 display / 600 blog heads / 400 body) plus the deep-to-faint neutral ladder.
• Two stacks, two jobs. Pretendard owns the persuasive marketing surface; IBM Plex Sans owns the editorial blog. They never swap roles across a surface.
• Near-black, never pure black, for reading text. Body and headings sit at #222222 / #242424 / #09090b — warm near-blacks that soften the greyscale without introducing hue.
• Generous body sizing for long-form. The blog reads at a deliberate 19px — larger than typical UI body — signaling that the writing is the product.

4. Component Stylings

Buttons

Primary (Black CTA)

• Background: #000000
• Text: #ffffff
• Radius: 6px
• Padding: 8px 16px
• Height: 36px
• Font: 16px / 500 / IBM Plex Sans
• Use: Primary call-to-action on the blog surface (e.g. "채용공고")

Nav Menu Item (Ghost)

• Background: #ffffff
• Text: #212429
• Radius: 4px
• Padding: 5.5px 12px
• Height: 32px
• Font: 16px / 400 / Pretendard
• Use: Homepage header navigation items (제타 소개, 문화, 블로그, 채용, AI 윤리)

Scroll-to-Top (Dark Circle)

• Background: #212529
• Text: #ffffff
• Radius: 24px
• Height: 48px
• Shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.06) 0px 8px 16px
• Use: Floating circular scroll-to-top button — the only shadowed element measured

Cards & Containers

White Content Card

• Background: #ffffff
• Border: 1px solid #e4e4e7
• Radius: 6px
• Use: White article/list card outlined by a thin hairline (no shadow)

Tinted Section Band

• Background: #f3f4f6
• Radius: 6px
• Use: Cool-grey band that segments content sections without elevation

Badges / Tags

Category Chip

• Background: #e5e7eb
• Text: #4b5563
• Radius: 6px
• Padding: 3px 12px
• Height: 26px
• Font: 14px / 400
• Use: Blog post category chips ("Product", "Business")

Navigation

• Background: #ffffff
• Text: #212429
• Font: 16px / 400 / Pretendard
• Height: 32px per item
• Use: Top horizontal nav (제타 소개, 문화, 블로그, 채용, AI 윤리, English, 日本語)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.scatterlab.co.kr/ ; https://blog.scatterlab.co.kr/zeta-intro-2506 Tier 2 sources: getdesign.md/scatterlab — "0 DESIGN.md files" (not listed); styles.refero.design/?q=scatterlab — no Scatter Lab entry (generic browse results only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px
• Notable: Button padding lands tight (8px 16px on the blog CTA, 5.5px 12px on ghost nav items); chips at 3px 12px — compact, editorial density rather than roomy consumer padding

Grid & Container

• Homepage: centered single-column with the 52px Pretendard hero as anchor, then stacked feature/section blocks
• Blog: a narrow, editorial single-column measure (long-form reading width) with the 44px H1, category chips above, and generous vertical rhythm between paragraphs
• Sections separate by grey tint (#f3f4f6, #fafafa, #ebebeb) full-width bands rather than boxed cards

Whitespace Philosophy

• Editorial breathing room: despite being content-dense, both surfaces are airy, with large vertical gaps between sections and paragraphs.
• Flat segmentation: sections separate by background tint and #e4e4e7 hairlines, never by shadow or heavy borders.
• Numbers get room: metric statements ("하루 2시간 40분", "매월 80만 명") are given their own headline-scale lines rather than buried in prose.

Border Radius Scale

• Small (4px): homepage ghost nav buttons — barely rounded
• Standard (6px): blog buttons, category chips, content cards — the workhorse
• Circle (24px): the floating scroll-to-top button (only fully-round element)
• Full (9999px): reserved; not used on the marketing/blog surfaces

6. Depth & Elevation

Shadow Philosophy: Scatter Lab is a near-shadowless system. Live inspection found box-shadow: none across the homepage hero, nav, headings, and the blog's cards and chips. Depth and grouping are communicated through flat tinted surfaces (#f3f4f6) and thin #e4e4e7 hairlines. The only measured elevation is a soft two-layer lift on the floating scroll-to-top control — an affordance, not decoration. When emphasis is needed, the system reaches for weight, size, and the dark action fills (#212529 / #000000), never for a drop shadow.

7. Do's and Don'ts

Do

• Keep the palette monochrome — black, near-black, greys, and white; let type and layout carry the design
• Use near-black (#222222, #242424, #09090b) for reading text instead of pure black
• Reserve the dark fills (#212529 charcoal on the homepage, #000000 on the blog) for the single primary action
• Carry hierarchy with weight and size (700 display / 600 blog heads / 400 body), not color
• Separate sections with grey tint (#f3f4f6, #fafafa, #ebebeb) and #e4e4e7 hairlines
• Keep depth flat — box-shadow: none by default; only the floating control lifts
• Keep radii tiny (4px nav, 6px blog components); reserve the 24px round only for the circular scroll-top
• Set marketing headlines in Pretendard weight 700 and blog headlines in IBM Plex Sans weight 600
• Give metrics headline-scale room ("하루 2시간 40분") — numbers persuade

Don't

• Introduce a saturated brand hue — the monochrome restraint is the identity
• Use pure black (#000000) for large bodies of reading text — near-blacks are warmer
• Spread the dark action fill across many elements — it dilutes the single-action signal
• Add drop shadows for elevation — this is a flat, tint-and-hairline system
• Use large or pill radii on buttons and cards — geometry stays conservative (4–6px)
• Mix the two type stacks within a single surface — Pretendard for marketing, IBM Plex Sans for blog
• Lean on exclamation-heavy hype — copy is measured, metric-backed, and editorial
• Use color to signal hierarchy — weight and size do that job

8. Responsive Behavior

Breakpoints

Touch Targets

• Blog primary CTA at 36px height with 8px 16px padding — comfortably tappable
• Homepage ghost nav items at 32px height
• Floating scroll-to-top at 48px circular — an unmistakable target

Collapsing Strategy

• Homepage hero: 52px Pretendard headline scales down on mobile, weight 700 maintained
• Blog: 44px H1 compresses; the single-column reading measure holds
• Feature/section bands: multi-block → stacked single column
• Tinted/white alternating sections maintain full-width treatment

Image Behavior

• Product/feature imagery carries no shadow at any size, consistent with the flat system
• Cards keep their 6px radius and #e4e4e7 hairline across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action (home): Charcoal (#212529)
• Primary action (blog): Pure Black (#000000)
• Nav text: Nav Charcoal (#212429)
• Heading (home / blog): #222222 / #292929
• Blog ink / body: #09090b / #242424
• Muted text: #71717a, #8c8c8c, #595959
• Faint / disabled: #a1a1aa
• Tag text: #4b5563
• Background: White (#ffffff)
• Tinted surfaces: #f3f4f6, #fafafa, #ebebeb
• Chip: #e5e7eb
• Hairline: #e4e4e7

Example Component Prompts

• "Create a homepage hero on white. Headline at 52px Pretendard weight 700, color #222222. Below it a section head at 23px weight 700. Ghost nav buttons on white: #212429 text, 4px radius, 5.5px 12px padding, 16px Pretendard. One floating circular scroll-to-top: #212529 background, white icon, 24px radius, 48px, soft two-layer shadow."
• "Design a blog article header: IBM Plex Sans H1 at 44px weight 600, color #292929, line-height 1.3. Category chips above: #e5e7eb background, #4b5563 text, 6px radius, 3px 12px padding, 14px. Body paragraphs at 19px weight 400, #242424. One black CTA: #000000 background, white text, 6px radius, 8px 16px padding."
• "Build a white content card: #ffffff background, 1px solid #e4e4e7 border, 6px radius, no shadow. Place it on a #f3f4f6 tinted band. Title 24px IBM Plex Sans weight 600, #09090b; meta text 14px #71717a."
• "Create top nav: white header. Pretendard 16px weight 400 ghost items, #212429 text, 4px radius on hover. Items: 제타 소개, 문화, 블로그, 채용, AI 윤리, plus English / 日本語 language links."

Iteration Guide

1. Stay monochrome — never add a saturated accent; hierarchy comes from weight and size
2. Dark fills (#212529 home, #000000 blog) are the single action color — don't spread them
3. No shadows by default — separate with #f3f4f6 tint and #e4e4e7 hairlines; only the scroll-top lifts
4. Radii stay tiny — 4px nav, 6px blog components, 24px only on the circle
5. Reading text is near-black (#222222 / #242424 / #09090b), never pure black
6. Pretendard weight 700 for marketing headlines; IBM Plex Sans weight 600 for blog headlines
7. Give numbers headline-scale room — Scatter Lab persuades with metrics

---

10. Voice & Tone

Scatter Lab's voice is earnest, research-grounded, and metric-backed — a company that talks about a playful entertainment product ("보는 엔터테인먼트를 넘어 함께하는 엔터테인먼트로") in the measured register of a lab reporting results. Copy leans on concrete numbers rather than adjectives: the hero and blog foreground usage metrics ("하루 2시간 40분", "매월 80만 명이 넘는 사용자") as the argument itself. The nav's dedicated "AI 윤리" (AI ethics) item signals a company that treats responsibility as a first-class topic, not a footnote. The tone is confident but never hype-driven — it reads as a serious team explaining a new paradigm, not a startup shouting about one.

Voice samples (verbatim from live surfaces):

• "zeta: 엔터테인먼트의 새로운 패러다임" — homepage hero headline (paradigm framing). (verified live 2026-07-02)
• "일주일에 12시간을 사용하는 AI 엔터테인먼트 서비스" — homepage subhead (metric as proof). (verified live 2026-07-02)
• "제타의 특별함은 '사용 시간'으로 드러납니다." — blog article (metric-first argument). (verified live 2026-07-02)
• "스캐터랩 에토스: 우리가 일하는 방식" — homepage culture section (candid, inviting). (verified live 2026-07-02)

Forbidden register: exclamation-heavy hype, superlative stacking, vague "revolutionary/game-changing" claims, and — given the company's history — any register that treats AI ethics or user trust as marketing garnish rather than substance.

11. Brand Narrative

Scatter Lab (스캐터랩) was founded in 2011 by 김종윤 (Kim Jong-yoon, CEO) and co-founders, beginning with relationship-analytics services (텍스트앳, then 연애의 과학 / "Science of Love") that mined conversational data to help people understand their relationships. That early work — building machines that read the texture of human conversation — set the company's north star: AI that people form genuine relationships with, not merely query. (Founding year and founder are widely documented public facts; the framing here is an editorial reading of the company's stated direction.)

The company's defining chapter was Luda (이루다), a Korean conversational AI released in 2020 that drew enormous engagement — and then a serious 2021 controversy over privacy and offensive outputs that led to Luda 1.0 being taken down. Scatter Lab's response reshaped the brand: a public, sustained investment in AI ethics (now a standing "AI 윤리" section of the site), a relaunched, safer Luda, and eventually Zeta (제타), an AI-character entertainment platform launched April 1, 2024 that the company frames as "a new entertainment paradigm" — moving from watching content to co-creating it with AI characters.

What Scatter Lab refuses, visible in its design: the loud, saturated, consumer-hype aesthetic that a viral AI-companion app might reach for. What it embraces instead: a monochrome, typography-forward presentation; metric-backed, editorial copy; and an explicit, front-of-house treatment of ethics. The restraint is not timidity — it is a company that has been through a public reckoning choosing to look like it takes itself, and its responsibilities, seriously.

12. Principles

1. Restraint signals seriousness. A monochrome palette on an entertainment product is a deliberate choice. UI implication: keep the palette greyscale; never introduce a saturated accent to chase attention.
2. Metrics over adjectives. The product's value is argued with numbers ("하루 2시간 40분"), not superlatives. UI implication: give metrics headline-scale typographic room; treat data as a first-class content type.
3. Ethics is front-of-house. After the Luda reckoning, AI ethics became a named part of the brand. UI implication: surface responsibility and transparency as primary navigation, never as a buried disclaimer.
4. One action, one dark fill. Emphasis is scarce and intentional. UI implication: reserve the dark fill (#212529 / #000000) for the single primary action so the next step is unambiguous.
5. Flat and editorial. Depth is nearly absent; the writing is the product. UI implication: no shadows; separate with tint and hairlines; size body text generously for long-form reading.

13. Personas

Personas below are fictional archetypes informed by publicly observable Scatter Lab / Zeta user and stakeholder segments (Korean AI-entertainment users, AI engineers, ethics-conscious observers), not individual people.

이서연, 22, 서울. A university student and heavy Zeta user who plays out story scenarios with AI characters daily. Values that the experience feels co-created rather than consumed, and that the brand talks about safety openly rather than hiding it.

김도현, 34, 판교. An ML engineer evaluating Scatter Lab's careers page. Reads the engineering blog for the substance — model and product reasoning — and reads the "AI 윤리" section as a signal of whether the team is serious about responsible deployment.

박지은, 41, 서울. A policy-minded observer who followed the Luda controversy and now checks how Korean AI companies handle ethics. Trusts Scatter Lab more for putting ethics in the nav and speaking about it plainly, in the same restrained tone as the rest of the site.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, editorial aesthetic. The floating scroll-to-top button fades/rises in at motion-standard / ease-enter once the user scrolls; hover states are subtle opacity/weight shifts. No bounce, no spring — a company presenting AI research and ethics signals steadiness, not playful delight. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.