Yahoo Taiwan

Overview

Yahoo Taiwan is a high-traffic digital ecosystem serving millions of users seeking news, financial data, shopping, and lifestyle content. The design system embraces a 'Clean Pragmatism' aesthetic—maximizing information density and scannability through a predominantly white canvas (surface: #ffffff) with strategic accent colors that guide user attention without visual noise. The brand personality is authoritative yet approachable: trustworthy, fast, and respectful of user time. Voice is direct and informative, avoiding hyperbole. Example: 'Taiwan stock index rises 1.49% on tech gains—view full market data.'

Colors

The color system balances a neutral, light-dominant foundation with two vibrant accent families: purple (primary: #7d2eff) for brand actions and navigation, and blue (secondary: #0f69ff) for secondary interactions and links. Red (tertiary: #eb0f29) is reserved for alerts, breaking news, and high-priority content. The surface stack progresses from pure white (#ffffff) through subtle grays (#f5f8fa, #f0f3f5, #e0e4e9) to darker neutrals (#6e7780, #232a31) for text hierarchy. Primary (#7d2eff) is applied to call-to-action buttons, active navigation states, and brand-critical interactive elements—it appears less frequently but commands attention. Secondary (#0f69ff) supports links, secondary buttons, and data visualization accents. Tertiary (#eb0f29) marks urgent content: stock alerts, weather

Typography

The type system uses Helvetica Neue as the primary typeface, with Arial and sans-serif as fallbacks—a deliberate choice reflecting Yahoo's legacy as a trusted information source while maintaining modern legibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) introduces major content sections; headline-md (28px, 600 weight) breaks up article groups. Title-lg (20px, 600 weight) labels card headers and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for article previews and long-form content; body-md (16px, 400 weight, 24px line-height) is the default for UI text and descriptions. Label-md (14px, 600 weight, 0.01em tracking) marks buttons, badges, and form labels; label-sm (12px, 500 weight) is ap

Layout

The layout follows a 12-column grid system with a max-width of 1280px, centered on viewport. The page rhythm is driven by a 24px gutter (md spacing) for horizontal padding and 40px (lg spacing) for vertical section separation. The left sidebar (200–240px) contains persistent navigation; the main content area (800–1000px) holds news feeds, cards, and widgets; the right sidebar (280–320px) displays weather, stocks, and promotional content. White-space is used aggressively: cards are separated by 24px vertical gaps, and internal card padding is 24px on all sides. Container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Spacing scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact list items, md (24px) for standard card padding

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not dramatic elevation changes. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Cards): box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 1px solid border at {colors.surface-container} (#e0e4e9). Level 3 (Hovered Cards / Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border remains 1px at surface-container. Level 4 (Floating Overlays / Dropdowns): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), used sparingly for modals and popovers. Shadows use a consistent 0° angle (straight down) with 10% to 15% opacity black, ne

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are applied consistently to reduce visual harshness while maintaining a professional, trustworthy appearance. Buttons and chips use rounded.lg (1rem / 16px) for a friendly, clickable appearance. Cards and input fields use rounded.DEFAULT (0.5rem / 8px) for a balanced, modern look. Badges and tags use rounded.full (9999px) for maximum softness and visual distinction. Modals and dropdowns use rounded.lg (1rem) to match button styling and create visual cohesion. The rationale: 8px radius is the minimum for touch targets (44px height minimum

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#7d2eff) with white text, 48px height, 12px 24px padding, and rounded.lg (16px). On hover, shift to #6001d2 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and transition: all 0.218s ease-in. Button-secondary is transparent with a 1px border at {colors.outline} (#979ea8), same padding and height, text in primary color. On hover, fill background with {colors.surface-container-low} (#f0f3f5). Button-tertiary uses {colors.tertiary} (#eb0f29) for urgent actions (e.g., 'Delete', 'Alert'). All buttons must have a minimum 44px touch target height; use padding to expand beyond text width. Avoid disabled state by removing the button from the DOM; if disabled is necessary, set opacity: 0.5 and cur

Do's and Don'ts

**Do**

• Do use primary (#7d2eff) exclusively for brand CTAs, active navigation, and focus states—never for body text or backgrounds.
• Do maintain 24px (md spacing) gutters between major sections and 12px (sm spacing) for compact list items to ensure visual rhythm.
• Do apply box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) to cards and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to create subtle depth without visual clutter.
• Do use Helvetica Neue with Arial fallback; never substitute with system-ui or generic sans-serif in production.
• Do apply 0.218s ease-in transitions to all interactive state changes (hover, focus, active) for consistent motion.
• Do ensure all interactive elements have a minimum 44px touch target height, even if text is smaller.

**Don't**

• Don't use primary color (#7d2eff) for body text, backgrounds, or non-interactive elements—it should appear sparingly and command attention.
• Don't apply rounded corners smaller than 8px (rounded.DEFAULT) to interactive elements; use 0px only for structural dividers.
• Don't use colored shadows (e.g., shadow with purple tint); always use rgba(0, 0, 0, X) for consistency.
• Don't exceed 3 accent colors in a single view; stick to primary (#7d2eff), secondary (#0f69ff), and tertiary (#eb0f29) only.
• Don't apply blur effects (backdrop-filter) to standard cards; reserve them for full-screen overlays and modals only.
• Don't use opacity below 0.5 for disabled states; instead, remove the element or use cursor: not-allowed with 0.5 opacity.