--- name: 104人力銀行 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: fontSize: 14px fontWeight: 400 lineHeight: 1.43 use: Repeated public home and company-page text; operating-system stack, not a named 104 UI family label: fontSize: 14px fontWeight: 700 lineHeight: 2.14 use: Observed compact action and navigation labels heading: fontSize: 20px fontWeight: 700 lineHeight: 1.4 use: Observed public home section headings only rounded: sm: 4px md: 8px lg: 12px full: 800px spacing: xs: 4 sm: 6 md: 8 lg: 12 xl: 16 xxl: 20 components: search-action: type: button backgroundColor: '#ff9100' textColor: '#ffffff' rounded: 4px padding: 0px 12px typography: 18px/700/42px operating-system stack states: default appearance from the 2026-07-13 capture; hover, pressed and keyboard focus measured by a live state probe on 2026-10-16 use: Observed home navigation-search action height: 46px hover: 'bg #ff7800' pressed: 'bg #ff7800 with a 3.2px rgba(33, 37, 41, 0.5) ring (:hover + :active)' focus: 'bg #d97b00, border #cc7400 on :focus-visible; no outline drawn' outline-action: type: button textColor: '#ff9100' border: '1px #ff9100' rounded: 4px padding: 0px 12px typography: 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 textColor: '#7e7e7e' rounded: 4px padding: 8px 16px typography: 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 textColor: '#ff7800' rounded: 4px padding: 8px 16px typography: 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 backgroundColor: '#ffffff' border: '1px #dddddd' rounded: 12px padding: 16px typography: 14px/400/16px operating-system stack use: Observed home content-card container login-dialog: type: dialog backgroundColor: '#ffffff' textColor: '#292929' rounded: 8px shadow: rgba(135, 135, 135, 0.4) 0px 2px 24px 0px use: Observed public login-prompt dialog shell --- # 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](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/) ### 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 | 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. ### 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. | 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. ## 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.