North star · Use warm ivory space, deep ink typography, and precise outlined product illustrations to make every section feel editorial and clear.
The page’s identity comes from a restrained three-colour system: warm ivory (#fffcf7) fills nearly the entire canvas, deep ink (#0d0129) carries the logo, headlines and body copy, and deep teal (#19615c) marks the large problem-focused section. The hero and feature content use bold, large Roobert headings paired with readable, generously line-spaced body text. A small amount of monospaced Supply lettering appears in the waitlist button treatment. The composition is editorial and spacious: the hero places copy opposite a product illustration, then feature rows alternate image and text positions down the page. Illustrations use fine outlines and small yellow, coral and green details; those colours belong to the diagrams rather than the measured brand palette. The teal band creates the key contrast break, while the footer uses a compact dark panel beside a light early-access area. Keep decoration sparse and let alignment, scale and whitespace establish hierarchy.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
中性色
页面底色 · Warm Ivory表层 · Deep Teal主文字 · Midnight Ink次要文字 · Warm Ivory强调 · Deep Teal
Primary face for display, headings, body copy, navigation, and most interface text.
Aa 设计
Supply
网络字体 · 字重 400 · 占比 2%
免费替代：IBM Plex Mono
Small monospaced-style lettering used as a minor accent in the waitlist CTA treatment.
角色
示例
字号
字重
行高
字距
特大标题
Oversized primary hero headline.
Syllabus
64px
700
1.25
0
一级标题
Main page and prominent section headlines.
Syllabus
56px
700
1.27
0
二级标题
Feature and secondary section headings.
Syllabus
48px
700
1.27
0
三级标题
Smaller feature headings within the content flow.
Syllabus
40px
700
1.4
0
四级标题
Supporting subheads and emphasized short statements.
The quick brown fox 敏捷的狐狸
24px
400
1.67
0
正文
Hero descriptions and feature explanations.
The quick brown fox 敏捷的狐狸
20px
400
1.67
0
辅助文字
Compact labels and minor supporting text.
The quick brown fox 敏捷的狐狸
16px
700
2
0
导航
Header navigation and top-level links.
The quick brown fox 敏捷的狐狸
20px
400
2
0
间距与布局
基准单位 8px · 密度：宽松
40px版块间距
40px元素间距
62px卡片内边距
1280px内容最大宽度
1px
12px
16px
20px
24px
40px
64px
80px
104px
120px
150px
Use a centered content frame with a measured maximum width of 1280px and a spacious, low-density composition. The hero is a two-part arrangement: left-aligned headline and copy beside a product diagram. Follow with a full-width teal band, then a sequence of feature splits that alternate image and copy sides. Sections share a consistent left alignment rather than relying on centered text. The measured spacing scale is based on an 8px unit, with generous section separation and substantial card padding; preserve the open rhythm rather than compressing content.
圆角与层次
sm · other, nav
The page is predominantly flat, with no prominent card system or measured border palette. Interface diagrams create depth by overlapping outlined panels, while the navigation and CTA use only a subtle small shadow treatment. Keep borders thin and graphic, reserve layering for illustration panels, and avoid adding broad drop shadows or rounded-card styling.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Logo sits at the left with demo and login links at the right; finish with a dark ink Join Waitlist CTA.
Hero split
Large left-aligned headline, supporting copy and waitlist action sit opposite a layered SEO workflow illustration.
Teal problem band
A deep teal, clipped-corner panel reverses text to ivory and pairs the problem statement with a compact interface diagram.
Alternating feature rows
Feature title and explanatory copy alternate sides with fine-line interface illustrations across the long page.
Waitlist CTA
Use a compact, high-contrast label treatment with a pale yellow illustration-style button and dark offset shadow when matching the hero screenshot.
Early-access footer
A dark ink copyright block sits beside a light area containing the early-access heading, short copy and waitlist link.
Imagery · Use custom flat product illustrations rather than photography or 3D. Depict editorial tools, document panels, charts and interface windows with fine dark outlines, small labels, and a few muted yellow, coral, teal and green details. Keep illustrations crisp and diagrammatic, with generous surrounding whitespace. Alternate their position beside copy; avoid decorative imagery that does not explain the product.
Use deep teal (#19615c) for a contained contrast section.
Alternate illustration and copy sides in feature rows.
Keep headings bold, left-aligned and visually dominant.
Use diagrammatic product illustrations with fine outlines.
Preserve generous whitespace between content groups.
✕ 不该做
Do not introduce unmeasured colours as brand colours.
Do not turn the page into a dense dashboard grid.
Do not use large photographic or 3D hero imagery.
Do not center every heading and paragraph.
Do not apply heavy shadows to all content blocks.
Do not crowd illustrations with decorative effects.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new SaaS or AI product page in the Syllabus visual style. Use Warm Ivory (#fffcf7) as the broad canvas and Midnight Ink (#0d0129) for the logo, headings, copy, and primary controls. Reserve Deep Teal (#19615c) for a prominent, contained inverse section rather than scattering it everywhere. Set a large, bold Roobert-like sans-serif headline beside a crisp, outlined product illustration; follow with spacious feature splits that alternate text and diagram sides. Illustrations should show interface panels, documents, and charts with restrained small colour details, not photography or 3D. Keep alignment predominantly left-led, preserve generous vertical rhythm, and use flat surfaces with only subtle CTA or navigation shadowing. End with a concise early-access or contact block that echoes the restrained footer treatment.
