The Mini-App combines resort navigation, ski conditions, dining, shops, tickets, favorites, and account screens. Without a shared system, category icons, map markers, button states, and bilingual type hierarchy drift between those surfaces.
A UI kit for maps, commerce, and bilingual guest journeys
Four implementation boards align icons, colors, controls, and Latin-Chinese typography across the Rosa Khutor WeChat Mini-App.
Implementation narrative
The UI kit defines active and inactive navigation icons; home, shop, and map-marker sets; primary, secondary, and semantic slope colors; small and large button variants with active and disabled states; and a four-level heading and body hierarchy tested with Latin and Chinese text. The typography board also specifies a small-screen reduction rule below 340 px.
Design and implementation share one reference for reusable visual tokens and component states across the guest-facing Mini-App.
UI kit
Icons and map markers
Inactive and active navigation, home categories, general actions, shop types, and map-marker variants.
Color system
Primary and supporting tokens plus semantic colors for easy, intermediate, difficult, and very difficult ski slopes.
Button system
Small and large primary, secondary, and icon buttons across default, active, disabled, and colored-background contexts.
Typography and font weights
Heading and body scales, responsive guidance, and light, regular, and bold treatments for Latin and Chinese text.