North star · Keep the page quiet and sharply organized until a deliberate full-width colour or media moment changes its pace.
The visual system is built around a white canvas, near-black typography, and a large, uninterrupted #ebff00 biography and secondary-work band. The yellow is a defining structural colour rather than a small decorative accent; it is reserved for the portfolio’s mid-to-late page, small status details, and calls to action. Be Vietnam Pro carries readable body copy, while IBM Plex Mono supplies compact, uppercase labels, navigation, metadata, and award details. A distinctive raster display face gives major headings a pixel-like character and strong contrast against the restrained text. The opening is airy and nearly monochrome, with fine horizontal rules separating project entries and generous space around large media. Case-study images retain their own colour, functioning as framed project evidence rather than a competing site palette. The bio section shifts to bold, oversized type and profile photography. A near-black contact footer reverses the page’s tone and highlights the final invitation.
Body copy and standard case-study descriptions and links.
Aa 设计
IBM Plex Mono
网络字体 · 字重 600 / 500 · 占比 40%
免费替代：IBM Plex Mono
Navigation, metadata, captions, section labels, and compact award or service details.
Aa 设计
FK Raster Grotesk Compact Trial Sharp
网络字体 · 字重 400 · 占比 1%
免费替代：Silkscreen
Large display headings, notably the oversized biography title.
角色
示例
字号
字重
行高
字距
一级标题
Hero and oversized biography display headings.
Alejandro Mejias
48px
400
1
0.042em
二级标题
Major section headings and featured-work titles.
Alejandro Mejias
32px
400
1
0
正文
Portfolio summaries, biography copy, and explanatory text.
The quick brown fox 敏捷的狐狸
16px
400
1.4
0
辅助文字
Compact uppercase project labels and metadata.
The quick brown fox 敏捷的狐狸
14px
600
1.2
0.086em
链接
Readable case-study and award-related inline links.
The quick brown fox 敏捷的狐狸
16px
400
1.4
0
眉题
Navigation and small uppercase section identifiers.
The quick brown fox 敏捷的狐狸
14px
600
1.2
0.086em
代码
Monospaced uppercase labels and terse data-like details.
const style = 1;
14px
600
1.2
0.086em
间距与布局
基准单位 2px · 密度：适中
48px版块间距
10px元素间距
—卡片内边距
1397px内容最大宽度
4px
8px
10px
16px
24px
48px
A long, comfortable-density portfolio with a measured maximum content width of 1397px. Navigation and project metadata align to the page edges, while case studies use broad media layouts: paired columns for the first projects and a full-bleed presentation for Crown. Fine rules divide the white editorial sections. A four-column other-work area and asymmetric biography content introduce a more graphic rhythm. Maintain the measured 48px section gap and use the supplied spacing scale rather than inventing new values.
圆角与层次
按钮 · 9999px
图片 · 24px
链接 · 4px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat: white and yellow bands meet cleanly, and fine horizontal hairlines organize content without shadows. Media is presented as broad rectangular panels, with the measured 24px media radius available where appropriate; project cards themselves read as square-edged. Layering comes from overlapping artwork and the 3D hero object, not from elevated interface cards.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Utility navigation
A slim white top row with the designer name, centered work/about/contact links, and a compact yellow local-time pill.
Featured case study
Project title and year sit above a large image arrangement; description, mono category chips, case-study link, and a small pagination cue follow.
Project category chips
Small uppercase monospaced labels on yellow, used to identify disciplines without turning the page into a dense badge system.
Other-work gallery
An electric-yellow field with centered, layered project artwork and simple opposing section labels.
Biography block
Oversized raster-style heading above a ruled, editorial text layout, followed by a centered portrait and service details.
Contact close
A near-black final section combines a concise invitation, the recurring 3D form, and separated video-call, email, and social rows.
Imagery · Large project imagery is the primary content: interface mockups, app screens, and a broad Crown website presentation sit within clean rectangular media areas. The hero features a dark, dimensional 3D form against white; the contact area repeats that sculptural motif on black. The biography uses a direct portrait, while the other-work band layers project imagery. Preserve the vivid colours inside case-study art as artwork, not as extra brand colours.
Use white as the default canvas for featured work.
Reserve Electric Citron (#ebff00) for clear, intentional colour shifts.
Use IBM Plex Mono for compact uppercase labels and metadata.
Let case-study media occupy broad, uncluttered areas.
Separate content groups with restrained hairlines.
Finish with a high-contrast near-black contact section.
✕ 不该做
Do not add gradients or decorative shadows.
Do not spread Electric Citron across every section.
Do not turn project imagery into generic thumbnails.
Do not use the raster display face for long paragraphs.
Do not add rounded cards where the layout is square-edged.
Do not crowd the open white sections with extra UI.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new designer-portfolio page in this visual language. Use Gallery White (#ffffff) as the main canvas and Soft Ink (#080707) for text, rules, and the closing contact band. Introduce Electric Citron (#ebff00) as a deliberate, high-impact section background and a compact CTA accent, not as a constant highlight. Use Be Vietnam Pro for readable copy, IBM Plex Mono for tracked uppercase labels and metadata, and a pixel-like display face for only the largest headings. Arrange work as spacious, media-led editorial entries with thin separators and clear project details. Keep project artwork true to its source colours; treat Studio Grey (#c8c8c8) and Olive Frame (#505e45) as occasional media surfaces. Avoid gradients, heavy shadows, and unnecessary card chrome. End with a dark, concise contact invitation.
