Doruk 的 X 主页以克制的黑白界面呈现个人资料与动态内容。蓝色链接和认证标记点出关键信息；鲜亮橙色及其他彩色主要来自主页横幅和帖子中的媒体素材。
North star · Keep the interface neutral and compact so creator identity and post media—not decorative chrome—carry the page.
The page follows X’s light interface: a white canvas frames a narrow, centered profile column, while black text and controls establish the strongest contrast. Signal blue (#1d9bf0) is reserved for links and verification accents rather than broad decorative areas. Muted gray text distinguishes metadata and secondary actions; fine gray borders separate the timeline and outlined controls. TwitterChirp keeps headings, profile details, buttons, and post copy visually consistent, with heavier weights reserved for the name and key labels. The profile banner’s orange field is striking in the screenshot, but it belongs to the account’s image rather than the site’s reusable brand palette. Below the profile header, a compact tab row transitions into a vertically stacked post feed. Avatars, embedded images, and video previews add variety within the otherwise quiet, flat interface. Comfortable spacing and rounded controls soften the dense stream without competing with its content.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Ink表层 2 · Card Mist表层 3 · Pale Slate主文字 · Ink次要文字 · Quiet Gray描边 · Rule Gray强调 · Signal Blue
Profile identity, navigation, buttons, metadata, and feed text.
角色
示例
字号
字重
行高
字距
一级标题
Profile name and prominent identity heading.
The quick brown fox 敏捷的狐狸
20px
800
1.2
-0.01em
正文
Post copy, profile description, and primary interface text.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
辅助文字
Compact metadata such as post dates and counts.
The quick brown fox 敏捷的狐狸
13px
400
1
0
按钮
Follow and other profile action labels.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
链接
Profile links, post links, and interactive text.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
间距与布局
基准单位 4px · 密度：适中
—版块间距
4px元素间距
—卡片内边距
—内容最大宽度
2px
4px
6px
8px
10px
12px
16px
A restrained, centered timeline column sits between broad white margins, with a slim left rail carrying the X mark. The profile banner spans the content column and overlaps visually with the circular avatar and identity block. Profile details, counts, pill-shaped actions, and tabs form a compact header before the vertically stacked feed. Alignment is predominantly left-anchored, with thin horizontal rules dividing navigation and posts. Keep the rhythm consistent and the feed information-dense, while leaving clear separation between entries.
圆角与层次
按钮 · 9999px
卡片 · 16px
链接 · 7px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat, with no measured shadow system. Use thin gray hairlines to define the central column, tabs, and outlined actions instead of adding depth. Layering comes from the avatar overlapping the banner and from media embedded inside feed posts; preserve these clear content boundaries.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Profile header
Wide account banner, overlapping circular avatar, verified name, handle, bio, website, join date, and follower counts on the white canvas.
Profile actions
Side-by-side pill controls: black filled Follow with white text, and white Mention with a thin #d9d9d9 outline.
Profile tabs
A compact horizontal row for Posts, Replies, Reposts, Media, and Articles, separated from the feed by a fine rule.
Post entry
Avatar and author metadata lead into left-aligned post copy, with engagement controls and optional embedded media.
Embedded media card
Post imagery and video previews sit within the feed; measured card borders use #ced9de and a rounded treatment.
Links and metadata
Use #1d9bf0 for prominent links, muted gray for supporting details, and black for key counts and identity text.
Imagery · The account banner is a saturated orange image, and the circular profile portrait overlaps its lower edge. Treat both as account-specific media, not default brand colors. Feed content mixes text with embedded screenshots, video previews, and colorful product imagery. Keep media within the post column, use rounded framing where shown, and preserve the contrast between expressive content and neutral interface chrome.
Do not treat the orange banner as a site-wide brand color.
Do not add decorative gradients to the interface.
Do not make muted metadata compete with post text.
Do not add shadows where flat borders define structure.
Do not widen the feed into a full-bleed layout.
Do not use multiple accent colors for interface controls.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creator profile page in the measured X light-interface style. Use Gallery White (#ffffff) as the canvas and Ink (#000000) for primary text and filled actions. Apply Signal Blue (#1d9bf0) sparingly to links and verification details, and use Quiet Gray (#666666) for metadata. Keep the main content as a narrow, centered profile-and-feed column with generous outer whitespace and a slim side rail. Place a wide account-specific banner behind an overlapping circular avatar, then show identity, profile details, counts, pill actions, and a compact tab row. Continue into a vertically stacked, left-aligned feed with fine Rule Gray (#d9d9d9) separators. Keep the interface flat; use embedded media for visual variation rather than decorative chrome.
