North star · Keep the interface quiet and dark so course artwork, concise outcomes, and enrollment actions carry the attention.
The page uses a near-black canvas as its dominant brand surface, giving white headings and muted gray descriptions strong contrast without feeling glossy. Course cards are arranged as a vertical catalog, each pairing a wide, colorful course thumbnail with a compact text and action column. The thumbnails carry most of the vivid color: warm orange, yellow, green, and blue treatments appear within individual course art and CTA gradients rather than defining the overall palette. Inter supplies a practical, consistent voice across navigation, headlines, descriptions, and buttons; bold headings establish hierarchy while smaller muted copy stays readable against the dark background. Thin charcoal borders separate cards and sections instead of relying on rounded containers or pronounced shadows. A centered wordmark and concise supporting line lead into a promotional strip, then repeated course rows, a free-video lesson band, and a restrained closing notification area. Spacing is compact but orderly, keeping many offerings scannable.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Night Canvas表层 · Graphite Band表层 2 · Deep Graphite表层 3 · Pale Button表层 4 · Silver Text主文字 · Studio White次要文字 · Quiet Gray弱文字 · Blue Slate描边 · Charcoal Rule
Navigation, course titles, descriptions, labels, and buttons throughout the page.
角色
示例
字号
字重
行高
字距
一级标题
Primary page or course headline, set in bold white.
Design Full-Time
40px
700
1.04
0
二级标题
Course titles and secondary section headings.
The quick brown fox 敏捷的狐狸
24px
700
1.33
0
正文
Course summaries and supporting explanatory copy.
The quick brown fox 敏捷的狐狸
18px
400
1.56
0
辅助文字
Small labels, instructor details, and supporting metadata.
The quick brown fox 敏捷的狐狸
16px
700
1.5
0
按钮
Enrollment, notification, and other action labels.
The quick brown fox 敏捷的狐狸
16px
800
1.5
0
导航
Top navigation links and account access.
The quick brown fox 敏捷的狐狸
16px
700
1.5
0
间距与布局
基准单位 8px · 密度：适中
48px版块间距
16px元素间距
—卡片内边距
1374px内容最大宽度
1px
5px
6px
8px
10px
12px
16px
24px
32px
40px
48px
A single-column page flow presents a centered brand introduction above a full-width promotional strip and a long stack of course rows. The measured maximum page width is 1374px; the screenshot shows generous outer margins at desktop width. Each course row uses a two-column split, with media on the left and copy plus paired actions on the right. The layout is comfortable but visually dense, using repeated spacing intervals and clear section gaps to keep a long catalog scannable.
圆角与层次
图片 · 50%
hairline · other, nav
hairline · other
The interface is largely flat. Thin charcoal borders define course cards, media regions, and secondary actions; dark alternate surfaces separate content bands. Avoid floating cards, rounded containers, and dramatic shadows. Limited subtle shadowing may appear in navigation details, but borders and tonal contrast do the main structural work.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Course card
A bordered dark row pairs a wide course thumbnail with a title, short summary, instructor attribution, and two adjacent actions.
Purchase button
Prominent enrollment action; measured component uses a #cfcfcf surface with white text, while screenshots also show vivid course-specific gradient treatments.
View Details link
Secondary action sits beside enrollment, with white text and a thin #414141 outline.
Promotional strip
A narrow horizontal offer band places a saving message, bundle price, and bright action button across one row.
Free lesson gallery
A contrasting dark-gray band arranges several video thumbnails with concise lesson titles and course labels.
Student Login
Compact top-right outlined navigation button with white text and a restrained charcoal border.
Notification panel
Quiet closing section presents a short coming-soon message with a centered notification action.
Imagery · Course thumbnails are prominent, rectangular video or course-cover images, frequently featuring the instructor, design interfaces, or oversized graphic lettering. Their saturated warm and cool colors contrast with the restrained dark interface. A later row of free lessons uses several smaller video thumbnails. Keep imagery crisp and unrounded; vivid color belongs chiefly to the course artwork rather than the page chrome.
Set headings in bold white and supporting copy in muted gray.
Give course artwork the strongest color and visual detail.
Repeat the media-left, copy-right course-row structure.
Use thin charcoal borders to clarify section boundaries.
Keep calls to action obvious and paired with a secondary details link.
✕ 不该做
Do not brighten the whole interface with large colored surfaces.
Do not treat thumbnail colors as the site-wide palette.
Avoid rounded, floating card treatments and heavy shadows.
Do not bury the enrollment action inside long descriptions.
Avoid oversized decorative copy that competes with course artwork.
Do not make course rows feel loosely spaced or disconnected.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the Design Full-Time visual style: a restrained dark catalog where course content stays easy to scan. Use Night Canvas (#111111) as the main background, Studio White (#ffffff) for strong headings and actions, Quiet Gray (#a0a0a0) for descriptions, and Charcoal Rule (#292929) for subtle borders. Keep vivid colors such as Hot Vermilion (#fa3a19) and Course Gold (#ffc84e) mainly inside course artwork or limited CTA accents. Use Inter throughout. Organize content as a vertical sequence of bordered, two-column course rows with rectangular media, concise descriptions, instructor metadata, and paired enrollment/details controls. Add a compact promotional band and a smaller video lesson collection where appropriate. Favor flat surfaces, crisp alignment, and measured spacing over decorative effects.
