zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/greeting/DESIGN.md

@@ -1,462 +0,0 @@
----
-id: greeting
-name: Greeting
-display_name_kr: 그리팅
-country: KR
-category: saas
-homepage: "https://www.greetinghr.com"
-primary_color: "#1890ff"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=greetinghr.com&sz=128"
-verified: "2026-06-11"
-added: "2026-06-11"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-11"
-  note: "primary = live CTA azure (#1890ff); dark CTA/ink (#0f0f0f, #171717). Deep navy stat band bg (#001946). Text on a zinc neutral ladder (#27272a→#71717a→#a1a1aa). Surfaces white/near-white with light-blue tints (#f2f9ff, #e4f0fc)."
-  colors:
-    primary: "#1890ff"
-    primary-hover: "#2c93f2"
-    primary-deep: "#0a58a1"
-    ink: "#0f0f0f"
-    ink-soft: "#171717"
-    heading: "#27272a"
-    body: "#3f3f46"
-    muted: "#71717a"
-    faint: "#a1a1aa"
-    hairline: "#e4e4e7"
-    disabled: "#d4d4d8"
-    navy: "#001946"
-    canvas: "#ffffff"
-    surface: "#fcfcfc"
-    surface-alt: "#fafafa"
-    surface-zinc: "#f4f4f5"
-    tint-blue: "#f2f9ff"
-    tint-blue-alt: "#e4f0fc"
-    success: "#4ba63d"
-    on-primary: "#ffffff"
-  typography:
-    family: { display: "Pretendard SemiBold", body: "Pretendard Regular", numeral: "Poppins" }
-    hero-accent:  { size: 60, weight: 600, lineHeight: 1.20, tracking: -0.6, use: "Hero accent word 채용 성공, Pretendard SemiBold, azure" }
-    display:      { size: 48, weight: 600, lineHeight: 1.30, tracking: -0.48, use: "Primary section headline, Pretendard SemiBold" }
-    section:      { size: 36, weight: 600, lineHeight: 1.20, tracking: -0.36, use: "Band headline, Pretendard SemiBold" }
-    feature:      { size: 28, weight: 600, lineHeight: 1.40, tracking: -0.56, use: "Feature card heading, Pretendard SemiBold" }
-    quote:        { size: 24, weight: 600, lineHeight: 1.50, tracking: -0.24, use: "Testimonial quote, Pretendard SemiBold" }
-    card-title:   { size: 20, weight: 600, lineHeight: 1.50, tracking: -0.4, use: "Product card title, Pretendard SemiBold" }
-    label:        { size: 16, weight: 600, lineHeight: 1.00, tracking: -0.16, use: "Eyebrow / badge H1-H2 labels, Pretendard SemiBold" }
-    numeral:      { size: 175, weight: 400, lineHeight: 1.00, tracking: -8.74, use: "Big stat numeral 10,000+, Poppins" }
-  spacing: { xs: 4, sm: 8, base: 12, md: 16, lg: 20, xl: 25, xxl: 48, section: 80 }
-  rounded: { sm: 4, md: 8, lg: 16, xl: 30, pill: 50 }
-  shadow:
-    none: "none"
-    card-inset: "rgba(255,255,255,0.12) 0px 0px 2px 0px inset"
-  components:
-    button-primary: { type: button, bg: "#1890ff", fg: "#ffffff", radius: "4px", padding: "5px 8px 5px 12px", height: "36px", font: "12px / 600 Pretendard", states: "hover #2c93f2", use: "Header 도입 문의 azure CTA" }
-    button-dark: { type: button, bg: "#0f0f0f", fg: "#ffffff", radius: "4px", padding: "14px 25px", height: "50px", font: "12px / 600 Pretendard", states: "hover #171717", use: "Primary dark CTA 도입 문의하기 / 견적 문의하기" }
-    button-white: { type: button, bg: "#ffffff", fg: "#171717", radius: "4px", padding: "14px 25px", height: "50px", border: "1px solid #e4e4e7", font: "12px / 600 Pretendard", use: "Secondary CTA 무료 체험하기 / 서비스 소개서 다운로드" }
-    badge-pill: { type: badge, bg: "#ffffff", fg: "#0f0f0f", radius: "50px", padding: "8px 20px", height: "32px", font: "12px / 600 Pretendard", use: "국내 1위 채용 관리 솔루션 eyebrow pill" }
-    badge-tag: { type: badge, bg: "#ffffff", fg: "#0f0f0f", radius: "6px", padding: "8px 10px", height: "30px", border: "1px solid #e4e4e7", font: "12px / 600 Pretendard", use: "Pricing feature tag 소규모 팀 추천 / 커뮤니케이션" }
-    card-product: { type: card, bg: "#fafafa", fg: "#27272a", radius: "16px", padding: "16px", use: "Hero product feature card 채용 홈페이지/다이렉트 소싱" }
-    card-zinc: { type: card, bg: "#f4f4f5", fg: "#27272a", radius: "8px", use: "Light zinc list / menu surface" }
-    card-pricing: { type: card, bg: "#001946", fg: "#ffffff", radius: "30px", shadow: "rgba(255,255,255,0.12) 0px 0px 2px 0px inset", use: "Pricing plan card on deep navy band" }
-    nav-link: { type: tab, fg: "#171717", font: "12px / 600 Pretendard", radius: "4px", padding: "18px 12px", active: "azure #1890ff text on active", use: "Top nav item 제품/솔루션/가격" }
-  components_harvested: true
----
-
-# 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
-1. Pretendard SemiBold (600) for every headline; Pretendard Regular (400) for body
-2. Azure (`#1890ff`) is the single accent — reserve it for the hero word + inquiry CTA
-3. Primary persuasion buttons are near-black (`#0f0f0f`), not colored
-4. No shadows — separate with `#fafafa` tint and `#e4e4e7` hairlines
-5. Buttons are tight 4px rectangles; cards 16px; pricing 30px
-6. Text rides the zinc ladder (`#27272a` → `#71717a` → `#a1a1aa`), never pure black
-7. 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
-
-1. **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.
-2. **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.
-3. **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.
-4. **Flat and clean.** Modern enterprise clarity beats decorative depth. *UI implication:* no shadows; separate with tint and hairlines; keep the page fast and scannable.
-5. **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.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Tier 1 live inspect (2026-06-11) via playwright getComputedStyle on https://www.greetinghr.com and /pricing:
-- Hero accent "채용 성공" — Pretendard SemiBold 60px / weight 600 / -0.6px / color rgb(24,144,255) #1890ff
-- Section headline "성과를 만드는 인재, 전략에 구애받지 말고 확보하세요" — 48px / 600 / -0.48px / rgb(23,23,23) #171717
-- Feature card H3 "지원자를 사로잡는 첫인상, 채용 홈페이지로부터" — 28px / 600 / -0.56px / rgb(39,39,42) #27272a
-- Eyebrow pill "국내 1위 채용 관리 솔루션" — white bg, 50px radius, 8px 20px padding
-- Header CTA "도입 문의" — bg rgb(24,144,255) #1890ff / radius 4px / height 36px
-- Dark CTA "도입 문의하기" / "견적 문의하기" — bg rgb(15,15,15) #0f0f0f & rgb(23,23,23) #171717 / radius 4px / 14px 25px
-- Big numeral "10,000+" — Poppins ~175px / -8.74px / white on navy rgb(0,25,70) #001946
-- Pricing card — bg navy #001946 / radius 30px / inset rim rgba(255,255,255,0.12) 0 0 2px inset
-- box-shadow: none across nav/hero/feature cards (shadowless system)
-- document.title: "그리팅 | 채용 성공을 위한, 국내 1위 채용 관리 솔루션"
-
-Token-level claims (§1-9) are sourced from this live inspection.
-
-Voice samples (§10) are verbatim from the live homepage and blog title.
-
-Brand narrative (§11): Greeting (그리팅) is operated by 두들린 (Doodlin) — confirmed via doodlin.co.kr
-(operator careers page lists [그리팅] roles). "10,000+" and "국내 1위" are from the homepage; the operator
-relationship is from the operator's own site. Specifics beyond these surfaces are general public knowledge,
-not directly quoted from a verified company statement in this turn.
-
-Personas (§13) are fictional archetypes informed by publicly observable Greeting user segments
-(Korean HR/TA teams). Names are illustrative; they do not refer to real people.
-
-Interpretive claims (e.g., "outcome over administration", "light-to-dark crescendo") are editorial readings
-connecting Greeting's observed design to its positioning, not directly sourced Greeting statements.
--->

package/.opencode/oh-my-design/web/references/grip/.verification.md

@@ -1,36 +0,0 @@
-# Grip — Verification Notes (2026-06-03)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-03
-**Method:** raw source-file fetch (homepage HTML + multiple CSS bundles from webapp-resource.grip.show CDN)
-**Sources:**
-- https://www.grip.show (homepage HTML, fetched 2026-06-03)
-- https://webapp-resource.grip.show/202606020502/_next/static/css/2caceb3098ae7b02.css (86 KB main Tailwind utility bundle)
-- https://webapp-resource.grip.show/202606020502/_next/static/css/4299887bf9e53336.css (avatar and live-ring CSS, 9.7 KB)
-- https://webapp-resource.grip.show/202606020502/_next/static/css/1f9e9658ee2b291a.css (cart page CSS, 7.5 KB)
-- https://webapp-resource.grip.show/202606020502/_next/static/css/c2bfe78c6e53a384.css (coupon drawer CSS, 3.6 KB)
-- https://webapp-resource.grip.show/202606020502/_next/static/css/3d6c6a4ea44c6c3d.css (cart item CSS, 6.2 KB)
-- https://gripcorp.co (corp/brand homepage HTML + CSS: resource-www.grip.show/_next/static/css/4ab5563284c2ce0c.css, 31 KB)
-
-### Raw samples
-- `webapp-resource.grip.show` CSS (2caceb3098ae7b02): `.bg-primary-100{background-color:#eb2b51;background-color:rgba(235,43,81,var(--tw-bg-opacity))}` — primary brand color token named `primary-100`
-- `webapp-resource.grip.show` CSS (2caceb3098ae7b02): `.bg-primary-default{background-color:#ff3c78;background-color:rgba(255,60,120,var(--tw-bg-opacity))}` — lighter primary affordance color
-- `webapp-resource.grip.show` CSS (1f9e9658ee2b291a): `button{background-color:#eb2b51;border-radius:8px;color:#fff;flex-shrink:0;font-size:16px;font-weight:600;height:50px;width:210px}` — cart checkout CTA button
-- `webapp-resource.grip.show` CSS (c2bfe78c6e53a384): `.confirm{background:#eb2b51;color:#fff;flex-shrink:0;font-size:18px;font-weight:500;height:56px}` — full-width confirm button in coupon drawer
-- `webapp-resource.grip.show` CSS (4299887bf9e53336): `.grip-avatar-new.live-border:after,.grip-avatar-new.live-border:before{background:conic-gradient(from -68deg at 65.48% 70.24%,#ff2b51 85.2474deg,#ffae8e 169.9546deg,#ff2b51 1turn)}` — live avatar ring gradient
-- `webapp-resource.grip.show` CSS (4299887bf9e53336): `:export{accentChatBooster300:#df005d;accentChatBooster200:#8314c8;accentChatBooster100:#1254b1}` — exported JS-accessible color tokens
-- `webapp-resource.grip.show` CSS (2caceb3098ae7b02): `.bg-base-100{background-color:#0e1011}` — app root background token; `.main{background-color:#0e1011}` — confirmed on main container
-- `webapp-resource.grip.show` CSS (4299887bf9e53336): `@font-face{font-family:Pretendard;src:url(…ff840cfebfb63b0c-s.p.woff2) format("woff2");font-display:swap;font-weight:45 920}` — confirms Pretendard variable font
-- `webapp-resource.grip.show` CSS (2caceb3098ae7b02): `.bg-secondary-default{background-color:#6456dc;background-color:rgba(100,86,220,var(--tw-bg-opacity))}` — secondary accent purple token
-- `gripcorp.co` CSS (4ab5563284c2ce0c): `.slogan-section{background:linear-gradient(133.59deg,#fe0189 7.85%,#ff583c 91.26%)}` and `.propose-button{background:linear-gradient(133.59deg,#fe0189 7.85%,#ff583c 91.26%);border-radius:28px;font-weight:700;font-size:16px;width:136px;height:44px}` — brand gradient CTA confirmed on corp site
-
-## Tier 2 — cross-check
-- getdesign.md/grip — 0 DESIGN.md files (page title: "grip — 0 DESIGN.md files | getdesign.md"). NOT LISTED.
-- refero ?q=Grip KR — no result (KR live commerce not indexed on refero as of 2026-06-03).
-
-## Country + regional sources
-- Country: KR; parent company GripCompany (주식회사 그립컴퍼니), registered in Korea (사업자번호 239-87-01063), HQ: 경기도 성남시 분당구 판교역로 152, 11층
-- Brand-owned regional sources (KR, ≥2):
-  1. https://www.grip.show — KR-language homepage (meta description: "영상으로 만나는 패션&라이프 쇼핑"; og:title: "1,000만이 선택한 영상 쇼핑, 그립")
-  2. https://gripcorp.co — official GripCompany global/corp page (footer: "GripCompany Co., Ltd., Republic of Korea")
-  3. https://business.grip.show — Grip 비즈니스센터 (KR seller/partner portal, linked from main nav on grip.show)