--- 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. - “不只找人才，幫你管理人才。” — official employer-mission language. - “我們在乎人的價值，讓人力變人才的有機環境。” — official brand-story language. - “以謙遜溫和方式給予誠實回饋。” — official Be A Giver language. ## 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. - **Employers.** The company says it aims to help them manage talent as well as find people. - **Children.** The company’s mission states an aim to help each child find their ability. - **Healthy older adults.** The company’s mission states an aim to help them realize their value. 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. --- Source: https://oh-my-design.kr/design-systems/104 · Raw twin of references/104/DESIGN.md Install 440 quality-graded references for your AI coding agent: npx oh-my-design-cli install-skills