숨고 DESIGN.md

Design System Inspiration of Soomgo

Overview

Visual Theme & Atmosphere

Soomgo (숨고, from 숨은 고수, "hidden experts") is a Korean marketplace that connects customers with independent professionals — movers, cleaners, tutors, designers, lawyers, repair crews. It is run by Brave Mobile Inc. ((주)브레이브모바일), founded in December 2014 and based on Teheran-ro in Gangnam, Seoul; the Soomgo service launched in September 2015 and the company joined Y Combinator in April 2017. A customer describes the job in a request (요청서), pros reply with quotes, and the customer compares and chooses; the company counts one customer request every three seconds, 16 million+ customer sign-ups and 2.5 million+ pro sign-ups as of July 2026. In March 2025 Soomgo rebranded as a 종합 라이프스킬 플랫폼 (all-round life-skills platform) under the definition "더 나은 일상을 위한 생활의 기술" — the skills of living for a better everyday life — with a new Hangul logo and three values, Brave, Improve and Connect. The home page now greets visitors with the line of its new campaign, "집으로 사람 부를 땐, 숨고" (when you call someone to your home, Soomgo).

The logged-out web product reads as a quiet, dense marketplace. Text sits in a blue-grey ink (#293341, headings #1c242f) on white, secondary copy in slate #6a7685, and soft grey fills (#f6f7f9, #eff1f5) carry search fields, secondary actions and region links. One saturated violet, #693bf2, does the brand's action work: every 고수가입 (sign up as a pro) button, the large calls to action on home and /pro, and the app-download buttons in every footer, with its text actions and region labels in the same colour. Category chips are outlined by a 1px #e0e5eb inset ring and turn charcoal #293341 with white text when selected. Almost nothing casts a shadow; only the sponsored pro cards on /search/pro lift off the page.

Two front-end generations sit side by side. Home and /pro are a newer Next.js build whose type is Pretendard served under an anonymised family name; /search/pro is an older Vite/Bootstrap page that names Pretendard directly and adds slight negative tracking to its title. Their header 고수가입 buttons share a colour but not their geometry or hover.

Key Characteristics:

• One violet, #693bf2, for primary actions; hover deepens it to #6302fb or #5400d7, and pressed is #5400d7 on every probed control
• Blue-grey ink (#293341 body, #1c242f headings) instead of black; slate #6a7685 for meta
• Soft grey fills #f6f7f9 and #eff1f5; a #e0e5eb hairline for chip rings and filter borders
• Pretendard throughout, weights 400 to 700; headings on home and /pro are 700, action labels 600
• Rounded everywhere: 6px header buttons, 12px large actions and load-more buttons, 16px chips and cards, 36px region pills
• Flat pages; one soft two-layer shadow on sponsored cards

Primary tasks

• Request a quote by describing the job you need done
• Compare the pros who replied, their reviews and their prices
• Find a pro by service and region with 고수찾기
• Book a service directly with 바로예약
• Sign up as a pro to receive customer requests

Brand Narrative

Soomgo's company page tells its story as a change in how people find help: ten years ago, finding a mover, an interior crew or a tutor meant legwork and flyers; now Soomgo connects experts and passes on life know-how in one place. Brave Mobile Inc. was founded in December 2014 and launched Soomgo in September 2015. It joined Y Combinator in Silicon Valley in April 2017, raised a 12.5 billion won Series B in June 2019 and a 32 billion won Series C in July 2021, aired its first TV commercial in January 2022, reached break-even in February 2023 and 10 million sign-ups the following month, passed 100 million cumulative quotes in December 2023, and was named one of Forbes Korea's 50 fast-growing startups in June 2024.

In February 2025 it reached 14 million sign-ups, and in March it rebranded. The company's newsroom post describes the change: after ten years of widening its categories to more than 1,000 life services — 14 million sign-ups, more than 3 million monthly active users, 62.4 billion won in revenue and 13.7 billion won in operating profit in 2024 — Soomgo redefined itself on 6 March 2025 as a 종합 라이프스킬 플랫폼 under the brand definition "더 나은 일상을 위한 생활의 기술". Its new purpose is to raise everyone's life skills for a better life, its mission to connect people, information and services so that anyone can take on a better life, and its values Brave, Improve and Connect; the new logo carries the brand essence Life Progress. In November 2025 Kim Kang-se (김강세), formerly chief global officer of NOL Universe, became chief executive.

The team's culture page groups its principles under two headings: 최선으로 최고를 만듭니다 (every start is with customers and pros; tenacity for results; fast decisions, faster execution; bold thinking, brave action) and 하나가 되어 일합니다 (one team, one goal; transparent sharing; open communication; fierce debate, complete trust).

Principles

1. Start from customers and pros. "모든 시작은 고객과 고수로부터" is the first of the team's principles. UI implication: the home page leads with a search field, a request action and real pros' cards.
2. Connect people, information and services. The 2025 mission. UI implication: categories, regions, community stories and pro portfolios sit on one scrolling home.
3. One action colour. UI implication: #693bf2 marks where to act — sign up, get the app, see more — and nothing else is saturated. (An editorial reading of the captured pages.)
4. Fast decisions, faster execution. UI implication: short labels and direct actions ("견적요청", "고수찾기").
5. Flat and legible. UI implication: blue-grey ink on white, grey fills for grouping, shadows only where a card is sponsored. (An editorial reading, not a Soomgo statement.)

Personas

Fictional archetypes informed by Soomgo's publicly observable user segments (customers hiring local services, and independent pros), not real individuals.

Jiyeong, 34, Seoul. Just signed a new lease and needs move-in cleaning by the weekend. Opens Soomgo, picks 이사/입주 청소업체, describes the flat and compares the quotes that come back by price and reviews.

Minho, 45, Busan. An independent cleaning pro. Uses Soomgo to receive customer requests and grow his client base; cares that his profile, reviews and response speed are clear, because that wins jobs.

Seoyeon, 29, Seongnam. Planning a small wedding and sourcing a photographer and a make-up artist. Lines up several pros side by side, reads recent reviews and messages before committing.

Colors

Every token below was read on 2026-09-30 from soomgo.com, /search/pro and /pro by the deterministic collector, and hover and pressed values by the fixed keyboard probe. They describe Soomgo's logged-out web product; the apps were not captured and none of their values is claimed.

Primary

• Soomgo Violet (#693bf2): The fill of 고수가입 in the header of home and /search/pro, of the large 고수가입 / 고수 가입하기 actions on home and /pro, of 필요한 정보 보러 가기 on /pro and of the APP STORE and PLAY STORE buttons in all three footers — 11 recorded fills across all three pages. The same violet colours the /pro text actions (지금 가입하고 혜택 받기, 필수 인증 서비스 확인하러 가기 →) and the labels of the region links on home. It is the primary because it is the product's action fill wherever an action is offered, and no other saturated fill appears on the captured pages.
• On Primary (#ffffff): Labels on every violet fill.
• Violet Hover (#6302fb): Hover fill of the large actions (고수 가입하기, 필요한 정보 보러 가기, the 52px 고수가입 on home), settled after a 0.2s transition.
• Violet Pressed (#5400d7): Pressed fill of every violet-filled control whose pressed state was measured, and also the hover fill of the home header 고수가입. The older /search/pro header button hovers to #4e17f0 with a #4710ea border instead.
• Violet Tint (#f1eeff): The 숨고페이 chips in the /search/pro list.

Text

• Ink (#293341): The document default text colour on all three pages, and the charcoal fill of a selected category chip and of 찜한 고수.
• Heading (#1c242f): Section headings on home and /pro, list titles, chip and button labels.
• Slate (#6a7685): Meta, descriptions and captions; the label colour of the /search/pro filter buttons.
• Muted (#aab4bf): The unselected hero tab label (바로예약) and short 14px captions on home.

Neutral & Surface

• White (#ffffff): The /search/pro page background (home and /pro compute a transparent body over the browser canvas), the sponsored pro cards and the 쿠폰 chip.
• Surface (#f6f7f9): The AI 견적 요청 button and the region links on home; the hover fill of the violet text action on /pro.
• Surface Gray (#eff1f5): The search fields on home and /search/pro, 이 고수의 작업 사례 더보기, the 지도 button and the 1px border of the home pro cards.
• Hairline (#e0e5eb): The 1px inset ring of unselected category chips, the border of the /search/pro filter buttons and 찜한 고수, and the round footer badges.

State fills observed on controls, not tokens

• 이 고수의 작업 사례 더보기 hovers to #e0e5eb and presses to #c7ced6.
• 찜한 고수 hovers its border to #c1cbd7, and pressed turns it light: fill #c1cbd7, label #293341, border #b9c5d2.
• Pro badges pair #e7f4ff with #103580 text.

Brand assets, not tokens

• The AI 견적 요청 button sits inside a wrapper that paints a rotating conic-gradient starting at #693bf2; it is animation, not a colour token.
• A single #0087ff line (16px / 500) appears on /pro; one occurrence is not a system colour.
• The Soomgo logo and app icon were not measured; no logo colour is claimed.

Typography

Font Family

• Live surface use: font (629 observed uses) on home and /pro, and Pretendard (255) on /search/pro, both loaded / high. font is the anonymised family name a Next.js build gives a self-hosted face, served from assets.cdn.soomgo.com/next/917a2ba/_next/static/media/; Pretendard is served from assets.cdn.soomgo.com/vite/b68ef5f/assets/. The font file 9031250013752d4b-s.p.woff2 and the Pretendard file DOS411FT.woff2 are byte-identical (the same SHA-256, 804,864 bytes each), so both templates render the same binary. The identification as Pretendard rests on the name the Vite template declares; the files' name tables were not read.
• Official distributed font assets: Pretendard is by Kil Hyung-jin (orioncactus); its LICENSE, opened on 2026-09-30, states the SIL Open Font License 1.1.
• Official product use: no Soomgo page opened this session names its typeface, so no statement of official product use is made.
• Declared only (no visible use): font Fallback (the metric-matched fallback), FontAwesome (v4.7.0 from use.fontawesome.com), lg and slick (carousel icon fonts), each with 0 observed uses.
• Unresolved: none of the observed families is unidentified.

Hierarchy

Principles

• Bold headings, semibold labels: every captured heading on home and /pro is 700; button and chip labels are 600 (large actions) or 400 to 500 (chips, header).
• Normal tracking on the Next pages: home and /pro keep letter-spacing: normal everywhere; only the older /search/pro page tightens its title (-0.5px) and one description (-0.3px).
• Generous Hangul line height: body at 16/24 and labels at 14/22.

Layout

Spacing System

• Category chips: 8px 12px padding at 32px height
• Header sign-up (home): 7px 14px padding at 36px height
• Large actions: 0px 16px padding at 52px height (0px 12px at 44px)
• Sponsored cards: 20px 24px padding
• Frequent spacing values in the capture: 4, 8, 5, 3, 16 and 12px

Grid & Container

• Home stacks a search field with the AI 견적 요청 button and two hero tabs, a row of category chips, carousels of recommended pros, a pro portfolio block, community stories, a 16-region link grid and a closing sign-up call.
• /search/pro is a list page: filters and a search field above a 630px list of sponsored and regular pro rows.
• /pro is a pro-acquisition landing with a hero call to action, 36px section headings and a FAQ.

Whitespace Philosophy

• Dense, scannable lists: pro rows, chips and counts are packed for comparison.
• Grey instead of rules: #f6f7f9 and #eff1f5 fills separate controls; hairlines are reserved for chip rings, filters and cards.

Border Radius Scale

• 0px: the default (744 of the recorded radii)
• 4px: badges, pay chips, the search field's left corners
• 6px: header sign-up buttons
• 10px: violet text action
• 12px: large actions, load more
• 15px: AI quote button
• 16px: category chips, sponsored and home pro cards
• 20.5px: app download buttons
• 22px: saved pros
• 28px: filter buttons
• 36px: region links

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured; no breakpoint value was measured.

Touch Targets

• Large actions: 52px (44px for the medium variant)
• Filter buttons: 40px; saved pros: 45px
• Search fields: 42px (home) and 44px (/search/pro)
• Header sign-up and app download buttons: 36px
• Region links: 36px
• Category chips: 32px

Collapsing Strategy

Not captured; the pages were read at desktop width only.

Image Behavior

Pro avatars and portfolio images sit flat inside cards; no image treatment was measured.

Elevation & Depth

Shadow Philosophy: 21 of the recorded elements carry a box-shadow, and most of those are the 1px inset ring that outlines a chip. Real elevation is kept for the sponsored cards that sit above the organic list.

Motion & Easing

The probe read the transitions the controls compute. The large violet actions, the violet text action and 이 고수의 작업 사례 더보기 transition background-color 0.2s ease-in-out; the home header 고수가입 transitions color, border-color, background-color 0.15s ease-in-out. On /search/pro the header button and filters transition opacity 0.2s ease-in-out, the 쿠폰 chip background-color, box-shadow 0.3s ease-in-out and the search field border-color, box-shadow 0.15s ease-in-out. Category chips, region links and the app download buttons compute transition: all 0s. The AI 견적 요청 wrapper rotates a conic-gradient continuously and its icon animates; carousels were not measured. Honour prefers-reduced-motion in any build.

Components

Buttons

Header sign-up (home)

• Background: #693bf2
• Text: #ffffff
• Border: 1px solid #693bf2
• Radius: 6px
• Padding: 7px 14px
• Height: 36px
• Font: 14px / 500 / 20px
• Hover: background #5400d7
• Pressed: background #5400d7
• States: 0.15s colour transition; focus draws only the browser default ring
• Use: 고수가입 in the home header

Header sign-up (/search/pro)

• Background: #693bf2
• Text: #ffffff
• Border: 1px solid #693bf2
• Radius: 6px
• Padding: 6.5px 0px (fixed 80px wide)
• Height: 36px
• Font: 14px / 500 / 21px Pretendard
• Hover: background #4e17f0, border #4710ea
• Pressed: background and border #5400d7
• Focus: background and border #5400d7 (real Tab)
• Use: 고수가입 in the /search/pro header

Large primary action

• Background: #693bf2
• Text: #ffffff (16px / 600 label)
• Radius: 12px
• Padding: 0px 16px
• Height: 52px
• Hover: background #6302fb
• Pressed: background #5400d7
• States: 0.2s background transition; focus draws only the browser default ring
• Use: 고수가입 near the foot of home (155 × 52); 고수 가입하기 in the /pro hero (224 × 52); 필요한 정보 보러 가기 on /pro at 143 × 44 with a 14px / 600 label

Violet text action

• Background: transparent
• Text: #693bf2 (14px / 600 label)
• Radius: 10px
• Padding: 0px 12px
• Height: 38px
• Hover: background #f6f7f9
• Pressed: background #eff1f5
• Use: 지금 가입하고 혜택 받기 on /pro

App download

• Background: #693bf2
• Text: #ffffff
• Radius: 20.5px
• Padding: 0px 16px
• Height: 36px
• Font: 12px / 500 / 36px
• States: hover and pressed unmeasured; focus draws only the browser default ring
• Use: APP STORE and PLAY STORE in every footer

AI quote

• Background: #f6f7f9
• Text: #1c242f (14px / 600 label)
• Radius: 15px
• Padding: 12px
• Height: 46px
• States: the fill never changes; the icon animates and a wrapper paints a rotating conic-gradient from #693bf2
• Use: AI 견적 요청 beside the home search field

Load more

• Background: #eff1f5
• Text: #1c242f (14px / 600 label)
• Radius: 12px
• Padding: 0px 12px
• Height: 44px
• Hover: background #e0e5eb
• Pressed: background #c7ced6
• Use: 이 고수의 작업 사례 더보기 on home

Saved pros

• Background: #293341
• Text: #ffffff (16px / 500 label)
• Border: 1px solid #e0e5eb
• Radius: 22px
• Padding: 9px 16px 10px
• Height: 45px
• Hover: border #c1cbd7
• Pressed: background #c1cbd7, label #293341, border #b9c5d2
• Focus: border #c1cbd7
• Use: 찜한 고수 on /search/pro

Filter button

• Background: transparent
• Text: #6a7685
• Border: 1px solid #e0e5eb
• Radius: 28px
• Padding: 7px 16px 9px
• Height: 40px
• Font: 16px / 400 / 24px Pretendard
• States: no change on hover, pressed or focus
• Use: 서비스 and 지역 on /search/pro

Chips & Tabs

Category chip

• Background: transparent, with a 1px inset ring #e0e5eb
• Text: #1c242f (14px / 400 / 16px label)
• Radius: 16px
• Padding: 8px 12px
• Height: 32px
• Selected: background #293341, label #ffffff, no ring
• States: no change on hover or pressed on either variant
• Use: service categories on home (헤어/메이크업, 영어 과외, 원룸/소형 이사 …). The 쿠폰 chip on /search/pro repeats the geometry on a #ffffff fill.

Region link

• Background: #f6f7f9
• Text: #693bf2 (14px / 400 label)
• Radius: 36px
• Height: 36px
• States: no change on hover or pressed
• Use: 서울, 경기, 부산 and the other regions on home

Hero tab

• Text: #1c242f selected, #aab4bf unselected (16px / 600 / 24px labels)
• Height: 48px
• Padding: 8px 4px
• Use: 견적비교 and 바로예약 under the home search

Inputs

Search field (/search/pro)

• Background: #eff1f5
• Text: #293341
• Radius: 4px 0px 0px 4px (joined to the #eff1f5 지도 button)
• Padding: 10px 16px 10px 40px
• Height: 44px
• Font: 16px / 400 / 24px Pretendard
• States: no change on hover, pressed or focus
• Use: 어떤 서비스가 필요하세요?. The home search field (집으로 사람부를 땐 숨고) is also #eff1f5, 468 × 42.

Cards & Badges

Sponsored pro card

• Background: #ffffff
• Radius: 16px
• Padding: 20px 24px
• Shadow: rgba(41, 51, 65, 0.08) 0px 4px 12px 0px, rgba(41, 51, 65, 0.06) 0px 0px 2px 0px
• Use: 630 × 148 cards at the top of the /search/pro list

Pro card (home)

• Border: 1px solid #eff1f5
• Radius: 16px
• Use: 354 × 208 recommended-pro cards in a carousel on home

Pro badge

• Background: #e7f4ff
• Text: #103580
• Radius: 4px
• Padding: 2px 4px
• Font: 12px / 500 / 18px Pretendard

Pay chip

• Background: #f1eeff
• Radius: 4px
• Padding: 3px 5px
• Use: 숨고페이 chips in the /search/pro list

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out Soomgo pages plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://soomgo.com/ ; https://soomgo.com/search/pro ; https://soomgo.com/pro ; https://soomgo.com/about ; https://soomgo.team/ ; https://soomgo.team/blog/posts/67c9270011c820757515755e ; https://soomgo.team/culture Tier 2 sources: not attempted this session; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading and success states were not captured and are not described. The app download buttons' hover and pressed states are unmeasured, not absent.

Do's and Don'ts

Do

• Use #693bf2 for primary actions, with #ffffff labels; hover to #6302fb (large actions) and press to #5400d7
• Set text in #293341 and headings in #1c242f; meta in #6a7685
• Use #f6f7f9 and #eff1f5 fills for secondary actions, search fields and region links
• Outline unselected chips with a 1px #e0e5eb ring and fill the selected one #293341 with white text
• Keep pages flat; lift only sponsored cards
• Round generously: 12px for large actions, 16px for chips and cards, 36px for region pills

Don't

• Don't use black for text; #000000 appears only as the inherited colour of buttons and the home search field, never on a captured label or paragraph
• Don't add a second saturated action colour; the one #0087ff line on /pro is not a system colour
• Don't invent focus styles on the newer pages; their controls draw only the browser default ring
• Don't render Pretendard with another face in its place
• Don't stack heavy shadows; the deepest captured shadow is 12px of 8% ink
• Don't tighten tracking on the newer pages; only the older /search/pro title does

Voice & Tone

Soomgo's voice is plain, practical and reassuring — the tone of a service that wants you to get the job done. Navigation is short verbs and nouns; promises are concrete (a pro within 48 hours, free requests); pro-facing copy speaks to growth and new customers.

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

• "집으로 사람 부를 땐, 숨고" — soomgo.com page title.
• "내 주변 고수찾기, 현재 10,000명 활동중 - 숨고, 숨은고수" — /search/pro page title.
• "필요한 사람을 찾는 일에 시간과 에너지를 낭비하지 마세요. 최대 48시간 안에 여러분이 찾는 사항에 딱! 맞는 고수를 찾아드립니다." — soomgo.com/about.
• "모두의 더 나은 삶을 위해" — soomgo.team.

Forbidden register: pressure selling, fake urgency, unexplained jargon, stacked exclamation marks.

Agent Prompt Guide

Quick Color Reference

• Primary action: #693bf2 with #ffffff labels; hover #6302fb; pressed #5400d7
• Text: #293341 default, #1c242f headings, #6a7685 meta, #aab4bf inactive
• Surfaces: #ffffff, #f6f7f9, #eff1f5; hairline #e0e5eb
• Selected chip: #293341 with white text; violet tint #f1eeff for pay chips

Example Component Prompts

• "Create a large primary action: #693bf2 background, white 16px label at weight 600, 12px radius, 0px 16px padding, 52px tall; hover #6302fb, pressed #5400d7, 0.2s background transition."
• "Build category chips: transparent background with a 1px inset ring #e0e5eb, #1c242f 14px labels, 16px radius, 8px 12px padding, 32px tall; the selected chip is #293341 with white text and no ring."
• "Create a load-more button: #eff1f5 background, #1c242f 14px / 600 label, 12px radius, 44px tall; hover #e0e5eb, pressed #c7ced6."
• "Create a sponsored pro card: white, 16px radius, 20px 24px padding, shadow rgba(41, 51, 65, 0.08) 0 4px 12px, rgba(41, 51, 65, 0.06) 0 0 2px."

Iteration Guide

1. One violet (#693bf2) for actions; everything else neutral
2. Blue-grey ink, never black
3. Grey fills before borders; the #e0e5eb ring only on chips, filters and cards
4. Pretendard, 700 headings, 600 labels
5. 12px and 16px radii for most controls; 36px pills for region links
6. Flat, except the sponsored cards

---

Governance

Known Gaps

• Contrast, text-cta. Text #693bf2 on #00000000 measures 3.51:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, category-chip. Text #1c242f on #00000000 measures 1.34:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.