1111 Job Bank DESIGN.md

Design System Inspiration of 1111 Job Bank

Overview

Visual Theme & Atmosphere

1111 Job Bank is a Taiwanese employment platform for job seekers and employers. Its terms describe free job search, applications, automatic résumé matching and career services. The company page dates 全球華人股份有限公司 to “88年11月11日” (11 November 1999) and uses “1定要…” to introduce its commitments to business growth, employee pay, learning and social contribution. Company · Terms

The captured homepage combines a red 1111 wordmark, white ground, blue search controls, pale service cards and a red recommendation area. A large campaign image sits behind the compact search bar; job cards keep titles, employers, pay and location close together. These are observations of the live page, rather than an officially published visual philosophy.

The current product guide presents AI résumé assistance, short-form applications, direct messaging and portfolio links alongside matching for different career stages. That broader set of tools is visible in the homepage's AI recommendation labels and résumé-import navigation. No dated visual rebrand was verified. Product guide

The measured homepage is the Traditional Chinese Taiwan surface at www.1111.com.tw/, with HTML lang="zh-Hant-TW"; the capture had no regional redirect.

Brand Narrative

The company page ties the repeated “1” to helping businesses earn, employees gain pay, people learn and society benefit. On the measured product surface, the red numeric wordmark anchors an interface whose everyday actions are blue. The combination is a useful design reference: the distinctive number mark introduces a practical employment service with dense, legible job information. This visual reading is inferred from the capture, not presented as the company's design rationale. Company

Principles

The following are implementation cues inferred from the measured homepage: make search prominent, separate job titles from metadata through colour and weight, group career-stage choices, and reserve richer hover depth for controls where it was observed. The company page's operating commitments concern business and social outcomes; they are not a published UI specification.

Personas

The product guide lists students, new graduates, employed workers, senior professionals and people returning to employment as matching audiences; no research personas were verified. Product guide

Colors

The palette below combines the homepage census with per-control computed styles. Role names describe these observations; no official brand manual was found.

The site distinguishes the general action blue from its --color-home-blue-* ramp. Do not replace the search-button states with a nearby blue ramp value. The census includes the whole document and six open shadow roots; counts are element counts, not visual area.

Tailwind infrastructure, its recognizable default values, carousel/lightbox variables, notification implementation variables and unattributed shadow palettes are excluded from the published token set. The complete namespace decisions and raw values are in report.md.

Typography

The page links Google Fonts stylesheets requesting Noto Sans TC with Roboto, and Noto Sans TC with Prompt. Their rules were unreadable to the capture's CSSOM walk. Noto Sans TC's loaded status is verified; an individual font-file source URL is not. Prompt was requested in a stylesheet URL but is absent from the loaded list. The unloaded swiper-icons face is carousel infrastructure.

Use the visible label metrics, which sometimes differ from their parent controls:

These measurements establish specific UI roles, not a complete heading or paragraph scale.

Layout

At the measured 1440×1000 viewport, the campaign link spans 1320px, matching --width-lg-content. The desktop header links are 64px high, matching --height-header-desktop.

The visible order is header, campaign/search hero, career-stage navigation, horizontal service cards and a recommendation panel with four job-card columns visible. Within job cards, blue job titles lead; employer names sit above pay, location and experience rows. Preserve that information order when using this reference.

Responsive Behavior

Only desktop 1440×1000 was captured; mobile layouts, breakpoint behaviour and touch states were not measured.

Elevation & Depth

The measured service card has no shadow at rest. Hover and pressed states both compute:

box-shadow: rgba(33, 37, 41, 0.2) 0px 0px 1px 0px, rgba(33, 37, 41, 0.08) 0px 2px 16px 0px;
backdrop-filter: blur(30px);

The card's background remains opaque #f8f9fa. The computed blur does not establish a visible frosted-glass effect.

The search-button press and keyboard-focus captures add 0 0 0 3px rgba(32, 102, 236, 0.12) as the nonzero shadow layer. Its rest shadow is none. No site-wide elevation scale was verified.

Motion & Easing

The service-card link's raw computed transition is all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s. The probe reports a 300ms longest transition and waited 900ms before each state sample. This is measured component behaviour, not a global motion rule.

The other five sampled controls report all 0s ease 0s. Carousel motion, campaign changes and reduced-motion behaviour were not measured.

---

First-party sources: Live homepage (census, controls and screenshots, 2026-11-03); company (company date, operating commitments, Taipei headquarters); terms and privacy (operators and product services); product guide (features and audiences); nonsense-path control (HTTP 200 after error-page redirect, 17-byte body with no title; not a design-system source).

Components

Four controls have measured authored hover or pressed changes and are included as components.

• Search action — 搜尋: 60×40px, 8px radius, zero padding; blue background with a white 15px/400 child label. Hover changes #2066ec to #1e5fdb. Press changes it to #1b57ca and adds a 3px outer shadow at rgba(32, 102, 236, 0.12). The parent element's grey colour is not the visible label colour.
• Job filter — 職務: 171×40px, 10px radius, 7px vertical and 16px horizontal padding. Transparent over the white search bar, with a dark 16px/500 label. Hover and press fill it with #e9ecef.
• Navigation — 職接配: a link to /job-pair, 76×64px, square corners and padding 1px 0px 0px. The visible label is blue, 16px/500. Hover and press change the reserved 2px transparent bottom border to solid #2066ec; its transparent background stays over the white header.
• Service card — 各地人力銀行 / 活動資訊一覽: a link to https://job-fair.1111.com.tw/, 226.9×66px, 16px radius, padding 8px 16px, fill #f8f9fa, 1px #e9ecef border. Its title is #212529 at 16px/500, its subtitle is #495057, and its parent reports #343a40 at 14px/400. Hover and press add the shadow and computed backdrop blur detailed in §6.

Two further controls retain their measured geometry in prose:

• Search input — 搜尋工作職稱或公司名: 284×40px, 8px radius, 8px 40px padding, white fill, #495057 text at 16px/400, no border or rest shadow. Hover was measured with no change in the stated comparison scope; press and Tab focus show an auto outline. It is excluded from interactive component tokens.
• Job-title link — 行政助理: /job/132836124/, 176×27px, 0px radius and padding, transparent over white, #0f47b8 at 18px/500, no rest border or shadow. Hover and press are UNMEASURED; keyboard focus shows only a browser auto outline. It is excluded from interactive component tokens.

Measured radii are 0px for navigation/title links, 8px for search controls, 10px for the filter and 16px for service cards. A separate selected recommendation tab in the survey has 40px corners. Padding tokens retain their context: service-card x/y 16/8px, filter y 7px, search-input x 40px. No global spacing scale is inferred.

States

Hover was confirmed by :hover for search, filter, navigation, input and service card. Pressed captures confirm :active for those same five. Job-title pointer states remain UNMEASURED because :hover did not match.

The search button's Tab focus changes its background to #1e5fdb and adds the translucent 3px shadow. Its simultaneous auto outline is the browser's ring. All other measured focus changes are auto outlines only, including the input's blue outline. No auto outline is published as a brand focus token. The search button's authored focus changes are kept in prose; no component focus field is emitted. Every control's persistsAfterBlur list is empty.

The input's hover “no change” is limited to the tool's computed-style comparison: self and pseudo-elements, zero descendants, and three ancestor levels with pseudo-elements, including colours, borders, drawn outlines, shadow, transform, opacity, filters, size, decoration, backgrounds and masks. Siblings, pixels, closed shadow roots and cross-origin frame contents were not compared. Disabled, validation and submitted states were not measured.

Do's and Don'ts

• Use blue for the measured search action and navigation; preserve the distinct hover and pressed blues.
• Use the title span's size, weight and colour when reconstructing a control with a differently styled parent.
• Keep the rounded search bar and service cards, the career-stage navigation and the compact job metadata hierarchy.
• Keep Noto Sans TC's live-loaded status explicit. Do not present a CSS fallback as a verified loaded face.
• Do not apply the service-card effect to every job card: only the service-card link's states were measured successfully.

Voice & Tone

The product guide's “找工作求職懶人包，帶你見招拆招！” offers practical help in conversational Traditional Chinese. The homepage's labels pair short actions such as “搜尋” with career-stage choices. The terms' opening promises protection of personal data and safer job seeking. These examples support direct task labels and reassuring help copy; no formal voice guide was verified. Guide · Terms

Agent Prompt Guide

“Build a desktop job-search hero on white with a 1320px campaign area. Give its 60×40px search button an 8px radius, #2066ec fill and white 15px/400 label; hover #1e5fdb, pressed #1b57ca. Put a 171×40px transparent job filter beside the field; hover and press fill #e9ecef. Use Noto Sans TC as the live-loaded face.”

“Build the measured service-card link at 226.9×66px with 16px corners, 8px 16px padding, pale fill, thin border, a 16px/500 dark title and secondary description. Apply only its measured shadow and backdrop changes.”