Design System Inspiration of goorm

1. Visual Theme & Atmosphere

goorm (구름, "cloud" in Korean) is Korea's developer-experience company — a cloud IDE, an AI-education platform, and a coding-test suite — and its surfaces read like calm, engineered software documentation rather than a hard-sell SaaS pitch. The canvas is pure white (#ffffff) broken up by a barely-there cool-grey surface (#f7f7f7) that segments sections without weight. Text sits in a confident near-black (#262626) — never pure black — with a muted slate ladder beneath it (#4c4c4c → #5d5d5d → #393939 → faint #a3a3a3) doing the hierarchy work. The single saturated brand action color is an interactive blue (#2a72e5), the primary of goorm's open-source design system Vapor UI, with deeper blues (#0957c8 active, #0043b3 link) for selected tabs and inline links. The result feels like a well-built developer tool: quiet, legible, and trustworthy.

The typographic personality is Pretendard Variable end-to-end — the de-facto Korean product font, optimized for dense hangul-plus-latin legibility. Display headlines run heavy: the Vapor docs H1 is 48px at weight 800 (ExtraBold) in #262626, while the goorm.co marketing hero ("AX, 구름과 함께 시작해보세요") takes the same 48px size down to a lighter weight 500 with tight -0.4px tracking — a softer, more editorial register. Section titles land at 32px / 700. Body and UI text drop to a quiet 16px / 400, and interface labels to 14px (nav at weight 600, buttons at weight 500). One family, two jobs: heavy where it announces, light where it informs.

What distinguishes goorm from flashier dev-tool brands is its restraint with depth. Elevation is almost entirely flat — separation comes from thin hairlines (#e1e1e1) and slightly stronger #c6c6c6 inset borders rather than drop shadows, with the geometry locked to an 8px corner radius across buttons, inputs, and controls (12px on cards and search fields, full 9999px pills on badges, 50% on avatars). Semantic state lives in a Adobe-Leonardo-generated tint family — success green #058765 on #bbecd7, danger red #da3944 on #ffd8d7, info blue on #c6e6ff, warning on #ffd9c8 — so status reads instantly without breaking the otherwise monochrome calm. It's a system engineered to disappear behind the work.

Key Characteristics:

• Pretendard Variable for everything — ExtraBold (800) display, 400 body, hangul-optimized
• Single interactive blue (#2a72e5) as the Vapor UI primary action color
• Deeper blues for state — #0957c8 active tab/selection, #0043b3 inline link
• Near-black ink (#262626) for text and the dark marketing CTA, never pure black
• Flat, hairline-driven elevation — #e1e1e1 borders and #c6c6c6 inset strokes, not shadows
• 8px corner radius as the workhorse; full 9999px pills only on badges
• Leonardo-generated semantic tints (#c6e6ff / #bbecd7 / #ffd8d7 / #ffd9c8) for status
• Cool-grey neutral ladder (#4c4c4c → #5d5d5d → #393939 → #a3a3a3) on a #f7f7f7 surface

2. Color Palette & Roles

Primary & Interactive

• Vapor Blue (#2a72e5): Primary brand and action color. The saturated blue on Vapor UI primary buttons (Save, "Public으로 변경", "45 포인트 획득") and the goorm.co accent — the system's "do this" color, also the focus-ring color on inputs.
• Active Blue (#0957c8): Selected-state blue — active docs tab text and its 2px underline indicator, selection highlights.
• Link Blue (#0043b3): Inline text-link color and info-badge foreground; a deep, high-contrast blue for reading-flow links.

Ink & Text Hierarchy

• Ink (#262626): Primary text, headings, nav labels, and the dark marketing CTA background. A warm near-black used instead of pure black.
• Secondary Slate (#4c4c4c): Docs side-nav links, secondary labels, inactive tabs.
• Muted Slate (#5d5d5d): Tertiary text, captions, version tags.
• Tertiary Slate (#393939): Icon-button glyphs and dense control text.
• Faint Grey (#a3a3a3): Disabled text, placeholders, lowest-emphasis labels.

Neutral & Surface

• Canvas White (#ffffff): Page background, card and input surfaces, text on blue/dark, and the on-primary foreground.
• Surface Grey (#f7f7f7): Cool-grey tinted surface for segmented sections and secondary panels.
• Hairline (#e1e1e1): Thin borders, dividers, input outlines, and the neutral/secondary button fill — the primary separation device in this shadow-light system.
• Border Strong (#c6c6c6): Slightly heavier inset border for outlined buttons and emphasized field edges.

Semantic & Tints

• Success Green (#058765): Positive status text/icon, paired with the success tint.
• Danger Red (#da3944): Error and destructive status, paired with the danger tint.
• Info Tint (#c6e6ff): Light-blue badge/callout background for info and default tags.
• Success Tint (#bbecd7): Light-green background for success badges.
• Danger Tint (#ffd8d7): Light-red background for error badges.
• Warning Tint (#ffd9c8): Light-orange background for warning callouts.

3. Typography Rules

Font Family

• Sans (all text): Pretendard Variable (with the system Pretendard / Apple SD Gothic Neo / Noto Sans KR fallback stack) — used for display, UI, and body alike. ExtraBold (800) at display sizes, 400 for body.

Hierarchy

Principles

• One family, two registers: Pretendard ExtraBold (800) announces; Pretendard 400 informs. The weight jump is the primary hierarchy signal.
• Two display moods: the same 48px headline runs at 800 in product/docs (declarative) and at 500 with -0.4px tracking on marketing (editorial, softer).
• Hangul-first sizing: body sits at a comfortable 16px and UI at 14px — generous for mixed hangul-latin reading, dense enough for tool chrome.
• Quiet UI weight: interface labels stay at weight 500-600, never bold — the loudness is reserved for headlines.

4. Component Stylings

Buttons

Primary (Vapor UI)

• Background: #2a72e5
• Text: #ffffff
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 500 / Pretendard Variable
• Use: Primary action — Vapor UI primary ("Save", "Public으로 변경", "45 포인트 획득")

Secondary (Neutral)

• Background: #e1e1e1
• Text: #262626
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 500 / Pretendard Variable
• Use: Secondary / cancel action ("취소", "Docs 보러 가기")

Outline

• Background: #ffffff
• Text: #262626
• Border: 1px solid #c6c6c6
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 500 / Pretendard Variable
• Use: Outlined action — rendered via a 1px inset #c6c6c6 border

Marketing CTA (Dark)

• Background: #262626
• Text: #ffffff
• Radius: 8px
• Padding: 0px 24px
• Height: 48px
• Font: 16px / 500 / Pretendard Variable
• Use: goorm.co marketing primary call-to-action ("도입 문의하기")

Inputs & Forms

Text Field

• Background: #ffffff
• Text: #262626
• Border: 1px solid #e1e1e1
• Radius: 8px
• Padding: 0px 24px
• Height: 48px
• Font: 16px / 400 / Pretendard Variable
• Focus: ring in #2a72e5
• Use: Default text input (e.g. "크레딧 개수") — border applied as a 1px inset shadow

Cards & Containers

Content Card

• Background: #ffffff
• Border: 1px solid #e1e1e1
• Radius: 12px
• Use: Content card / panel sitting on the #f7f7f7 surface, no shadow

Tabs

Docs Tab

• Text (inactive): #4c4c4c
• Active: text #0957c8 + 2px bottom border #0957c8
• Radius: 8px 8px 0px 0px
• Font: 14px / 500 / Pretendard Variable
• Use: Docs "Preview / Code" toggle and section navigation

Badges

Info (Default)

• Background: #c6e6ff
• Text: #0043b3
• Radius: 9999px
• Font: 12px / 500 / Pretendard Variable
• Use: Info / default tag

Success

• Background: #bbecd7
• Text: #058765
• Radius: 9999px
• Font: 12px / 500 / Pretendard Variable
• Use: Positive / success status

Danger

• Background: #ffd8d7
• Text: #da3944
• Radius: 9999px
• Font: 12px / 500 / Pretendard Variable
• Use: Error / destructive status

Neutral

• Background: #e1e1e1
• Text: #262626
• Radius: 9999px
• Font: 12px / 500 / Pretendard Variable
• Use: Neutral count / label

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://goorm.co, https://vapor-ui.goorm.io, https://github.com/goorm-dev/vapor-ui, https://tech.goorm.io Tier 2 sources: getdesign.md/goorm — not listed (404); styles.refero.design — no goorm-specific style entry Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px
• Notable: control padding clusters at 0×12/16/24px horizontal with fixed heights (32/40/48px); nav items use 8px×12px

Grid & Container

• Centered, generous-margin content column with a sticky top nav (40px-tall nav buttons)
• Docs use a left side-nav (14px / 400 links) + main content + on-page table of contents
• Feature/marketing sections alternate white (#ffffff) and tinted grey (#f7f7f7) full-width bands
• Cards group related controls at 12px radius with a #e1e1e1 hairline

Whitespace Philosophy

• Calm density: developer tooling that stays airy — generous vertical rhythm between sections, tight only inside controls.
• Flat segmentation: sections separate by background tint (#f7f7f7 vs #ffffff) and hairlines, not by elevation.
• Consistent radius rhythm: the repeated 8px corner across controls creates a quiet, engineered cadence.

Border Radius Scale

• Small (6px): compact icon buttons, inner chips
• Medium (8px): buttons, inputs, controls — the workhorse
• Large (12px): cards, search fields, popovers
• XL (16px): large containers / media blocks
• Full (9999px): badges, pills; 50% for avatars

6. Depth & Elevation

Shadow Philosophy: goorm runs a near-shadowless system. Live inspection found box-shadow: none across nav, headings, cards, and most buttons; where a border is needed it is drawn as a 1px inset shadow (#e1e1e1 for inputs, #c6c6c6 for outline buttons) rather than an outer drop shadow. Depth and grouping come from flat tinted surfaces (#f7f7f7) and thin hairlines. This keeps the developer UI feeling fast, precise, and uncluttered. When emphasis is needed, the system reaches for color (Vapor blue #2a72e5) or the dark ink fill (#262626), never elevation.

7. Do's and Don'ts

Do

• Use Pretendard Variable for everything — ExtraBold (800) for display, 400 for body
• Reserve Vapor blue (#2a72e5) for the primary action — keep it the single "do this" color
• Use the deeper blues for state — #0957c8 for active tabs/selection, #0043b3 for inline links
• Use near-black ink (#262626) for text and the dark marketing CTA instead of pure black
• Separate sections with #f7f7f7 tint and #e1e1e1 hairlines, not drop shadows
• Keep corners at 8px for controls; reserve full 9999px pills for badges
• Use the Leonardo semantic tints (#c6e6ff / #bbecd7 / #ffd8d7 / #ffd9c8) for status, not for decoration
• Draw borders as 1px inset strokes (#e1e1e1 / #c6c6c6) to stay flat

Don't

• Use drop shadows for elevation — goorm is a flat, hairline-driven system
• Spread the Vapor blue across many elements — it dilutes the single-action signal
• Use pure black (#000000) for body text — reserve near-black ink #262626
• Set big pill radii on buttons or cards — controls are 8px, cards 12px
• Mix in a second saturated accent hue — blue is the only brand action color
• Set headlines in a light weight in product/docs — display is ExtraBold (800) there
• Use the semantic tints as background decoration — they carry status meaning only
• Use heavy slate text on light surfaces below #a3a3a3 contrast — keep the muted ladder readable

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons at 40px (default) and 48px (large CTA) — comfortably tappable
• Inputs at 48px height with 24px horizontal padding
• Nav items at 40px with 8px×12px padding

Collapsing Strategy

• Top nav: horizontal items + CTA → hamburger toggle on mobile
• Docs: side-nav collapses to a drawer; TOC drops below content
• Feature bands: multi-column → stacked single column
• Tinted/white alternating sections keep full-width treatment

Image Behavior

• Product screenshots and theme previews stay flat (no shadow) at all sizes
• Cards keep the 12px radius and #e1e1e1 hairline across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action: Vapor Blue (#2a72e5)
• Active / selection: Active Blue (#0957c8)
• Inline link: Link Blue (#0043b3)
• Text / heading / dark CTA: Ink (#262626)
• Secondary text: Secondary Slate (#4c4c4c)
• Muted text: Muted Slate (#5d5d5d)
• Faint / disabled: Faint Grey (#a3a3a3)
• Background: Canvas White (#ffffff)
• Surface: Surface Grey (#f7f7f7)
• Hairline: #e1e1e1; Strong border: #c6c6c6
• Success: #058765 on #bbecd7; Danger: #da3944 on #ffd8d7; Info on #c6e6ff; Warning on #ffd9c8

Example Component Prompts

• "Create a docs hero on white. Headline 48px Pretendard Variable weight 800, color #262626. Primary button #2a72e5 background, white text, 8px radius, 0×16px padding, 40px tall, 14px/500. Secondary button #e1e1e1 background, #262626 text, same geometry."
• "Design a feature card: white #ffffff background, 1px solid #e1e1e1 border, 12px radius, no shadow. Title 32px Pretendard weight 700, #262626. Body 16px weight 400, #4c4c4c."
• "Build a text input: white background, 1px inset #e1e1e1 border, 8px radius, 48px height, 0×24px padding, 16px/400 #262626, focus ring #2a72e5."
• "Create docs tabs: inactive text #4c4c4c, active text #0957c8 with a 2px #0957c8 bottom border, 14px/500."
• "Build semantic badges, 9999px pill, 12px/500: info #c6e6ff bg / #0043b3 text; success #bbecd7 bg / #058765 text; danger #ffd8d7 bg / #da3944 text; neutral #e1e1e1 bg / #262626 text."

Iteration Guide

1. Pretendard Variable everywhere; weight 800 for display, 400 for body, 500-600 for UI
2. Vapor blue (#2a72e5) is the single action color — don't spread it
3. No drop shadows — separate with #f7f7f7 tint and #e1e1e1 / #c6c6c6 inset borders
4. 8px radius on controls, 12px on cards, 9999px pills only on badges
5. Text is #262626 ink, never pure black; muted ladder is #4c4c4c → #5d5d5d → #a3a3a3
6. Active/selection blue is #0957c8; inline links are #0043b3
7. Status uses the Leonardo tint family, never as decoration

---

10. Voice & Tone

goorm's voice is encouraging, plain-spoken, and growth-oriented — a developer-experience company that lowers the barrier to "becoming a developer" rather than gatekeeping it. The TechBlog states the mission directly: "We are creating an ecosystem centered on developer growth." The marketing register pairs an ambitious English line ("Superpowers, for everyone") with an approachable Korean invitation ("AX, 구름과 함께 시작해보세요" — "Start AX with goorm"). Copy treats the reader as a capable learner who deserves clear tools, not a lead to be pressured.

Voice samples:

• "Superpowers, for everyone" — goorm.co page title / brand line. (verified live 2026-06-26)
• "AX, 구름과 함께 시작해보세요." — goorm.co hero H2. (verified live 2026-06-26)
• "We are creating an ecosystem centered on developer growth." — tech.goorm.io tagline. (verified via WebFetch 2026-06-26)

Forbidden register: gatekeeping or elitist developer-speak, fear-based "you'll fall behind" urgency, undefined jargon left unexplained, exclamation-heavy hype.

11. Brand Narrative

goorm (구름) was founded in 2013 in South Korea, taking its name from the Korean word for "cloud" — fitting for a company whose first product was a fully cloud-based integrated development environment. The founding premise was radical for its time: a complete development environment that lives in the browser, removing the setup friction that kept many would-be developers from ever writing their first line of code. From that IDE grew an ecosystem — goormIDE (cloud development), goormEDU / goormEXP (a learning-experience platform), goormDEVTH (coding tests for hiring), goormLEVEL, and newer AI-era products like Arkain and EXP.

The through-line is a stated belief that "anyone can become a developer." goorm positions itself as the on-ramp to a developer-centered ecosystem, and by its own account its AI-education platform has surpassed one million subscribers — evidence that the accessibility mission resonates in the Korean market and beyond. The company's current framing has shifted toward AX (AI Transformation), carrying the same democratizing intent into the AI era: superpowers, for everyone.

What goorm refuses, visible in its design: the intimidating, high-friction chrome of legacy developer tooling, and the elitism that treats coding as an exclusive craft. What it embraces — and recently open-sourced as Vapor UI, a WCAG-compliant React component library with a Leonardo-driven color system — is a flat, fast, accessible interface: one calm blue for action, near-black ink for content, hairlines instead of heavy shadows, and a single workhorse font (Pretendard) that reads cleanly in both Korean and English. The design is the message: development should feel approachable.

12. Principles

1. Anyone can become a developer. Accessibility is the founding mission. UI implication: keep flows low-friction and labels plain; never gate basic understanding behind jargon.
2. Accessible by construction. Vapor UI is WCAG-compliant with a Leonardo-generated, contrast-checked palette. UI implication: pair every semantic tint with a contrast-safe foreground; respect focus rings and keyboard paths.
3. One action, one color. Vapor blue (#2a72e5) means "do this." UI implication: reserve the saturated blue for the primary action so the next step is never ambiguous.
4. Flat and fast. Calm, uncluttered tooling beats decorative depth. UI implication: no drop shadows; separate with #f7f7f7 tint and #e1e1e1 / #c6c6c6 inset borders.
5. Announce loud, inform quiet. UI implication: Pretendard ExtraBold for headlines that motivate; 400 for content that explains; 500-600 for restrained UI.
6. Documentation is a product surface. Component docs lead with a live preview. UI implication: show the real component first, the code second.

13. Personas

Personas below are fictional archetypes informed by publicly observable goorm user segments (Korean coding learners, bootcamp / university students, engineers adopting Vapor UI, hiring teams running coding tests), not individual people.

한지우, 22, 대전. A computer-science undergrad learning to code through goormEDU. Values that the whole environment runs in the browser — no local setup to fight before the first lesson. Chose goorm because it felt built for beginners, not for people who already know everything.

박도현, 31, 판교. A frontend engineer adopting Vapor UI for an internal tool. Cares about accessibility and a stable token system; appreciates that the docs lead with a live preview and that the palette is WCAG-checked. Dislikes component libraries that look good but ship inaccessible defaults.

이서연, 38, 서울. A technical hiring manager running candidate assessments on goormDEVTH. Wants a calm, unambiguous interface where the primary action is obvious and status (pass/fail/pending) reads at a glance through clear semantic color. Trusts the brand's plain, non-hype tone.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast aesthetic. Buttons and tabs respond to press/hover with a subtle color or opacity shift; the active-tab underline (#0957c8) slides at motion-standard / ease-enter; content fades in from slightly below. No bounce or spring — developer tooling signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.