North star · Keep the page calm and legible on white, then use bold gradients and real creative-work examples as focused bursts of energy.
The page balances a clean white canvas with concentrated bursts of saturated color. The opening hero uses a purple-to-blue-to-teal gradient behind oversized white Canva Sans lettering, while the rest of the page returns to white so product imagery and colorful cards stand out. Canva Sans carries nearly all interface and headline text; headings are light and spacious, while compact navigation and body labels use stronger weights. The layout is centered and modular, with wide galleries and varied card sizes that suggest a flexible creative workspace. Feature panels use vivid gradients and rounded corners, but their artwork—not extra interface decoration—does most of the visual work. A broad gradient CTA near the bottom echoes the hero, followed by a quiet, pale footer. Treat illustration and template colors as content rather than fixed brand tokens.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Deep Ink主文字 · Deep Ink次要文字 · Gallery White弱文字 · Pure Black强调 · Electric Purple强调 2 · Indigo Pulse强调 3 · Coral Blush
Headlines, navigation, body copy, buttons, and nearly all interface text.
Aa 设计
Times New Roman
系统字体 · 字重 400 · 占比 4%
免费替代：Noto Serif
Small measured fallback or incidental caption text; not a defining visual voice in the screenshots.
角色
示例
字号
字重
行高
字距
特大标题
Oversized centered hero headline over the opening gradient.
Canva
84px
400
1.06
-0.018em
一级标题
Primary page or major feature headline.
Canva
64px
400
1.25
-0.01em
二级标题
Section titles above feature, suite, and template groups.
Canva
56px
400
1.1
-0.01em
三级标题
Feature-card and prominent panel headings.
Canva
36px
500
1.25
-0.01em
四级标题
Smaller feature and supporting panel titles.
Canva
28px
500
1.25
-0.01em
正文
Supporting descriptions, CTA labels, and compact interface copy.
The quick brown fox 敏捷的狐狸
14px
600
1.57
0
辅助文字
Incidental tiny captions; not a visible brand-defining style.
The quick brown fox 敏捷的狐狸
10px
400
normal
0
导航
Top navigation links and compact site navigation.
The quick brown fox 敏捷的狐狸
14px
500
1.57
0
间距与布局
基准单位 4px · 密度：紧凑
32px版块间距
4px元素间距
8px卡片内边距
1376px内容最大宽度
1px
4px
6px
8px
9px
12px
16px
24px
32px
48px
The page is centered within a wide desktop canvas, with measured max width of 1376px and a compact 4px-based spacing system. The hero is centered, followed by stacked full-width white sections containing mixed two-column feature panels and broad template galleries. Headings are generally centered; the footer switches to a denser, left-aligned multi-column directory. Keep generous visual breathing room between major bands, while card contents and navigation remain compact.
圆角与层次
按钮 · 50%
卡片 · 9999px
徽标 · 9999px
导航 · 12px
链接 · 12px
inset · link, button
inset · link, button, nav
inset · footer, button
md · other, card
Most page structure is flat white with no pronounced section borders. Product mockups and cards gain separation through soft, low-contrast shadows and rounded corners; interactive controls can use subtle inset highlights. Layer visual content within feature cards, but keep the overall page free of heavy outlines or deep drop shadows.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Gradient hero
Centered white headline, supporting line, rounded CTA, and a large product-editor preview on a vivid purple-to-teal background.
Primary CTA
Purple #8b3dff fill, white Canva Sans semibold label, rounded rectangle treatment, and a subtle inset highlight.
Feature card
Rounded colorful panel with a concise heading, small light CTA, and product artwork or video preview.
Tool category strip
Compact horizontal group of creation categories with small colorful icons, labels, and a pill-like selected state.
Template gallery
Wide, image-led grid of mixed-format template thumbnails with a centered heading and browse actions.
Closing CTA band
Full-width teal-to-purple gradient, centered white message, and a small light button.
Footer directory
Quiet pale footer with Canva mark, grouped link columns, download options, and a compact legal row.
Imagery · Use product UI, design previews, templates, and colorful editorial examples as the main imagery. The hero includes a large interface mockup with a visible canvas and editing tools; subsequent sections use card-based artwork and template thumbnails. Mix photography, illustration, and video previews as content requires, framing them in rounded panels. Preserve their colorfulness without imposing a uniform filter, since artwork palettes are intentionally varied.
Use Canva Sans as the dominant interface and heading face.
Keep the main canvas white and reserve color for focused sections and creative content.
Use vivid gradients for the hero and closing CTA.
Show realistic editor UI, templates, or finished design examples.
Use rounded cards and controls with restrained, soft elevation.
Center major section headings and vary card sizes to create an editorial rhythm.
✕ 不该做
Do not turn every section into a saturated gradient.
Do not use heavy borders or deep shadows around routine content.
Do not make the interface feel corporate or text-dense.
Do not apply one color filter to diverse template artwork.
Do not use serif typography as the main interface voice.
Do not crowd the hero headline, CTA, or product preview.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Canva-style page using a clean white canvas (#ffffff) and Canva Sans, with Inter as the closest free substitute. Create a centered, oversized hero with white text over a vivid gradient using Electric Purple (#8b3dff), Indigo Pulse (#5a32fa), Canva Teal (#00c4cc), and Sky Aqua (#93e8f6), plus a rounded light CTA and prominent product preview. Continue with airy white sections, centered titles, rounded colorful feature cards, and image-led template galleries. Treat the bright artwork as content, not a rigid palette. Use Deep Ink (#0f1015) for primary text, restrained soft shadows for layered previews, and a pale quiet footer. Keep navigation and labels compact, section transitions spacious, and decoration subordinate to actual product examples.
