Karl 的作品集以通铺亮黄色画布、鲜蓝色球体和奇趣 3D 建筑，打造辨识度鲜明的动效设计世界。紧凑的深色导航与厚重展示字体，为沉浸式插画提供清晰易读的界面。
North star · Keep the yellow world uninterrupted and let one oversized, playful 3D scene carry the visual drama.
The page is built on a continuous #ffe100 yellow canvas, with no contrasting section bands to interrupt the long, single-page experience. A saturated #007fff blue sphere anchors the hero illustration and forms the strongest contrast with the yellow; its color belongs to the featured artwork as well as the measured accent palette. The small navigation uses dark #333333 lettering, while white is reserved for scattered illustration details and the tiny artwork credit rather than broad UI surfaces. Changa One supplies a chunky, playful voice across navigation and text, with display and heading roles sized for impact and body copy kept compact. The layout is intentionally sparse: a centered navigation sits near the top while a large, off-center 3D city curves around the sphere and extends down the page. Measured section spacing supports a relaxed scroll, but the uninterrupted background and oversized art make the page feel like one continuous scene. Keep interfaces flat and let the artwork supply depth.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
中性色
页面底色 · Electric Marigold主文字 · Charcoal Ink次要文字 · Cloud White强调 · Electric Marigold强调 2 · Orbit Blue
Display, navigation, and compact supporting copy across the page.
角色
示例
字号
字重
行高
字距
特大标题
Oversized introductory or portfolio statement, if rendered.
Karl
75px
400
0.8
0
一级标题
Primary identity or hero statement.
Karl
50px
400
0.72
0
二级标题
Secondary statements and section-level headings.
Karl
32px
400
1.25
0
正文
Short introductory and contact copy.
The quick brown fox 敏捷的狐狸
20px
400
1
0
辅助文字
Small artwork credit and supporting labels.
The quick brown fox 敏捷的狐狸
12px
400
1.67
0
链接
Top navigation and inline portfolio or contact links.
The quick brown fox 敏捷的狐狸
20px
400
1
0
间距与布局
基准单位 4px · 密度：适中
45px版块间距
—元素间距
—卡片内边距
—内容最大宽度
10px
20px
45px
Treat the page as a single-column, full-viewport canvas rather than a conventional boxed site. A compact navigation row is centered near the top edge; the hero artwork occupies most of the first viewport and is deliberately off-center, with the blue sphere and curved city carrying the visual weight. The measured page continues through five vertically ordered sections on the same background, with a 45-unit section gap and comfortable overall density. Keep copy sparse and let the scene extend beyond the viewport; no max width, grid, card padding, or element gap is measured.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured interface is flat: no shadows, gradients, border system, or rounded component radii are present. Create depth through the perspective, overlap, scale, and curved arrangement of the 3D artwork, not through UI card elevation. Keep navigation and any text directly on the canvas.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Centered horizontal links on the yellow canvas; measured link text uses Changa One at 20px, #333333, with 20px padding on each side and no border or radius.
Hero scene
Oversized 3D city and bright blue sphere form the dominant visual, with the illustration allowed to crop beyond the viewport.
Intro copy
Brief first-person motion-design introduction and work invitation, set directly over the uninterrupted canvas.
Contact links
Concise invitation to get in touch by phone or email; retain the simple text-led treatment rather than introducing a measured button style.
Artwork credit
Small white credit over the illustration; measured as Changa One at 12px with 10px vertical and 20px horizontal padding.
Imagery · The defining visual is a bright, stylized 3D city arranged around a large blue globe, with clouds, tilted buildings, and a balloon-like detail. Use an expansive, playful composition that can crop at viewport edges and continue down the page. The illustration’s muted reds, creams, and grays are artwork colors, not additional brand UI colors. Avoid substituting generic stock photography.
Set navigation and prominent copy in Changa One or a close free substitute.
Keep navigation compact, centered, and dark against yellow.
Make one vivid, oversized illustration the visual anchor.
Use #007fff primarily as an artwork accent.
Let the scene crop and continue through the long page.
✕ 不该做
Do not add alternating section backgrounds.
Do not introduce card grids or rounded UI panels.
Do not treat illustration colors as additional interface palette colors.
Do not add shadows, gradients, or borders without evidence.
Do not crowd the page with long explanatory copy.
Do not replace the playful 3D scene with generic photography.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page in Karl’s playful motion-design style. Use Electric Marigold (#ffe100) as the uninterrupted canvas, with a compact centered navigation in Charcoal Ink (#333333) and chunky Changa One-style typography. Keep the page sparse and single-column; avoid cards, borders, shadows, and contrasting section bands. Make one oversized, perspective-rich 3D illustration the centerpiece, with Orbit Blue (#007fff) used as a dominant color inside the artwork rather than as an assumed button color. Reserve Cloud White (#ffffff) for small illustration details or restrained credits. Let the composition crop at the viewport edges and continue vertically, balancing the large scene with short, direct introductory and contact copy. Preserve high contrast and a lively, informal tone.
