oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/jkopay/DESIGN.md

@@ -0,0 +1,249 @@
+---
+id: jkopay
+name: "JKOPay"
+country: TW
+category: fintech
+homepage: "https://www.jkopay.com"
+primary_color: "#C9191D"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=jkopay.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# JKOPay
+
+Taiwan's most widely used electronic payment platform, positioning itself as a full-spectrum fintech lifestyle companion — not just a wallet, but the infrastructure for daily life.
+
+## 1. Visual Theme & Atmosphere
+
+JKOPay's visual language is built around approachable confidence: a bold JKO red on a clean white-to-light-gray canvas that reads as modern and trustworthy without the austerity of traditional banking. The interface uses a clear typographic hierarchy with PingFang TC at its core, prioritising readability for Chinese-speaking users across age groups. Card surfaces carry a subtle gradient from pure white to a warm gray (#F4F4F6), with a barely-there shadow (0 15px 30px -25px rgba(0,0,0,0.12)) that lifts them off the page without theatrical depth. Navigation adopts a frosted-glass treatment (rgba(255,255,255,0.80)) that anchors the interface without competing with content. The overall atmosphere is warm, civic, and frictionless — built for the street-level simplicity of scanning and paying in seconds.
+
+## 2. Color Palette & Roles
+
+- **Brand Red (Primary):** `#C9191D` — primary action color; CTAs, brand highlights, active states, icon fills
+- **Brand Red Hover:** `#D51B1F` — button hover state on primary CTAs
+- **Brand Red Dark:** `#851113` — pressed/active state on primary interactive elements
+- **Body Text:** `#42434A` — default text (rgb 66 67 74); high contrast on white surfaces
+- **Dark Background:** `#171718` — footer, dark-mode panel backgrounds
+- **Gray 900 / Dark Nav:** `#292F40` — section headings, heavy text on dark panels
+- **Surface / Card:** `#F4F4F6` — card backgrounds, input fill, tag backgrounds
+- **Border / Divider:** `#EDEDF1` — horizontal rules, card edges, list separators
+- **Placeholder Text:** `#B7B8C4` — input placeholder, disabled labels
+- **Blue Accent:** `#2E7DD9` — informational links, secondary highlights
+
+## 3. Typography Rules
+
+JKOPay uses a CJK-first font stack led by PingFang TC, falling back through Apple system fonts and then the Noto/Source Han family for cross-platform consistency.
+
+**Font stack:** `PingFang TC, apple-system, system-ui, BlinkMacSystemFont, pingfang-tc, aktiv-grotesk, source-han-sans-traditional, Segoe UI, Roboto, Helvetica Neue, 微軟正黑體, sans-serif`
+
+**Scale:**
+- Display / Hero: 56px (mobile) → desktop responsive
+- Heading LG-1: 50px
+- Heading LG-2: 42px
+- Heading LG-3: 36px
+- Body MD: 21.4px (custom class `text-body-md`)
+- Body SM: 18px (custom class `text-body-sm`)
+- Body SM-2: 14px
+- Body SM-1 / Caption: 13px
+- Base UI: 16px
+- Button: 17px / `font-medium` (weight 500)
+
+**Weights:** 500 (medium) for UI elements and buttons; 600 for section labels; 700 for display headlines.
+**Line-height:** `1.5` base; custom leading classes (`leading-body-sm-1`) for dense CJK text.
+
+## 4. Component Stylings
+
+### Primary CTA Button
+
+**Solid Red (Primary)**
+- Background: `#C9191D`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 12px
+- Padding: 12px 29px
+- Font: 17px / 500
+- Hover Background: `#D51B1F`
+
+**Ghost / Secondary**
+- Background: `rgba(255,255,255,0.30)`
+- Text: `#C9191D`
+- Border: 1px solid `#C9191D`
+- Radius: 9px
+- Padding: 12px 24px
+- Font: 17px / 500
+- Hover Background: `rgba(134,134,134,0.063)`
+
+### Navigation Bar
+
+**Top Nav**
+- Background: `rgba(255,255,255,0.80)`
+- Height: 64px
+- Border: 0 solid `rgba(0,0,0,0.10)`
+- Font: 16px / 500
+- Text: `#42434A`
+
+### Card
+
+**Standard Card**
+- Background: `#F4F4F6`
+- Border: 1px solid `rgba(244,244,246,0)`
+- Radius: 20px
+- Shadow: `0 15px 30px -25px rgba(0,0,0,0.12)`
+- Padding: 16px
+
+### Tag / Badge
+
+**Brand Tag**
+- Background: `#F4F4F6`
+- Text: `#C9191D`
+- Radius: 40px
+- Padding: 2px 12px
+- Font: 13px / 500
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.jkopay.com/application (homepage HTML + Next.js CSS bundle); https://www.jkopay.com/application/_next/static/css/6d42544b8623d735.css (main CSS bundle, 68 KB); https://img.jkos.com.tw/official_jkos_image/logo-red-square.svg (official brand logo SVG); https://www.jkos.com/press.html (press/brand page); https://www.jkos.com/download_app.html (download page)
+**Tier 2 sources:** getdesign.md/jkopay — NOT LISTED ("No designs found for 'jkopay'"). refero — no result for JKOPay (TW brand, not indexed).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+JKOPay's homepage uses a single-column, full-bleed section layout on mobile, expanding to a constrained max-width container (≈1280px) on desktop with generous horizontal padding (4vw on large screens). Content sections alternate between white and light-gray (#F4F4F6) backgrounds, creating a visual rhythm without hard borders. The hero section stacks headline, subtext, and dual CTAs vertically, with a background photo covering the viewport. Feature cards are arranged in a 1-column (mobile) → 2–3-column (tablet/desktop) responsive grid. CTA buttons maintain a minimum width of 194px and are centered on mobile, left-aligned on desktop.
+
+## 6. Depth & Elevation
+
+JKOPay uses a restrained, two-tier shadow system:
+
+- **Tier 0 – Flat:** No shadow; used for inline text links, tags, navigation items.
+- **Tier 1 – Card:** `0 5px 40px -20px rgba(0,0,0,0.078)` — subtle lift for brand-wrapper cards and icon containers.
+- **Tier 2 – Modal / Floating:** `0 8px 16px 0 rgba(0,0,0,0.20)` — dialogs, dropdown panels, toast notifications.
+
+The frosted-glass nav (`rgba(255,255,255,0.80)`) adds implicit elevation through translucency rather than shadow. Dark overlays use `rgba(0,0,0,0.50)` for modals and `rgba(0,0,0,0.80)` for full-screen drawers.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#C9191D` as the sole primary action color; keep all CTAs visually consistent.
+- Apply PingFang TC as the first font in the stack for CJK content rendering.
+- Maintain 12px border-radius on primary buttons and 20px on cards for brand consistency.
+- Use the frosted-glass pattern (`rgba(255,255,255,0.80)`) for sticky navigation.
+- Keep button text at 17px / 500 weight regardless of container size.
+- Use the #F4F4F6 surface for card backgrounds; never use pure white cards on white pages.
+- Maintain a minimum button width of 194px for standalone CTAs.
+- Reserve `#2E7DD9` blue strictly for informational/link contexts, not actions.
+
+### Don't
+- Never mix multiple accent colors within a single CTA row — one primary, one ghost maximum.
+- Don't use font-weight 700 for body copy; reserve bold for hero headlines only.
+- Avoid hard drop shadows deeper than Tier 2; JKOPay uses soft, spread shadows.
+- Don't change button radius per breakpoint — 12px on desktop, 9px on mobile only for the ghost variant.
+- Never use the brand red (`#C9191D`) for error states — keep error semantically distinct.
+- Avoid placing content text below 13px to maintain CJK legibility standards.
+
+## 8. Responsive Behavior
+
+JKOPay is built with Tailwind CSS and uses the breakpoints `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px). Key responsive rules:
+
+- **Hero headline:** 36px mobile → 42px sm → 50px lg
+- **Primary button padding:** `py-[12px] px-[24px]` mobile → `py-[15px] px-[86px]` sm+
+- **Card radius:** 20px mobile → 30px sm → consistent 20–24px on cards
+- **Section padding:** 16px mobile → 25px md → 40–60px sm+
+- **Grid columns:** 1-col mobile → 2-col md → 3-col lg for feature grids
+- **Nav height:** fixed `4rem` (64px) with `calc(4rem + 2px)` on sm+ for hairline border
+
+## 9. Agent Prompt Guide
+
+When building JKOPay-style UI:
+- Start with a white or `#F4F4F6` background; use `#C9191D` for all primary interactive elements.
+- Font stack must lead with `PingFang TC` for correct CJK rendering.
+- Buttons: solid red (`#C9191D`) primary + ghost (`border: #C9191D, bg: transparent`) secondary; radius 12px desktop / 9px mobile ghost.
+- Cards: `#F4F4F6` background, `20px` radius, subtle shadow `0 15px 30px -25px rgba(0,0,0,0.12)`.
+- Navigation: sticky, `rgba(255,255,255,0.80)` backdrop, 64px tall, brand-red active links.
+- Typography: 16px base, 17px buttons (medium 500), 21.4px body section text, 42–56px hero.
+- Avoid deep shadows, loud gradients, or competing accent colors — the interface stays warm and uncluttered.
+- Use `transition-timing-function: cubic-bezier(0.4,0,0.2,1)` (Tailwind's default easing) for interactive transitions.
+
+## 10. Voice & Tone
+
+**Adjectives:** Approachable, empowering, matter-of-fact.
+
+| Do | Don't |
+|---|---|
+| Use everyday Mandarin; keep sentences short and action-oriented | Use banking jargon or formal register |
+| Lead with user benefit ("解鎖生活" — unlock life) | Lead with product features or technical specs |
+| Use "你" (you) to address users directly | Use passive constructions or impersonal phrasing |
+| Be warm but efficient — one idea per sentence | Over-explain or add hedging language |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "不止支付，用手機聰明解鎖生活每一刻。" (More than payment — smartly unlock every moment of life with your phone.)
+- *Illustrative:* "結帳只要出示個人條碼，輕鬆完成付款。" (Just show your barcode to complete payment — done in seconds.)
+- *Illustrative:* "從早餐到晚餐，從捷運到便利商店，街口陪你走過每一個生活場景。" (From breakfast to dinner, from the MRT to the convenience store — JKO is with you at every moment of life.)
+
+## 11. Brand Narrative
+
+JKOPay (街口支付) was born from a simple frustration: in 2015, cash still dominated Taiwan's street economy despite the country's technological sophistication. Kevin Hu, returning from Wall Street where he had worked as a hedge fund analyst, saw what mobile-first payment infrastructure had done in China and believed Taiwan deserved the same. With backing from the JKO Network ecosystem his family had built, he launched JKOPay with a mandate not of profit maximisation but of societal utility — "For me, the value of entrepreneurship lies in whether it makes people's lives more convenient."
+
+The name itself — 街口 (jiē kǒu), meaning "street corner" or "intersection" — embeds the brand's core promise into its identity. JKOPay is not a bank app or a tech platform; it is the infrastructure of the everyday corner, the moment where daily life meets commerce. The brand grew by befriending the merchants others ignored: night market vendors, small-town convenience stores, neighbourhood restaurants. By 2023, JKOPay had become Taiwan's largest e-wallet by both user count and transaction volume, handling everything from QR-code payments and P2P transfers to insurance, investment, and hospital registration.
+
+The brand's evolution reflects this ambition. The tagline shifted from the utilitarian "掃碼行動支付" (scan-code mobile payment) to the expansive "不止支付" (more than payment) — acknowledging that the product had outgrown any single category. JKOPay envisions itself as Taiwan's answer to an integrated fintech super-app: accessible enough for a grandmother at the wet market, sophisticated enough for the daily investor checking their Tuofu Bao savings account.
+
+## 12. Principles
+
+1. **Convenience is the product.** The interface must remove friction at every touchpoint — one tap to pay, one scan to complete. *UI implication:* Primary CTA is always above the fold; payment codes load instantly with no intermediate loading state displayed to the user.
+
+2. **Inclusive by design.** Taiwan's market spans every age and digital literacy level. Design must work for both the tech-native university student and the sixty-year-old market vendor. *UI implication:* Minimum touch targets of 48px; large body text (18–21px) for key transactional content; avoid icon-only navigation labels.
+
+3. **Trust is earned through transparency.** The brand grew in a conservative financial culture; clarity and directness are non-negotiable. *UI implication:* All fees, limits, and state changes must be surfaced proactively; no buried fine print. Success and error states are unambiguous.
+
+4. **The street corner, not the boardroom.** JKOPay's voice and visual language stay close to street-level Taiwan, not aspirational finance. *UI implication:* Photography shows real urban Taiwan — convenience stores, wet markets, MRT stations, not abstract lifestyle imagery. Typography favors clarity over elegance.
+
+5. **Ecosystem over transaction.** Every payment is an entry point to a broader financial life. *UI implication:* Post-payment screens offer relevant next actions (savings, cashback, merchant discovery) rather than a dead-end confirmation.
+
+## 13. Personas
+
+*Illustrative — representative archetypes based on JKOPay's stated market position and public user research.*
+
+**Illustrative Persona 1 — The Urban Commuter (小美, 28)**
+A Taipei office worker who uses JKOPay for her morning coffee, MRT top-up, lunch delivery, and monthly utility bills. She values speed above all — she wants to pay and move on. She checks her cashback balance weekly and responds to in-app promotions for brands she already uses.
+
+**Illustrative Persona 2 — The Night Market Merchant (阿伯, 55)**
+A second-generation stall owner who adopted JKOPay when his regular customers started asking. He only needs the merchant QR code scan flow and weekly withdrawal. His design requirement: no clutter, large text, and a reliable receipt confirmation he can show customers.
+
+**Illustrative Persona 3 — The Student Saver (志豪, 22)**
+A university student who uses JKOPay for peer transfers ("找錢"), splitting meals with friends, and exploring JKOPay's Tuofu Bao micro-savings. He discovered the app because it offered the best cashback at FamilyMart. He is price-sensitive and motivated by gamified rewards.
+
+**Illustrative Persona 4 — The SME Owner (雅雯, 42)**
+A small business owner who integrated JKOPay for her e-commerce checkout and physical pop-up stalls. She needs the merchant dashboard for reconciliation and values JKOPay's broad customer reach (6 million+ users) as a marketing channel.
+
+## 14. States
+
+- **Empty:** Illustration of a QR code scanner with the prompt "尚無交易記錄" (No transactions yet) and a single primary CTA to make the first payment.
+- **Loading — Scan:** Animated concentric red rings pulse from the QR code centre; no spinner, motion stays within the barcode boundary.
+- **Loading — Page:** Full-page skeleton with `#F4F4F6` shimmer bars replacing content blocks; nav and footer remain visible.
+- **Error — Payment Failed:** Red-bordered inline alert banner (`#C9191D` left border, `#FFEEEB` background) with clear message and a retry CTA.
+- **Error — Network:** Toast notification with `rgba(0,0,0,0.80)` dark background, white text, auto-dismisses after 4 seconds.
+- **Success — Payment:** Full-screen confirmation with a bold checkmark icon in `#C9191D`, transaction amount, merchant name, and a "返回首頁" (Back to home) secondary link.
+- **Skeleton:** Card skeletons use `#F4F4F6` base with a linear-gradient shimmer; maintains same height and radius as real cards.
+- **Disabled:** Buttons drop to `rgba(201,25,29,0.40)` (60% opacity red) and `cursor: not-allowed`; text remains white for legibility.
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (hover, focus ring): 150ms
+- Standard (page transitions, modals): 250ms
+- Expressive (QR scan animation, hero entrance): 800ms
+
+**Easing:**
+- Default interactive: `cubic-bezier(0.4, 0, 0.2, 1)` (Tailwind `ease-in-out` / Material standard)
+- Entry (elements appearing): `ease-in` — `cubic-bezier(0.0, 0, 0.2, 1)`
+- Exit (elements disappearing): `ease-out` 150ms
+
+**Rules:**
+- All interactive state changes (hover, focus, active) use the 150–200ms micro duration.
+- Modal overlays fade in at 250ms `ease-in`; fade out at 250ms with visibility transition at 100ms `ease-in` offset.
+- Page-level transforms (scroll-triggered reveals) use 800ms with AOS (animate-on-scroll) library.
+- Never animate layout shifts — only opacity and transform changes.
+- QR code scan pulse uses `transition: transform 0.8s` on concentric circles.

package/web/references/jobkorea/DESIGN.md

@@ -0,0 +1,310 @@
+---
+id: jobkorea
+name: "JobKorea"
+country: KR
+category: consumer-tech
+homepage: "https://www.jobkorea.co.kr"
+primary_color: "#083ccc"
+logo:
+  type: favicon
+  slug: "https://www.jobkorea.co.kr/display/images/favicon.png"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# JobKorea
+
+South Korea's leading AI career platform connecting 9+ million active job seekers with employers through personalized matching, salary intelligence, and community-driven career guidance.
+
+## 1. Visual Theme & Atmosphere
+
+JobKorea's visual language is confident and data-forward — the UI is built around a deep royal blue (`#083ccc`, JK Blue 600) that signals authority and trust in a crowded recruitment market. Surfaces stay crisp white with an understated gray-scale hierarchy (`#f6f7f8` background through `#1a1a1e` near-black) so that job listings and CTA buttons read at a glance without fatigue. An accent orange (`#ff6d12`, AM Orange 500) is reserved sparingly for urgency cues — deadline badges, highlighted pay rates — creating a clear urgency hierarchy without overwhelming the functional tone. Since the 2023 "Dreammark" brand refresh the product has leaned into a more youthful, mobile-first energy with pill-radius search bars (border-radius: 999px), gradient-glowing AI search inputs, and subtle card elevation — moving away from its legacy portal feel toward a modern career-management platform.
+
+## 2. Color Palette & Roles
+
+- **JK Blue 600 (Primary):** `#083ccc` — primary CTAs, active states, links, focus rings
+- **JK Blue 500:** `#1b55f6` — hover surfaces, secondary brand tint
+- **JK Blue 400:** `#4c7afb` — lighter interactive states, selected chip backgrounds
+- **JK Blue 50:** `#f0f2fa` — brand-tinted backgrounds, pill tag fills
+- **AM Orange 500 (Point):** `#ff6d12` — urgency badges, deadline labels, job-ad highlights
+- **Gray 950 (Near-Black):** `#1a1a1e` — primary body text, headings
+- **Gray 900:** `#292c32` — secondary text, card content
+- **Gray 700:** `#575f6c` — tertiary labels, meta information
+- **Gray 500:** `#949ba8` — placeholder text, disabled labels
+- **Gray 100:** `#e6e8ea` — dividers, default input borders
+- **Gray 50:** `#f6f7f8` — page background, search bar fill
+- **Red 500 (Error):** `#fc3b3b` — form errors, destructive indicators
+- **Green 500 (Success):** `#0dbc7c` — application success, offer received
+- **Base White:** `#ffffff` — card surfaces, modal backgrounds
+
+## 3. Typography Rules
+
+JobKorea's UI type is set exclusively in **Pretendard**, with Korean fallbacks to Apple SD Gothic Neo and Malgun Gothic. The type scale is named by variant with an embedded px size.
+
+| Role | Token | Size / Line-height | Weight |
+|---|---|---|---|
+| Display 1 | d1-48 | 48px / 64px | 700 |
+| Display 2 | d2-36 | 36px / 48px | 700 |
+| H1 | h1-32 | 32px / 42px | 700 |
+| H2 | h2-28 | 28px / 34px | 700 |
+| H3 | h3-24 | 24px / 32px | 700 |
+| H4 | h4-20 | 20px / 28px | 600 |
+| H5 | h5-18 | 18px / 24px | 600 |
+| Body 1 | b1-17 | 17px / 25px | 400 |
+| Body 2 | b2-16 | 16px / 24px | 400 |
+| Body 3 | b3-15 | 15px / 22px | 400 |
+| Body 4 | b4-14 | 14px / 20px | 400 |
+| Caption 1 | c1-13 | 13px / 18px | 400 |
+| Caption 2 | c2-12 | 12px / 17px | 400 |
+| Caption 3 | c3-11 | 11px / 15px | 400 |
+
+Heading tokens carry `letter-spacing: -0.5` for tighter display. Body and caption tokens use `letter-spacing: 0`.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (size-48)**
+- Background: `#083ccc`
+- Text: `#ffffff`
+- Height: 48px
+- Radius: 10px
+- Font: 16px / 700
+- Padding: 0 16px
+
+**Primary Hover**
+- Background: `#012ca2`
+- Text: `#ffffff`
+- Height: 48px
+- Radius: 10px
+- Font: 16px / 700
+
+**Secondary Outlined (size-48)**
+- Background: `#ffffff`
+- Text: `#1a1a1e`
+- Border: 1px solid `#d5d8dc`
+- Height: 48px
+- Radius: 10px
+- Font: 16px / 400
+
+**Disabled Filled**
+- Background: `#d5d8dc`
+- Text: `#949ba8`
+- Height: 48px
+- Radius: 10px
+- Font: 16px / 400
+
+**Small (size-40)**
+- Background: `#083ccc`
+- Text: `#ffffff`
+- Height: 40px
+- Radius: 10px
+- Font: 14px / 700
+
+**Ghost Text Button**
+- Background: `#f6f7f8`
+- Text: `#083ccc`
+- Height: 40px
+- Radius: 10px
+- Font: 14px / 500
+
+### Text Fields
+
+**Default (size-52)**
+- Background: `#ffffff`
+- Border: 1px solid `#e6e8ea`
+- Radius: 10px
+- Padding: 0 16px
+- Height: 52px
+- Font: 15px / 400
+
+**Focused**
+- Background: `#ffffff`
+- Border: 1px solid `#1a1a1e`
+- Radius: 10px
+- Height: 52px
+- Font: 15px / 400
+
+**Error**
+- Background: `#ffffff`
+- Border: 1px solid `#f11e1e`
+- Radius: 10px
+- Height: 52px
+- Font: 15px / 400
+
+**Disabled**
+- Background: `#f6f7f8`
+- Border: 1px solid `#e6e8ea`
+- Radius: 10px
+- Height: 52px
+- Font: 15px / 400
+
+### Search Bar
+
+**AI Search (pill)**
+- Background: `#f6f7f8`
+- Border: 1px solid gradient (animated pink → amber → blue)
+- Radius: 999px
+- Height: 48px
+- Padding: 0 16px
+- Font: 15px / 400
+
+**Standard Search**
+- Background: `#f6f7f8`
+- Radius: 999px
+- Height: 48px
+- Padding: 0 16px
+- Font: 15px / 400
+
+### Job Cards
+
+**Default Card**
+- Background: `#ffffff`
+- Border: 1px solid `#e6e8ea`
+- Radius: 10px
+- Padding: 16px
+
+**Elevated Card**
+- Background: `#ffffff`
+- Radius: 12px
+- Padding: 16px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.jobkorea.co.kr (homepage HTML), https://fe-static-cdn.jobkorea.co.kr/display/web/_next/static/css/ff9addcaa74e70a7.css (main CSS bundle with full token system), https://fe-static-cdn.jobkorea.co.kr/display/web/_next/static/css/fd29aacb4b8b02e0.css, https://fe-static-cdn.jobkorea.co.kr/display/web/_next/static/css/fa90ad3a5df82bc3.css, https://www.jobkorea.co.kr/company/1517115 (Worxphere/JobKorea company page)
+**Tier 2 sources:** getdesign.md/jobkorea — NOT LISTED (no data). refero — no results for JobKorea.
+**Conflicts unresolved:** The 2023 Sodiumpartners rebrand narrative describes "JOBKOREA Black" as the primary brand color, but the live CSS token system (`data-brand-theme=jk`) clearly maps `--themecolor-brand-primary` to `--color-jkblue-600` (#083ccc). The deep blue is used for all primary buttons and interactive states in the current production build; the near-black (#1a1a1e) functions as the primary text color, not the brand color.
+
+## 5. Layout Principles
+
+JobKorea uses a single max-width content container of **1024px** on desktop, centering all content with full-bleed section backgrounds. The page has two primary breakpoints: mobile-first (≤600px) and desktop (≥1024px), with no intermediate tablet breakpoint declared. Job listing grids use CSS grid or flex with 8px base spacing unit (multiples: 4, 8, 12, 16, 20, 24, 32, 40, 48px). Navigation is sticky with a white background and bottom divider. The GNB maintains a fixed height and collapses into a hamburger on mobile.
+
+## 6. Depth & Elevation
+
+JobKorea's elevation system has four named shadow levels:
+
+- **List shadow** (subtle rows): `0 4px 8px rgba(0,0,0,0.02)` — used on list items
+- **Secondary shadow** (card rest): `0 4px 16px rgba(0,0,0,0.07)` — default card state
+- **Default shadow** (interactive card): `0 4px 16px rgba(0,0,0,0.12)` — hovered cards, modals
+- **Up shadow** (bottom sheet): `0 -2px 12px rgba(0,0,0,0.12)` — bottom sheet, sticky CTAs
+- **Button Big shadow**: `0 0 12px rgba(0,0,0,0.20)` — large floating action buttons
+
+Modals use a `rgba(0,0,0,0.6)` dimmer overlay. Tooltips use `#1a1a1ed9` (85% near-black) background.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use JK Blue 600 (`#083ccc`) for all primary interactive elements — buttons, active tabs, checked states
+- Apply Pretendard at the specified weight/size tokens; never mix ad-hoc font sizes outside the named scale
+- Use pill-radius (999px) for search inputs and tag chips; use 10px radius for cards and form controls
+- Reserve AM Orange (`#ff6d12`) strictly for urgency signals — deadline countdowns, urgent-hire badges
+- Keep body copy at Gray 950 (`#1a1a1e`) on white; use Gray 700 (`#575f6c`) for secondary metadata
+- Use `0 4px 16px rgba(0,0,0,0.12)` elevation for interactive cards; flat (no shadow) for static content
+- Provide skeleton loaders matching the exact card height/radius before content loads
+
+### Don't
+- Don't use AM Orange for primary buttons or general interactive states — it belongs to AlbaMon's brand
+- Don't apply the gradient search border animation to non-AI-powered inputs; it signals AI capability
+- Don't use border-radius values outside the token set (avoid ad-hoc 5px, 15px, 20px)
+- Don't place body text below Gray 700 (`#575f6c`) on white — fails WCAG AA at small sizes
+- Don't stack more than two elevation levels in the same scroll context (list + modal is fine; list + card + modal is not)
+- Don't use the gray-950 near-black (#1a1a1e) as a button background except for the "inverse" button variant
+
+## 8. Responsive Behavior
+
+JobKorea is a mobile-first Next.js application (React server components). Below 600px the layout shifts to single-column with full-width cards; the search bar transitions from 600px fixed-width to fluid 100%. Navigation collapses from a full horizontal GNB to a bottom tab bar on mobile. The 1024px container clamps on desktop. Font sizes scale down one step at mobile: Display tokens are avoided; H3 (24px) is the largest practical heading. Button heights prefer the 48px variant on desktop, 40px on mobile for comfortable touch targets.
+
+## 9. Agent Prompt Guide
+
+When building JobKorea-style UI:
+- Scaffold the layout with a max-width 1024px centered container, background `#f6f7f8`
+- Primary button: background `#083ccc`, text `#ffffff`, height 48px, border-radius 10px, font-weight 700, font-size 16px (Pretendard)
+- Secondary button: border 1px solid `#d5d8dc`, background `#ffffff`, same radius/height
+- Input field: border 1px solid `#e6e8ea`, background `#ffffff`, height 52px, radius 10px, 16px padding, placeholder color `#949ba8`
+- Search pill: background `#f6f7f8`, radius 999px, height 48px
+- Card: background `#ffffff`, border 1px solid `#e6e8ea`, radius 10px, padding 16px, shadow `0 4px 16px rgba(0,0,0,0.12)` on hover
+- Body text: `#1a1a1e` (primary), `#575f6c` (secondary), `#949ba8` (placeholder)
+- Error text/border: `#fc3b3b`; Success: `#0dbc7c`; Urgency badge: `#ff6d12` background
+
+## 10. Voice & Tone
+
+JobKorea's voice is **direct, encouraging, and data-grounded** — it speaks like a well-informed career advisor who respects the user's time.
+
+| Do | Don't |
+|---|---|
+| Lead with concrete benefit ("AI가 맞춤 공고 5개를 찾았어요") | Vague aspiration without specificity ("당신의 꿈을 펼치세요") |
+| Use short, active sentences in informal Korean (-해요 register) | Jargon-heavy HR speak ("핵심 역량 기반 매칭 알고리즘") |
+| Acknowledge the user's current situation before offering next step | Jump straight to a CTA without context |
+| State numbers — application rates, salary percentiles, recruiter views | Use superlatives without proof ("최고의", "가장 좋은") |
+
+Voice samples (illustrative):
+- *"지난주보다 지원자가 30% 늘었어요. 지금 지원하면 더 눈에 띌 수 있어요."*
+- *"딱 맞는 공고 3개가 생겼어요. 한번 확인해볼까요?"*
+- *"이력서를 업데이트하면 채용담당자에게 더 잘 보여요. 5분이면 충분해요."*
+
+## 11. Brand Narrative
+
+JobKorea was established in 1996 and launched its employment portal in 1998 as one of Korea's first dedicated online job boards. Over nearly three decades it grew into the nation's largest HR platform — now part of the Worxphere group — hosting 9.32 million active resumes and connecting approximately one million monthly active job seekers with employers across every industry and region.
+
+In 2023, JobKorea unveiled its "Dreammark" brand identity, created by branding agency Sodiumpartners. The refresh moved the platform's narrative from a utilitarian job-listing site toward a personalized career manager, with a bold JK Blue identity system and a new brand mascot "Jobko" that embodies the mission: guiding people toward jobs that fit their real selves. The company articulates its purpose as making "people's dreams become jobs, and companies' jobs become dreams," with a social-responsibility dimension — donating 100 KRW per submitted resume and per job posting to welfare programs for people with disabilities and economically marginalized youth.
+
+Today, Worxphere operates JobKorea alongside AlbaMon (part-time), GameJob, NineHire (ATS), and JobPlanet (employer reviews), building toward a full-stack AI HR tech platform. The platform has ranked #1 in Korean employment portal brand power (K-BPI) for three consecutive years (2023–2025), and its AI-powered "LOOP AI" recommendation engine now powers the core job-discovery experience on both web and mobile.
+
+## 12. Principles
+
+1. **Personalization over volume.** JobKorea surfaces fewer, better-matched opportunities rather than an overwhelming list. *UI implication:* The default job feed shows AI-ranked picks, not raw chronological listings; chip filters and saved preferences shape what the user sees from the first visit.*
+
+2. **Transparency builds trust.** Salary data, recruiter view counts, application-to-hire ratios, and company reviews are surfaced inline on job cards — not behind a paywall. *UI implication:* Job cards include a salary indicator and a "N명 지원" (N applied) count next to the title.*
+
+3. **Speed respects the user.** A resume can be submitted in two taps from a job card; the full application flow targets under 60 seconds. *UI implication:* Destructive or multi-step actions require confirmation, but forward-direction actions — apply, save, share — are single-tap with immediate feedback.*
+
+4. **Data earns the right to advise.** JobKorea uses behavioral signals (viewed jobs, resume completeness, location) before making AI recommendations, never cold. *UI implication:* Empty states prompt profile completion rather than showing random content; progress indicators show how close the user is to unlocking personalized matches.*
+
+5. **Inclusive access.** The platform serves job seekers at every career stage — new graduates, mid-career transitioners, seniors, and part-timers — with differentiated content lanes rather than a one-size feed. *UI implication:* Specialized channels (IT, Design, Senior, Startup) are surfaced in persistent GNB tabs and not buried in filter menus.*
+
+## 13. Personas
+
+*Illustrative — not based on published JobKorea research.*
+
+**신입 취준생 (First-time Graduate)** — 24, finishes university in February, applying to large conglomerates and IT firms. Checks the app daily on commute; motivated by application counters and peer benchmarks. Needs resume templates, accepted cover letter examples, and aptitude test prep links within one tap.
+
+*Illustrative — not based on published JobKorea research.*
+
+**경력 이직자 (Mid-Career Switcher)** — 33, 8 years in marketing, wants to move from agency to in-house. Has a complete profile but is selective; visits weekly, not daily. Values salary benchmarking, company culture reviews, and recruiter contact over raw listing volume.
+
+*Illustrative — not based on published JobKorea research.*
+
+**채용담당자 (HR Manager)** — 40, in-house recruiter at a 300-person tech company. Uses the employer dashboard to post jobs, review applicants, and send messages. Needs fast bulk-action tools, applicant status tracking, and analytics on listing performance.
+
+*Illustrative — not based on published JobKorea research.*
+
+**긱 워커 (Gig / Part-time Seeker)** — 28, freelancer top-up income via AlbaMon integration. Wants quick-apply shifts near their location, hourly rate transparency, and immediate availability confirmation.
+
+## 14. States
+
+- **Empty (no results):** Illustrated character (Jobko mascot) with headline "맞는 공고가 없어요" + sub-copy suggesting filter adjustment and a ghost CTA to reset filters; never a blank white box
+- **Loading skeleton:** Cards render as gray shimmer blocks matching the exact height and border-radius of the real card (radius 10px, height ~120px); page background remains `#f6f7f8`
+- **Error — network:** Inline banner alert with Red 50 (`#fbf5f5`) background, red border, and retry button; page content beneath is not unmounted
+- **Error — form validation:** Input border shifts to `#f11e1e`, an error message in Red 500 (`#fc3b3b`) at 13px appears below the field; focus moves to the first error field
+- **Success — application submitted:** Full-bleed success toast (Green 500 `#0dbc7c` left-border snackbar) with "지원 완료!" message; job card gains a "지원완료" gray badge and the apply button becomes disabled
+- **Skeleton (list):** Job listing rows show as stacked shimmer bars (title 16px height, company 12px height) with 8px gap; no spinner overlay
+- **Disabled:** Buttons use Gray 200 background (`#d5d8dc`) with Gray 500 text (`#949ba8`); inputs use Gray 50 background (`#f6f7f8`) with normal border; cursor: not-allowed
+- **Hover (card):** Card elevates from flat border to `0 4px 16px rgba(0,0,0,0.12)` shadow; transition 200ms cubic-bezier(0.4, 0, 0.2, 1)
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- 150ms — micro interactions (button press ripple, checkbox check, tab underline shift)
+- 200ms — component state changes (card hover elevation, input focus ring)
+- 300ms — panel transitions (filter drawer slide, dropdown open)
+- 6s — AI search gradient animation (continuous loop, `ease-in-out`)
+
+**Easing:**
+- Standard: `cubic-bezier(0.4, 0, 0.2, 1)` (Material "standard" / ease-in-out) — used for virtually all UI transitions
+- Decelerate: `cubic-bezier(0, 0, 0.2, 1)` — elements entering the screen (drawer slide-in, toast appear)
+
+**Rules:**
+- All color, background-color, border-color, box-shadow, opacity, and transform transitions use the standard easing
+- The AI search bar gradient (`animation: gradient-flow-dynamic 6s ease-in-out infinite`) is the only always-on animation; all other motion is user-triggered
+- Respect `prefers-reduced-motion`: disable the gradient animation and reduce all durations to ≤50ms
+- Skeleton shimmers use a CSS `animation: shimmer` keyframe (opacity 0.4→1→0.4), 1.5s linear infinite

package/web/references/kbank/DESIGN.md

@@ -193,3 +193,21 @@ Overall: meaningful effort on focus order and language tagging; structural seman
 - Brand assets (logo, name, navy `#0114A7`) referenced for inspiration only — not redistributed.
 - No verbatim taglines or copy lifted from kbanknow.com. §9 voice paragraph is a fresh analyst paraphrase of register and structure, not transcription.
 - Token values are facts (CSS custom property values) and not protectable expression; they are reproduced here for engineering reference under fair-use analytical purpose.
+
+## 14. Do's and Don'ts
+
+### Do
+- Anchor the brand on the single signature navy #0114A7 as the sole positive primary across skip-link, CTAs, and key labels
+- Reserve the lime accent #B6F23D for sparing energetic activation states only, keeping it off body text and form chrome
+- Keep surfaces sharp and orthogonal at 0px radius and apply the 12px radius exclusively to the 56px CTA
+- Set CTAs in Pretendard K Edition at 18px / 500 medium weight with white text on navy fill, not the 600/700 most KR finance peers default to
+- Convey elevation through 1px borders and cool-tinted g200/g300 fills instead of drop-shadows, using the blue-leaning neutral ramp to stay coherent with the navy
+- Lead the page with dated notices (YYYY.MM.DD) above promotion and write formal ~합니다 noun-phrase headers with one supporting sentence
+
+### Don't
+- Spread the lime #B6F23D accent across large areas or place it on body text and form chrome
+- Round corners broadly the way K bank reads dated with 0px everywhere except CTA — adopt the sharpness only when deliberately signalling a regulated institution
+- Lock layouts to the fixed 1280px canvas, which blocks responsive zoom and is not viable for modern surfaces
+- Build chrome out of bare <div> elements — use real <header>, <nav>, <main>, and <footer> landmarks
+- Hide the logo with the font-size: 0 image-replacement trick on the H1 — use inline SVG with an explicit aria-label
+- Write chatty contractions, emoji, or second-person imperatives, or swap the formal ~합니다 register for colloquial ~해요