Little Troop以干净的白色画布呈现丰富的设计作品，导航克制，项目视觉表现鲜明。紧凑的窄体字与大面积留白让界面退居幕后，突出作品本身。
North star · Keep the interface monochrome and typographically compact so the portfolio imagery—not the chrome—commands attention.
The visual strategy is deliberately restrained: white (#ffffff) fills the page, while black (#000000) handles the primary text and fine structural rules. The measured palette is only two colours; saturated hues and photographic tones belong to project artwork, not the site chrome. Arial Narrow supplies compact, legible navigation and captions, letting the irregular project imagery carry the personality. The opening view places a large, circular video-like media feature between sparse top navigation and small descriptive text near the lower edges. Further down, a dense five-column project index gives way to widely spaced, individually framed portfolio images. The layout alternates between compact information and expansive media, using open white space as a consistent separator. Interfaces stay flat and understated: no measured shadows, decorative gradients, or coloured CTA surfaces. Reproduce the contrast between minimal controls and richly varied, full-bleed-feeling portfolio visuals without borrowing colours from the artwork as interface tokens.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
页面底色 · Gallery White主文字 · Studio Ink次要文字 · Gallery White描边 · Studio Ink
Site-wide type for body copy, navigation, links, and buttons.
角色
示例
字号
字重
行高
字距
正文
Studio introduction and supporting project descriptions.
The quick brown fox 敏捷的狐狸
14px
400
1.14
0
按钮
Compact bold labels for small interface actions.
The quick brown fox 敏捷的狐狸
14px
700
0.86
0
导航
Top-level navigation labels such as Work and News.
The quick brown fox 敏捷的狐狸
14px
700
0.86
0
链接
Project titles and linked portfolio captions.
The quick brown fox 敏捷的狐狸
14px
700
1.14
0
间距与布局
基准单位 4px · 密度：适中
89px版块间距
20px元素间距
—卡片内边距
—内容最大宽度
1px
8px
12px
20px
100px
The opening section spans the viewport, with navigation distributed across the top and a dominant circular media element centered below it. Small studio and current-work notes sit near opposite lower corners. The project index uses a five-column grid, then transitions into individually presented portfolio images. Keep alignments crisp but allow artwork to vary in scale and orientation. The measured page has comfortable density and generous section separation; no maximum content width was measured.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is flat: no measured shadows or gradients define its hierarchy. Black hairlines and typography provide structure against the white canvas, while project artwork supplies visual depth internally. Keep layering limited to media itself; avoid adding cards, drop shadows, or decorative surface effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Four widely distributed text links—Work, News, Info, Contact—sit across the top on white, using compact bold Arial Narrow styling.
Opening media
A large circular, immersive media feature anchors the first viewport, surrounded by generous white space rather than a coloured container.
Studio introduction
A short studio description sits near the lower-left edge of the opening area in small, compact text.
Current work note
A small right-aligned current-project label and description balance the studio introduction at the lower-right.
Project index
A dense five-column gallery pairs project thumbnails with short linked captions; artwork supplies colour while the surrounding interface stays monochrome.
Project spotlight
Large portfolio images are presented individually with substantial white space, varying in framing and orientation.
Imagery · Portfolio media is the page’s main colour source: project thumbnails include branding, packaging, campaigns, and product work. The opening uses a large circular, video-like image with a distorted perspective. Later work appears as large, often angled compositions against white, without interface frames. Treat imagery as individual artwork and avoid sampling its colours for site-wide UI.
Keep navigation small, bold, and plainly presented.
Let portfolio artwork provide nearly all interface-adjacent colour.
Alternate dense project browsing with spacious media presentation.
✕ 不该做
Do not promote illustration colours into the site palette.
Do not add gradients or shadows to create hierarchy.
Do not enclose every project in a decorative card.
Do not let interface controls compete with featured imagery.
Do not impose uniform framing on expressive project artwork.
Do not add oversized display typography absent from the measured interface.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page in the Little Troop visual style. Use Gallery White (#ffffff) as the full-page canvas and Studio Ink (#000000) for primary text and fine structural rules; keep the site chrome monochrome. Use a narrow sans-serif such as Roboto Condensed as a free substitute for Arial Narrow, with compact regular body text and bold navigation or action labels. Place simple text navigation across the top, then give the featured work ample space and visual prominence. For browsing, use a compact multi-column project index with brief captions, followed by larger, individually framed work. Allow images to vary in colour, scale, and orientation; treat their hues as artwork rather than UI tokens. Keep surfaces flat, avoid shadows and gradients, and use generous whitespace to separate content.
