Moving Parts

Moving Parts 以编辑式高对比视觉搭配鲜明蓝色点缀和大型原生应用界面预览。宽松的分区节奏与清晰的组件标注，让产品展示本身成为有力说明。

North star · Let vivid blue identify actions and component annotations while oversized, real interface previews do the explaining.

The page uses white as its main canvas, switching decisively into black, pale lavender, and saturated blue section bands. Electric blue is reserved for the primary demo action, annotated component labels, and the testimonial field, so it reads as a functional signal rather than a decorative wash. Typography mixes an oversized, heavy Unica77 display with restrained mono labels and softer serif moments in product mockups. The composition alternates centered introductory content with large, cropped interface showcases and left-aligned feature copy. Generous vertical pauses separate dense demonstrations from concise explanations. App screens, device frames, and product imagery carry most of the visual detail; they sit against simple section grounds and occasional faint grids. Rounded mobile previews contrast with mostly crisp page geometry, while dark cards and fine outlines provide structure without turning the page into a conventional dashboard.

配色

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

字体

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

间距与布局

基准单位 1px · 密度：宽松

The measured content max-width is 1200px, with sections often spanning the viewport and carrying distinct background bands. The page alternates a centered hero with left-aligned feature introductions, multi-column benefit copy, and large device-led showcases. Vertical pacing is spacious: section and element gaps are notably generous in the measurements, while the interface examples themselves are dense. Use broad margins around headlines and media, then compact groupings inside device screens. The desktop composition is editorial rather than a uniform dashboard grid.

圆角与层次

Most page surfaces are flat, separated by strong color bands rather than layered card shadows. Device frames and mockup cards create depth through thick dark outlines, rounded silhouettes, and occasional measured soft shadows on media. Keep page borders restrained; the measured black hairline treatment is a structural accent, not a pervasive card grid.

组件

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

Imagery · Large mobile-device frames and interface mockups dominate the visual storytelling. Screens show commerce, payment, localization, and product-detail patterns, with product photography contained inside the mock device UI. Showcase illustrations may use yellow, coral, gradients, or a faint grid, but these are examples within the product imagery, not the overall brand canvas. Crop oversized screens at section edges to create scale and movement.

页面版块

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

首页

首屏移动团队首屏

Navigation at the top, centered headline and supporting copy, CTA above oversized cropped app previews.

产品展示界面组件展示

Tall, media-led showcase with overlapping mobile screens and examples extending across the page.

功能网格工程能力

Black band with a feature introduction, CTA, large code-and-form visual, and supporting feature columns.

产品展示灵活组合展示

Pale lavender band with an introductory block, central annotated mobile screen, and supporting copy columns.

产品展示自定义效果

Dark grid-backed showcase with product mockups arranged around a central message and CTA.

用户评价客户评价

Full-width blue field with a two-column quote layout and supporter logos near the bottom.

行动号召预约演示

Short white closing band with a conversion heading and demo action.

该做与不该做

给 AI 的提示词

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