North star · Keep the interface quiet and structurally precise so the varied community posts—not the chrome—command attention.
The page uses white as its dominant canvas, leaving broad empty side areas around a narrow, centered social feed. Black text establishes a clear hierarchy, while muted slate is reserved for handles, timestamps, and supporting navigation. Bluesky blue marks high-value actions and interactive emphasis rather than large decorative panels. InterVariable supplies a consistent, clean sans-serif voice across compact navigation, readable post copy, and stronger creator names. The layout is a three-column desktop composition: a sparse sign-in rail, a bordered central timeline, and a utility rail for search and trending topics. Fine pale borders define the feed without shadows or heavy containers. Posts vary in height according to their content, with artwork, video, and photographs displayed prominently inside the stream. The generous outer whitespace contrasts with the feed’s dense, varied editorial content.
All interface text, including navigation, feed copy, metadata, and links.
角色
示例
字号
字重
行高
字距
一级标题
Compact, bold sign-in invitation in the left rail.
The quick brown fox 敏捷的狐狸
24.5px
700
1
0
正文
Main post text and readable feed descriptions.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
辅助文字
Compact timestamps, counts, and supporting metadata.
The quick brown fox 敏捷的狐狸
13px
400
1.3
0
导航
Small labels for navigation and language controls.
The quick brown fox 敏捷的狐狸
13px
500
1.3
0
链接
Interactive post links and inline references.
The quick brown fox 敏捷的狐狸
15px
400
1.13
0
间距与布局
基准单位 1px · 密度：宽松
237px版块间距
4px元素间距
—卡片内边距
600px内容最大宽度
1px
2px
4px
5px
8px
10px
12px
15px
A desktop three-column grid places a slim sign-in rail on the left, the main timeline in the center, and search and trending utilities on the right. The measured page max width is 600px for its primary content area; keep the feed narrow and vertically continuous. Align the feed to a shared central axis and separate it from neighboring areas with hairline borders. Outer whitespace is spacious, while the timeline itself is content-dense. Post heights follow their copy and media rather than a uniform card grid.
圆角与层次
按钮 · 50%
卡片 · 12px
导航 · 6px
链接 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat, with no measured shadows or gradients. Pale hairline borders distinguish the timeline from the side rails and separate posts. Rounded media and utility cards provide the main soft layering; avoid strong depth effects or dark outlines.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Left sign-in rail
Sparse white rail with the blue butterfly mark, bold invitation, blue Create account action, muted Sign in option, and language control.
Feed tab bar
Compact Discover and Feeds labels at the top of the central column, with blue underline emphasis for the selected view.
Post row
Avatar, creator name, muted handle and timestamp, then post copy and optional inline links; separate entries with fine borders.
Inline media
Large post artwork, photography, or video sits directly beneath its text, with softly rounded corners and no ornamental framing.
Engagement actions
Small muted reply, repost, like, bookmark, and share icons with counts beneath each post.
Right utility rail
Light search field above a rounded, thin-bordered trending panel, followed by understated privacy, terms, and help links.
Imagery · The feed mixes user-uploaded artwork, portraits, event video, news visuals, and other photography. Media is shown inline at substantial size, often with rounded corners, and retains its original color and character. Avoid imposing a site-wide filter or decorative frame: the diversity of creator content is central to the page’s identity.
Keep the page canvas white and the outer rails visually quiet.
Use Bluesky Blue #006aff selectively for primary actions and active emphasis.
Set post text in black and metadata in Slate Detail #405168.
Use fine #dce2ea separators to define columns and feed entries.
Let each post’s content determine its height and media arrangement.
Preserve a narrow central timeline with generous surrounding whitespace.
✕ 不该做
Do not turn the feed into a uniform tiled card grid.
Do not add heavy shadows or decorative gradients.
Do not use the artwork palette as the interface brand palette.
Do not make timestamps or handles compete with creator names and post copy.
Do not fill the broad side areas with unnecessary content.
Do not apply a uniform tint or treatment to user-uploaded media.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Bluesky-style social page with a quiet three-column desktop layout and a narrow, vertically flowing central feed. Use Canvas White #ffffff for the page, Feed Ink #000000 for core text, and Slate Detail #405168 for handles and timestamps. Reserve Bluesky Blue #006aff for the primary action and selected states. Define columns and post boundaries with fine Divider Gray #dce2ea lines; use Soft Mist #f9fafb and Cloud Gray #f2f2f2 only for subtle supporting surfaces. Use Inter or InterVariable throughout, with compact navigation and clear creator-name emphasis. Keep the outer rails sparse, place search and trending utilities to the right, and let posts expand naturally around their content. Display user media inline without a shared filter, heavy shadow, or decorative frame.
