North star · Keep the canvas quiet and white so vivid red branding and candid denim photography carry the page.
The page is built around a bright white canvas, which gives the oversized lifestyle photography room to dominate without making the storefront feel cluttered. Brand red is the key accent: it appears in the HNST wordmark, the central SHOP NOW button, the TRENDING heading, and a strong footer band. Near-black text provides crisp contrast, while gray is used sparingly for navigation and fine separation. Typography mixes Poppins for tracked uppercase navigation and display moments, Verdana for emphatic uppercase statements, and Raleway for readable body copy. The hero uses a wide, edge-to-edge fashion photograph with a centered red CTA and small carousel controls. Below it, editorial text sits alongside a product-focused image, followed by a centered section heading and a broad product image. Generous white space separates these blocks; the footer closes the page with a solid red field and compact white labels.
Bold uppercase editorial statements and eyebrow-style copy.
Aa 设计
Poppins
网络字体 · 字重 600 / 700 · 占比 19%
免费替代：Montserrat
Display headings, navigation, captions, and compact uppercase labels.
Aa 设计
Raleway
网络字体 · 字重 400 / 700 · 占比 19%
免费替代：Lato
Body copy and the SHOP NOW button label.
角色
示例
字号
字重
行高
字距
特大标题
Large uppercase display headings, including the TRENDING section title.
HNST
62px
700
1.2
0.065em
一级标题
Bold uppercase editorial ambition and brand-story statements.
The quick brown fox 敏捷的狐狸
24px
700
1.3
0.067em
二级标题
Secondary uppercase headings within content sections.
The quick brown fox 敏捷的狐狸
20px
600
1.25
0.05em
正文
Editorial paragraphs and descriptive supporting copy.
The quick brown fox 敏捷的狐狸
14px
400
1.79
0
辅助文字
Small tracked uppercase labels and compact supporting headings.
The quick brown fox 敏捷的狐狸
13px
600
1.15
0.154em
导航
Tracked uppercase primary navigation and menu labels.
The quick brown fox 敏捷的狐狸
13px
600
1.15
0.154em
眉题
Short, bold uppercase introductory statements.
The quick brown fox 敏捷的狐狸
24px
700
1.3
0.067em
间距与布局
基准单位 1px · 密度：适中
40px版块间距
—元素间距
—卡片内边距
1100px内容最大宽度
15px
20px
23px
30px
32px
40px
46px
50px
55px
114px
Use a centered desktop content frame capped at the measured 1100px, with the hero photograph spanning the viewport. The header aligns the wordmark left and a compact navigation row right. Follow the hero with an editorial split: statement text on one side and a portrait-oriented denim image on the other. Center the TRENDING heading above a wide product image. Keep the page comfortably sparse, with clear white intervals between sections and a full-width footer.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured system has no shadows or gradients. Treat the page as mostly flat: white content areas meet directly, with a subtle gray navigation hairline. Use image edges and full-width color bands for structure instead of raised cards; the red footer and CTA are solid, unshadowed blocks.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
White header with the red HNST wordmark at left and compact uppercase links at right. Use tracked Poppins-style labels, dark text, and a restrained gray divider.
Hero carousel
Viewport-wide lifestyle image with white side arrows, small pagination dots, and a centered red SHOP NOW CTA. Keep controls legible without obscuring the photograph.
Editorial split
Pair a short bold uppercase brand statement with a portrait-oriented denim photograph, leaving ample white space around both.
Trending showcase
Center an uppercase red section heading above a broad product photograph on a light, unobtrusive background.
Footer
Full-width solid red band with compact white LEGAL and FOLLOW US headings, small links, social icons, and a quiet copyright line.
Imagery · Use candid fashion photography as the primary visual asset: the hero is a tightly framed, full-width lifestyle shot, while the next editorial image emphasizes a model holding up denim. Product imagery follows in a broad, pale setting. Preserve natural fabric texture, believable skin tones, and clean crops; avoid illustration or decorative overlays that compete with the clothes.
Reserve brand red for identity, key headings, and primary actions.
Let large, authentic denim photography lead the composition.
Use short uppercase statements as editorial accents.
Keep navigation compact, tracked, and aligned to the header edge.
Separate content blocks with generous white space.
✕ 不该做
Do not add gradients or decorative shadows.
Do not introduce colors outside the measured palette as interface colors.
Do not put every image inside a bordered card.
Do not let copy compete with the hero photograph.
Do not overdecorate the carousel or add prominent overlays.
Do not use dense navigation or oversized body paragraphs.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new HNST-style fashion storefront page with a crisp white canvas (#ffffff), near-black text (#0e0e0e), and the brand red (#ac0d00) reserved for the logo, primary CTA, section emphasis, and strong color bands. Use Rust Accent (#892500) only for subtle warm navigation details and Quiet Gray (#d7d7d7) for fine separators. Set Poppins for tracked uppercase navigation and headings, Verdana for emphatic uppercase editorial statements, and Raleway for body copy and CTA text. Lead with a wide, candid denim photograph, then use a spacious text-and-image editorial split and a clean product showcase. Keep the layout centered and comfortable, with flat surfaces, no shadows or gradients, and a compact red footer with white labels. Prioritize authentic photography and restrained interface chrome.
