Far EasTone DESIGN.md

Design System Inspiration of Far EasTone

Overview

Visual Theme & Atmosphere

Far EasTone is a Taiwanese telecommunications and digital-services company. Its official introduction connects mobile connectivity with entertainment, shopping, subscriber benefits and enterprise services. Far Eastern Group's company profile dates its establishment to 1997; Far EasTone's own brand timeline records the network launch in 1998. Company introduction, group profile.

The brand's long-running promise, “只有遠傳 沒有距離,” links communication with closeness. Its timeline describes a 2019 expansion of that idea through “靠得更近 想得更遠,” including reducing the distance between people and new technology. After the 2023 Asia Pacific Telecom merger, its campaign showed red- and green-clad cycling teams joining together as “新遠傳.” The timeline's 2024 entry turns to protecting everyday internet use from fraud. Brand timeline.

The measured homepage is the Traditional Chinese Taiwan edition at fetnet.net/content/cbu/tw/index.html (HTML lang="tw"), reached from the supplied root URL. Its live expression combines a photographic campaign hero, red action buttons, dark text, outlined secondary actions and cards that enlarge on hover. A 4px action-button radius sits alongside rounder topic chips. These observations describe the consumer homepage captured on 2026-11-03.

Primary tasks visible on this page include finding a mobile plan, renewing service, browsing devices, exploring digital services and reaching bill or account services.

Brand Narrative

Closeness is the continuity between the brand's original communication promise and its later digital-services positioning. The official introduction makes that evolution concrete through entertainment, shopping and the 遠傳心生活 subscriber-benefits service. The live homepage reflects that breadth in separate plan, device, video and benefits sections. Company introduction.

The trademark guide is a separate identity source. It explicitly prohibits altering FET trademarks and using them as decorative devices; it does not publish this reference's palette, typography or UI component values. Trademark usage guidelines.

Principles

For this measured reference, make the action hierarchy explicit with filled red and outlined links, keep dark text on light surfaces, and use card-level enlargement for the documented hover treatment. These are implementation rules derived from the captured controls, rather than attributed company design principles.

Personas

No persona research was verified.

Colors

These names describe measured UI constants. The survey found no first-party brand custom-property set.

The rendered census also counted #fafafa on 64 backgrounds. That is a page-wide observation, not an assigned brand surface token. Alpha values remain explicit: the primary CTA's video-mask parent is rgba(0, 0, 0, 0.5), while the card shadows use rgba(75, 88, 105, 0.12) and rgba(75, 88, 105, 0.18).

Typography

The evidence classes are separate:

• Official product use: the opened company and trademark pages do not identify a product text face.
• Live-loaded: the census lists only icomoon normal normal in loaded document.fonts faces. This common-fonts asset supplies icon-font evidence; it is not promoted to a text-family token or text specimen.
• Official distributed assets: the accessible @font-face declaration names icomoon, with ../../../resources/common/fonts/icomoon.ttf?t121w2 and ../../../resources/common/fonts/icomoon.woff?t121w2 as sources. No distributed text-font file was verified or downloaded.
• Declared-only: body, first h1 and first button declare "PingFang TC", Roboto, "Noto Sans TC", "sans-serif", "Microsoft JhengHei", 微軟正黑體, STHeitiTC-Light, "Microsoft YaHei", 微软雅黑, sans-serif. None of those named text faces appears in the loaded-face census. Google Fonts stylesheet URLs request Noto Sans TC and Roboto, but the probe could not read those cross-origin CSS rules. A request is not a loaded-face measurement.
• Unresolved: the actual rendered text face per script and its licence were not established. No text-font specimen or typography.family is supplied. Substitute: none chosen.

Measured type metrics remain useful independently of family availability:

Layout

At the captured 1440×1000 desktop viewport, section-title links start at x=128px. The four device-card anchors begin at x=138, 431, 724 and 1017px and measure 273×407px. The resulting 20px inter-card gap is calculated from those rectangles, rather than asserted as a CSS grid token. Their secondary-action anchors use 16px horizontal padding.

The viewport shows a fixed header, a wide campaign hero and a fixed quick-entry panel on the right. Below the hero, plan and device sections use category tabs and repeated card rows. Only this desktop arrangement was measured.

Responsive Behavior

Not measured: the capture covers desktop 1440×1000 only; no mobile breakpoint or touch behaviour is specified.

Elevation & Depth

Depth belongs to the article card's parent #interestCard-1, rather than the action anchor. Its resting shadow is rgba(75, 88, 105, 0.12) 0px 6px 12px 0px; hover and press produce rgba(75, 88, 105, 0.18) 0px 18px 36px 0px. The same states apply matrix(1.05, 0, 0, 1.05, 0, 0) to that parent. This pairs enlargement with a broader, darker shadow.

The measured primary, secondary and navigation anchors have no own box shadow. The secondary CTA's enclosing Apple card has the resting 12% shadow, but its measured hover changes list only the parent transform; a hover-shadow change is not asserted for that separate card.

Motion & Easing

The primary and secondary action anchors declare the raw computed transition all 0.3s ease 0s. The navigation link and article action anchor declare all 0s ease 0s. The article's moving parent is a separate element; no raw parent-transition string was captured, so its easing is not assigned here.

The measured article motion ends at parent matrix(1.05, 0, 0, 1.05, 0, 0) and an arrow translation of 57.6px. No additional motion scale or cubic-bezier curve is specified.

---

Live measurements: consumer homepage, 2026-11-03. Narrative and identity: company introduction, brand timeline, group profile, trademark guide. Country support: the copyright notice names 遠傳電信股份有限公司 and gives a contact address at 台北市內湖區瑞光路468號; the offices page independently labels that location headquarters. Neither source is recast as a registered-address certificate.

Components

The following four controls have measured hover and pressed changes. Their PNG crops confirm the intended elements. Backgrounds described as transparent are omitted from machine component bg fields.

The article anchor's 0px radius does not establish its parent's corner radius. The secondary CTA's size change comes from its ancestor's transform; the link itself retains transform: none.

The surveyed OPPO hero 立即申辦 link is 220×50px, radius 4px, padding 0px 16px, 16px/500, with #d3060f / #ffffff. Its state locator found no control on the states load, so it contributes no interactive component token. The 舊機回收 topic link is 84×34px with a 30px computed radius and 0px 12px padding; its states were not measured.

States

All eight retained pointer-state observations have the appropriate live pseudo-class: :hover for hover and :active while pressed. Pressed states add no captured change beyond hover.

Only nav-rates was reached by real Tab focus, at Tab #7. It matched :focus-visible; the comparison found no change across the link, its pseudo-elements and three ancestor levels. No outline was drawn, and no focus token is declared. The other three retained controls were not reached within the 500-Tab cap; their keyboard focus is UNMEASURED. The hero locator was not found, so all its states are UNMEASURED. Disabled states were not measured.

The first-party cookie banner remained open: its only surveyed button was 我知道了, with no verified reject or close button. hideOverlays: true was enabled for the pointer pass, but the state records contain no overlaysHiddenForThisControl entries. These are raw observations with that consent limitation, not evidence of consent rejection. The comparison covers computed styles and recorded attributes, not every possible pixel or external-media change.

Do's and Don'ts

• Preserve the distinction between the resting action red and the brighter interaction accent.
• Use the measured 4px action corners and 16px horizontal padding for the captured button styles.
• Give the nav link its separate red bar; recolouring its label would not reproduce the observed state.
• Apply the article transform and shadow to the enclosing card, so its content scales together.
• Preserve the secondary label's measured weight of 400 when reproducing that instance.
• Keep unverified font families, focus treatments and mobile behaviour out of the reference's implementation claims.

Voice & Tone

The homepage greets the visitor with a direct question about finding a telecommunications plan. Surveyed actions use compact verbs: 立即申辦, 立即看, 了解更多, 去挑方案. Reproduce that short, task-oriented wording pattern. This is an interpretation of the captured copy, not a published voice standard.

Agent Prompt Guide

“Build a Far EasTone-style primary action using the measured video-panel link: 30px high, 4px corners, 0px 16px padding, 16px/500 white label, background #d3060f, and #ef3123 on hover and press. No verified text-family or focus token is supplied.”

“Build the measured article action as a white, dark-text card link. Keep the anchor 376.7×240px at rest, with a 20px/500 title. On hover or press, scale the enclosing card to 1.05 and use its measured 18px/36px shadow. Reveal the red 看更多 action and move its arrow 57.6px.”