Design System Inspiration of Greeting
1. Visual Theme & Atmosphere
Greeting (그리팅) is Korea's self-described #1 recruitment-management SaaS — an applicant-tracking system (ATS) built by the operator 두들린 (Doodlin) — and its marketing surface reads like a confident, enterprise-grade B2B product that has shed the heaviness of legacy HR software. The canvas is overwhelmingly white (#ffffff) and near-white (#fcfcfc, #fafafa), with content segmented into airy full-width bands. Text rides a cool, near-neutral zinc ladder — headings in #27272a, body in #3f3f46, supporting copy fading through #71717a to #a1a1aa — which gives the page a clean, modern, slightly technical temperature rather than warm or playful. The brand's single saturated accent is a bright azure (#1890ff), reserved for the hero accent word ("채용 성공") and the primary inquiry CTA, so the eye learns to read that one blue as "the action / the promise."
Typographically the system is unmistakably Korean-product-modern: every headline and UI label runs in Pretendard SemiBold with characteristic tight negative tracking that scales with size (-0.6px at 60px, -0.48px at 48px, -0.36px at 36px, -0.56px at 28px), while body and dense UI copy fall to Pretendard Regular. The one departure is the oversized statistic numeral — "10,000+" rendered at ~175px in Poppins — a deliberate Latin-numeral flourish that lets the headline metric breathe at billboard scale. The result is a layout that feels engineered and trustworthy: bold where it persuades (SemiBold display, azure accent, giant proof numbers), quiet where it informs (Regular body on a muted zinc scale).
What distinguishes Greeting from flashier consumer fintech is its corporate restraint. Buttons are tight 4px-radius rectangles rather than pills; the primary persuasion CTA is often near-black (#0f0f0f / #171717) rather than colored, with azure held in reserve for the header inquiry button. Depth is almost entirely flat — box-shadow: none across nav, hero, and feature cards — separation comes from background shifts (white → #fafafa → deep navy #001946) and thin #e4e4e7 hairlines. The one place the system goes dramatic is the dark proof/pricing band: a deep navy (#001946) surface carrying the giant white stat numeral and the pricing plan cards (30px radius, a faint white inset rim). This light-to-dark rhythm — clean white product story, then a confident navy "by the numbers" — is the signature of the page.
Key Characteristics:
- Pretendard SemiBold for every headline/label; Pretendard Regular for body — weight + tracking carry hierarchy
- Single azure accent (
#1890ff) reserved for hero accent word and header inquiry CTA
- Near-black CTAs (
#0f0f0f / #171717) for primary persuasion buttons, azure held back
- Cool zinc neutral ladder (
#27272a → #3f3f46 → #71717a → #a1a1aa) for text hierarchy
- Tight 4px-radius rectangular buttons (corporate, not pill-y); 16px cards; 30px pricing cards
- Flat depth:
box-shadow: none; separation by background tint + #e4e4e7 hairlines
- Light-to-dark band rhythm — white product story → deep navy (
#001946) proof/pricing band
- Poppins for the oversized billboard stat numeral (10,000+) at ~175px
- Negative tracking scales with size (-0.6px at 60px down to -0.16px at 16px)
2. Color Palette & Roles
Primary
- Greeting Azure (
#1890ff): Primary brand accent and CTA color. The saturated blue on the hero accent word ("채용 성공") and the header 도입 문의 inquiry button — the system's single "action / promise" color.
- Azure Hover (
#2c93f2): Slightly lighter azure observed on interactive/hover blue surfaces.
- Deep Azure (
#0a58a1): A darker blue used for stronger blue accents and deep links.
Ink & CTA
- Ink Black (
#0f0f0f): Near-black background for the primary dark CTA buttons (도입 문의하기, 견적 문의하기) and maximum-contrast labels.
- Ink Soft (
#171717): Soft near-black for primary headings on dark CTAs and strong labels.
- Deep Navy (
#001946): The dramatic dark band background — carries the giant white stat numeral and the pricing plan cards.
Text Hierarchy (Zinc ladder)
- Heading (
#27272a): Primary feature-card and product headings.
- Body (
#3f3f46): Secondary body copy and small headings.
- Muted (
#71717a): Tertiary text, captions, metadata.
- Faint (
#a1a1aa): Lowest-emphasis labels, footnotes (e.g. "*2026년 1월 그리팅 이용 고객사").
- Disabled (
#d4d4d8): Disabled text, lowest contrast.
Neutral & Surface
- Pure White (
#ffffff): Page background, cards, text on dark/azure.
- Surface (
#fcfcfc): Near-white nav/button surface.
- Surface Alt (
#fafafa): Warm-neutral product card background.
- Surface Zinc (
#f4f4f5): Cool light zinc list / menu surface.
- Hairline (
#e4e4e7): Thin borders, dividers, card outlines — the primary separation device in the shadowless system.
- Tint Blue (
#f2f9ff): Faint blue wash for highlighted blue zones.
- Tint Blue Alt (
#e4f0fc): Slightly stronger blue tint for emphasis blocks.
Semantic
- Success Green (
#4ba63d): Positive/success accent observed on checkmarks and confirmation marks.
3. Typography Rules
Font Family
- Display / UI:
Pretendard SemiBold — used for all headlines, nav, labels, and button text at weight 600.
- Body:
Pretendard Regular — body copy and dense UI text at weight 400.
- Numeral:
Poppins — reserved for the oversized billboard statistic numeral (10,000+).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Hero Accent | Pretendard SemiBold | 60px | 600 | 72px (1.20) | -0.6px | Hero accent word "채용 성공", azure #1890ff |
| Display | Pretendard SemiBold | 48px | 600 | 62.4px (1.30) | -0.48px | Primary section headline |
| Section | Pretendard SemiBold | 36px | 600 | 43.2px (1.20) | -0.36px | Band headline |
| Feature | Pretendard SemiBold | 28px | 600 | 39.2px (1.40) | -0.56px | Feature card heading |
| Quote | Pretendard SemiBold | 24px | 600 | 36px (1.50) | -0.24px | Testimonial quote |
| Card Title | Pretendard SemiBold | 20px | 600 | 30px (1.50) | -0.4px | Product card title |
| Label / Eyebrow | Pretendard SemiBold | 16px | 600 | 16px (1.00) | -0.16px | Badge / eyebrow labels |
| Big Numeral | Poppins | ~175px | 400 | 1.00 | -8.74px | "10,000+" billboard stat |
Principles
- One family, two weights: Pretendard SemiBold (600) carries every headline and label; Pretendard Regular (400) carries body. The weight contrast is the primary hierarchy signal.
- Tracking compresses with size: -0.6px at 60px, -0.48px at 48px, -0.36px at 36px, narrowing toward -0.16px at 16px. Display compresses; small text relaxes.
- Latin numerals get Poppins: big proof statistics switch to Poppins for a confident billboard read, while Korean copy stays Pretendard.
- Tight, technical, calm: negative tracking + cool zinc color give the type an engineered, enterprise-trustworthy feel rather than a warm consumer one.
4. Component Stylings
Buttons
Azure Inquiry CTA (Primary)
- Background:
#1890ff
- Text:
#ffffff
- Radius: 4px
- Padding: 5px 8px 5px 12px
- Font: 12px Pretendard SemiBold weight 600
- Height: 36px
- Hover:
#2c93f2
- Use: Header 도입 문의 azure call-to-action — the system's single colored action
Dark CTA
- Background:
#0f0f0f
- Text:
#ffffff
- Radius: 4px
- Padding: 14px 25px
- Font: 12px Pretendard SemiBold weight 600
- Height: 50px
- Hover:
#171717
- Use: Primary persuasion buttons (도입 문의하기, 견적 문의하기)
White Secondary CTA
- Background:
#ffffff
- Text:
#171717
- Border: 1px solid
#e4e4e7
- Radius: 4px
- Padding: 14px 25px
- Font: 12px Pretendard SemiBold weight 600
- Height: 50px
- Use: Secondary actions (무료 체험하기, 서비스 소개서 다운로드)
Cards & Containers
Product Feature Card
- Background:
#fafafa
- Text:
#27272a
- Radius: 16px
- Padding: 16px
- Use: Hero product feature cards (채용 홈페이지 빌더, 다이렉트 소싱, 인재풀 구축)
Zinc List Surface
- Background:
#f4f4f5
- Text:
#27272a
- Radius: 8px
- Use: Light zinc list / menu surface and grouped tiles
Pricing Plan Card
- Background:
#001946
- Text:
#ffffff
- Radius: 30px
- Shadow:
rgba(255,255,255,0.12) 0px 0px 2px 0px inset
- Use: Pricing plan cards on the deep navy proof band
Badges
Eyebrow Pill
- Background:
#ffffff
- Text:
#0f0f0f
- Radius: 50px
- Padding: 8px 20px
- Font: 12px Pretendard SemiBold weight 600
- Height: 32px
- Use: Eyebrow pill ("국내 1위 채용 관리 솔루션")
Feature Tag
- Background:
#ffffff
- Text:
#0f0f0f
- Border: 1px solid
#e4e4e7
- Radius: 6px
- Padding: 8px 10px
- Font: 12px Pretendard SemiBold weight 600
- Height: 30px
- Use: Pricing feature tags (소규모 팀 추천, 커뮤니케이션, 캘린더 연동)
Navigation
- Background:
#ffffff
- Text:
#171717
- Font: 12px Pretendard SemiBold weight 600
- Radius: 4px (hover surface)
- Padding: 18px 12px
- Active: azure
#1890ff text on active item
- Use: Top horizontal nav (왜 그리팅인가, 제품, 솔루션, 고객 사례, 가격, 유용한 자료)
Verified: 2026-06-11 (omd:add-reference CREATE — Tier 1 live inspect)
Tier 1 sources: https://www.greetinghr.com, https://www.greetinghr.com/pricing, https://blog.greetinghr.com, https://www.doodlin.co.kr
Tier 2 sources: getdesign.md/greeting (no data) | styles.refero.design (no Greeting match — search returns Workable/other ATS, not Greeting)
Conflicts unresolved: none
5. Layout Principles
Spacing System
- Base unit: ~4px
- Scale: 4px, 8px, 12px, 16px, 20px, 25px, 48px, 80px
- Notable: CTA buttons land at 14px×25px padding (50px tall); nav links at 18px×12px
Grid & Container
- Centered single-column hero with the azure accent word as the focal anchor
- Product features arranged as a row of
#fafafa cards (16px radius)
- Sections alternate white (
#ffffff / #fcfcfc / #fafafa) full-width bands
- The proof/pricing section flips to a deep navy (
#001946) band carrying the giant Poppins numeral and 30px-radius plan cards
Whitespace Philosophy
- Breathing room over density: generous vertical rhythm (≈80px) between bands despite information-rich enterprise content.
- Flat segmentation: bands separate by background tint (white →
#fafafa → navy #001946) and #e4e4e7 hairlines, not by shadow.
- Light-to-dark crescendo: the layout builds from clean white product storytelling to a dramatic navy "by the numbers" band.
Border Radius Scale
- Small (4px): buttons — corporate, tight rectangles
- Medium (8px): zinc list/menu surfaces, eyebrow tag chips
- Large (16px): product feature cards
- XL (30px): pricing plan cards
- Pill (50px): eyebrow status pills
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat (Level 0) | No shadow | Page background, nav, hero, most feature cards |
| Tint (Level 1) | #fafafa / #f4f4f5 background shift | Card/section separation without elevation |
| Hairline (Level 2) | 1px solid #e4e4e7 border | White card/button outlines, dividers |
| Inset rim (Level 3) | rgba(255,255,255,0.12) 0px 0px 2px 0px inset | Pricing plan cards on the dark navy band |
Shadow Philosophy: Greeting is a near-shadowless system. Live inspection found box-shadow: none across the nav, hero, and feature cards. Depth and grouping are communicated through flat background tints (#fafafa, #f4f4f5) and thin #e4e4e7 hairlines rather than drop shadows. The only elevation cue is a faint white inset rim (rgba(255,255,255,0.12)) on the pricing cards, which separates them from the deep navy #001946 band without a heavy outer shadow. This keeps the enterprise UI feeling clean, fast, and modern.
7. Do's and Don'ts
Do
- Use Pretendard SemiBold (weight 600) for every headline and label
- Use Pretendard Regular (400) for body and dense UI text
- Reserve azure (
#1890ff) for the hero accent word and the header inquiry CTA — keep it the single colored action
- Use near-black (
#0f0f0f / #171717) for primary persuasion CTAs
- Keep text on the cool zinc ladder (
#27272a → #71717a → #a1a1aa)
- Use tight 4px-radius rectangular buttons — corporate, not pill-y
- Separate sections with background tint (
#fafafa) and #e4e4e7 hairlines, not shadows
- Flip to the deep navy band (
#001946) for the proof/pricing crescendo
- Apply tight negative tracking that scales with size (-0.6px at 60px)
- Use Poppins for oversized billboard statistic numerals
Don't
- Use drop shadows for elevation — Greeting is a flat, shadow-free system
- Spread azure across many elements — it dilutes the single-action signal
- Use pill-shaped (50px) radius on buttons — buttons are tight 4px rectangles
- Use warm or playful colors — the palette is cool zinc + azure
- Set headlines in a light weight — display is always SemiBold (600)
- Use pure black (
#000000) for body text — text rides the zinc ladder
- Use positive letter-spacing at display sizes — Greeting tracks tight
- Use Pretendard for the giant proof numerals — those are Poppins
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|
| Mobile | <640px | Single column, hero headline compresses, feature cards stack |
| Tablet | 640-1024px | Moderate padding, 2-up feature cards |
| Desktop | 1024-1440px | Full layout, centered hero, multi-column feature/pricing bands |
Touch Targets
- Primary CTAs at 50px height — comfortably tappable
- Header inquiry CTA at 36px height
- Nav links with 18px×12px padding within the header
Collapsing Strategy
- Hero: 60px accent word + 48px headline scale down on mobile, weight 600 maintained
- Feature card row: multi-column → stacked single column
- Pricing plan cards: side-by-side → stacked, 30px radius maintained
- Deep navy proof band: full-width treatment with the big numeral scaling down
Image Behavior
- Product screenshots carry no shadow at any size, consistent with the flat system
- Cards maintain 16px radius across breakpoints
9. Agent Prompt Guide
Quick Color Reference
- Primary accent / CTA: Greeting Azure (
#1890ff)
- Dark CTA: Ink Black (
#0f0f0f) / Ink Soft (#171717)
- Dark band: Deep Navy (
#001946)
- Heading text: Heading (
#27272a)
- Body text: Body (
#3f3f46)
- Muted text: Muted (
#71717a) / Faint (#a1a1aa)
- Background: Pure White (
#ffffff)
- Surfaces:
#fafafa, #f4f4f5
- Hairline:
#e4e4e7
- Success:
#4ba63d
Example Component Prompts
- "Create a hero on white background. Eyebrow pill: white bg, 50px radius, 8px 20px padding, 12px Pretendard SemiBold, '국내 1위 채용 관리 솔루션'. Headline 48px Pretendard SemiBold weight 600, line-height 1.30, letter-spacing -0.48px, color #171717 — with the accent word '채용 성공' at 60px in azure #1890ff."
- "Design a product feature card: #fafafa background, 16px radius, 16px padding, no shadow. Title 20px Pretendard SemiBold, letter-spacing -0.4px, #27272a. Body 12px Pretendard Regular, #3f3f46."
- "Build a CTA row: primary dark button (#0f0f0f bg, white text, 4px radius, 14px 25px padding, 12px Pretendard SemiBold) + secondary white button (#ffffff bg, #171717 text, 1px solid #e4e4e7 border, 4px radius)."
- "Create a proof band: deep navy #001946 full-width. Giant numeral '10,000+' in Poppins at 175px, white, letter-spacing -8.74px. Below, pricing plan cards: #001946 bg, 30px radius, faint white inset rim rgba(255,255,255,0.12) 0 0 2px inset."
Iteration Guide
- Pretendard SemiBold (600) for every headline; Pretendard Regular (400) for body
- Azure (
#1890ff) is the single accent — reserve it for the hero word + inquiry CTA
- Primary persuasion buttons are near-black (
#0f0f0f), not colored
- No shadows — separate with
#fafafa tint and #e4e4e7 hairlines
- Buttons are tight 4px rectangles; cards 16px; pricing 30px
- Text rides the zinc ladder (
#27272a → #71717a → #a1a1aa), never pure black
- Build to the deep navy band (
#001946) for the proof/pricing crescendo
10. Voice & Tone
Greeting's voice is confident, professional, and outcome-oriented — an enterprise HR guide that frames recruiting not as administrative drudgery but as a strategic path to "채용 성공" (recruitment success). The hero line "채용 관리를 넘어 채용 성공으로" ("Beyond recruitment management, toward recruitment success") sets the register: it positions the product above mere tooling, promising an outcome. Copy speaks to HR practitioners and talent teams as capable professionals, leaning on proof ("국내 1위", "10,000+ 기업") rather than hype, and decoding the recruiting workflow into clear, named steps (모집 → 선발, 다이렉트 소싱, 인재풀 구축).
| Context | Tone |
|---|
| Hero headline | Outcome-framed, confident. "채용 관리를 넘어 채용 성공으로." Promise over feature. |
| Proof / stats | Quietly authoritative. "국내 1위 채용 관리 솔루션", "10,000+ 기업이 그리팅과 함께합니다." |
| Feature labels | Plain and functional. "다이렉트 소싱", "인재풀 구축", "채용 홈페이지 빌더". |
| CTAs | Direct, low-pressure. "무료 체험하기", "도입 문의하기", "1:1 맞춤 상담받기". |
| Section titles | Strategy-framed. "유연한 모집 전략", "데이터 기반 운영 · 최적화". |
Voice samples (verbatim from live homepage):
- "채용 관리를 넘어 채용 성공으로" — hero headline (outcome-framed promise). (verified live 2026-06-11)
- "국내 1위 채용 관리 솔루션" — eyebrow / positioning claim. (verified live 2026-06-11)
- "성과를 만드는 인재, 전략에 구애받지 말고 확보하세요" — section headline (strategic empowerment). (verified live 2026-06-11)
Forbidden register: aggressive sales urgency, exclamation-heavy hype, undefined HR jargon left unexplained, casual/cutesy consumer tone that undercuts enterprise trust.
11. Brand Narrative
Greeting (그리팅) is the flagship product of 두들린 (Doodlin), a Korean HR-tech company building software to fix a structural pain in Korean hiring: recruiting workflows scattered across email, spreadsheets, and disconnected tools, with no system of record from sourcing through selection. Greeting consolidates that workflow into a single applicant-tracking system (ATS) — "모집부터 선발까지, 수시부터 대규모 채용까지 그리팅 하나로" (from sourcing to selection, from rolling to large-scale hiring, all in one Greeting).
The product has grown into what the company describes as Korea's #1 recruitment-management solution, with 10,000+ companies using it (per the homepage's "*2026년 1월 그리팅 이용 고객사" footnote). Its positioning thesis — "채용 관리를 넘어 채용 성공으로" — reframes the category from passive applicant-tracking into active recruiting outcomes: not just managing who applied, but helping teams source proactively (다이렉트 소싱), build talent pools (인재풀 구축), and run structured, data-driven evaluation.
What Greeting refuses, visible in its design: the heavy, dated chrome of enterprise HR legacy software (no shadow-stacked panels, no institutional gradients), and the gimmicky over-coloring of consumer apps. What it embraces: a clean white product canvas, a cool zinc type ladder, a single disciplined azure accent, and a confident navy "by the numbers" band — an enterprise tool that signals competence and trust without intimidation.
12. Principles
- Outcome over administration. The product is sold as 채용 성공 (recruitment success), not just management. UI implication: lead with outcome-framed headlines and proof metrics; keep feature lists secondary to the promise.
- Proof over hype. Authority comes from "국내 1위" and "10,000+", not exclamation marks. UI implication: give proof numbers billboard scale (Poppins 175px on the navy band); keep copy calm and declarative.
- One disciplined accent. Azure (
#1890ff) means "the action / the promise." UI implication: reserve azure for the hero accent word and the inquiry CTA; use near-black for other CTAs so the blue stays meaningful.
- Flat and clean. Modern enterprise clarity beats decorative depth. UI implication: no shadows; separate with tint and hairlines; keep the page fast and scannable.
- Decode the workflow. Recruiting is broken into clearly named, approachable steps. UI implication: label every stage plainly (모집, 다이렉트 소싱, 인재풀, 평가, 데이터 분석) so the product feels comprehensible.
13. Personas
Personas below are fictional archetypes informed by publicly observable Greeting user segments (Korean HR/talent-acquisition teams), not individual people.
박지현, 34, 서울. An in-house HR manager at a mid-size company running both rolling and large-scale hiring. Tired of tracking applicants across email and spreadsheets; values one system of record from sourcing to selection. Chose Greeting because it consolidated the whole workflow.
김도윤, 29, 경기. A talent-acquisition lead focused on proactive sourcing. Uses 다이렉트 소싱 and 인재풀 구축 to reach candidates before they apply. Appreciates that the tool makes proactive recruiting feel structured rather than ad-hoc.
이서연, 41, 서울. A people-ops leader evaluating ATS vendors for the org. Wants proof (국내 1위, 10,000+ 고객사) and a clean, trustworthy interface she can present to executives. Trusts the calm, enterprise tone over flashier competitors.
14. States
| State | Treatment |
|---|
| Empty (no candidates yet) | White canvas. Single Heading (#27272a) line explaining no applicants yet, with one azure CTA to post a job or import. No illustration clutter. |
| Empty (no talent pool) | Muted (#71717a) single line: nothing in the pool yet, plus a path to 인재풀 구축. Honest, calm. |
| Loading (list fetch) | Skeleton rows on #fafafa surface at final card dimensions, 16px radius. Flat pulse, no shadow shimmer — consistent with the shadowless system. |
| Loading (action submit) | Inline spinner within the dark CTA; previous state stays visible. |
| Error (load failed) | Inline message in Heading color with a plain-language explanation and a retry. Never a bare "오류가 발생했습니다" — states the next step. |
| Error (form validation) | Field-level message below the input describing what's valid, not just "필수". |
| Success (action complete) | Brief inline confirmation, optionally with the #4ba63d success mark; next-step linked immediately below. No celebratory excess. |
| Skeleton | #f4f4f5 / #fafafa blocks at final dimensions, 16px radius, flat pulse. |
| Disabled | Disabled text (#d4d4d8) on reduced-opacity surface; azure actions fade rather than turn grey to preserve brand read. |
15. Motion & Easing
Durations:
| Token | Value | Use |
|---|
motion-fast | 120ms | Hover, button press, focus |
motion-standard | 200ms | Card/section reveal, dropdown, menu |
motion-slow | 320ms | Page-level transitions, band reveal |
Easings:
| Token | Curve | Use |
|---|
ease-enter | cubic-bezier(0.2, 0.6, 0.25, 1) | Arriving — cards, menus, panels |
ease-exit | cubic-bezier(0.4, 0.0, 1, 1) | Dismissals |
ease-standard | cubic-bezier(0.25, 0.1, 0.25, 1) | Two-way transitions |
Motion rules: Motion is functional and quiet — consistent with the flat, clean enterprise aesthetic. Buttons respond to hover with a subtle background shift (azure #1890ff → #2c93f2, dark #0f0f0f → #171717); feature cards and bands fade-in from below at motion-standard / ease-enter. No bounce or spring — an enterprise recruiting product signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.
