사람인 DESIGN.md

Design System Inspiration of Saramin

Overview

Visual Theme & Atmosphere

Saramin (사람인) is a Korean job platform — "대한민국 대표 커리어 플랫폼", in its own words — and the company behind it. Its corporate site describes the business as "사람중심의 기술로 사람과 기회를 연결하는 사람인" — connecting people and opportunities through people-centred technology — and lists what it runs today: the career platform Saramin itself, the developer hiring platform 점핏, the part-time matching app 동네알바, the senior hiring platform 원더풀시니어, the foreign-worker hiring service 코메이트 (KoMate), and recruitment outsourcing and consulting. It belongs to the Dau Kiwoom Group (다우키움그룹) and has a staffing and headhunting subsidiary, 사람인HS. The recent history on that page shows where the product is heading: KoMate in October 2024, an AI mock interview with an AI human in February 2025, a first non-hiring app (the dating app 비긴즈) in May 2025, and 원더풀시니어 in August 2025. Its 2026 news items are about AI agents — a "커리어 매칭 에이전트" in March 2026 and a renewed home for new graduates and interns.

The brand mark explains the colour story. Saramin's CI page says the logo's blue "I" stands for Individual, Intelligent and Interconnect, and gives the CI colours as BLUE #4876EF and GRAY #404040. The product surfaces, however, act in a brighter, more saturated blue. On saramin.co.kr the keyword search field is outlined in 2px #2d67ff on every captured page, 28 of the home job cards carry a #2d67ff border, and the global menu turns #2d67ff on hover. The list pages mark the selected sub-tab in #2d65f2 with a 2px underline. Around that blue sits a dense, orderly portal: white cards with 16px corners and 1px #d7dce5 borders, blue-black #292e41 text, a grey ladder (#373f57, #475067, #5c667b, #67738e) for labels and metadata, and small 4px badges in pale blue #eff5ff, cream #fff7d6 and grey #f4f6fa. AI features get their own treatment: the AI 검색 button is a sky-to-violet gradient pill with a cyan glow, the only glow on the page. Everything else is flat: 1,524 of the 1,528 recorded elements compute box-shadow: none.

Key Characteristics:

• A saturated action blue #2d67ff on the search field, highlighted cards and navigation hover; #2d65f2 for the selected list tab
• The CI blue #4876EF appears in the product only as the 로그인 / 회원가입 hover #4875ef
• Pretendard throughout, self-hosted as subset files, at mostly 12–16px with weight 700 for scannable labels
• Blue-black ink #292e41 and a four-step grey ladder for labels and metadata
• White 16px-radius cards with 1px #d7dce5 borders; 4px tags; a 28px search pill and a 20px AI pill
• Authored focus rings on every probed control: 2px #3157dd on the home header, 2px #003fe5 on the list pages
• Flat surfaces; the only shadows are the AI glow and one carousel arrow

Primary tasks

• Search live postings by keyword from the header search field
• Filter postings by region and see how many are open there
• Compare companies and salaries before applying to a role
• Get postings recommended to fit you instead of every listing
• Post a role and screen the applicants who answer it

Brand Narrative

Saramin's corporate introduction frames the company around two ideas: a people-centred philosophy (사람중심 철학) and artificial-intelligence technology. It says the company "leads the industry" on that basis, runs a family of hiring platforms (Saramin, 점핏, 동네알바, 원더풀시니어, 코메이트) and recruitment consulting, and aims to be the centre where people, companies and knowledge meet and grow. The corporate home puts it in three words: PEOPLE, INTELLIGENCE, CONNECT.

The CI carries the same idea. The page describes the logo as expressing "혁신과 가치의 창출, 선도 기업의 자신감", in a simple, curved Latin typeface, with the blue "I" for Individual, Intelligent and Interconnect — personalised, intelligent service that connects customers to a better tomorrow. The recent timeline turns that into products: KoMate for foreign workers (2024.10), a 민간 고용서비스 우수기관 award (2024.12), the AI mock interview with an AI human (2025.02), the dating app 비긴즈 (2025.05) and 원더풀시니어 (2025.08). Saramin also keeps a public engineering blog, 기술블로그, at saramin.github.io.

The culture page lists how people there work: agree before collaborating, give fast and specific feedback, argue hot and conclude cool, always use respectful language, think and decide from the user's side, solve before criticising. The website reads the same way: a dense portal kept calm by one action blue, blue-black text and bordered cards.

Principles

1. Match, don't just list. The brand line promises fit. UI implication: AI recommendation and AI 검색 sit in the header on every page.
2. Search first. UI implication: the keyword search field is the widest control in the header and the one outlined in #2d67ff.
3. Density with fences. UI implication: many small items, each in a bordered 16px card or a 4px badge, so the page stays scannable. (An editorial reading of the captured pages, not a Saramin statement.)
4. One blue means act or selected. UI implication: #2d67ff and #2d65f2 mark search, highlighted cards, hover and selection; greys carry everything else.
5. People-centred. "사람중심" is the company's stated philosophy. UI implication: plain labels, visible posting counts, and a focus ring on every control for keyboard users.

Personas

Personas below are fictional archetypes informed by publicly observable Saramin user segments (Korean job seekers and hiring teams), not individual people.

김민서, 26, 서울. A new graduate scanning 신입·인턴 postings every morning. Uses the region filter and AI recommendations to cut the list down to roles that fit her major.

이준호, 34, 경기. A mid-career engineer quietly exploring a move. Reads 기업·연봉 and interview reviews before applying, and values a feed he can scan without it feeling like an ad wall.

박지영, 41, 서울. An HR manager posting roles and screening applicants through 기업서비스. Needs dense, reliable controls and clear keyboard focus.

Colors

Every token below was read on 2026-09-30 from the logged-out home (saramin.co.kr/zf_user/) and two public job-list pages (지역별 and 직업별) by the deterministic collector, and states by the fixed keyboard probe. They describe Saramin's website; the Saramin app was not captured and none of its values is claimed.

Primary

• Action Blue (#2d67ff): The 2px outline of the keyword search field in the header of all three captured pages (554 × 52, 28px radius), the 1px border of 28 of the 111 home job cards, and the hover and pressed colour of the 전체메뉴 button. It is the primary because searching is the portal's primary action, present on every page in this colour, and no captured control is filled with a different blue. There is no filled primary button on the captured pages: the list page's result-count search button (#search_btn) is not rendered until a filter is chosen, so it was not measured.
• Selected Blue (#2d65f2): The label and 2px underline of the selected list tab (지역별 on the region page), and the hover and pressed label of unselected list tabs.

Interaction

• Link Hover (#4875ef): 로그인 and 회원가입 turn this colour on hover and press, one unit off the CI blue in the green channel.
• Focus Ring (#3157dd): A 2px solid outline, offset 2px, drawn on Tab by every probed control on the home header (search field, AI 검색, 전체메뉴, 기업서비스, 로그인, carousel arrow).
• Focus Ring (list pages) (#003fe5): The same 2px outline on the list-page tabs, region buttons and reset button.

Text

• Ink (#292e41): Card titles, tags, badges and region labels.
• Label (#373f57): Header controls at rest — 기업서비스, 로그인, 회원가입, 전체메뉴.
• Slate (#475067): Posting meta lines on the list pages, grey badge labels and the first segmented tab.
• Muted (#5c667b): Unselected list-tab labels.
• Muted Alt (#67738e): Card descriptions in the home greeting panel and the second segmented tab.
• Charcoal (#444444): The list-page title (h1, 32px) and the list-tab anchors themselves.

Surface & Borders

• White (#ffffff): Home job cards, the segmented tabs and the carousel arrow; the header is white.
• Surface (#f4f6fa): Grey badges, the greeting-panel link rows and the 기업서비스 hover fill.
• Tint (#eff5ff): Pale blue tags on home cards.
• Selected Tint (#f0f4ff): The selected region row in the list-page filter.
• Highlight (#fff7d6): Cream reward badges on list-page postings.
• Sky Tint (#ebfaff): The hover fill of the greeting-panel link rows, paired with a rgba(2, 198, 255, 0.3) border.
• Hairline (#d7dce5): Card borders and the 기업서비스 outline.
• Divider (#eaedf4): The greeting-link border; the header's 1px bottom line computes the same colour.

Brand assets, not tokens

• CI Blue #4876EF (RGB 72/118/239, PANTONE 2727C) and CI Gray #404040 are the logo colours given on Saramin's CI page. Neither renders as a fill, border or text colour in the captured product; the nearest rendered value is the #4875ef link hover.
• The AI 검색 gradient runs from rgb(0, 161, 248) to rgb(127, 56, 253). It is a component fill, not a colour token.

Typography

Font Family

• Live surface use: Pretendard (1,528 observed uses), loaded / high, self-hosted by Saramin as subset WOFF2 files at saraminimage.co.kr/sri/font/ (Pretendard-Bold, -SemiBold and -Regular). The body computes Pretendard, "Malgun Gothic", dotum, gulim, sans-serif; the later names are fallbacks and were not observed rendering.
• Official distributed font assets: Pretendard is an open-source Korean typeface by Kil Hyung-jin (orioncactus). Its LICENSE, opened on 2026-09-30, states the SIL Open Font License 1.1. The identification rests on the family and file names; the name tables of Saramin's subset files were not inspected.
• Official product use: no Saramin page opened this session names its typeface, so no statement of official product use is made.
• Declared only (no visible use): Roboto, loaded from Google Fonts with 0 observed uses.
• Unresolved: none of the observed families is unidentified.

Hierarchy

Principles

• One face, two weights for scanning: reading text sits at 400; labels that must be found quickly (tabs, 기업서비스, the segmented tabs, banner titles) jump to 700. The list tabs switch weight as well as colour when selected or hovered.
• Small and dense: most text is 12–16px; the largest captured text is the 32px list title, set at a regular 400 weight rather than bold.
• Tracking stays normal: no captured text sets letter-spacing.

Layout

Spacing System

• Badges: 2px 8px (home tags) and 0 6px (list badges), 24px tall
• Header 기업서비스: 0 13px padding at 32px height
• List tabs: 0 16px padding at 57px height
• Posting cards: 24px 24px 20px; home job cards 15px 23px or 23px
• Search field: 12px gap between label and icon
• Frequent spacing values in the capture: 6, 24, 8, 2, 20 and 18px

Grid & Container

• A fixed white header carries the search field, AI 검색, 로그인 / 회원가입, 기업서비스 and a global navigation row.
• Home stacks a recruiting carousel, a greeting panel of link rows, and grids of 300 × 270 job cards.
• The list pages open with the 채용정보 sub-tabs, a region filter with live counts, and a grid of posting cards.

Whitespace Philosophy

• Dense but fenced: many small items, each held in a bordered 16px card or a 4px badge.
• Flat grouping: grey #f4f6fa and blue #eff5ff fills and #d7dce5 hairlines separate content instead of shadows.

Border Radius Scale

• 0px: the default (934 of the recorded radii)
• 4px: badges and tags
• 12px: overlay badges
• 16px: cards, greeting links and the 기업서비스 outline
• 20px: the AI 검색 pill and the carousel arrow
• 28px: the search field

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured, and saramin.co.kr serves a desktop layout at that width. No breakpoint was measured.

Touch Targets

• List tabs: 57px tall
• Search field: 52px
• AI 검색: 40px; carousel arrow 40 × 40
• 기업서비스: 32px
• Region buttons: 30px
• 로그인: 24px

Collapsing Strategy

Not captured; the mobile site was not inspected.

Image Behavior

• Card imagery carries translucent rgba(0, 0, 0, 0.6) overlay badges with 12px corners; images sit flat inside 16px cards.

Elevation & Depth

Shadow Philosophy: Saramin is flat. The only shadows in the capture are the AI glow, which marks the one AI entry point, and the lift on a carousel arrow. Cards separate by border, not elevation.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.ai-glow: rgba(0, 161, 248, 0.3) 0px 0px 10px 0px
• shadow.arrow: rgba(55, 63, 87, 0.13) 0px 6px 10px 0px

Motion & Easing

Every probed Saramin control computes transition: all 0s, so its state changes are instant. The AI 검색 button carries an animated gradient ::before layer that was still moving when the probe read it; its timing was not measured. No duration or easing is specified beyond these readings.

Components

Header controls

Keyword search field (primary)

• Border: 2px solid #2d67ff
• Radius: 28px
• Size: 554 × 52px, 12px gap before the icon
• Focus: 2px solid #3157dd outline, offset 2px
• States: no hover or pressed change
• Use: 공채는 역시, 사람인 — opens the search layer on every page

AI search button

• Background: linear-gradient(89deg, rgb(0, 161, 248) 0.78%, rgb(127, 56, 253) 99.22%)
• Text: #ffffff
• Radius: 20px
• Height: 40px (86px wide)
• Font: 14px / 700 / 20px Pretendard
• Shadow: rgba(0, 161, 248, 0.3) 0px 0px 10px 0px
• Focus: 2px solid #3157dd outline, offset 2px
• States: hover and pressed unmeasured (animated gradient layer)

Menu button (전체메뉴)

• Text: #373f57
• Size: 60 × 40px
• Hover / pressed: text and icons #2d67ff
• Focus: 2px solid #3157dd outline, offset 2px, radius 4px

Service button (기업서비스)

• Background: transparent
• Text: #373f57
• Border: 1px solid #d7dce5
• Radius: 16px
• Padding: 0 13px
• Height: 32px
• Font: 13px / 700 Pretendard
• Hover / pressed: background #f4f6fa
• Focus: 2px solid #3157dd outline, offset 2px

Auth links (로그인, 회원가입)

• Text: #373f57
• Font: 14px / 400 / 24px Pretendard
• Hover / pressed: #4875ef
• Focus: 2px solid #3157dd outline, offset 2px, radius 4px

Carousel arrow

• Background: #ffffff
• Radius: 20px (40 × 40 circle)
• Shadow: rgba(55, 63, 87, 0.13) 0px 6px 10px 0px
• States: no hover or pressed change; focus ring #3157dd

Cards

Job card (home)

• Background: #ffffff
• Border: 1px solid #d7dce5
• Radius: 16px
• Padding: 15px 23px
• Size: 300 × 270px

Highlighted job card (home)

• Background: #ffffff
• Border: 1px solid #2d67ff
• Radius: 16px
• Padding: 23px
• Use: 28 of the 111 home cards; what sets them apart was not established

Posting card (list pages)

• Border: 1px solid #d7dce5
• Radius: 16px
• Padding: 24px 24px 20px
• Size: 404 × 208px (also 300 × 230)

Greeting-panel link

• Background: #f4f6fa
• Border: 1px solid #eaedf4
• Radius: 16px
• Padding: 17px 0 17px 20px
• Hover: background #ebfaff, border rgba(2, 198, 255, 0.3)

Tabs & Filters

List tab (지역별, 직업별, …)

• Text: #5c667b, 14px / 400
• Padding: 0 16px
• Height: 57px
• Selected: #2d65f2 label at 700 with a 2px #2d65f2 underline
• Hover / pressed: #2d65f2 label at 700
• Focus: 2px solid #003fe5 outline, offset 2px, radius 4px

Segmented tab

• Background: #ffffff
• Text: #475067 (first) and #67738e (second)
• Font: 20px / 700 / 28px Pretendard

Region button

• Text: #292e41
• Height: 30px
• Font: 13px / 400 / 30px Pretendard
• Selected: background #f0f4ff
• Focus: 2px solid #003fe5 outline, offset 2px
• States: hover and pressed unmeasured

Badges

Tag (home)

• Background: #eff5ff
• Text: #292e41
• Radius: 4px
• Padding: 2px 8px
• Height: 24px
• Font: 14px / 400 / 18px Pretendard

Reward badge (list pages)

• Background: #fff7d6
• Text: #292e41
• Radius: 4px
• Padding: 0 6px
• Height: 24px
• Font: 12px / 400 / 24px Pretendard

Meta badge (list pages)

• Background: #f4f6fa
• Text: #475067
• Radius: 4px
• Padding: 0 6px
• Height: 24px
• Font: 12px / 400 / 24px Pretendard

Overlay badge (home)

• Background: rgba(0, 0, 0, 0.6)
• Radius: 12px
• Padding: 2px 8px
• Height: 24px

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of saramin.co.kr plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.saramin.co.kr/zf_user/ ; https://www.saramin.co.kr/zf_user/jobs/list/domestic ; https://www.saramin.co.kr/zf_user/jobs/list/job-category ; https://www.saraminhr.co.kr/user/nd49828.do ; https://saramin.github.io/ Tier 2 sources: getdesign.md/saramin (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=saramin (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

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

The AI 검색 button's hover and pressed states and the region buttons' hover are unmeasured, not absent. Error, empty, loading and success states were not captured and are not described.

Do's and Don'ts

Do

• Outline the primary search in 2px #2d67ff and use the same blue for navigation hover
• Mark the selected tab with a #2d65f2 label at weight 700 and a 2px underline
• Keep text in #292e41 and step down through #373f57, #475067, #5c667b and #67738e
• Hold content in white 16px cards with 1px #d7dce5 borders
• Use 4px badges in #eff5ff, #fff7d6 or #f4f6fa
• Draw a 2px offset focus ring on every control

Don't

• Don't add card shadows; none of the captured cards has one
• Don't use the CI blue #4876EF as a fill; the product never does
• Don't give AI's gradient and glow to ordinary actions; only AI 검색 carries them
• Don't set the list title in bold; it is 32px at weight 400
• Don't render Pretendard with a system face in its place
• Don't use letter-spacing; no captured text sets it

Voice & Tone

Saramin's voice is practical, encouraging and matchmaking-framed: it promises the job that fits you rather than a pile of listings, and states its scale as reassurance. Copy is short and concrete; navigation and tool names are plain nouns.

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

• "나에게 딱 맞는 커리어만 매치, 사람인! | 취업, 채용, 커리어 매칭 플랫폼" — home page title.
• "공채는 역시, 사람인" — the header search field label.
• "취업 준비, 여기서 다 끝낼 수 있어요" and "1,700만명이 선택한 사람인" — home copy.
• "나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에 꼭 필요한 정보를 확인해보세요." — home og:description.
• "사람중심의 기술로 사람과 기회를 연결하는 사람인" — corporate 회사소개 page.

Forbidden register: pressure on applicants, unsupported fear of missing out, undefined recruiting jargon, stacked exclamation marks.

Agent Prompt Guide

Quick Color Reference

• Primary outline / nav hover: #2d67ff; selected tab #2d65f2
• Focus rings: #3157dd (header), #003fe5 (list pages)
• Link hover: #4875ef
• Text: #292e41, #373f57, #475067, #5c667b, #67738e, #444444
• Surfaces: #ffffff, #f4f6fa, #eff5ff, #f0f4ff, #fff7d6, #ebfaff
• Borders: #d7dce5, #eaedf4

Example Component Prompts

• "Create a header search field: transparent background on white, 2px solid #2d67ff border, 28px radius, 554 × 52, placeholder copy on the left and a search icon 12px after it; on focus draw a 2px solid #3157dd outline offset 2px."
• "Create list tabs: 14px Pretendard labels in #5c667b, 0 16px padding, 57px tall; the selected tab's label is #2d65f2 at weight 700 with a 2px #2d65f2 underline, and hovering an unselected tab does the same."
• "Build a posting card: 1px solid #d7dce5 border, 16px radius, 24px 24px 20px padding, title in #292e41, a meta line in 12px #475067, and 4px-radius badges in #fff7d6 or #f4f6fa."
• "Create an AI button: gradient from rgb(0, 161, 248) to rgb(127, 56, 253) at 89deg, white 14px / 700 label, 20px radius, 40px tall, glow rgba(0, 161, 248, 0.3) 0 0 10px."

Iteration Guide

1. #2d67ff for the primary search and navigation hover; #2d65f2 for selection
2. Pretendard only; 400 for reading, 700 for labels that must be scanned
3. White 16px cards with #d7dce5 hairlines; 4px badges
4. Blue-black #292e41 text and a grey ladder, never pure black for labels
5. Flat surfaces; the glow belongs to AI alone
6. A 2px offset focus ring on every control

---

Governance

Known Gaps

• Contrast, service-button. Text #373f57 on #00000000 measures 2.01:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.