Adam Lippes 的奢华时装首页以大幅季节大片和简洁的商品浏览为主。暖象牙白底色、黑色 Optima 字体与克制的界面细节,让服装和摄影成为视觉焦点。
North star · Let large, art-directed fashion photography lead, and keep every interface element quiet against warm ivory and black.
The page uses a warm off-white canvas (#fefcf8) as a quiet frame for nearly edge-to-edge campaign photography. Black (#000000) carries the navigation, headings, and most text; pale stone surfaces and hairlines (#e4e2df) provide subtle separation, while the measured blue accent (#0000ee) is limited and should not be mistaken for a defining visual motif. Optima is used throughout at regular weight, giving labels and headings a refined, softly classical character without heavy typographic contrast. The layout alternates full-bleed campaign moments with paired editorial tiles and compact horizontal product carousels. Text overlays sit directly on photography, centered on hero campaigns and aligned to the left in the paired feature area. Generous image areas contrast with dense, low-profile product and footer details. Buttons are simple dark or ivory rectangles with restrained type; borders, shadows, and decorative UI remain minimal so the imagery supplies most of the color and texture.
Site-wide headings, body copy, navigation, product labels, captions, links, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Campaign hero headings, centered over full-bleed imagery.
The quick brown fox 敏捷的狐狸
24px
400
1.4
0
正文
Campaign supporting copy and general page text.
The quick brown fox 敏捷的狐狸
16px
400
1
0
辅助文字
Compact product names, prices, and small supporting labels.
The quick brown fox 敏捷的狐狸
12px
400
1.3
0
按钮
Shop Now and Shop Knitwear calls to action.
The quick brown fox 敏捷的狐狸
14px
400
1.2
0
导航
Primary category navigation and compact menu links.
The quick brown fox 敏捷的狐狸
14px
400
1.3
0
链接
Product links and secondary calls to action.
The quick brown fox 敏捷的狐狸
12px
400
1.3
0
间距与布局
基准单位 2px · 密度:紧凑
32px版块间距
8px元素间距
—卡片内边距
1400px内容最大宽度
1px
2px
5px
6px
8px
10px
12px
15px
16px
20px
30px
32px
The page follows a long, vertically scrolling storefront structure on a warm ivory canvas, with a measured maximum content width of 1400px. A slim header leads into large full-bleed hero campaigns, alternating with a two-column editorial feature and horizontal product carousels. Campaign copy is centered over most full-width imagery, while paired feature headings align left. Section rhythm is image-led and spacious, with compact product details and a dense multi-column footer. The measured spacing system is compact internally, so preserve the clear contrast between large media bands and small interface labels.
圆角与层次
按钮 · 50%
导航 · 50%
sm · nav
The page reads as largely flat: no prominent card shadows or raised panels. Fine pale borders separate selected interface areas, while imagery creates the main sense of depth through its composition and lighting. Keep overlays limited to campaign copy and simple calls to action; the measured navigation shadow is subtle.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Slim global navigation
Warm ivory header with centered Adam Lippes wordmark, left-aligned category links, and compact search, account, and bag controls.
Campaign hero
Full-bleed fashion image with centered Optima title and supporting line; place a simple dark Shop Now button beneath.
Editorial feature pair
Two side-by-side fashion image tiles with left-aligned copy and restrained Shop Knitwear or Shop Now links.
Campaign feature
Large seasonal image section with centered title and short descriptive line layered directly over the photography.
Horizontal product carousel
Compact row of isolated garment images with small product names and prices; use subtle controls and minimal decoration.
Light CTA button
Plain ivory rectangular button with black or near-black Optima text, used over imagery where a dark button is not appropriate.
Multi-column footer
Compact columns of store, service, and social links alongside a currency selector and newsletter email form.
Imagery · Use polished luxury fashion photography as the primary visual material: full-frame seasonal campaign images, model-led editorial tiles, and isolated product images in carousels. Cropping is confident and immersive, often showing models at large scale with campaign text overlaid directly on the image. Keep image color and texture natural; avoid filters, illustrations, or decorative graphics that compete with the garments.
Give campaign photography generous, prominent space.
Keep Optima-like typography regular and understated.
Alternate full-bleed campaigns with concise product rows.
Place campaign copy directly over imagery with clear contrast.
✕ 不该做
Do not introduce bright colors as a major interface theme.
Do not add heavy borders, shadows, or raised card treatments.
Do not let product metadata outweigh the imagery.
Do not use bold, oversized interface typography.
Do not add decorative gradients or prominent graphic motifs.
Do not turn the campaign sections into boxed panels.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new luxury fashion storefront page in the Adam Lippes visual style. Use Warm Ivory (#fefcf8) for the main canvas and Runway Ink (#000000) for navigation, headings, product labels, and primary actions. Use Soft Stone (#e4e2df) only for quiet separators; Link Blue (#0000ee) is measured but should remain unobtrusive. Use an Optima-like regular typeface, with understated labels and no heavy weight contrast. Organize the page as a slim centered-logo header, expansive model-led campaign imagery with concise overlay copy, paired editorial tiles, and horizontal product carousels with compact names and prices. Keep buttons rectangular and plain, selecting dark or ivory fills for image contrast. Finish with a restrained multi-column footer and newsletter form. Preserve whitespace around text, keep photography in control, and avoid prominent shadows or card framing.