North star · Let quiet, spacious product photography explain the bag’s transformation while the interface stays nearly invisible.
The page uses a quiet, low-contrast palette led by the measured canvas #e1e3e1. In the first viewport, the expansive pale field is divided into two broad image areas; the subtle tonal shift and fine vertical boundary give the product sequence structure without introducing card framing. Text is near-black and restrained, with small uppercase navigation and short labels positioned around the imagery. Gill Sans Nova supplies a clean, humanist sans-serif voice; its measured tracking gives headings and utility labels a deliberate, editorial cadence. Product photography does the expressive work: bags appear against similarly pale backgrounds, shown flat, folded, or compacted so their changing form reads immediately. The composition feels spacious rather than dense, with interface elements pushed toward the edges and large breathing zones around the products. Keep the design flat and image-led, using only the measured colors for interface styling; brighter colors belong to photographed bag patterns, not the core UI palette.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
功能色
页面底色 · Mist Canvas主文字 · Link Ink次要文字 · Soft Graphite描边 · Quiet Black
Main brand proposition and prominent hero heading.
Shupatto
28px
800
1.29
0.064em
二级标题
Secondary section headings and action labels.
The quick brown fox 敏捷的狐狸
22px
500
1
0.114em
三级标题
Supporting feature or product-story headings.
The quick brown fox 敏捷的狐狸
21px
500
1.33
0.119em
正文
Concise product descriptions and instructional copy.
The quick brown fox 敏捷的狐狸
17px
600
1.41
0.071em
链接
Compact primary navigation and text links.
The quick brown fox 敏捷的狐狸
17px
600
1.41
0.071em
间距与布局
基准单位 1px · 密度：适中
60px版块间距
7px元素间距
—卡片内边距
—内容最大宽度
7px
27px
60px
Build the opening as a full-viewport, single-column composition with a broad two-part product image stage. Keep the brand mark and navigation close to the lower edge, with the current story label and slide count near the upper corners. The product and its compact form occupy separate visual zones, divided by a faint vertical boundary. Maintain generous empty space and comfortable separation between elements. The measured data does not establish a page max-width, so preserve the screenshot’s edge-to-edge canvas rather than inventing a constrained container.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: no measured component shadows, card treatments, or radius scale. Separate visual zones with pale tonal transitions and a fine, understated divider rather than raised panels. The measured gradient is subtle and should not become a strong decorative effect.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Story label
Place a small uppercase action heading and a short explanatory line near the upper-left edge of the image stage.
Slide counter
Show the current position as a compact fraction near the upper-right edge.
Product image stage
Arrange product states across broad pale image zones, with a faint vertical division and ample negative space.
Brand mark
Anchor the Shupatto wordmark at the lower-left edge of the hero canvas.
Bottom navigation
Use a small, widely tracked row of LINEUP, ABOUT, and SHOPLIST links at the lower-right.
Imagery · Use clean, high-key product photography of the bag in distinct states: extended, folded, or compacted. Photograph against a pale neutral background that blends into the page canvas; let real fabric color and pattern provide the visual contrast. Keep products isolated and legible, with generous surrounding space and no decorative illustration or prominent image frames.
Give product photography more visual weight than copy.
Keep the product isolated against pale neutral backgrounds.
Use near-black text with restrained tracking.
Place small utility labels near the canvas edges.
Use whitespace to distinguish product states.
✕ 不该做
Do not introduce unmeasured interface colors.
Do not turn product-photo colors into brand UI colors.
Do not add cards, heavy borders, or pronounced shadows.
Do not crowd the image stage with explanatory copy.
Do not use dense grids or prominent button styling.
Do not constrain the hero to an invented max-width.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new Shupatto page that follows the homepage’s quiet, editorial product-story style. Use Mist Canvas (#e1e3e1) as the expansive background, Soft Graphite (#2d2d2d) for most text, and Link Ink (#161616) for links; reserve Quiet Black (#000000) for restrained dark details. Build an edge-to-edge, spacious composition around high-key product photography, with products shown clearly against pale backgrounds. Use Gill Sans Nova or a close humanist sans-serif substitute, tracked labels, and concise copy. Position small utility text near the edges, and keep navigation unobtrusive. Use subtle tonal division rather than cards or elevation. Let photographed fabric patterns supply color; do not add those hues to interface chrome. Avoid invented dimensions, radii, shadows, or palette colors.
