School 以趣味拼贴式布局呈现创意工作室，组合互动工具、项目预览与编辑内容。柔和灰色底色和清晰白色卡片为多样视觉内容提供画廊般的展示框架。
North star · Treat the page as a calm gray studio wall holding a lively, carefully varied collage of crisp white interactive cards.
The page uses a light, gallery-like palette: a broad #dbdbdb canvas supports white and near-white modules, while #303030 carries the main copy and compact labels. The bright accents are restrained in the interface; lilac and blue appear as small card details, while much of the stronger color belongs to artwork and interactive demos. Helvetica handles the large, relaxed studio introduction and readable body copy. IBM Plex Mono gives card headings, metadata, and controls a precise, catalog-like voice. A loose multi-column collage places unequal cards beside one another rather than imposing a uniform portfolio grid. Rounded white panels, small pills, and subtle shadows contain a mix of portraits, project imagery, playful widgets, and editorial features. Generous gray gutters keep the busy content legible and let each module feel like an object on a studio wall.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery Gray表层 · Soft Porcelain表层 2 · Paper White主文字 · Studio Ink次要文字 · Paper White描边 · Paper White强调 · Lilac Accent强调 2 · Signal Blue
Studio introduction, large headings, body copy, and prominent input text.
Aa 设计
IBM Plex Mono
网络字体 · 字重 400 · 占比 45%
免费替代：IBM Plex Mono
Card headings, navigation and links, labels, captions, and compact metadata.
角色
示例
字号
字重
行高
字距
一级标题
Main studio introduction in the first viewport.
School
44px
400
1.4
0
二级标题
Large secondary statements and editorial headings.
School
42px
300
1.4
0
三级标题
Monospaced titles for cards and content modules.
The quick brown fox 敏捷的狐狸
25px
400
1.4
0
四级标题
Supporting headings within cards and feature blocks.
The quick brown fox 敏捷的狐狸
24px
400
1.4
0
正文
Readable introductory and supporting copy.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0
辅助文字
Compact card metadata, tags, and small labels.
The quick brown fox 敏捷的狐狸
11px
400
1.4
0
代码
Monospaced technical or interface-style microcopy.
const style = 1;
11px
400
1.4
0
间距与布局
基准单位 4px · 密度：宽松
100px版块间距
2px元素间距
—卡片内边距
1392px内容最大宽度
2px
4px
5px
6px
8px
10px
12px
18px
20px
24px
30px
The page uses a spacious desktop canvas with a measured maximum width of 1392px. Its upper content is a loose, asymmetric multi-column collage: a narrow introduction and tools column sits beside larger profile, drawing, and project cards. Align card edges where useful, but vary module widths and heights to keep the portfolio lively. Broad gray gutters separate modules; content continues into a full-width visual section and a compact footer. The measured section gap is generous, while card internals remain compact.
圆角与层次
输入框 · 9999px
卡片 · 10px
图片 · 50%
徽标 · 9999px
sm · card, other
sm · other
sm · text
sm · other
Cards sit subtly above the gray canvas through restrained soft shadows rather than heavy outlines. White and near-white surfaces do most of the separation work; use fine gray or white hairlines sparingly. Rounded card corners and pill-shaped badges add gentle depth, while media can use a sharper edge or offset accent.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Studio introduction
Large Helvetica greeting and studio statement on the gray canvas, paired with compact pill-shaped contact details.
Project and content cards
Near-white panels with 10px measured card radius, dark text, subtle shadow, and IBM Plex Mono titles or metadata.
Profile builder
White interactive panel combining an illustrated character, rounded pale name input, and compact selection controls.
Project preview
Large media-led card with a small monospaced heading and rounded campaign or production badges.
Editorial feature
Image-led content card with a compact label, prominent featured artwork, and supporting story text.
Contact pills
Small rounded, light-colored contact links set in monospaced type.
Interactive demo card
Embedded playful tool or verification module; its blue background is an isolated accent, not a general page surface.
Imagery · Mix studio and project photography with playful 3D character portraits, color-picker and drawing widgets, editorial images, and video-led visual blocks. Keep assets within crisp white or near-white cards, with rounded card corners and simple framing. Let artwork supply most of the saturated color; the surrounding interface stays quiet. Preserve the collage-like variety rather than applying a uniform image treatment.
Keep the main canvas light gray and the content cards white or near-white.
Use Helvetica for studio-scale statements and readable body text.
Use IBM Plex Mono for card labels, metadata, and compact links.
Build an irregular collage with varied card sizes and clear gutters.
Let project imagery and interactive demos carry the strongest colors.
Use soft shadows, rounded cards, and pill details with restraint.
✕ 不该做
Do not turn the collage into a uniform grid of identical cards.
Do not use saturated accents as full-page backgrounds.
Do not overdecorate cards with strong borders or deep shadows.
Do not replace the monospaced microcopy with generic rounded display type.
Do not force the artwork into one photographic or illustrative style.
Do not crowd the gray gutters with extra interface elements.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page in School's calm, playful collage style. Use Gallery Gray (#dbdbdb) as the broad canvas, Paper White (#ffffff) and Soft Porcelain (#f9f9f9) for softly elevated cards, and Studio Ink (#303030) for primary text. Keep Lilac Accent (#e0bff4) and Signal Blue (#648fe0) to small interface or illustration details. Set large statements and body copy in Helvetica; use IBM Plex Mono for card headings, links, tags, and metadata. Arrange unequal modules in an airy multi-column collage with generous gutters, restrained shadows, rounded card corners, and pill-shaped labels. Combine project imagery, playful interactive widgets, and editorial content without forcing them into a single visual treatment. Keep the overall interface quiet so the artwork remains vivid.
