Yuanta Securities DESIGN.md

Design System Inspiration of Yuanta Securities

Overview

Visual Theme & Atmosphere

Yuanta Securities (元大證券) provides securities, futures-related and trust services. Its company introduction describes a Taiwan-based business expanding internationally and identifies it as a subsidiary of Yuanta Financial Holding. Its history records the adoption of the present Chinese and English company names in July 2015. Company introduction, company history.

The homepage combines a white corporate header, a blue navigation band, campaign imagery, gold outline service icons and a dark market-information section. A compact trading panel stays prominent over the hero. The shortcut grid makes account opening, investment products and beginner guidance visible together. Blue, gold and dark slate form the observed website's distinctive combination; these are observations of the live surface, rather than an official identity specification. Live homepage.

Yuanta's current product writing emphasizes reducing information burden: its 投資先生 app announcement describes a simplified market view, visualized key data and one-tap switching between simple and professional modes. This provides a documented direction for its digital services. Official app announcement.

The measured homepage is the Traditional Chinese Taiwan surface (www.yuanta.com.tw/eyuanta/, HTML lang="zh-TW"), reached from the supplied root URL.

Brand Narrative

The company introduction joins wealth creation with integrity and protection of customer rights, and describes a Taiwan base with international investment access. Its more recent product writing connects asset usefulness with transaction security: the official “靈活持股” and device-binding announcement discusses both in the same account of digital-service development. Company introduction, official product announcement.

Principles

These implementation principles are inferred from the captured website: separate trading, service discovery and news into visible regions; keep shortcuts legible with a distinct icon and label; and give individual control types their measured interaction treatment. The app announcement separately documents simplification and visualized data as product directions. Official app announcement.

Personas

No user research or validated personas were verified.

Colors

These names describe measured roles. The survey found no CSS custom properties, so they are not presented as company-authored variable names.

The paragraph census contains white ×15 and #636363 ×4. White is common in the dark sections; it should not be interpreted as the base body colour on the white canvas. The base foreground is independently declared in the first-party stylesheet. Global CSS, homepage CSS.

Typography

• Official product use: no first-party statement naming a product typeface was verified.
• Live-loaded: document.fonts reports Unica One 400 normal. The site's vendored Highcharts theme injects a Google Fonts stylesheet and assigns this family to charts. It is a chart-theme face and is excluded from the interface family tokens. Theme source.
• Official distributed assets: no company font distribution or associated font licence was verified.
• Declared-only interface faces: the survey's body family is Arial, Helvetica, 微軟正黑體; the sampled button family is Arial. The states capture declares Arial on five selected controls and Microsoft JhengHei UI on 快速下單. These declarations do not establish loaded faces or the actual font supplying Chinese glyphs. No specimen is provided for them.
• Unresolved: the interface's rendered font family and script-by-script glyph fallback. No interface family is published in the tokens. Substitute: none chosen.

Preserve the measured metrics independently of that unresolved family: utility navigation 12px/400, line-height 40px; market more link 14px/400, line-height 21px; shortcut labels 16px/700, line-height 22.4px. Search is 14px/400, line-height 19.6px; 快速下單 is 16px/400, line-height 22.4px. The global stylesheet declares the base body at 16px with 140% line-height. Global CSS.

Layout

At the captured 1440 × 1000px viewport, use a dense header above a full-width blue navigation band and a wide hero. Place the compact WEB下單/AP下單 trading panel toward the hero's left side. Follow with a horizontal common-functions strip and a white shortcut section displaying five columns and two visible rows of icon links.

Below the shortcuts, the captured full page places the market chart beside a news list, then digital-service summaries, promotional image cards, a customer-service panel and the group/legal footer. This is the observed desktop composition. Live homepage.

Responsive Behavior

Only the 1440 × 1000px desktop viewport was measured; mobile layouts and breakpoint behavior were not verified.

Elevation & Depth

All six selected product controls report box-shadow: none. The shortcut region uses a pale geometric background image; the market and customer-service regions use large image backgrounds. The observed control styling relies on borders, ink and image layers. No elevation scale was verified.

Motion & Easing

The market more link's raw computed transition is all 0.2s ease 0s. The other five control roots report all 0s ease 0s. These are the exported root-level strings; they do not define a global motion scale or describe every descendant. No custom easing curve or reduced-motion behavior was verified.

Components

All six controls were inspected at rest, with a matched hover, during mouse-down and under real keyboard Tab focus. The announcement was closed through its × control before the states pass. Five controls have authored interaction changes and are included in the component tokens.

• Account-opening action — 我要開戶: a link, 261 × 102.4px, square corners, padding 60px 0px 20px, label 16px/700. Its own background is transparent over the white shortcut section. The label changes #454f5c → #000000; a 3px solid #2d92cb bottom border appears on the label span, and the alternative 60 × 60px image layer becomes visible. The pressed capture has the same treatment.
• Secondary action — market more: the link beside the chart is 53.9 × 23px, with 2px radius, 0px 10px padding and 14px/400 type. It starts transparent, with a 1px solid #dfaf4a border and gold ink, over the blue market-section image. Hover and press fill it #dfaf4a and turn its text #ffffff.
• Utility navigation — 關於元大: a transparent link on the white header, 48 × 40px, radius 0px, padding 0px, 12px/400 type. Its foreground changes #030303 → #0067b3 on hover and press.
• Product shortcut — 投資先生: a card link with the same 261 × 102.4px geometry, padding, type and interaction treatment as 我要開戶. Its icon and label occupy the white shortcut section without an opaque card fill.
• Trading action — 快速下單: a transparent link on the #273647 table, 64 × 22.4px, radius 0px, padding 0px, 16px/400 type. Rest is white; hover is #00ffff; press returns to #ffffff. The stylesheet explicitly supplies different hover and active colours. Homepage CSS.

The 股名/代碼 search input is 80 × 28px, square, with 0px 5px padding, white background, #777777 computed foreground, no own border and no shadow. Its hover showed no change within the probe's comparison scope. Press and keyboard focus showed only a browser auto outline. It is retained here without a component token.

States

No authored focus token was found in these captures. “No observed change” is limited to computed styles and attributes on the control, its pseudo-elements, descendants and three ancestor levels. The two shortcuts include five descendants and two images each; the other four controls have no descendants. Disabled, error and validation states were not measured.

Do's and Don'ts

For a reference implementation, preserve the measured link semantics and backgrounds. Keep the shortcuts square, reserve the gold outline treatment for the small market more action, and put the blue interaction rule on the shortcut label span.

Do not turn transparent links into filled buttons, apply the cyan trading hover to every navigation link, or promote the chart theme's font and colours into the corporate interface palette. Keep the measured font metrics while leaving the unresolved family absent.

Voice & Tone

The visible homepage uses direct task labels: “我要開戶” (I want to open an account), “新手上路” (getting started) and “請選擇您想要的服務” (choose the service you want). Use concise service names and an explicit next action. This is an interpretation of the captured copy, not a verified company voice manual. Live homepage.

Agent Prompt Guide

“Build the measured Yuanta homepage style with a white header, blue navigation band, wide campaign hero and a compact slate trading table. Use gold outline shortcut imagery and dark labels. A shortcut link is 261 × 102.4px with square corners, 60px top and 20px bottom padding, and a 16px/700 label. On hover and press, blacken the label, reveal its alternative icon image and add a 3px #2d92cb bottom border to the label. Use only a separately verified interface font; no substitute is chosen here.”

“For the market more link, use a 23px height, 2px radius, 0px 10px padding and 14px/400 text. Keep the resting fill transparent over its section, with gold text and border; hover and press use the gold fill and white ink.”