Ctrip DESIGN.md

Design System Inspiration of Ctrip (携程)

Overview

Visual Theme & Atmosphere

Ctrip is China's largest online travel agency — founded in Shanghai in 1999, listed since 2003, and the parent of the Trip.com Group that now also owns Skyscanner. Its interface has the job every OTA has: put a dense, comparable inventory of flights, hotels and packages in front of someone who is price-sensitive and in a hurry.

The result is information-dense and deliberately plain. Body text runs at 14px on #ffffff in Pingfang SC, and of roughly two thousand sampled elements 817 render at 14px with another 426 at 12px — over 60% of the page is set at those two sizes. Nothing is enlarged for drama. Ctrip builds hierarchy with a blue that appears only on interactive things, orange that appears only on urgency, and gold that appears only on star ratings.

What distinguishes it from most of this catalog is the token architecture underneath. A Ctrip page resolves a genuine three-tier system: coreColor* primitives, smtcColor* semantic roles, and comp* component-scoped values. That is a mature structure — most references in this catalog have one flat layer or none.

Primary tasks

• Compare many priced options on one screen without scrolling past the fold.
• Spot the state that matters — available, discounted, favourited, rated — at a glance.
• Move between verticals (hotels, flights, packages) that share one chrome.

Brand Narrative

Founded in Shanghai in 1999 and listed on Nasdaq in 2003, Ctrip consolidated Chinese online travel through the 2010s, merging with Qunar in 2015 and acquiring Skyscanner in 2016. The group renamed itself Trip.com Group in 2019 while keeping 携程 as the domestic brand. The three-tier token system measured here reflects that scale: a company running several verticals and several brands needs primitives it can re-skin, semantic roles it can hold stable, and component tokens it can vary per product.

Principles

• Comparison before persuasion. The layout exists to make options line up.
• Colour is categorical. Blue = interactive, orange = urgent, gold = rated, red = saved.
• Tokens are layered. Primitive, semantic, component — so a vertical can change its components without touching the palette.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured 2026-09-22 with getComputedStyle on ctrip.com (404 custom properties) and hotels.ctrip.com (417). Ctrip's own token name is given beside each role.

The three tiers

core*   286   primitives          coreColorBlue1-5 · coreColorGray1-9 · coreColorOrange1-5
                                  coreColorGreen1-4 · coreColorBluegray3-9 (+245 icon glyphs)
smtc*    86   semantic roles      smtcColorTextBrand · smtcColorBgSurfaceSecondary
                                  smtcColorBgFavorite · smtcColorBgStarRating · …
comp*    30   component-scoped    compHotelMapActiveLine · compSearchBoxCalendarHighlight · …

Brand

• Ctrip Blue (#006ff6) — coreColorBlue1, and promoted to three semantic roles: smtcColorTextBrand, smtcColorBorderBrandBold, smtcColorBgRateFilled.
• Blue Step 2 (#2582f5) — coreColorBlue2.
• Brand Border (#93bff5) — coreColorBlue3 / smtcColorBorderBrand.
• Brand Tint (#ebf4ff) — coreColorBlue4 / smtcColorBgBrandTintedHigh.
• Brand Tint Low (#f5f9ff) — coreColorBlue5 / smtcColorBgBrandTintedLow.

A five-step blue ramp where steps 1, 3, 4 and 5 each carry a named semantic role — the primitive and the meaning are wired together rather than left to the implementer.

Neutrals

• Foreground (#111111) — coreColorGray1 / smtcColorTextPrimary.
• Text Secondary (#555555) — coreColorGray2.
• Text Muted (#aaaaaa) — coreColorGray4.
• Border (#d5d5d5) — coreColorGray6.
• Surface (#f5f5f5) — coreColorGray9 / smtcColorBgDisabledTinted.
• Surface Secondary (#f5f7fa) — coreColorBluegray9 / smtcColorBgSurfaceSecondary.
• Bluegray Mid (#869ebf) — coreColorBluegray4. Bluegray Line (#e1e7f0) — coreColorBluegray7.
• Canvas / On-Brand (#ffffff) — coreColorWhite.

Ctrip keeps two neutral ramps: a pure grey (coreColorGray*) and a blue-tinted one (coreColorBluegray*). Chrome and panels use the blue-tinted ramp; text uses the pure one.

Status

• Notice (#ff7700) — coreColorOrange2, promoted to smtcColorBgNoticeFilled, smtcColorIconNotice and smtcColorBgDiscountFilled. On an OTA, "notice" and "discount" are the same colour: both mean act now.
• Notice Strong (#ff5500) — coreColorOrange1. Notice Tint (#fff4eb) — coreColorOrange4.
• Success (#06875a) — coreColorGreen1 / smtcColorTextSuccess. Success Icon (#24b281) — smtcColorIconSuccess. Success Border (#8dd9be) — coreColorGreen3 / smtcColorBorderSuccess. Three greens for three jobs.
• Favorite (#f5190a) — smtcColorBgFavorite. A true red, used only for the heart.
• Star Rating (#fcb000) — smtcColorBgStarRating. Gold, used only for stars.

The home page is partly off-system

A conflict worth stating plainly. hotels.ctrip.com renders the declared brand: its search button is #006ff6, exactly coreColorBlue1. ctrip.com's home page does not. Its interactive blue computes #0086f6, its sign-in pill sits on #f2f8fe, and the search button's hover is #2953d6 — none of those three is a declared token anywhere in the 404 properties the same page loads.

So Ctrip ships a coherent token system and its own front door is not fully on it. Both facts are recorded: the palette above is the declared system, and the off-system values appear only where a measured component actually used them (§4).

Typography

Font Family

ctrip.com computes Pingfang SC — Apple's Simplified-Chinese system face — as the body family. hotels.ctrip.com computes plain system-ui. Neither is a licensed brand typeface, and tokens.typography.family is therefore absent: a platform CJK system face is not promoted to a brand face.

Scale

Two sizes carry 1,243 of ~2,000 elements. The display step appears three times on the entire home page. This is a scale built for tables and comparison rows, not for editorial.

Layout

• Two neutral ramps, used deliberately — blue-tinted Bluegray for chrome and panels, pure Gray for text.
• Split controls. The 0 8px 8px 0 radius marks a field and its submit fused into one unit rather than spaced apart.
• Density is the point. 14px body with 12px metadata, on white, with 4–8px radii.

Responsive Behavior

Not measured. Desktop 1440×900 only. Ctrip's mobile web and app are separate surfaces.

Elevation & Depth

Not measured. No shadow or elevation token appears among the core*/smtc*/comp* sets, and none was observed on the three measured controls. Nothing is claimed.

Motion & Easing

Not measured. No transition or duration token appears in the core*/smtc*/comp* sets.

---

Tier 1 sources: https://www.ctrip.com/ (live production home — 404 custom properties resolved via getComputedStyle, sign-in pill and city chip with hover/press/focus, 2026-09-22); https://hotels.ctrip.com/ (Ctrip's hotel vertical — 417 custom properties including smtcColorBgBrand, and the search submit whose rest state equals coreColorBlue1 exactly, 2026-09-22)

Components

Measured live, pointer parked between readings, navigation suppressed so :active could be read in place.

Search submit — hotels.ctrip.com

• Rest #006ff6 fill (exactly coreColorBlue1), #ffffff label, 4px radius, 48px tall, 16px/700.
• Hover and pressed both #2953d6 — a darker blue that is not a published token.

Sign-in pill — ctrip.com

• Rest #f2f8fe fill, #333333 label, 16px radius, 32px tall, 14px/400.
• Hover, pressed and focus all recolour label and border to #0086f6 together. The fill never changes. Three states, one treatment — and unusually, focus is not ignored here.

City chip — ctrip.com

• Rest #ffffff, #333333 label, 4px radius, 34px tall, 14px/400.
• Hover recolours the label only to #0086f6; no fill or border change.

Radius scale

4px×37 and 8px×42 dominate; 20px×32 for tab-like pills; 16px on the sign-in pill; 2px×13 on dense table chrome. A distinctive asymmetric value — 0 8px 8px 0 — appears 10 times, the right half of a split search field butted against its input.

Not measured

Result cards, the calendar picker, price filters, the map panel and every authenticated view. comp* tokens name several of these (compSearchBoxCalendarHighlight, compHotelRoomListFilterBgcHover), so the system documents components this capture did not reach. They are not declared.

States

Three controls were observed. The sign-in pill carries hover, pressed and focus, all identical. The search submit carries hover and pressed, identical. The city chip carries hover only. No disabled state was observed on a rendered control, though smtcColorBgDisabledTinted (#f5f5f5) exists as a token.

Live state probe, 2026-10-16 (https://hotels.ctrip.com/), button-search: focus — shadow #ffffff 0px 0px 0px 2px, #1733c5 0px 0px 0px 4px.

Do's and Don'ts

Do

• Use #006ff6 for interactive things and #ff7700 for urgency — Ctrip separates the two strictly.
• Keep the two neutral ramps apart: Bluegray for surfaces, Gray for text.
• Reserve #f5190a for favourites and #fcb000 for star ratings; neither is a general accent.
• Set body at 14px and metadata at 12px. Do not introduce a display size.

Don't

• Don't take #0086f6, #f2f8fe or #2953d6 as system values — they are the home page's off-system renders (§2).
• Don't read #0000ee or #ff0000 off a Ctrip anchor: those are the browser's default link and active-link colours on an unstyled <a>, not Ctrip's.
• Don't promote Pingfang SC to a brand typeface; it is the platform CJK system face.

Voice & Tone

Transactional and unadorned. Ctrip's chrome uses bare two-character verbs — 登录 (sign in), 搜索 (search) — and lets price and availability do the persuading.

Agent Prompt Guide

Quick Color Reference

#006ff6 brand · #ebf4ff brand tint · #111111 text · #555555 secondary · #f5f7fa panel · #ff7700 notice/discount · #06875a success · #fcb000 stars · #f5190a favourite

Example Component Prompts

• "A 48px search submit, #006ff6 on white, 4px radius, 16px/700 white label, darkening to #2953d6 on hover and press."
• "A comparison row: 14px #111111 title, 12px #555555 metadata, #f5f7fa panel, #ff7700 discount badge, #fcb000 stars."