North star · Keep the interface quiet and spacious so oversized typography, project imagery, and a few pastel cards carry the visual emphasis.
The visual system is built around a warm off-white canvas (#f8f8f2) and near-black text (#1a1a1a), producing a restrained editorial frame for the work. A large, tightly tracked headline leads the first viewport; supporting copy and navigation stay relatively quiet. Project imagery is arranged in a two-column gallery, with rounded image cards and restrained white overlay labels. Service content uses a four-card grid: white for Plan, pale blue for Build, mint for Deploy, and pink for Maintain. These pastels are confined to the cards rather than spread across the page. Later sections retain the same canvas and generous separation: a two-column testimonial pairs monochrome portrait photography with text, followed by dark blog thumbnails. Buttons reverse the palette with near-black fills and white labels. The layout favors broad margins, spacious section intervals, and clear alignment over decorative borders or shadow. Keep the interface flat and let project photography provide the richest visual detail.
Headlines, body copy, navigation, links, captions, and buttons throughout the page.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero headline, set prominently against the open canvas.
Websmith Studio
96px
600
1
-0.025em
一级标题
Primary page heading, visually similar to the hero display treatment.
Websmith Studio
88px
600
1
-0.025em
二级标题
Section headings including What we do and Latest blogs.
Websmith Studio
48px
600
1
-0.025em
三级标题
Service-card titles and supporting subsection headings.
Websmith Studio
30px
500
1.2
-0.025em
正文
Hero introduction and substantial service or testimonial copy.
The quick brown fox 敏捷的狐狸
20px
400
1.4
0
辅助文字
Project labels, collaboration credits, dates, and compact attribution.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
按钮
White text on dark calls to action such as View more collaborations.
The quick brown fox 敏捷的狐狸
20px
400
1.4
0
导航
Header links and the Websmith wordmark text.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
链接
Project names and other inline or content links.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
间距与布局
基准单位 8px · 密度：宽松
112px版块间距
2px元素间距
32px卡片内边距
1254px内容最大宽度
2px
8px
16px
24px
32px
40px
43px
48px
64px
92px
96px
112px
176px
183px
Use a centered, spacious composition within the measured 1254px maximum page width. The opening viewport aligns the hero headline and supporting copy to the left, with navigation spread across the header; project cards form a two-column grid below. Continue with a two-column service grid, a split testimonial, and a two-column blog feed. Section spacing is generous, and headings anchor the left edge of their content. The overall density stays low, with room around both text and imagery.
圆角与层次
按钮 · 8px
卡片 · 12px
图片 · 12px
导航 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface reads as flat: no measured shadows, and cards rely on fill colour and rounded corners rather than outlines. Keep the warm canvas continuous between sections. Layer only content that needs to sit on photography, using restrained white project labels; avoid adding ornamental depth or extra border treatments.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
A quiet horizontal header on the warm canvas, with the Websmith mark at left, centered text links, and a small green status dot with local time at right.
Hero
Large, near-black, tightly tracked headline above a compact two-line introduction; generous empty canvas separates it from the work gallery.
Project gallery cards
Two-column project imagery with rounded corners and small white title and collaborator labels overlaid on each image.
Dark CTA button
Near-black fill with white 20px system-sans text, 8px radius, and measured 16px vertical by 32px horizontal padding.
Service cards
Four rounded cards in a two-column grid: white Plan, pale-blue Build, mint Deploy, and pink Maintain; dark text with a small category label and icon.
Testimonial split
Monochrome portrait on the left and a quote, quotation mark, and compact author attribution on the right.
Blog cards
Two dark image thumbnails in a two-column feed, with compact white post titles and dates placed over the imagery.
Imagery · Use polished project photography and device mockups as the main visual texture: work samples appear in rounded, two-column image cards with small white labels overlaid near the upper left. The testimonial uses a monochrome portrait beside the quote. Blog thumbnails are dark, graphic-led images. Keep imagery rectangular and contained within cards; the screenshots do not establish a broader illustration or video style.
Reserve #bedbff, #a4f4cf, and #ffc9c9 for service-card surfaces.
Give project work and testimonial photography room to breathe.
Align section headings and content to consistent column edges.
Use rounded image and card corners without adding shadows.
✕ 不该做
Do not turn the pastel card colours into full-width section bands.
Do not add gradients as a defining brand treatment.
Do not crowd the hero with extra copy or decorative elements.
Do not add heavy borders or drop shadows to cards.
Do not use bright colours for navigation or primary text.
Do not treat colours inside project photographs as brand palette.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Websmith Studio page as a spacious editorial portfolio, not a generic agency template. Use Warm Canvas (#f8f8f2) across the page and Soft Ink (#1a1a1a) for headings, body text, links, and dark CTA fills. Set a large, tightly tracked sans-serif headline over a short introduction, then organize content in broad two-column layouts with generous section breaks. Use project photography in rounded cards with restrained white overlay labels. For feature or service cards, keep colour contained: Sky Wash (#bedbff), Mint Wash (#a4f4cf), Blush Wash (#ffc9c9), and white. Keep buttons flat, dark, and clearly legible. Make testimonial photography monochrome and blog thumbnails dark and graphic-led. Avoid shadows, decorative gradients, excessive borders, and invented brand colours; maintain the calm canvas around every element.
