这是一个暗色单屏作品集，通过醒目的字体、实时本地时间和精简社交链接介绍 UI 工程师 Max Yinger。克制的配色与大面积留白，让页面更像交互视觉实验，而不是传统简历。
North star · Keep the page nearly empty and let warm monochrome typography, precise alignment, and small live interface details carry the identity.
The page is built on a nearly black olive canvas (#12130f), with warm off-white (#e4dfda) carrying nearly all visible text. A muted charcoal hairline (#3c3c38) outlines the small pill-shaped social controls without introducing a competing accent colour. The palette stays deliberately narrow: the centered segmented indicator and the bold YINGER wordmark use the same pale tone, while the screen remains mostly empty. Typography does the expressive work. A custom display face gives the wordmark and time readout a compact, mechanical character; a contrasting face sets the introductory statement in larger, softer lines; a technical face handles tiny uppercase metadata. Layout anchors the logo at upper left, a small indicator at center, and the time, introduction, and location details near the lower left, balanced by a vertical social-link stack on the right. The result feels sparse, precise, and quietly interactive rather than card-based.
Small uppercase technical labels, social links, and compact metadata.
Aa 设计
__arbeitContrast_bf3c9f
网络字体 · 字重 400 · 占比 28%
免费替代：DM Sans
Introductory statement and the main text-led description.
Aa 设计
__inlineVF_e236f6
网络字体 · 字重 400 · 占比 7%
免费替代：Bebas Neue
Oversized display lettering, including the wordmark and clock digits.
角色
示例
字号
字重
行高
字距
特大标题
Wordmark and prominent clock numerals.
Max Yinger
79.5px
400
0.8
0
一级标题
Primary introductory statement near the lower-left area.
Max Yinger
30.5px
400
1.13
0
正文
Supporting sentence text and portfolio introduction.
The quick brown fox 敏捷的狐狸
16px
400
1.25
0
辅助文字
Local-time label, location details, and social-link text.
The quick brown fox 敏捷的狐狸
11.5px
400
1.25
0
间距与布局
基准单位 4px · 密度：适中
64px版块间距
4px元素间距
—卡片内边距
1320px内容最大宽度
4px
8px
12px
64px
A single, full-viewport composition rather than a conventional scroll of cards. Keep the content within the measured 1320px maximum width, with the wordmark high at the left, a small segmented indicator centered in the canvas, and the main information grouped at the lower left. A narrow social stack sits on the right as a counterweight. The layout is one column in content structure, but uses opposing left and right anchors. Preserve broad negative space and a comfortable, sparse density; the measured section rhythm is 64px.
圆角与层次
按钮 · 9999px
链接 · 4px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat, with no measured shadows or gradients. Use the canvas as a continuous field and rely on text contrast, negative space, and fine dashed borders for separation. Social controls are outlined pills, not filled buttons or elevated cards; keep layering minimal and avoid adding panels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Wordmark
A large warm off-white YINGER mark at the upper left; treat it as a distinctive typographic graphic.
Segmented indicator
A small, centered row of dark-to-light rectangular segments, enclosed by a subtle outline.
Live clock
Prominent display numerals near the lower left, paired with a small uppercase local-time caption and compact am/pm indicators.
Intro statement
A large, regular-weight text block beside or following the clock, describing the engineer’s focus on realtime 3D, interaction, and performance.
Location metadata
Tiny uppercase technical text below the introduction, presenting Fort Collins, Colorado and a short role credit.
Social links
A vertical group of compact labels at the right edge, styled as warm off-white text inside fine dashed charcoal pill outlines.
Imagery · The screenshot shows no photography, video, or conventional illustration. The page’s visual interest comes from typography and a tiny segmented loading-style indicator centered in the empty canvas. Treat the YINGER mark and indicator as graphic interface elements, not as a cue to add stock imagery or decorative artwork. Keep the screen still and spacious, with any live details remaining small and integrated into the layout.
Reserve #e4dfda for primary text and the brightest display details.
Use #3c3c38 only for subtle outlines and interface edges.
Keep large areas of empty space around the central indicator.
Anchor the wordmark upper left and the social links to the right.
Use the technical face for small uppercase metadata.
✕ 不该做
Do not add colorful accent colours or gradients.
Do not fill the page with cards, panels, or decorative imagery.
Do not center the entire composition vertically or symmetrically.
Do not replace the warm near-black canvas with pure black.
Do not enlarge metadata until it competes with the main statement.
Do not use heavy shadows or raised button treatments.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page in Max Yinger’s restrained, experimental visual style. Use Olive Night (#12130f) as a continuous full-page canvas, Warm Chalk (#e4dfda) for primary typography and key display details, and Soft Graphite (#3c3c38) for fine dashed outlines. Create a spacious single-viewport composition with a distinctive wordmark at the upper left, a tiny segmented graphic around the center, and the main statement and live-style metadata grouped near the lower left; balance it with a compact vertical link stack on the right. Use a bold, narrow display face for short marks and numerals, a contrasting clean face for the introduction, and a technical mono-style face for labels. Avoid cards, shadows, gradients, photos, and extra accent colours. Let typography, alignment, and negative space provide the visual character.
