coderef

Soomgo

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.
DownloadRaw
Soomgo

Build with the Soomgo look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
soomgo.com ↗
Theme
light
Typefaces
System
Sections
11
Length
5,834 words

Add it to your project

Then prompt your agent

Design System · Soomgo

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Soomgo
colors:
  primary: '#693bf2'
  on-primary: '#ffffff'
  primary-hover: '#6302fb'
  primary-pressed: '#5400d7'
  ink: '#293341'
  heading: '#1c242f'
  slate: '#6a7685'
  muted: '#aab4bf'
  white: '#ffffff'
  surface: '#f6f7f9'
  surface-gray: '#eff1f5'
  hairline: '#e0e5eb'
  purple-tint: '#f1eeff'
typography:
  display-hero:
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.38
    use: 'Hero headline on /pro, 72px line, in #ffffff'
  section-xl:
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.28
    use: 'Section headings on /pro (four instances), 46px line, in #1c242f'
  search-title:
    fontSize: 34px
    fontWeight: 500
    letterSpacing: '-0.5px'
    use: 'Page title on /search/pro (Vite template), line-height normal, in #293341'
  section-lg:
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.36
    use: 'Feature headings on /pro, 38px line, in #1c242f'
  title-lg:
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    use: The large closing heading on home (#293341) and card headings on /pro (#ffffff), 32px line
  title:
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    use: 'Section headings on home (h2 and h4), 28px line, in #1c242f'
  lead:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    use: 'Descriptions on /pro, 26px line, in #6a7685'
  body-strong:
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    use: 'List titles and hero tab labels on home, 24px line, in #1c242f or #293341'
  body:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    use: 'Document default on all three pages, 24px line, in #293341'
  label:
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.57
    use: 'Short labels on home (prices, counts, card titles), 22px line, in #1c242f'
  caption:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    use: 'Meta and secondary text on home, 22px line, in #6a7685'
  button-sm:
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    use: Header 고수가입 label on home, 20px line
  badge:
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    use: 'Pro badge on /search/pro, 18px line, in #103580'
  fine:
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    use: 'List meta on /search/pro, 18px line, in #6a7685'
rounded:
  xs: 4px
  cta: 6px
  ghost: 10px
  button: 12px
  ai: 15px
  chip: 16px
  card: 16px
  app: 20.5px
  saved: 22px
  filter: 28px
  region: 36px
spacing:
  chip-y: 8
  chip-x: 12
  cta-y: 7
  cta-x: 14
  card-y: 20
  card-x: 24
  button-x: 16
components:
  header-signup-button:
    type: button
    backgroundColor: '#693bf2'
    textColor: '#ffffff'
    border: '1px solid #693bf2'
    rounded: 6px
    padding: 7px 14px
    height: 36px
    typography: 14px / 500 / 20px Pretendard (served as the anonymised family font)
    hover: 'bg #5400d7'
    pressed: 'bg #5400d7'
    states: 'hover and pressed settle on #5400d7 after a 0.15s colour, border and background transition; focus (Tab #7) draws only the browser default ring'
    use: 고수가입 in the home header at home::[data-omd-capture="6"], 78 x 36
  search-header-signup-button:
    type: button
    backgroundColor: '#693bf2'
    textColor: '#ffffff'
    border: '1px solid #693bf2'
    rounded: 6px
    padding: 6.5px 0px
    height: 36px
    typography: 14px / 500 / 21px Pretendard
    hover: 'bg #4e17f0, border #4710ea'
    pressed: 'bg #5400d7, border #5400d7'
    focus: 'bg #5400d7, border #5400d7'
    states: 'the older /search/pro template: hover, pressed and focus read by the probe on a real Tab; the button transitions opacity 0.2s'
    use: 고수가입 in the /search/pro header at surface-2::[data-omd-capture="6"], a fixed 80 x 36 button
  primary-cta:
    type: button
    backgroundColor: '#693bf2'
    textColor: '#ffffff'
    rounded: 12px
    padding: 0px 16px
    height: 52px
    typography: 16px / 600 label (Pretendard, served as font)
    hover: 'bg #6302fb'
    pressed: 'bg #5400d7'
    states: hover and pressed settle after a 0.2s background-color transition; focus draws only the browser default ring
    use: 'Large purple actions: 고수가입 near the foot of home (155 x 52, home::[data-omd-capture="152"]) and 고수 가입하기 in the /pro hero (224 x 52); 필요한 정보 보러 가기 on /pro repeats it at 143 x 44 with 0px 12px padding and a 14px / 600 label'
  text-cta:
    type: button
    backgroundColor: transparent
    textColor: '#693bf2'
    rounded: 10px
    padding: 0px 12px
    height: 38px
    typography: 14px / 600 label
    hover: 'bg #f6f7f9'
    pressed: 'bg #eff1f5'
    states: 'hover and pressed settle after a 0.2s background-color transition; focus (Tab #24) draws only the browser default ring'
    use: 지금 가입하고 혜택 받기 on /pro at surface-3::[data-omd-capture="12"], 175 x 38
  app-download-button:
    type: button
    backgroundColor: '#693bf2'
    textColor: '#ffffff'
    rounded: 20.5px
    padding: 0px 16px
    height: 36px
    typography: 12px / 500 / 36px
    states: hover and pressed unmeasured (the pointer did not match :hover); focus draws only the browser default ring
    use: APP STORE and PLAY STORE in the footer of all three pages at home::[data-omd-capture="156"], 136 x 36 (padding 1px 16px on /search/pro)
  ai-quote-button:
    type: button
    backgroundColor: '#f6f7f9'
    textColor: '#1c242f'
    rounded: 15px
    padding: 12px
    height: 46px
    typography: 14px / 600 label
    states: 'the button''s own fill never changes; its icon animates and a wrapper paints a rotating conic-gradient that starts at #693bf2, so no settled hover or pressed value is declared; focus (Tab #21) draws only the browser default ring'
    use: AI 견적 요청 beside the home search field at home::[data-omd-capture="9"], 108 x 46
  category-chip:
    type: button
    backgroundColor: transparent
    textColor: '#1c242f'
    border: '1px inset ring #e0e5eb (box-shadow 0 0 0 1px inset)'
    rounded: 16px
    padding: 8px 12px
    height: 32px
    typography: 14px / 400 / 16px label
    selected: 'bg #293341, label #ffffff, no ring'
    states: hover and pressed show no change on either variant; focus draws only the browser default ring
    use: Service category chips on home (헤어/메이크업, 영어 과외 …) at home::[data-omd-capture="28"]; the selected chip (이사/입주 청소업체, 과외) at home::[data-omd-capture="27"]
  region-chip:
    type: button
    backgroundColor: '#f6f7f9'
    textColor: '#693bf2'
    rounded: 36px
    height: 36px
    typography: 14px / 400 label
    states: hover and pressed show no change within the probe's scope; focus not measured
    use: Region links (서울, 경기, 부산 … 16 regions) on home at home::[data-omd-capture="136"], 58 x 36 with a 36px line box
  load-more-button:
    type: button
    backgroundColor: '#eff1f5'
    textColor: '#1c242f'
    rounded: 12px
    padding: 0px 12px
    height: 44px
    typography: 14px / 600 label
    hover: 'bg #e0e5eb'
    pressed: 'bg #c7ced6'
    states: 'hover and pressed settle after a 0.2s background-color transition; focus (Tab #97) draws only the browser default ring'
    use: 이 고수의 작업 사례 더보기 under a pro's portfolio on home at home::[data-omd-capture="85"], 300 x 44
  hero-tab:
    type: tab
    textColor: '#1c242f'
    height: 48px
    padding: 8px 4px
    typography: 16px / 600 / 24px label
    selected: 'aria-selected tab label #1c242f; the unselected label is #aab4bf'
    states: selected and unselected read from rest values; the collector's tab interaction recorded the selected state
    use: 견적비교 and 바로예약 tabs under the home search at home::[data-omd-capture="10"], 192 x 48
  search-input:
    type: input
    backgroundColor: '#eff1f5'
    textColor: '#293341'
    rounded: 4px 0px 0px 4px
    padding: 10px 16px 10px 40px
    height: 44px
    typography: 16px / 400 / 24px Pretendard
    states: 'hover, pressed and focus (Tab #13) show no change within the probe''s scope (self and 3 ancestor levels), although the field declares a 0.15s border-color and box-shadow transition'
    use: '어떤 서비스가 필요하세요? search field on /search/pro at surface-2::[data-omd-capture="12"], 497 x 44, joined to a #eff1f5 지도 button on its right'
  filter-button:
    type: button
    backgroundColor: transparent
    textColor: '#6a7685'
    border: '1px solid #e0e5eb'
    rounded: 28px
    padding: 7px 16px 9px
    height: 40px
    typography: 16px / 400 / 24px Pretendard
    states: 'hover, pressed and focus (Tab #9) show no change within the probe''s scope'
    use: 서비스 and 지역 filter buttons on /search/pro at surface-2::[data-omd-capture="8"], 99 x 40
  saved-pros-button:
    type: button
    backgroundColor: '#293341'
    textColor: '#ffffff'
    border: '1px solid #e0e5eb'
    rounded: 22px
    padding: 9px 16px 10px
    height: 45px
    typography: 16px / 500 / 24px Pretendard
    hover: 'border #c1cbd7'
    pressed: 'bg #c1cbd7, label #293341, border #b9c5d2'
    focus: 'border #c1cbd7'
    states: read by the probe on /search/pro, including a real Tab
    use: 찜한 고수 on /search/pro at surface-2::[data-omd-capture="41"], 119 x 45
  ad-pro-card:
    type: card
    backgroundColor: '#ffffff'
    rounded: 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
    size: 630px x 148px
    use: Sponsored pro cards at the top of the /search/pro list at surface-2::[data-omd-capture="15"]
  pro-card:
    type: card
    border: '1px solid #eff1f5'
    rounded: 16px
    size: 354px x 208px
    use: Recommended-pro cards in a carousel on home (five captured), at home::[data-omd-capture="56"]
  pro-badge:
    type: badge
    backgroundColor: '#e7f4ff'
    textColor: '#103580'
    rounded: 4px
    padding: 2px 4px
    typography: 12px / 500 / 18px Pretendard
    use: Pro badges in the /search/pro list (18 instances), 69 x 22
  pay-chip:
    type: badge
    backgroundColor: '#f1eeff'
    rounded: 4px
    padding: 3px 5px
    use: 숨고페이 chips in the /search/pro list (23 instances); the chip's label child was not recorded, so no label colour is declared
fonts:
  roles:
    sans: Pretendard

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

Role Size Weight Line Height Tracking Observed on
Display Hero 52px 700 72px (1.38) normal /pro hero headline, #ffffff
Section XL 36px 700 46px (1.28) normal /pro section headings, #1c242f
Search Title 34px 500 normal -0.5px /search/pro page title, #293341
Section Large 28px 700 38px (1.36) normal /pro feature headings
Title Large 24px 700 32px (1.33) normal Closing heading on home, /pro card headings
Title 20px 700 28px (1.4) normal Home section headings, #1c242f
Lead 18px 400 26px (1.44) normal /pro descriptions, #6a7685
Body Strong 16px 600 24px (1.5) normal List titles, hero tab labels
Body 16px 400 24px (1.5) normal Document default, #293341
Label 14px 600 22px (1.57) normal Prices, counts, short labels
Caption 14px 400 22px (1.57) normal Meta, #6a7685
Button Small 14px 500 20px (1.43) normal Header 고수가입
Badge 12px 500 18px (1.5) normal Pro badge, #103580
Fine 12px 400 18px (1.5) normal /search/pro list meta

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

Level Treatment Use
Flat No shadow Almost every captured element
Ring rgb(224, 229, 235) 0 0 0 1px inset Unselected category chips, the 쿠폰 chip
Card rgba(41, 51, 65, 0.08) 0 4px 12px, rgba(41, 51, 65, 0.06) 0 0 2px Sponsored pro cards on /search/pro
Float rgba(28, 36, 47, 0.3) 0 4px 16px One 104 × 44 charcoal pill on home, unlabelled in the capture

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.

<!– Sources — 2026-09-30 promotion to Verified v2

  • Tokens and §4: artifacts/reference-evidence/soomgo.json (capturedAt 2026-09-30T11:08:59Z), deterministic collector, 1440x900, logged out: soomgo.com, /search/pro (recorded as /search/pro/review_count), /pro. States: fixed keyboard probe raws docs/research/2026-09-29-growth/raw/soomgo-states-{home,home-region,search,pro}.json.
  • §1, §10, §11, §12 context: soomgo.team (company page and timeline), soomgo.team/culture, the soomgo.team newsroom posts on the 2025 rebrand and the new chief executive, soomgo.com/about and the page footers, opened 2026-09-30.
  • §3: the served font files (SHA-256 comparison) and the Pretendard LICENSE on GitHub, opened 2026-09-30.
  • Personas are fictional archetypes. Interpretive readings are editorial. –>

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

States

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

State Observation
Hover / pressed (large violet actions) #693bf2 → #6302fb on hover, #5400d7 pressed, after a 0.2s transition.
Hover / pressed (home header 고수가입) #693bf2 → #5400d7 for both, after a 0.15s transition.
Hover / pressed / focus (/search/pro header 고수가입) Hover #4e17f0 with a #4710ea border; pressed and focus #5400d7.
Hover / pressed (violet text action) Transparent → #f6f7f9 hover, #eff1f5 pressed.
Hover / pressed (load more) #eff1f5 → #e0e5eb hover, #c7ced6 pressed.
Hover / pressed / focus (saved pros) Border #c1cbd7 on hover and focus; pressed fill #c1cbd7 with a #293341 label.
No change Category chips (both variants), region links, filter buttons, the 지도 button and the /search/pro search field show no hover or pressed change within the probe’s compared scope; the search field and filter buttons also show none on focus.
Selected Category chip #293341 with white text; hero tab label #1c242f against #aab4bf.
Disabled A 50 × 50 arrow button on /pro is disabled at capture and computes rgba(16, 16, 16, 0.3), beside its enabled partner.
Focus Apart from the /search/pro header button and 찜한 고수, every probed control draws only the browser default ring (outline-style: auto) or, like the /search/pro filter buttons, nothing; no authored focus style was found on home or /pro.

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.

Context Tone
Campaign line Conversational, everyday. “집으로 사람 부를 땐, 숨고”
Navigation Short and direct. “견적요청”, “고수찾기”, “둘러보기”, “인터넷가입”
Customer promise Concrete and free. “숨고는 여러분들이 도움을 필요로 하는 일을 도와줄 고수를 무료로 빠르게 찾아드려요”
Pro recruiting Growth-framed. “숨고 : 숨은고수 - 가장 빨리 새로운 고객 만나는 방법”
Actions Imperative, low-pressure. “고수 가입하기”, “지금 가입하고 혜택 받기”, “필요한 정보 보러 가기”

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.

More like Soomgo

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses