Meituan DESIGN.md

Design System Inspiration of Meituan

Overview

Visual Theme & Atmosphere

Meituan (美团) describes itself as a technology retail company, following a “Retail + Technology” strategy and the mission “We help people eat better, live better.” Established in March 2010, it connects services and goods retail; its privacy policy documents nearby discovery, food and other service orders, payment, movie tickets, travel and accommodation. Company · Product scope

The measured Simplified Chinese corporate homepage (meituan.com/, HTML lang="zh-CN") expresses that breadth through a luminous yellow hero, a large custom-font headline, a fixed header and an editorial news grid. Yellow #ffd100, dark ink #111925, white panels and a cool #f7f8f9 ground provide the visual structure. A double-width lead story sits beside a standard-width card. The restrained outlined news action and small yellow navigation marker give interaction feedback without filling the page with yellow buttons. Live homepage

Meituan's 2020 design writing associates the brand with yellow, the kangaroo, dish-card lists and delivery riders, while distinguishing business-specific design systems. These associations provide context; the numeric recipes here come from the current corporate homepage. The homepage now leads with a 2 November 2026 LongCat-2.5 story, discussing merchant AI tools; that company-hosted report credits 经济观察报 as its source. Design writing · Company-hosted news

Primary tasks

• Read company and technology news.
• Find partnership, investor and recruitment information through the header.
• Find Meituan's apps and social channels through “下载和关注”.
• The wider product supports ordering and payment, and booking movie tickets or hotel/travel services; their transaction screens were not measured. Privacy policy

Brand Narrative

An interview reproduced by Meituan's technical team identifies Wang Xing (王兴) as its founder in 2010. Its first-party history records the website's launch on 4 March 2010, during the group-buying boom, and describes its subsequent expansion into delivery. The company page records the Hong Kong listing on 20 September 2018. Founder history · History · Company

Its 2020 design account describes an effort begun in May 2019 to make delivery interfaces consistent across Android, iOS and MRN. It connects reusable components with a controlled palette, typography roles and shared illustration resources, using the 积木 toolchain and 袋鼠UI project. This documents a design practice, not a current public token specification for every business. Design account

Today the corporate homepage combines that yellow brand recognition with its technology retail positioning. Its leading story concerns LongCat-2.5 and an AI workbench for local-service merchants, in a company-hosted report credited to 经济观察报. The editorial emphasis is an observation of the homepage's current content. Company-hosted report

The official media page lists Meituan and business marks, news images and mascot assets. It limits library images to personal or editorial use; the listed packages were not downloaded. Media resources

Principles

• Customers first: the company's stated orientation on its company page. Company
• Consistency grounded in each business: the design article explains why delivery, hotel/travel and group-buying have different systems; preserve context when reusing a measured pattern. Design account
• A clear lead story: the observed two-to-one card hierarchy distinguishes the main news item without changing the title colour or inventing a badge system.

Personas

No sourced demographic personas were established; the homepage visibly routes partners, investors and job seekers through their respective navigation links.

Colors

These are observed corporate-site values, rather than a complete app palette. The census contains 75 computed root custom properties; most belong to Tailwind or Ant Design Mobile. The site's logo SVG and the navigation marker independently establish the yellow value.

Paragraph foreground is alpha-bearing: rgba(15, 25, 37, 0.65) on seven <p> elements and rgba(17, 25, 37, 0.35) on three. These are retained in prose, without inventing an opaque body-colour token. The news action has a 1px solid rgba(17, 25, 37, 0.2) border. No semantic success, error, coupon, rating or price colour was established for the product.

Typography

Official product-use statement: no opened company document specifies a single typeface for all Meituan products. Its design article describes Headline, Subtitle, Body, Button and Caption roles, and explicitly allows different business systems; it does not supply a current, universal font-family specification. Design writing

Live-loaded: the census reports exactly MTTiJ 400 normal. The homepage h1 declares MTTiJ first. This supports a display family token for this surface. It does not establish MTTiJ as the navigation or body face.

Official asset references: the homepage stylesheet declares MTTiJ with font-display: swap, normal style and weight 400, referencing meituan-type-daily-words.woff2 and daily-words-mt-type.ttf on s3plus.meituan.net. It also declares MTTiF 400 normal with WOFF2 and TTF URLs. These font files were not downloaded, and their licensing was not inspected. Current stylesheet

Declared-only: body CSS lists "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Helvetica Neue", Helvetica, Arial. The measured links resolve their computed font-family property to PingFang SC, but that is a declaration, not a loaded-face observation. MTTiF is declared but absent from the loaded list. None of these faces receives a specimen or a family token here.

Unresolved: actual platform glyph selection for the body, product-wide typography and font redistribution rights. Substitute: none chosen.

Layout

At 1440 × 1000, an 80px fixed header tops a centred company introduction and a news section. The survey's full capture is 2613px high. The lead card wrapper is twice the standard card width; both are 496.2px high. Their 10px left and right padding separates the visible panels. Use this hierarchy to distinguish the leading story from the supporting news.

The page combines a yellow glow around the introduction with a cool ground around the white news panels. Card titles precede short descriptions and pale dates. The footer collects company, recruitment and contact routes into columns. These are observed arrangements, rather than a newly invented spacing scale.

Responsive Behavior

Rendered responsiveness was not measured; the capture is desktop 1440 × 1000 only.

Elevation & Depth

Both measured news-card inner panels start with box-shadow: none. On hover and while pressed they acquire the exact computed shadow rgba(0, 0, 0, 0.1) 0px 4px 12px 0px. The outer link wrappers remain shadowless. A black image ::after changes opacity from 0 to 0.15, so the image darkens while its content enlarges.

The fixed header appears above the scrolling content; the survey records z-index: 10000. No product modal, checkout-bar, picker or toast elevation was measured.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.news-card-hover: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px

Motion & Easing

The measured movement is local: a navigation marker grows, news images scale to 1.1 beneath a black overlay, and the app-menu arrow rotates. Every selected anchor's raw computed transition string is all 0s ease 0s. The capture does not retain raw computed transition strings for the animated descendants, so no descendant duration or easing token is assigned.

No fly-to-cart, order-status animation, carousel transition, spring behaviour or reduced-motion response was verified.

Components

All controls below are links on the corporate homepage. Real pointer hover, held press and a Tab walk were measured after clicking the cookie banner's “拒绝 Cookies” control. Consent controls are excluded from the component set.

• News action — 查看全部: 96 × 32px; 6px radius; zero outer padding; transparent at rest over #f7f8f9; #111925 label; the alpha border described above. The visible label is 14px / 400. Hover fills #f5f5f5; press fills #ebebeb.
• Navigation — 我们的科技: 80 × 60px; 0px radius and padding; transparent; #111925, 16px / 400. Transparent 18px top and bottom borders contribute to its hit area. Hover reveals a yellow 24 × 5px ::after marker inside the label; held press retains it.
• Lead news card: the link wrapper is 866.7 × 496.2px, transparent, 0px radius and 0px 10px padding. Its white inner panel contains a 20px / 500 title, description and date. Hover adds the shadow in §6, scales the visible image to 1.1 and raises a black image overlay to opacity 0.15; held press matches hover within the probe's compared scope.
• Standard news card: 433.3 × 496.2px link wrapper, otherwise the same measured wrapper styling and feedback. The current example links to the 2026 food-delivery industry conference story.
• Footer — 媒体资源: 56 × 21px; 0px radius and padding; transparent over #f3f3f4; 14px / 400. Hover and press change both anchor and label from #656a72 to #111925 and add an underline.

The card wrappers' square geometry must not be confused with their rounded inner panels. The opened stylesheet declares the inner .r,.s panels at 1rem radius in its desktop rule; the probe did not record those descendants' computed radii. Card stylesheet

The “下载和关注” menu link is 100 × 24px, transparent, 0px radius/padding and 16px / 400 #111925. Hover and press rotate its arrow to matrix(-1, 0, 0, -1, 0, 0). Keyboard focus was UNMEASURED. Its dropdown is visible in the screenshot but lies outside the control's descendant comparison; this menu remains a prose observation.

No search input, ordering CTA, coupon chip or merchant card appears in the surveyed interactive list.

The visible hero label “下载美团App” was not included in that interactive list and was not measured for states.

States

The first five focus snapshots show rgb(0, 95, 204) auto 1px off 1px; after blur, the outline disappears. That is browser feedback and supplies no brand focus token. Pointer snapshots confirm :hover; held-press snapshots confirm :active. The compared scope includes self, descendants, their pseudo-elements and three ancestor levels; sibling dropdown content and pixel-only effects are outside that scope.

Empty, loading, disabled, payment-failure and order-tracking treatments were not measured.

Do's and Don'ts

• Use #ffd100 for the observed logo and short navigation marker, with dark #111925 labels elsewhere.
• Build white editorial panels on #f7f8f9, retaining title, description and date hierarchy.
• Give “查看全部” distinct hover and pressed fills, while preserving its outline and compact dimensions.
• Keep the link wrapper's geometry separate from the inner panel and image styling.
• Limit MTTiJ to its verified display role; leave body-family choice unresolved.
• Preserve actual state changes on children and pseudo-elements. Changing only the anchor's colour would miss the navigation and card feedback.

These are implementation directions derived from the observed homepage, not published company rules.

Voice & Tone

The homepage pairs a public mission with short routing labels: “我们的科技”, “和美团合作”, “查看全部” and “下载和关注”. The English company page supplies the mission translation used in §1. The Chinese mission includes “帮大家” before “吃得更好，生活更好”. Homepage · English company page

The visible corporate copy describes the business and directs visitors to information. No product-wide rule about using 你 rather than 您, prohibited phrases, delivery estimates, errors or empty-state wording was verified.

Agent Prompt Guide

“Build a Meituan corporate news surface with a cool #f7f8f9 ground, white panels, dark #111925 titles and #b8babe dates. Give the lead story a double-width link wrapper. Use a 96 × 32px outlined ‘查看全部’ link with a 6px radius, 14px / 400 visible label, hover #f5f5f5 and pressed #ebebeb. On a navigation label, reveal a #ffd100 24 × 5px marker. Use the measured card shadow and 1.1 image scale on hover. Body typeface remains unresolved; Substitute: none chosen.”