teenage engineering

首页以纽约 teenage engineering department store 的黑白建筑照片开场。细线风格导航和克制的文字叠加在通栏影像上，下方展示营业时间与简洁的页脚链接。

North star · Let one atmospheric monochrome photograph carry the page, and keep every interface element quiet, precise, and legible against black.

The visual strategy is built around a near-black canvas and a single full-bleed black-and-white photograph of the New York store. The palette stays tightly controlled: #000000 anchors the page, while #f1f2f2 supplies the light navigation and key text; #e5e5e5 appears in footer text rather than acting as a broad surface colour. The photograph provides most of the tonal variation and texture, so the interface avoids competing decoration. Navigation is arranged as a horizontal line of compact groups, with thin outlined pictograms and wordmarks integrated into the image. The bespoke sans-serif typography is light and spacious in feel, with uppercase treatment reserved for the measured heading role. The page uses a single-column, full-bleed composition with a central store-hours message beneath the image. Spacing is comfortable, but interface chrome remains sparse, flat, and functional.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

字体

字号阶梯：Augmented Fourth（比例约 1.395，正文 19px）。示例用免费替代字体渲染，数值为实测。

间距与布局

基准单位 2px · 密度：适中

Use a single-column, full-bleed page with a wide photographic hero and no visible card grid. The measured content max width is 1308px, while the screenshot’s image fills the viewport. Arrange navigation in compact horizontal groups across the top, then let the photograph dominate the page. Keep the store-hours message centered below the image and place the small footer links in a restrained horizontal row. Measured spacing follows a comfortable rhythm, with a 66px section gap and 22px element gap.

圆角与层次

没有测到阴影：页面是扁平的，层次靠底色和描边区分。

The interface is flat: measurements report no shadows, gradients, or corner-radius scale. Separate content through placement and contrast rather than raised panels. Thin outlined navigation illustrations sit directly over the image, and text remains unboxed against the black canvas.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Imagery · Use real architectural photography as the page’s defining visual: a street-level storefront, photographed straight on and framed vertically to show the facade. Treat it in high-contrast grayscale, with deep shadows and visible masonry texture. Avoid decorative product mockups or colourful illustration; the measured screenshot’s tonal variation comes from the photograph itself.

页面版块

共 2 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏门店形象

Full-bleed vertical storefront photograph with navigation overlaid at the top and store hours beneath.

商品详情页 · 原网页 ↗

商品网格音频与合成器

Full-width, single-column sequence of large product-image panels beneath a compact, persistent black global header.

该做与不该做

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。