104人力銀行 DESIGN.md

Design System Inspiration of 104人力銀行

Overview

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 2026-07-13 capture has no interaction events. A live state probe on 2026-10-16 measured hover, pressed and keyboard focus on the navigation-search action only; no other hover, pressed, focus, disabled, error, menu, or authenticated-product behavior is represented as a product fact.

Primary tasks

• Search for work from the public job-bank home page
• Look up a company on its public company-information page
• Browse career and company information through the topic navigation
• Hire someone and then manage them as talent

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

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

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

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.

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.

Colors

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.

Typography

Evidence classes

Captured hierarchy

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.

Brand face, substitute, safe default

• Brand face: none established. The captured public stack begins with Arial and operating-system families, no first-party source names a 104 typeface, and MsJhengHeiBold is declared only.
• Substitute: none chosen; there is no brand face to stand in for.
• Safe default (not the brand face): none listed; the observed UI face is an operating-system stack.

Layout

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.

Responsive & Interaction Notes

The artifact covers three desktop-public surface records and preserves no interactions. It shows both compact 32–36px actions and a navigation-search action with a 42px line box (46px tall with its 2px transparent border, measured 2026-10-16), 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.

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.tab: rgb(221, 221, 221) 0px 2px 8px 0px
• shadow.dialog: rgba(135, 135, 135, 0.4) 0px 2px 24px 0px

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.

Components

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 2026-07-13 artifact records interactionCount: 0 and no observed states; the navigation-search states come from a separate live probe on 2026-10-16. 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

States

Only the navigation-search action has measured states. A live probe of https://www.104.com.tw/ on 2026-10-16 read hover #ff7800, pressed #ff7800 with a 3.2px rgba(33, 37, 41, 0.5) ring, and keyboard focus #d97b00 with a #cc7400 border and no outline. No other state tokens are published. The 2026-07-13 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.

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 beyond the measured navigation-search states.
• Do not turn the observed dialog shadow into a blanket shadow on every card or control.

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.

Voice samples

• “不只找工作，幫你找方向。” — official career-mission language.
• “不只找人才，幫你管理人才。” — official employer-mission language.
• “我們在乎人的價值，讓人力變人才的有機環境。” — official brand-story language.
• “以謙遜溫和方式給予誠實回饋。” — official Be A Giver language.

Governance

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.

Known Gaps

• Contrast, search-action. Text #ffffff on #ff9100 measures 2.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.