그리팅 DESIGN.md

Design System Inspiration of Greeting

Overview

Visual Theme & Atmosphere

Greeting (그리팅) is the recruiting platform of 두들린 (Doodlin), a Seoul company at 테헤란로 427 whose own site states its mission as "우리는 채용의 문제를 해결하는 것이 모든 문제 해결의 시작임을 믿습니다" — solving hiring problems is where every other problem gets solved. Doodlin describes Greeting as an ATS plus TRM (talent relationship management) that helps companies "더 빠르게 채용" with a better process, and the company page counts its growth in the product's own units: 6,129 customer companies, 1.37 million applicants, 4,272 career sites and 1.05 million written evaluations as of December 2023. The marketing site now claims "10,000+ 기업이 그리팅과 함께합니다" (January 2026 customers) and frames itself as "국내 1위 채용 관리 솔루션". Its current evolution is visible in the header: an AI promotion ("그리팅 AI는 다릅니다 — 내장 AI & 외부 AI 연동 모두 가능한") opens over the home page, and the navigation groups the product into 모집 (채용 홈페이지, 인재풀 구축, 다이렉트 소싱), 관리 (공고, 지원자, 평가) and 운영 (면접 일정 조율, 지원자 연락, 채용 데이터 분석).

On greetinghr.com the brand speaks in a calm, zinc-grey Korean register. Headlines are set large in the Pretendard SemiBold face with tracking tightened to 1% of the size (-0.6px at 60px, -0.48px at 48px), in #27272a and #171717; supporting copy steps down through #71717a and #a1a1aa. One saturated colour does the pointing: azure #1890ff fills the 도입 문의 button at the end of the header on every captured page and colours the EVENT and New labels in the announcement bar above it. The heavy persuasion buttons in the page are near-black #0f0f0f or white, all 4px-radius rectangles 50px tall. The site is flat — none of the 871 recorded elements computes a box-shadow — and it switches to a dark proof band where white statistics and an oversized Poppins numeral carry the "10,000+" claim.

Key Characteristics:

• One azure action: #1890ff fills the header 도입 문의 on all three pages; hover settles on rgba(44, 147, 242, 0.8)
• Near-black #0f0f0f and white #ffffff 50px buttons with 4px radius for in-page calls to action
• Pretendard faces loaded as separate families (SemiBold, Medium, Regular), headlines tracked at -1% of their size
• A zinc text ladder: #27272a headings, #171717 section headlines and navigation, #3f3f46, #71717a, #a1a1aa
• Hover is a grey fill: navigation items and light buttons turn #f4f4f5; the dark button turns #3f3f46
• No shadows on any captured element; a white 50px-radius eyebrow pill and a 100px-radius billing switch are the only round shapes

Primary tasks

• Track applicants in one place instead of spreadsheets
• Reach out to candidates before they apply (다이렉트 소싱)
• Build a career site for open roles
• Compare the plans on /pricing before bringing the tool in
• Request a demo, a quote or a one-to-one consultation

Brand Narrative

Doodlin's company page begins with a definition: hiring is how a company fulfils its mission, and solving hiring problems lays the ground for every company to achieve its own — "우린 이 순환 고리의 가장 중요한 시작점이 채용 문제의 해결이라 믿습니다." It cites 공자's 人事萬事 to argue that the problem is old and still unsolved, and admits that the team does not yet know the single innovation that solves it.

Greeting is the product that carries that mission: an ATS and TRM for "더 빠르게 채용". The company page counts growth in product units — 6,129 customers, 1.37 million applicants, 4,272 career sites, 45,000 job posts, 1.05 million evaluations and 140,000 interviews as of December 2023 — and the marketing site now claims more than 10,000 customer companies (January 2026). Doodlin's own careers site at doodlin.co.kr is itself built on Greeting ("made with Greeting").

The current site shows where the product is heading: a header menu organised around 모집, 관리 and 운영, an AI promotion over the home page, and a sales motion built on 도입 문의, demos and consultations. The design mirrors the pitch — a single azure action, black-and-white buttons and large calm type that reads as dependable business software.

Principles

1. Hiring is the first problem. Doodlin's stated mission. UI implication: lead with outcomes (채용 성공) and proof, keep feature lists secondary.
2. Proof over hype. UI implication: give figures scale — 96px statistics and an oversized Poppins numeral — and keep the copy calm.
3. One coloured action. UI implication: azure #1890ff only on 도입 문의; in-page actions stay black and white. (An editorial reading of the captured pages.)
4. Name the workflow. UI implication: label every stage plainly (모집, 관리, 운영; 공고 관리, 평가 관리, 면접 일정 조율).
5. Flat and legible. UI implication: no shadows; grey hover fills; zinc text. (Editorial.)

Personas

Personas below are fictional archetypes informed by publicly observable Greeting user segments (Korean HR and talent-acquisition teams), not individual people.

박지현, 34, 서울. An in-house recruiter at a mid-size company running rolling and large-scale hiring. Wants one system of record from job post to offer instead of email and spreadsheets.

김도윤, 29, 경기. A talent-acquisition lead who sources proactively. Uses 인재풀 구축 and 다이렉트 소싱 to reach candidates before they apply.

이서연, 41, 서울. A people-operations lead comparing ATS vendors on /pricing. Wants proof and a clear plan table she can take to leadership.

Colors

Every token below was read on 2026-09-30 from greetinghr.com, /pricing and /why-greeting by the deterministic collector, and state values by the fixed keyboard probe. The tokens describe Greeting's public website; the Greeting app (app.greetinghr.com) sits behind a login and was not captured.

Primary

• Greeting Azure (#1890ff): The fill of 도입 문의, the action at the right end of the header on all three captured pages (97 × 36, #ffffff label; capture #10 on each page). It is the primary because it is the one coloured action the site repeats on every page, and the only saturated colour in a primary role: the announcement bar's EVENT and New labels use the same azure. The probe read its hover and pressed fill as rgba(44, 147, 242, 0.8).
• On Primary (#ffffff): The label of 도입 문의 and of the dark buttons.

Action neutrals

• Action Dark (#0f0f0f): The fill of 도입 문의하기 in the home hero and 견적 문의하기 on /pricing; the /why-greeting eyebrow pill uses it too. Hover and pressed settle on #3f3f46 with a 1px #e4e4e7 border drawn by ::after.
• Surface Soft (#fcfcfc): The fill of 무료 체험 시작 on the /pricing plan cards.
• Surface (#f4f4f5): The hover fill of navigation items and of the light and soft buttons, and the rest fill of the billing switch.
• Hairline (#e4e4e7): The 1px border the dark button paints on hover.

Text

• Heading (#27272a): The hero headline, band headlines, feature and card titles, quotes.
• Ink Soft (#171717): Section headlines, eyebrow section labels and navigation labels.
• Secondary (#3f3f46): The home h1 eyebrow and the hero 무료 체험하기 label; plan headings on /pricing.
• Muted (#71717a): The hero subline, descriptions and the footer.
• Faint (#a1a1aa): Feature descriptions, statistic captions and footer link labels.
• Plan Ink (#09090b): Plan feature lines on /pricing.
• Link (#0a58a1): Solution links on /why-greeting (아웃바운드 채용, 인바운드 채용, 수시 채용, 대규모 채용 and others).
• White (#ffffff): The page canvas (the body computes #ffffff) and text on dark and azure.

Observed but not tokens

• A second azure, #2c93f2, colours four small labels (신규 업데이트 in the header menu, one /pricing label); an orange #e07400 marks one /pricing plan label. Each is a single label, not a role.
• The proof band behind the white statistics was not recorded by the collector, so its colour is not claimed.
• The Greeting logo was not measured; no logo colour is claimed.

Typography

Font Family

• Live surface use: Framer serves Pretendard as one family per weight — Pretendard SemiBold (212 observed uses), Pretendard Medium (205), Pretendard Regular (119), Pretendard Bold (7) and Pretendard ExtraBold (6), all loaded / high — so every Pretendard element computes font-weight: 400 and the weight lives in the family name. Headlines, navigation and button labels use the SemiBold face; descriptions and statistics the Medium face; sublines and plan lines the Regular face. Poppins (2 uses) sets the two oversized numerals; Inter (4) appears in four /pricing glyphs.
• Official distributed font assets: Pretendard is by Kil Hyung-jin (orioncactus), and its LICENSE states the SIL Open Font License 1.1. Poppins is published by the Poppins Project Authors (Indian Type Foundry) under the SIL Open Font License 1.1. Both licence files were opened on 2026-09-30. The identification rests on the family names; the served files' name tables were not inspected.
• Official product use: no Greeting or Doodlin page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): Framer project fonts with 0 observed uses — Geist, General Sans, Google Sans, Hanken Grotesk, Instrument Sans, Inter Tight, Koulen, Outfit, PP Neue Montreal Medium, Pragati Narrow, Work Sans, Fragment Mono, Pretendard Black and Pretendard Light — and the Placeholder fallbacks.
• Unresolved: none of the observed families is unidentified.

Hierarchy

Principles

• Weight lives in the face: to reproduce the site, load the named Pretendard face (SemiBold for headlines, Medium for descriptions, Regular for sublines) rather than a font-weight value; with a single variable Pretendard the equivalents are 600, 500 and 400.
• Tracking at -1%: from 20px up, SemiBold headlines are tracked at about -1% of their size (-2% at 20px and 28px).
• Latin numerals get Poppins: the two proof numerals switch to Poppins while every Korean line stays Pretendard.

Layout

Spacing System

• 50px buttons: 14px vertical, 25px horizontal padding (20px on the right when an arrow icon follows)
• Header items: 18px 12px padding in 36px cells; the header demo button 5px 8px 5px 12px
• Eyebrow pills: 8px 20px
• Announcement bar: 10px 15px
• Frequent spacing values in the capture: 4, 5, 12, 10, 14, 18 and 25px

Grid & Container

• Content sits in a 1200px column (the announcement bar and header rows are 1200px wide; headline blocks 1170–1200px).
• Home runs a centred hero (eyebrow pill, 60px headline, subline, white and dark buttons), a sticky feature list beside a 702px panel, a dark proof band with statistics, quotes, and a closing band that repeats the 60px headline in white.
• /pricing sets plan cards side by side under a billing switch, then a feature comparison and an FAQ.

Whitespace Philosophy

• Large type, quiet colour: size and tracking create hierarchy; colour stays on the zinc ladder except for the one azure action.
• Flat segmentation: sections are separated by space and by the dark band, not by shadows.

Border Radius Scale

• 0px: the default (748 of the recorded radii)
• 4px: buttons and navigation items
• 6px: the promotion dialog button
• 16px: the feature panel
• 50px: eyebrow pills
• 100px: the billing switch

Responsive Behavior

Breakpoints

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

Touch Targets

• In-page buttons: 50px
• Billing switch: 49px
• Promotion dialog button: 39px
• Header demo button and navigation items: 36px
• Eyebrow pill: 32px

Collapsing Strategy

• How the pages collapse was not captured.

Image Behavior

• Product screenshots sit flat, without shadows.

Elevation & Depth

Shadow Philosophy: all 871 elements the collector recorded compute box-shadow: none. The only edge that appears is the 1px #e4e4e7 border the dark button draws on hover.

Motion & Easing

Every probed control computes transition: all 0s ease 0s, and the probe read settled values after 900ms. The collector's immediate hover and focus frames caught intermediate fills (#1d91fc at 0.96 alpha on the header button, #1d1d20 on the dark button), which shows that Framer animates these changes in script; no duration or easing was measured, so none is declared.

Components

Buttons

Header demo button (primary)

• Background: #1890ff
• Text: #ffffff
• Radius: 4px
• Padding: 5px 8px 5px 12px
• Height: 36px
• Font: 16px / 28.8px Pretendard SemiBold face
• Hover: background rgba(44, 147, 242, 0.8)
• Pressed: background rgba(44, 147, 242, 0.8)
• States: focus draws only the browser default ring
• Use: 도입 문의 in the header of all three pages

Dark button

• Background: #0f0f0f
• Text: #ffffff
• Radius: 4px
• Padding: 14px 20px 14px 25px
• Height: 50px
• Font: 16px / 16px Pretendard SemiBold face, letter-spacing -0.32px
• Hover: background #3f3f46 and a 1px solid #e4e4e7 border drawn by ::after
• Pressed: the same as hover
• States: measured on 견적 문의하기; the home hero instance was covered by the promotion dialog
• Use: 도입 문의하기 (home hero), 견적 문의하기 (/pricing); a #171717 variant sits on the lower plan card

Light button

• Background: #ffffff
• Text: #171717 (#0f0f0f on 서비스 소개서 다운로드 and 1:1 맞춤 상담받기, #3f3f46 on the hero 무료 체험하기)
• Radius: 4px
• Padding: 14px 20px 14px 25px (14px 25px without an arrow)
• Height: 50px
• Hover: background #f4f4f5, label #0f0f0f
• Pressed: the same as hover
• Use: 도입 혜택 문의하기 on /pricing and the white buttons on home; no border is drawn at rest

Soft button

• Background: #fcfcfc
• Text: #171717
• Radius: 4px
• Padding: 14px 25px
• Height: 50px
• Hover: background #f4f4f5, label #0f0f0f
• Use: 무료 체험 시작 on the /pricing plan cards

Promotion dialog button

• Background: rgba(255, 255, 255, 0.12)
• Text: #ffffff
• Radius: 6px
• Padding: 12px 16px
• Height: 39px
• Font: 15px / 600 / 15px Pretendard SemiBold, letter-spacing -0.15px
• Use: 그리팅 AX 보기 in the AI promotion dialog over home

Badges

Eyebrow pill

• Background: #ffffff
• Text: #3f3f46 (the page's h1, 16px SemiBold face)
• Radius: 50px
• Padding: 8px 20px
• Height: 32px
• Use: 국내 1위 채용 관리 솔루션 above the home hero; states unmeasured

Dark pill

• Background: #0f0f0f
• Text: #ffffff
• Radius: 50px
• Padding: 8px 20px
• Use: 왜 그리팅인가 above the /why-greeting hero

Navigation & Controls

Header navigation item

• Text: #171717
• Radius: 4px
• Padding: 18px 12px
• Height: 36px
• Font: 16px / 24px Pretendard SemiBold face
• Hover: background #f4f4f5
• Pressed: background #f4f4f5
• Use: 왜 그리팅인가, 제품, 솔루션, 고객 사례, 가격, 유용한 자료, 로그인

Billing switch

• Background: #f4f4f5
• Radius: 100px
• Padding: 6px 8px
• Height: 49px
• States: no change on hover or pressed
• Use: 월간 / 연간 (-10%) on /pricing

Announcement bar: a 1200 × 47 link row above the header on home and /why-greeting, 10px 15px padding, white 15px SemiBold text with EVENT and New labels in #1890ff 12px; its background was not recorded.

Cards

Feature panel

• Radius: 16px
• Padding: 16px
• Use: the 702 × 694 panel beside the 채용 홈페이지 빌더 list on home, transparent at rest

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of greetinghr.com plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.greetinghr.com/ ; https://www.greetinghr.com/pricing ; https://www.greetinghr.com/why-greeting ; https://www.doodlin.co.kr/ko/about ; https://blog.greetinghr.com/ Tier 2 sources: not attempted in this pass; 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.

Do's and Don'ts

Do

• Keep #1890ff for the one header action (도입 문의); hover it to rgba(44, 147, 242, 0.8)
• Use #0f0f0f and #ffffff 50px buttons with 4px radius for in-page calls to action
• Hover grey: #f4f4f5 for navigation and light buttons, #3f3f46 for the dark button
• Set headlines in the Pretendard SemiBold face with tracking near -1% of the size
• Keep text on the zinc ladder: #27272a, #171717, #3f3f46, #71717a, #a1a1aa
• Use Poppins only for oversized Latin numerals

Don't

• Don't add drop shadows; none of the 871 captured elements has one
• Don't spread azure across buttons; the in-page buttons are black and white
• Don't round buttons into pills; pills are reserved for the eyebrow labels and the billing switch
• Don't draw a border on the light buttons at rest; none was observed
• Don't invent focus styles; every probed control shows only the browser default ring
• Don't substitute another face for Pretendard or Poppins

Voice & Tone

Greeting's voice is confident and outcome-framed: it sells 채용 성공 (hiring success) rather than administration, and backs the claim with customer counts and quotes.

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

• "그리팅 | 채용 성공을 위한, 국내 1위 채용 관리 솔루션" — greetinghr.com page title.
• "채용 관리를 넘어 채용 성공으로" — home headline.
• "10,000+ 기업이 그리팅과 함께합니다" — home proof line, footnoted "*2026년 1월 그리팅 이용 고객사".
• "채용 성공을 원한다면 그리팅이어야 하는 이유" — /why-greeting title.
• "그리팅 블로그 | 채용 관리를 넘어, 채용 성공으로" — blog.greetinghr.com title.

Forbidden register: aggressive urgency, stacked exclamation marks, unexplained HR jargon, a cute consumer tone.

Agent Prompt Guide

Quick Color Reference

• Header action: #1890ff with #ffffff text; hover rgba(44, 147, 242, 0.8)
• In-page actions: #0f0f0f (hover #3f3f46 + 1px #e4e4e7 border), #ffffff and #fcfcfc (hover #f4f4f5)
• Text: #27272a headings, #171717 section heads and nav, #3f3f46, #71717a, #a1a1aa; plan lines #09090b; links #0a58a1
• Canvas: #ffffff

Example Component Prompts

• "Create a header demo button: #1890ff background, #ffffff 16px Pretendard SemiBold label, 4px radius, 5px 8px 5px 12px padding, 36px tall; hover and pressed rgba(44, 147, 242, 0.8); no shadow."
• "Create a CTA pair: a white button (#ffffff, #3f3f46 label) and a dark button (#0f0f0f, #ffffff label), both 50px tall, 4px radius, 14px 25px padding, 16px Pretendard SemiBold labels with -0.32px tracking. Dark hover #3f3f46 with a 1px #e4e4e7 inner border; white hover #f4f4f5."
• "Set a hero: white eyebrow pill (50px radius, 8px 20px padding, 16px #3f3f46 label), then a 60px Pretendard SemiBold headline with -0.6px tracking in #27272a, then a 20px Pretendard Regular subline in #71717a."

Iteration Guide

1. One azure action in the header; everything else in black, white and zinc
2. Pretendard SemiBold face for headlines, tracked at -1%
3. 4px rectangles for buttons; pills only for labels and the billing switch
4. Grey #f4f4f5 hover everywhere except the dark button
5. No shadows

---

Governance

Known Gaps

• Contrast, header-demo-button. Text #ffffff on #1890ff measures 3.24:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, promo-dialog-button. Text #ffffff on #ffffff1f measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.