翼语通 (YiYuTong)

Overview

翼语通 is an intelligent airport gate broadcast system designed for operational clarity and user confidence in high-stakes environments. The interface serves airline staff and passengers who require rapid, unambiguous information delivery during time-sensitive boarding scenarios. The design philosophy embraces Neo-Brutalism—a contemporary movement that rejects ornament in favor of honest structural expression, combining Dieter Rams' "Good Design" principles (especially "as little design as possible") with tactile, physical feedback through hard-edged drop shadows (5px 5px 0 0 rgba(185, 178, 168, 1)) and deliberate border weights (1.5px solid #999188). The emotional response is one of calm authority: the UI feels grounded, trustworthy, and purposeful, never frivolous. Voice: direct, precise, operational. Vocabulary emphasizes clarity over warmth—"航班号" (flight number), "目的地" (destination), "进入广播主页" (enter broadcast homepage). Example sentence: "输入一次，所有广播调自动填入" (Enter once, all broadcasts auto-populate).

Colors

The color system balances functional minimalism with strategic accent deployment. **Primary (#7BCBFF)** is the signature accent—a cool, confident cyan deployed on all call-to-action buttons ("进入广播主页"), interactive states, and focus indicators. It appears in the header hero zone and search tags, commanding attention without aggression. **Secondary (#FFE66A)** is a warm, purposeful yellow reserved for status badges and highlights ("热门" hot items), creating visual rhythm through warm-cool contrast. **Tertiary (#6FD8C7)** is a muted teal used for success states and confirmatory feedback. **Error (#FF998F)** is a soft coral applied to the favorites FAB and destructive actions. The surface stack is deliberately warm and neutral: **Surface (#F7F3EC)** is a soft beige-gray (RGB 247, 243, 236) that

Typography

The type system enforces hierarchy through weight and size, not color. **Display (32px, 700 weight, -0.02em tracking)** is reserved for hero moments; **Headline-LG (28px, 700)** for page titles; **Headline-MD (19px, 600, -0.02em)** for section headers and card titles. **Body-LG (16px, 400, 0.01em)** is the primary reading size for input placeholders and descriptive text; **Body-MD (14px, 600, -0.01em)** for card metadata and secondary labels. **Label-MD (12px, 600, 0.02em)** and **Label-SM (10px, 600, 0.02em)** are used for badges, tags, and micro-copy. All type uses the system font stack: Inter (for Latin), Noto Sans SC (for Simplified Chinese), PingFang SC (fallback), with -apple-system and BlinkMacSystemFont for native rendering. Letter-spacing is negative on display/headline sizes (-0.

Layout

The layout is mobile-first, constrained to 430px max-width (matching common mobile viewports). Pages use a 2-column grid for scenario cards (gap: 12px) and single-column flex for list items. **Gutter spacing is 16px** on all sides (padding: 16px); **section separation uses 20px margin-bottom** (lg spacing). The page container includes 120px bottom padding to accommodate the fixed FAB and safe-area insets (calc(16px + env(safe-area-inset-bottom))). Spacing follows an 8pt grid: xs=4px, sm=8px, md=12px, lg=16px, xl=24px, 2xl=32px. Cards use **18px padding** (xl spacing); buttons use **12px vertical, 14px horizontal** (md + sm); inputs use **14px vertical, 16px horizontal** (md + lg). The container is centered with margin: 0 auto; background: var(--bg); position: relative; overflow-x: hidden t

Elevation & Depth

Depth is conveyed through Neo-Brutalist hard shadows, not blur or soft gradients. The shadow system uses four levels: **Level 1 (XS): 2px 2px 0 0 rgba(185, 178, 168, 1)** for small interactive elements (badges, small buttons). **Level 2 (SM): 3px 3px 0 0 rgba(185, 178, 168, 1)** for standard cards and buttons at rest. **Level 3 (MD): 5px 5px 0 0 rgba(185, 178, 168, 1)** for elevated cards and primary CTAs. **Level 4 (LG): 7px 7px 0 0 rgba(185, 178, 168, 1)** for hover states and modals. The shadow color is always #B9B2A8 (a warm gray-brown), never black, maintaining the warm-neutral palette. O

Shapes

The shape philosophy is **Structural Minimalism**: radii are small and purposeful, never decorative. **Buttons and inputs use 4px (DEFAULT)**, a subtle softening that aids touch targets without appearing rounded. **Cards use 8px (lg)**, creating visual distinction from buttons while maintaining geometric clarity. **FAB uses 9999px (full)** for the traditional circular form. **Badges and tags use 2px (sm) or 5px (md)**, keeping them visually subordinate to primary containers. The rationale: small radii (≤8px) feel technical and controlled, aligning with airport operations and Dieter Rams' princ

Components

Action Elements **Button-Primary** (background: #7BCBFF, padding: 12px 14px, height: 44px, border-radius: 4px, border: 1.5px solid #999188, box-shadow: 5px 5px 0 0 rgba(185, 178, 168, 1)) is the primary CTA for navigation and form submission. On active state, background shifts to #3EA9F6, shadow compresses to 3px 3px, and transform: translateY(1px) simulates press. On hover, shadow expands to 7px 7px and transform: translateY(-2px) lifts the button. Transition all properties over 200ms ease-in-out. **Button-Secondary** uses surface-bright background with outline border, same padding and height, for tertiary actions. **FAB (Favorites)** is a 52px circle (border-radius: 9999px) with background #FF998F, fixed positioning at bottom-right with calc(16px + env(safe-area-inset-bottom)) offset

Do's and Don'ts

**Do**

• Do use hard shadows (5px 5px 0 0 rgba(185, 178, 168, 1)) consistently—they are the primary depth cue and reinforce the Neo-Brutalist aesthetic.
• Do apply negative letter-spacing (-0.02em) on headlines and positive (0.02em) on labels to optimize readability at each size.
• Do transition all interactive states over 200ms ease-in-out, pairing shadow changes with translateY transforms for tactile feedback.
• Do constrain the layout to 430px max-width and use 16px gutters on mobile to maintain legibility and touch-target sizing (44px minimum height).
• Do use the warm neutral palette (#F7F3EC background, #35322F text, #999188 borders) to reduce eye strain in operational environments.
• Do reserve primary (#7BCBFF) for CTAs and focus states only—it is the signature accent and loses impact if overused.

**Don't**

• Don't use soft, blurred shadows (box-shadow: 0 4px 12px rgba(0,0,0,0.1))—they contradict the honest, structural aesthetic. Hard shadows only.
• Don't apply color to body text; use only {colors.on-surface} (#35322F) for readability. Reserve secondary and tertiary colors for accents and badges.
• Don't exceed 8px border-radius on cards or buttons; anything larger feels soft and contradicts the minimalist philosophy.
• Don't use pure black (#000000) or pure white (#FFFFFF) for text or backgrounds; use the warm neutrals (#35322F, #FFFDFA, #F7F3EC) instead.
• Don't animate shadows with blur or spread changes; only use hard offset shadows (2px, 3px, 5px, 7px) paired with transform: translateY.
• Don't override the system font stack (Inter, Noto Sans SC, PingFang SC, -apple-system, BlinkMacSystemFont); it ensures consistent rendering across platforms and languages.