",
"css": ".ds-product-card { display: flex; padding: 20rpx 24rpx; background: #FFFFFF; border-bottom: 1rpx solid #F5F5F5; } .ds-product-card:last-child { border-bottom: none; } .ds-product-img { width: 140rpx; height: 140rpx; background: #F5F5F5; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 52rpx; margin-right: 20rpx; flex-shrink: 0; } .ds-product-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .ds-product-name { font-size: 28rpx; color: #2C2C2C; font-weight: 500; line-height: 1.4; margin-bottom: 8rpx; } .ds-product-price { font-size: 32rpx; color: #F44336; font-weight: 700; }"
}
],
"narrative": {
"northStar": "The Yellow Mark",
"overview": "AI零售柜 is a consumer mini-program where the yellow accent works like a brand marker — instantly recognizable, like 美团's yellow or 闲鱼's yellow. The surface is clean and white, the yellow appears with purpose: a scan button, a selected state, a price. Its presence signals action; its absence signals rest. The system is built on restraint, not because less is more, but because every element must justify itself against the physical context: a user standing in front of a cabinet under bright office lights.",
"keyCharacteristics": [
"Yellow as brand marker, not surface decoration",
"White-dominant backgrounds with warm tint",
"Precision over abundance — every pixel is intentional",
"Fast transitions that feel mechanical, not theatrical",
"Physical-digital coherence: the phone UI mirrors the cabinet interaction"
],
"rules": [
{
"name": "The One Yellow Rule",
"body": "Brand Yellow appears on at most 30-40% of any given screen. It is the brand marker, not the brand blanket. When everything is yellow, nothing is.",
"section": "colors"
},
{
"name": "The White Canvas Rule",
"body": "White (#FFFFFF) is the default card surface; Cream (#FAFAFA) is the default page background. The difference is subtle but structural — cards float on cream; content that belongs to the page sits directly on cream.",
"section": "colors"
},
{
"name": "The Scale Jump Rule",
"body": "Adjacent text sizes differ by at least 1.25x. No 28rpx next to 30rpx; the scale skips intentionally: 22 → 24 → 28 → 32 → 36 → 48 → 56.",
"section": "typography"
},
{
"name": "The Shadow Has a Job Rule",
"body": "Never use a shadow without answering: what does this elevation communicate? If the answer is 'looks nice,' remove it.",
"section": "elevation"
},
{
"name": "The Flat-By-Default Rule",
"body": "Menu items, list rows, and non-interactive surfaces carry no shadow. Shadow = affordance, not decoration.",
"section": "elevation"
}
],
"dos": [
"Use Brand Yellow (#FFC107) exclusively for interactive elements: buttons, selected states, brand marks, and active indicators.",
"Use White (#FFFFFF) for cards and Cream (#FAFAFA) for page backgrounds. The distinction creates structure without borders.",
"Maintain at least 32rpx of breathing room around primary CTAs.",
"Use the Shadow vocabulary intentionally: Ambient for at-rest cards, Brand Glow only for the primary CTA.",
"Cap body text at 65-75 characters per line on the widest screen."
],
"donts": [
"Don't use Brand Yellow as a background fill on text-heavy surfaces. Yellow's job is signaling action, not hosting reading.",
"Don't introduce a second accent color. Green, orange, red, and blue are functional signals; they are not decorative accents.",
"Don't use nested cards. A card inside a card is always wrong.",
"Don't use side-stripe borders (border-left/border-right > 1px) as colored accents.",
"Don't use gradient text (background-clip: text). Solid colors only.",
"Don't use glassmorphism, decorative blurs, or translucent overlays as a default aesthetic.",
"Don't let the interface feel like a discount retail mini-program: no red flash-sale badges, no banner carousels, no cluttered grids of same-sized product cards."
]
}
}