oh-my-design-cli 1.8.7 → 1.9.0

package/skills/omd-slop-audit/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: omd-slop-audit
+description: "실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다. 'AI slop 잡아줘', '템플릿 같아', '왜 AI가 만든 화면 같지?', 'anti-slop audit' 요청에 사용한다. 접근성 오류와 취향 차이를 별도 등급으로 구분한다."
+---
+
+# omd:slop-audit
+
+OmD에서 **AI slop**은 “AI가 만든 화면”이라는 출처 판정이 아니다. **제품의 목적·콘텐츠·브랜드 근거 대신, 생성 도구가 자주 꺼내는 구조와 문구가 반복되어 서로 다른 제품이 같은 화면처럼 수렴한 상태**를 뜻한다.
+
+보라색, 카드, 둥근 모서리, 그라데이션은 죄가 없다. DESIGN.md와 콘텐츠가 요구하면 그대로 둔다. 문제는 이유 없이 여러 기본 패턴이 한 화면에 겹치고, 그 결과 위계·신뢰·사용성이 약해질 때다.
+
+## 모드
+
+- `AUDIT` — 코드와 실제 route를 읽고 근거가 있는 finding만 작성
+- `APPLY` — 사용자가 수정까지 요청한 경우 `omd:apply` 계약으로 BLOCK/WARN을 고친 뒤 같은 route에서 재검증
+- `COMPARE` — 같은 콘텐츠의 before/after specimen과 rule 설명을 만든다. 제품 기능을 새로 꾸미지 않는다.
+
+## 시작 전에 읽을 것
+
+1. 프로젝트 `DESIGN.md` 전체와 `.omd/preferences.md`
+2. 실제 사용자 journey와 대상 route
+3. [`references/pattern-catalog.md`](./references/pattern-catalog.md)
+4. 출처·라이선스 경계가 필요하면 [`references/sources.md`](./references/sources.md)
+
+판정 우선순위는 `사용자 의도 > DESIGN.md > 실제 제품 정보 구조 > 접근성·플랫폼 요구 > slop taxonomy`다.
+
+## 세 가지 판정 축
+
+### 1. Slop cluster
+
+제품 맥락 없는 기본 패턴이 같은 화면에서 둘 이상 겹치고, 정보 위계나 브랜드 구별성을 약하게 만든다. `SLOP` 배지를 쓴다.
+
+### 2. General quality
+
+대비, overflow, focus, heading 순서, target size, 성능처럼 출처와 무관한 결함이다. `QUALITY`로 분리한다. 접근성 오류를 “AI 느낌”이라고 부르지 않는다.
+
+### 3. Preference
+
+브랜드 또는 사용자가 합리적으로 선택할 수 있는 미감 차이다. `FYI`만 허용한다. 취향을 결함으로 승격하지 않는다.
+
+## 열 가지 review lens
+
+감사 범위가 일부 유행 요소에만 갇히지 않도록 다음 순서로 훑는다.
+
+1. **Hierarchy** — 첫 시선과 핵심 행동이 제품 우선순위와 일치하는가
+2. **Containers** — 각 card·panel이 실제 entity·action·selection·layer 경계인가
+3. **Typography** — scan·read·compare·operate 중 화면 과업에 맞는 measure·scale·pace인가
+4. **Color and depth** — accent·status·selection·elevation 역할이 분리되는가
+5. **Evidence** — 실제 workflow·asset·data·state가 generic decoration보다 앞서는가
+6. **Density** — group 안과 group 사이의 간격이 다르고 과업에 맞는가
+7. **States** — empty·loading·error·permission·long content·success가 포함되는가
+8. **Responsive composition** — desktop을 축소하는 대신 viewport별 우선순위를 다시 구성하는가
+9. **Motion** — feedback·origin·continuity·space를 설명하며 중단·reduced motion을 지원하는가
+10. **Interaction contract** — control의 label·appearance·state·result가 같은 약속을 지키는가
+
+이 목록은 미니멀리즘을 강요하지 않는다. expressive editorial, dense product tool, focused service flow 모두 brief와 실행 근거가 있으면 유효하다.
+
+## 실행 절차
+
+1. **Design read** — 화면 종류, 독자, 핵심 행동, 보존할 동작, 브랜드 근거를 2–4문장으로 정리한다.
+2. **정적 검사** — DOM/CSS/JSX에서 결정론적으로 확인 가능한 selector, token, 중첩, 반복, line ref를 수집한다.
+3. **실제 route 검사** — 데스크톱과 모바일에서 정보 순서, 상태, overflow, 상호작용, console, 접근성을 본다.
+4. **문맥 판정** — 단일 패턴을 금지하지 말고 반복 빈도, 이웃 패턴, DESIGN.md 근거, 콘텐츠 역할을 함께 본다.
+5. **최소 처방** — 전체를 새 테마로 바꾸지 않는다. 가장 큰 cluster를 깨는 1–3개 수정부터 제안한다.
+6. **재검증** — 수정 전과 같은 route·viewport·행동에서 비교한다. 새로운 generic UI를 추가해 기존 slop을 가리지 않는다.
+
+## finding 형식
+
+```markdown
+### [WARN · SLOP] UI-LAYOUT-03 · 모든 내용을 같은 카드로 분절
+- 위치: `components/Overview.tsx:84`
+- 화면 근거: `/docs/ko` desktop에서 11개 섹션 중 9개가 같은 radius·padding·border 카드
+- 문맥: 문서의 읽기 순서보다 컨테이너 반복이 먼저 보임
+- 예외 확인: DESIGN.md는 card-heavy dashboard를 요구하지 않음
+- 수정: 절차는 열린 목록, 결과 예시는 비교 surface로 바꾸고 실제 독립 개체만 카드 유지
+- 검증: heading 순서, 모바일 overflow, 기존 링크 동작을 같은 route에서 재확인
+```
+
+severity는 다음처럼 쓴다.
+
+- **BLOCK · QUALITY** — 접근성·동작·overflow·사실성·DESIGN.md 위반
+- **WARN · SLOP** — 근거 없는 패턴 cluster가 위계·신뢰·구별성을 약화
+- **FYI · PREFERENCE** — 대안은 있으나 제품 요구 안에서 유효한 선택
+
+합산 “taste score”, AI 확률, 근거 없는 100점 만점은 만들지 않는다. finding 수와 해결 여부가 정본이다.
+
+## APPLY 가드레일
+
+- 사용자-facing creation funnel이면 Home → `/builder` → 선택 → preview에서 검증한다.
+- `/reference/[id]`만 보고 builder 작업을 완료하지 않는다.
+- 기존 route, 데이터 흐름, 필드명, 카피, 상태를 보존하라는 요청을 최우선으로 둔다.
+- 새 token은 DESIGN.md 확장 승인 없이 만들지 않는다.
+- 이미지·아이콘·motion은 제품 목적이 있을 때만 추가하고 reduced-motion·alt·fallback을 함께 다룬다.
+- 수정이 끝나면 `omd:designer-review`, `omd:feel`, 접근성 검사와 역할이 겹치는 finding을 중복 보고하지 않는다.
+
+## 다른 OmD 역할과의 관계
+
+- `omd:designer-review`: 브랜드 토큰과 시각 일관성
+- `omd:feel`: motion·target·contrast·CLS 같은 측정 가능한 interface detail
+- `omd:humanize`: locale별 문장과 UX copy 후편집
+- `omd:slop-audit`: 제품 맥락 없는 **패턴 수렴과 cluster**
+
+## 금지
+
+- 특정 색·폰트·radius·카드 하나만으로 slop 판정
+- “AI가 썼다”거나 작성자를 추정하는 표현
+- 모든 화면을 비대칭·Awwwards·dark-tech 스타일로 교체
+- line ref, route evidence, DESIGN.md 예외 확인 없는 finding
+- 디자인 문제와 접근성 오류를 하나의 취향 점수로 합치기
+- 실제 제품 상태를 보지 않고 정적 스크린샷만으로 완료하기

package/skills/omd-slop-audit/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "OmD Slop Audit"
+  short_description: "Audit context-free UI and copy patterns with evidence"
+  default_prompt: "Audit this real product route for clustered UI and copy slop, cite evidence, and propose focused fixes."

package/skills/omd-slop-audit/references/pattern-catalog.md

@@ -0,0 +1,96 @@
+# OmD slop pattern catalog
+
+각 rule은 **검출 신호**이지 자동 유죄 판정이 아니다. `D`는 정적 코드나 브라우저로 확인 가능한 deterministic signal, `C`는 제품 문맥이 필요한 contextual signal이다. WARN은 같은 화면에서 관련 rule이 겹치거나 하나의 강한 rule이 실제 위계·신뢰를 해칠 때만 낸다.
+
+## Brief and evidence
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `BRIEF-01` | C | 독자·핵심 행동·보존할 동작 없이 스타일만 지정 | 기존 제품 요구가 다른 문서에 있는가 |
+| `BRIEF-02` | C | 서로 무관한 브랜드 이름을 근거 없이 섞음 | 어떤 특성을 왜 참고하는지 설명됐는가 |
+| `EVIDENCE-01` | D/C | 원문에 없는 수치·고객·효과·기능 추가 | source나 사용자 제공 근거가 있는가 |
+| `EVIDENCE-02` | C | 브랜드 token 대신 인접 마케팅 surface나 generic fallback 사용 | DESIGN.md와 canonical evidence가 침묵하는가 |
+
+## Layout and hierarchy
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `LAYOUT-01` | D/C | 모든 섹션이 centered heading + short body + CTA | 랜딩의 실제 정보 순서에 맞는가 |
+| `LAYOUT-02` | D | 독립 개체가 아닌 설명까지 같은 3열 카드로 반복 | 카드가 실제 entity boundary인가 |
+| `LAYOUT-03` | D | 카드 안 카드가 2단계 이상 반복 | 중첩이 interactive grouping에 필요한가 |
+| `LAYOUT-04` | D/C | `01/02/03` 표식이 순서나 진행을 전달하지 않음 | 숫자 제거 시 정보 손실이 있는가 |
+| `LAYOUT-05` | D/C | 모든 구역의 padding·gap·height가 동일해 위계가 평평함 | 의도된 dense system인가 |
+| `LAYOUT-06` | D | 좁은 본문 때문에 hero가 5줄 이상으로 분절 | locale별 line break와 mobile에서 읽히는가 |
+| `LAYOUT-07` | D/C | 실제 중요도와 무관하게 모든 블록이 같은 크기·위치·대비 | 첫 시선과 핵심 행동이 product journey와 일치하는가 |
+
+## Density and responsive composition
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `DENSITY-01` | D/C | 설정·표·피드·마케팅 문단에 같은 넓은 padding 적용 | 화면이 읽기·탐색·반복 조작 중 무엇을 위한 것인가 |
+| `DENSITY-02` | D | 관련 항목 사이 gap과 섹션 사이 gap의 차이가 거의 없음 | grouping이 정렬·타이포·separator로 드러나는가 |
+| `RESPONSIVE-01` | D | desktop grid를 축소만 해 copy·control·locale이 임의 줄바꿈 | viewport별 우선순위와 reading order를 다시 설계했는가 |
+| `RESPONSIVE-02` | D/C | mobile에서 desktop 장식은 유지하고 핵심 행동만 below-fold로 밀림 | 장식보다 task completion이 우선되는가 |
+
+## Visual treatment
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `VISUAL-01` | D/C | 기능 없는 좌측 accent bar가 callout마다 반복 | 상태·선택·진행을 실제로 표시하는가 |
+| `VISUAL-02` | D/C | 모든 제목 위에 같은 rounded icon tile | 아이콘이 빠른 구분이나 행동을 돕는가 |
+| `VISUAL-03` | D | 거의 모든 container가 같은 큰 radius | DESIGN.md radius scale과 entity hierarchy가 있는가 |
+| `VISUAL-04` | D | 1px border + 넓은 shadow + glow가 같은 surface에 중첩 | elevation 역할과 광원이 정의됐는가 |
+| `VISUAL-05` | D/C | 보라·cyan gradient, mesh, blur orb, gradient text가 의미 없이 겹침 | 브랜드 색·콘텐츠·상태가 요구하는가 |
+| `VISUAL-06` | D/C | 장식이 실제 제품 이미지·데이터·콘텐츠를 대신함 | 핵심 정보를 더 빨리 이해하게 하는가 |
+
+## Typography and color
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `TYPE-01` | D | H1/H2/body의 크기·weight·line-height 차이가 거의 없음 | dense enterprise UI처럼 의도된 scale인가 |
+| `TYPE-02` | D/C | eyebrow/kicker가 모든 섹션에 반복되어 본문보다 먼저 보임 | 탐색·상태에 실제 역할이 있는가 |
+| `TYPE-03` | D | 본문 measure·line-height가 locale에 맞지 않아 과도한 줄바꿈 | KO/JA/ZH에서 실제 viewport를 확인했는가 |
+| `COLOR-01` | D/C | 색이 의미나 브랜드 역할 없이 시각 분산만 만듦 | token role과 state mapping이 있는가 |
+| `COLOR-02` | D/C | accent·status·selection이 같은 색 처리로 구분되지 않음 | 색 외의 label·shape·position도 상태를 설명하는가 |
+
+## Components and interaction
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `COMP-01` | D | 버튼·badge·card variant가 실제 상태 없이 데모용으로 증식 | 제품 상태와 연결되는가 |
+| `COMP-02` | D/C | 같은 CTA가 섹션마다 반복되고 목적지가 불명확 | journey에서 다음 행동이 하나인가 |
+| `COMP-03` | D/C | 긴 설정·비교·다단계 작업을 modal에 넣어 scroll과 맥락을 숨김 | 짧고 닫힌 보조 작업인가, 독립 route가 필요한가 |
+| `MOTION-01` | D/C | 모든 요소가 stagger/fade/lift/bounce | 피드백·공간 이해·주의 전환을 돕는가 |
+| `MOTION-02` | D | layout property animation, infinite loop, reduced-motion 누락 | `omd:feel`/a11y QUALITY finding으로 승격 |
+| `MOTION-03` | C | 여러 독립 animation이 동시에 경쟁하고 origin·settled state가 불명확 | 하나의 choreography와 명확한 feedback으로 줄일 수 있는가 |
+
+## Product states and proof
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `STATE-01` | D | success/happy path만 있고 empty·loading·error·permission 상태 누락 | 정적 visual study인지 production-ready surface인지 |
+| `STATE-02` | D/C | error·empty state가 분위기 문장만 말하고 다음 행동을 주지 않음 | 복구·생성·권한 요청·문의 중 가능한 행동이 무엇인가 |
+| `EVIDENCE-03` | C | 장식용 dashboard·수치·logo wall이 실제 product proof를 대신함 | 실물 route·asset·data shape·source로 대체 가능한가 |
+
+## Copy and locale
+
+| ID | Type | Signal | Context check |
+|---|---|---|---|
+| `COPY-01` | D/C | seamless, 혁신적, 강력한, 赋能 같은 찬사에 근거가 없음 | 근처에 기능·조건·측정이 있는가 |
+| `COPY-02` | D | `not X, but Y`형 대조가 페이지에서 반복 | 한 번의 핵심 positioning 문장인가 |
+| `COPY-03` | D/C | 모든 문단이 punchline, 3단 병렬, 수사 질문으로 끝남 | 실제 editorial voice인가 |
+| `COPY-04` | D | CTA label과 실제 동작/목적지가 다름 | 브라우저에서 클릭 결과를 확인했는가 |
+| `LOCALE-01` | D/C | locale 간 문장 순서와 구조가 완전히 같음 | 사실 parity만 공유하고 독립 편집했는가 |
+| `LOCALE-02` | D | zh-TW에 간체·중국 본토 제품 용어, JA/KO에 영어 직역이 잔존 | locale playbook과 기존 제품 용어 확인 |
+
+## General quality — slop과 분리
+
+다음은 패턴 수렴이 아니라 `QUALITY` finding이다.
+
+- WCAG contrast, focus, target, heading/label, keyboard, reduced-motion 위반
+- horizontal overflow, clipped locale copy, layout shift
+- broken image/placeholder/import, console error, missing state
+- interaction과 aria label 불일치
+- 실제 route가 아닌 isolated mock만 검증
+
+이 항목의 수치와 severity는 `omd:feel`, 접근성 auditor, 공식 spec을 따른다. slop taxonomy가 새 수치를 만들지 않는다.

package/skills/omd-slop-audit/references/sources.md

@@ -0,0 +1,24 @@
+# Research sources and reuse boundary
+
+OmD는 아래 프로젝트의 관점을 참고하되 pattern wording과 판정 계약을 제품 고유 taxonomy로 다시 작성했다.
+
+- [Impeccable Slop Detector](https://impeccable.style/slop/) — UI pattern과 general quality를 분리하고 deterministic/provider/LLM 검사를 구분하는 접근. Impeccable repository는 Apache-2.0.
+- [Taste Skill](https://github.com/leonxlnx/taste-skill) — brief와 audience를 먼저 읽고 생성형 기본 미감을 억제하는 접근. MIT.
+- [Anthropic frontend-design skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design) — 뚜렷한 시각 방향과 production detail을 먼저 설정하는 접근. 해당 skill license를 적용 전에 확인.
+- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines/blob/main/command.md) — content handling, responsive, motion, state, navigation, locale을 production 품질로 검사하는 기준. MIT.
+- [Carbon Design System](https://carbondesignsystem.com/elements/spacing/overview/) — 과업에 따른 density, spatial grouping, grid rhythm, productive/expressive typography 구분. Apache-2.0.
+- [W3C Cards](https://design-system.w3.org/components/cards.html) — content-first source order와 accessible container boundary.
+- [GOV.UK Design System](https://design-system.service.gov.uk/styles/layout/) — small-screen-first layout, readable measure, component별 when-to-use/when-not-to-use.
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/layout) — priority, grouping, adaptability, progressive disclosure, platform context.
+- [Atlassian Elevation](https://atlassian.design/foundations/elevation) — surface depth를 실제 layering과 interaction에 연결하는 기준.
+- [Primer Product UI Patterns](https://primer.style/product/ui-patterns/) — empty/loading/degraded/navigation/saving을 실제 product flow와 상태 생명주기로 설명하는 기준.
+- [Carbon Data Table](https://carbondesignsystem.com/components/data-table/usage/) — 과업에 맞는 row density, header alignment, toolbar, search와 selection을 구성하는 기준.
+- [Fluent 2 Card](https://fluent2.microsoft.design/components/web/react/core/card/usage)와 [Shapes](https://fluent2.microsoft.design/shapes) — card boundary와 rectangle/circle/pill/popover shape를 실제 component role에 연결하는 기준.
+- [USWDS Card](https://designsystem.digital.gov/components/card/) — card를 collection 속 modular summary로 제한하고 decoration/table/sequential prose와 구분하는 기준.
+- [GOV.UK Error Summary](https://design-system.service.gov.uk/components/error-summary/) — validation error, focus, affected field, recovery action을 한 화면 계약으로 묶는 기준.
+- [Atlassian Empty State](https://atlassian.design/foundations/content/designing-messages/empty-state) — empty reason과 specific next action을 함께 제공하는 기준.
+- [stop-slop](https://github.com/hardikpandya/stop-slop) — copy의 군더더기·공식화된 대비·과장·리듬 문제. MIT.
+- [Humanizer](https://github.com/blader/humanizer) — 개별 tell보다 cluster와 문맥을 우선하는 접근. MIT.
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/) — slop과 별도로 다뤄야 할 접근성 품질 기준.
+
+규칙·코드를 실질적으로 복사하면 해당 LICENSE/NOTICE와 수정 표시를 보존한다. 이 catalog는 UI의 저작 주체나 사용 모델을 추정하지 않는다.

package/web/references/104/DESIGN.md

@@ -0,0 +1,354 @@
+---
+id: "104"
+name: "104人力銀行"
+country: TW
+category: productivity
+homepage: "https://www.104.com.tw/"
+primary_color: "#ff9100"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=104.com.tw&sz=128"
+verified: "2026-07-14"
+omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-14"
+  surfaces:
+    - { id: home, kind: product, url: "https://www.104.com.tw/", inspected: "2026-07-13" }
+    - { id: surface-2, kind: product, url: "https://www.104.com.tw/", inspected: "2026-07-13" }
+    - { id: surface-3, kind: product, url: "https://www.104.com.tw/company/main/", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.104.com.tw/", captured: "2026-07-13" }
+    - { id: company-live, kind: product-surface, url: "https://www.104.com.tw/company/main/", captured: "2026-07-13" }
+    - { id: brand-story, kind: official-doc, url: "https://corp.104.com.tw/zh/about104/brand-story/", captured: "2026-07-14" }
+    - { id: vision-mission, kind: official-doc, url: "https://corp.104.com.tw/zh/about104/vision-mission/", captured: "2026-07-14" }
+    - { id: innovative-services, kind: official-doc, url: "https://corp.104.com.tw/zh/sustainability/customer/", captured: "2026-07-14" }
+    - { id: be-a-giver, kind: official-doc, url: "https://corp.104.com.tw/zh/sustainability/community/be-a-giver", captured: "2026-07-14" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.primary-deep": { surface_id: surface-3, source_id: company-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.teal": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.teal-soft": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.teal-dark": { surface_id: surface-3, source_id: company-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.canvas": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.surface": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.foreground": { surface_id: surface-3, source_id: company-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.muted": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.hairline": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.link": { surface_id: surface-3, source_id: company-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.colors.on-primary": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.body.size": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.body.weight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.body.lineHeight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.body.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.label.size": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.label.weight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.label.lineHeight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.label.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.heading.size": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.heading.weight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.heading.lineHeight": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.typography.heading.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.xs": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.sm": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.md": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.lg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.xl": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.spacing.xxl": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.rounded.sm": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.rounded.md": { surface_id: surface-3, source_id: company-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.rounded.lg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.rounded.full": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.shadow.tab": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.shadow.dialog": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.bg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.fg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.padding": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.font": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.states": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.search-action.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.fg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.border": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.padding": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.font": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.states": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.outline-action.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.fg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.padding": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.font": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.states": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.topic-tab.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.fg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.padding": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.font": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.states": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.active-topic-tab.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.bg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.border": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.padding": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.font": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.company-card.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.type": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.bg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.fg": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.radius": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.shadow": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+    "tokens.components.login-dialog.use": { surface_id: home, source_id: home-live, method: supplied-live-extract, captured: "2026-07-13" }
+tokens:
+  source: live-extract
+  extracted: "2026-07-13"
+  note: "Only values backed by the supplied public product-surface evidence are tokens. Corporate, marketing, and declared-only font evidence stay outside this token set."
+  colors:
+    primary: "#ff9100"
+    primary-deep: "#ff7800"
+    teal: "#00afb8"
+    teal-soft: "#dbf7f7"
+    teal-dark: "#39c8d0"
+    canvas: "#ffffff"
+    surface: "#eeeeee"
+    foreground: "#292929"
+    muted: "#7e7e7e"
+    hairline: "#dddddd"
+    link: "#1654b9"
+    on-primary: "#ffffff"
+  typography:
+    body: { size: 14, weight: 400, lineHeight: 1.43, use: "Repeated public home and company-page text; operating-system stack, not a named 104 UI family" }
+    label: { size: 14, weight: 700, lineHeight: 2.14, use: "Observed compact action and navigation labels" }
+    heading: { size: 20, weight: 700, lineHeight: 1.4, use: "Observed public home section headings only" }
+  spacing: { xs: 4, sm: 6, md: 8, lg: 12, xl: 16, xxl: 20 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 800 }
+  shadow:
+    tab: "rgb(221, 221, 221) 0px 2px 8px 0px"
+    dialog: "rgba(135, 135, 135, 0.4) 0px 2px 24px 0px"
+  components:
+    search-action: { type: button, bg: "#ff9100", fg: "#ffffff", radius: 4, padding: "0px 12px", font: "18px/700/42px operating-system stack", states: "default static selector observed; interaction capture recorded 0, so no changed state values are published", use: "Observed home navigation-search action" }
+    outline-action: { type: button, fg: "#ff9100", border: "1px #ff9100", radius: 4, padding: "0px 12px", font: "14px/700/30px operating-system stack", states: "default static selector observed; interaction capture recorded 0, so no changed state values are published", use: "Observed compact public home action" }
+    topic-tab: { type: tab, fg: "#7e7e7e", radius: 4, padding: "8px 16px", font: "16px/700/24px operating-system stack", states: "static non-active appearance observed; interaction capture recorded 0, so no transition values are published", use: "Observed home topic-navigation item" }
+    active-topic-tab: { type: tab, fg: "#ff7800", radius: 4, padding: "8px 16px", font: "16px/700/24px operating-system stack", states: "static active appearance observed; interaction capture recorded 0, so no transition values are published", use: "Observed static active home topic-navigation item" }
+    company-card: { type: card, bg: "#ffffff", border: "1px #dddddd", radius: 12, padding: "16px", font: "14px/400/16px operating-system stack", use: "Observed home content-card container" }
+    login-dialog: { type: dialog, bg: "#ffffff", fg: "#292929", radius: 8, shadow: "rgba(135, 135, 135, 0.4) 0px 2px 24px 0px", use: "Observed public login-prompt dialog shell" }
+  components_harvested: true
+---
+
+# Design System Inspiration of 104人力銀行
+
+## 1. Visual Theme & Atmosphere
+
+104人力銀行 is Taiwan’s job-and-talent platform: its corporate materials describe a service that helps jobseekers find direction as well as work, and helps employers manage talent rather than merely fill a vacancy. Founded as an online matching service in 1996, it grew from the founder’s concern with inefficient job advertising into a broader employment, career, and human-resources ecosystem. The product evidence supplied for this reference covers the public job-bank home and a public company-information route. Those surfaces make the core experience practical and information-forward: strong orange calls attention to a search or commitment action, while dark text, gray navigation, bordered cards, and a secondary teal topic treatment organize a dense amount of career and company information.
+
+That operational clarity sits beside an explicitly people-centered corporate idea. 104 calls its culture “Be A Giver,” frames its missions around children, career matchmaking, and healthy older adults, and now describes AI-powered personalized job and candidate recommendations as part of its service evolution. This is useful context for the product’s direct, supportive posture, but it does not convert corporate campaign colors or AI-service imagery into UI tokens. The documented visual system below remains limited to the supplied public product capture.
+
+**Key characteristics:**
+
+- Orange `#ff9100` is the repeated filled and outlined action color in the captured public job-bank chrome; `#ff7800` is observed on static active tabs.
+- Dark `#292929`, muted `#7e7e7e`, white `#ffffff`, and pale divider `#dddddd` carry most of the information hierarchy.
+- Teal `#00afb8` and soft teal `#dbf7f7` appear in a separate topic/pill treatment, rather than as a substitute for the orange action color.
+- The supplied surfaces favor compact, bold labels and 4px action geometry; 8px and 12px are present on dialog and card shells.
+- The capture has no interaction events, so no hover, pressed, focus, disabled, error, menu, or authenticated-product behavior is represented as a product fact.
+
+## 2. Color Palette & Roles
+
+### Selector-backed public product colors
+
+- **Action Orange** (`#ff9100`): observed filled search action and compact outlined public action on the home surface.
+- **Active Orange** (`#ff7800`): observed text/border color of static active company-page and home navigation tabs.
+- **Topic Teal** (`#00afb8`): observed active pill fill and outlined inactive-pill text treatment on the home surface.
+- **Soft Teal** (`#dbf7f7`): observed public home background sample associated with the topic treatment; it is not a general canvas claim.
+- **Teal Outline** (`#39c8d0`): observed on company-page tag samples; its surface scope is narrower than the home topic teal.
+- **Foreground** (`#292929`): repeated high-emphasis text and dialog/card content.
+- **Muted Text** (`#7e7e7e`): repeated navigation, compact button, and secondary text treatment.
+- **Canvas / On Action** (`#ffffff`): white public canvas, card/dialog fills, and text over the orange action.
+- **Surface** (`#eeeeee`): observed pale company-page and home surface sample.
+- **Hairline** (`#dddddd`): observed home content-card border.
+- **Link Blue** (`#1654b9`): one low-frequency company-page link sample; do not generalize it into the main action color.
+
+### Evidence-domain boundary
+
+The primary-color field uses the high-confidence product action orange `#ff9100`. 104’s corporate pages, social programs, brand stories, and campaign imagery establish company context only. They were not part of the computed-style packet and are not used to extend this color palette.
+
+## 3. Typography Rules
+
+### Evidence classes
+
+| Evidence class | Family and boundary |
+|---|---|
+| Official product-use | No first-party font announcement or design guideline located in this pass establishes a named product UI family. |
+| Live computed surface-use | `Arial, MsJhengHeiBold, 微軟正黑體, "Microsoft JhengHei", Roboto, PingFangTC, sans-serif` is repeatedly computed on the supplied public product surfaces. The first family is an operating-system stack member, so it is not promoted as a 104-owned typeface. |
+| Official distributed brand asset | No official public type asset or license source was located. |
+| Declared-only | `MsJhengHeiBold` has an observed 104-hosted `@font-face` source but zero visible uses in the packet. It remains declared-only; it is not a loadable specimen or token family. `swiper-icons` is likewise declared-only. |
+| Loaded non-text asset | `104_icon` is loaded from 104’s CDN and appears in icon contexts. It is an icon font, not body or heading typography. |
+| System / unresolved | `Arial` is a high-confidence system computed family (543 uses). Its observed usage supports a public-stack boundary only; it must not be rendered as a proprietary 104 font. |
+
+### Captured hierarchy
+
+| Role | Family boundary | Size | Weight | Line height | Evidence boundary |
+|---|---|---:|---:|---:|---|
+| Public body | Operating-system stack | 14px | 400 | 20px or 16px | repeated home and company-page text |
+| Compact label/action | Operating-system stack | 14px | 700 | 30px | public compact buttons and navigation |
+| Topic tab | Operating-system stack | 16px | 700 | 24px | home topic-navigation samples |
+| Home section heading | Operating-system stack | 20px | 700 | 28px | public home h2 samples only |
+
+Do not substitute another sans serif and name it `MsJhengHeiBold`. The declared face retains useful provenance in this section while its visible-use boundary remains intact.
+
+## 4. Component Stylings
+
+### Public home actions
+
+**Search Action**
+- Background: `#ff9100`
+- Text: `#ffffff`
+- Border: 2px transparent
+- Radius: 4px
+- Padding: 0px 12px
+- Font: 18px / 700 / 42px / operating-system stack
+- Use: Home navigation-search action; selector `home::[data-omd-capture="11"]`.
+
+**Outline Action**
+- Text: `#ff9100`
+- Border: 1px solid `#ff9100`
+- Radius: 4px
+- Padding: 0px 12px
+- Font: 14px / 700 / 30px / operating-system stack
+- Use: Compact public home action; selector `home::[data-omd-capture="56"]`.
+
+### Public navigation
+
+**Topic Tab**
+- Text: `#7e7e7e`
+- Radius: 4px
+- Padding: 8px 16px
+- Font: 16px / 700 / 24px / operating-system stack
+- Use: Home topic-navigation item; selector `home::[data-omd-capture="35"]`.
+
+**Active Topic Tab**
+- Text: `#ff7800`
+- Radius: 4px
+- Padding: 8px 16px
+- Font: 16px / 700 / 24px / operating-system stack
+- Use: Static active home topic-navigation item; selector `home::[data-omd-capture="34"]`.
+
+### Public content shells
+
+**Company Card**
+- Background: `#ffffff`
+- Text: `#7e7e7e`
+- Border: 1px solid `#dddddd`
+- Radius: 12px
+- Padding: 16px
+- Font: 14px / 400 / 16px / operating-system stack
+- Use: Home content-card container; selector `home::div` with class `card-container overflow-hidden container p-4 row no-gutters bg-white`.
+
+**Login Dialog**
+- Background: `#ffffff`
+- Text: `#292929`
+- Radius: 8px
+- Shadow: `rgba(135, 135, 135, 0.4) 0px 2px 24px 0px`
+- Use: Public login-prompt dialog shell; selector `home::div` with class `login-prompt__dialog overflow-auto bg-white fade-enter-active fade-enter-to`.
+
+### Scope boundary
+
+The supplied artifact records `interactionCount: 0` and no observed states. The variants above are static selector-backed samples only. No interaction-state transition, toast, form-error, disabled, menu, authenticated account, or input-state rule is inferred.
+
+---
+**Verified:** 2026-07-14
+**Tier 1 sources:** https://www.104.com.tw/ ; https://www.104.com.tw/company/main/ ; https://corp.104.com.tw/zh/about104/brand-story/ ; https://corp.104.com.tw/zh/about104/vision-mission/ ; https://corp.104.com.tw/zh/sustainability/customer/ ; https://corp.104.com.tw/zh/sustainability/community/be-a-giver
+**Tier 2 sources:** https://getdesign.md/104 (attempted 2026-07-14; direct open was rejected as unsafe by the retriever, no values used); https://styles.refero.design/?q=104 (attempted 2026-07-14; direct open was rejected as unsafe by the retriever, no values used)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+The supplied public surfaces support a compact information layout rather than a universal marketing-grid specification. Repeated spacing clusters at 4px, 6px, 8px, 12px, 16px, and 20px. Navigation tabs use 8px by 16px padding, content cards use 16px padding, and compact actions use horizontal 12px padding. The packet does not establish breakpoint, authenticated search-results, application-flow, or mobile-layout rules.
+
+## 6. Depth & Elevation
+
+Most captured public controls are flat. The topic tab carries `rgb(221, 221, 221) 0px 2px 8px 0px`; the public login prompt uses `rgba(135, 135, 135, 0.4) 0px 2px 24px 0px`. These are distinct selector-backed treatments, not proof of a general elevation ladder. White cards are primarily defined by a `#dddddd` hairline and 12px radius rather than a shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Keep a single high-priority public action in the observed orange `#ff9100`, with white text and 4px geometry.
+- Use `#7e7e7e` for compact secondary labels and reserve `#292929` for stronger information hierarchy.
+- Use the teal family for the observed topic/tag context, not as a replacement for the primary action.
+- Keep card shells white with the observed 12px radius and `#dddddd` hairline when using the captured content-card treatment.
+- Preserve the compact 14px/16px product hierarchy instead of inventing an oversized display system.
+
+### Don't
+
+- Do not treat corporate campaign or social-program visuals as product tokens without selector-backed product evidence.
+- Do not use the one low-frequency `#1654b9` link sample as a general primary CTA.
+- Do not present Arial or `MsJhengHeiBold` as a proprietary, web-loadable 104 UI family.
+- Do not add hover, pressed, focus, disabled, validation, or authenticated states to the documented public components.
+- Do not turn the observed dialog shadow into a blanket shadow on every card or control.
+
+## 8. Responsive & Interaction Notes
+
+The artifact covers three desktop-public surface records and preserves no interactions. It shows both compact 32–36px actions and a 42px navigation-search action, plus 40px topic tabs, but does not establish a responsive target-size rule. The active topic/tab appearance is a static captured variant, not an observed click transition. Mobile, menus, dialogs beyond the sampled login shell, and form validation remain absent.
+
+## 9. Implementation Notes
+
+Use a locale-aware operating-system stack that preserves Traditional Chinese support, but label it honestly as a stack rather than a custom brand font. For the captured public chrome, the most defensible sequence is orange action → dark/gray information hierarchy → optional scoped teal topic treatment. Implement only the supplied geometric levels: 4px actions/tabs, 8px dialog, 12px card, and 800px full pill. Corporate mission and “Be A Giver” language can inform content tone; it does not authorize a new component, color, font, or interaction rule.
+
+## 10. Voice & Tone
+
+104’s official language is practical, respectful, and enabling: it speaks about finding direction, managing talent, sharing knowledge, and helping people develop their capability. It can be warm without becoming sentimental and specific without promising a particular employment outcome. The product voice should make the next career task understandable, then make the available support visible.
+
+| Do | Don't |
+|---|---|
+| Name the concrete task first: a role, a resume, a career question, or a hiring need. | Use vague motivational claims in place of a next step. |
+| Frame support as help toward direction and capability. | Guarantee a job, interview, salary, or employer response. |
+| Use calm, respectful Traditional Chinese appropriate for a consequential decision. | Use pressure, shame, or artificial urgency around a person’s career. |
+| Be direct about what information a search or form needs. | Hide requirements behind clever labels or opaque jargon. |
+
+**Voice samples**
+
+- “不只找工作，幫你找方向。” — official career-mission language. <!-- verified: corp.104.com.tw/zh/about104/vision-mission/ 2026-07-14 -->
+- “不只找人才，幫你管理人才。” — official employer-mission language. <!-- verified: corp.104.com.tw/zh/about104/vision-mission/ 2026-07-14 -->
+- “我們在乎人的價值，讓人力變人才的有機環境。” — official brand-story language. <!-- verified: corp.104.com.tw/zh/about104/brand-story/ 2026-07-14 -->
+- “以謙遜溫和方式給予誠實回饋。” — official Be A Giver language. <!-- verified: corp.104.com.tw/zh/about104/vision-mission/ 2026-07-14 -->
+
+## 11. Brand Narrative
+
+104’s own brand story places its beginning in 1996, when founder 楊基寬 used a single computer in a small apartment to build an online service for a labor market then dominated by newspaper ads and paper notices. The company describes that origin as a response to inefficient matching and a belief in more human-centered connections between people and work. [104 brand story](https://corp.104.com.tw/zh/about104/brand-story/)
+
+The company now describes its career mission in fuller terms: for jobseekers, not merely finding a job but finding direction; for employers, not merely finding people but managing talent. It extends that social framing to children, working-age adults, and healthy older adults, while “Be A Giver” asks people to offer honest feedback with humility and kindness and use knowledge, skill, and time to help others succeed. [104 vision and mission](https://corp.104.com.tw/zh/about104/vision-mission/)
+
+Its current product evolution also includes AI-powered recommendations for jobs and candidates, as well as HR-management services. That modernizes the matching infrastructure but does not erase the company’s stated interest in career direction and shared capability. [104 innovative services](https://corp.104.com.tw/zh/sustainability/customer/)
+
+## 12. Principles
+
+1. **Make direction actionable.** A job search or hiring task should clarify the first decision before expanding choices. *UI implication:* lead forms and search controls with the information that changes the next recommendation.
+2. **Treat people as more than a transaction.** The company explicitly distinguishes finding direction from simply finding work. *UI implication:* pair a task result with relevant career-support routes when product evidence supports them; do not fabricate counseling flows.
+3. **Give help with humility and clarity.** “Be A Giver” describes honest feedback delivered with humility and kindness. *UI implication:* feedback copy should be specific, respectful, and explain what the user can do next.
+4. **Build capability, not dependency.** 104’s mission frames knowledge and skill as ways to create opportunity and value. *UI implication:* make criteria, progress, and available learning/help understandable rather than obscuring them behind a score.
+5. **Use technology to improve matching.** The company presents AI and data-supported recommendations as tools for more relevant matches. *UI implication:* explain the role of inputs and recommendations plainly; never imply a certainty the system cannot substantiate.
+
+## 13. Personas
+
+104’s official mission names four stakeholder groups, but this packet contains no verified behavioral research or product-persona document. The groups are preserved without invented behaviors:
+
+- **Jobseekers.** The company says it aims to help them find direction as well as a job. <!-- source: vision-mission -->
+- **Employers.** The company says it aims to help them manage talent as well as find people. <!-- source: vision-mission -->
+- **Children.** The company’s mission states an aim to help each child find their ability. <!-- source: vision-mission -->
+- **Healthy older adults.** The company’s mission states an aim to help them realize their value. <!-- source: vision-mission -->
+
+No named personas, usage frequencies, motivations, or task behaviors are asserted.
+
+## 14. States
+
+No state tokens or state-component facts are published. The sole supplied product-style artifact reports `observedStates: 0`, `interactionKinds: 0`, and `interactionCount: 0`; the artifact therefore does not establish empty, loading, error, success, skeleton, disabled, validation, or transition behavior. Those fields are omitted rather than filled with a generic job-board pattern.
+
+## 15. Motion & Easing
+
+No first-party motion duration, easing, reduced-motion policy, or event transition was present in the supplied packet. No motion token is published for 104人力銀行 in this reference.