North star · Keep the canvas calm and spacious, then use oversized black-and-blue typography and geometric artwork for the visual punch.
The page builds its identity around a warm cream canvas (#fff9f0), which gives the large, near-black (#000609) display type and vivid blue (#0a65db) emphasis room to stand out. Blue is used selectively in the hero headline, illustrations, and full-width footer rather than as a constant background. The typography contrasts Degular Display’s heavy, expressive headings with the more restrained Usual sans-serif for body copy and controls. A two-column hero pairs a left-aligned message with a large geometric illustration; subsequent service blocks alternate image and text placement, creating a steady editorial rhythm. Illustrations use bold primary-like shapes, fine black linework, and checkerboard motifs, but remain supporting artwork rather than a replacement for the restrained brand palette. Generous whitespace separates content groups. Outlined pill buttons and one dark filled CTA provide clear interaction cues, while the blue footer anchors the page with compact navigation.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Warm Canvas主文字 · Deep Ink次要文字 · Footer White描边 · Deep Ink强调 · Signal Blue
Primary page headline and major campaign messaging.
EarlyDog
80px
700
1.1
0.013em
二级标题
Service-section and closing CTA headlines.
EarlyDog
52px
700
1.23
0.019em
三级标题
Supporting section headings and service labels.
The quick brown fox 敏捷的狐狸
22px
400
1.82
0
正文
Explanatory service and company copy.
The quick brown fox 敏捷的狐狸
18px
400
1.78
0
辅助文字
Small supporting labels and footer details.
The quick brown fox 敏捷的狐狸
16px
400
1
0
按钮
Bold labels on pill-shaped CTAs.
The quick brown fox 敏捷的狐狸
18px
700
1
0
间距与布局
基准单位 4px · 密度：宽松
128px版块间距
32px元素间距
—卡片内边距
1200px内容最大宽度
2px
3px
4px
14px
16px
20px
24px
30px
32px
40px
44px
48px
56px
72px
76px
96px
Use a spacious, centered page frame with a measured maximum width of 1200px. The hero and service stories use two-column compositions with left-aligned copy; alternate image and text sides across successive feature sections. Keep the hero visually dominant, then separate each service block with generous vertical breathing room. A centered closing CTA transitions directly into a full-width footer band. Overall density is low, with ample canvas around both text and illustrations.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is predominantly flat, without measured shadows or gradient treatments. Separate sections through whitespace and occasional subtle hairlines rather than raised cards. Buttons use a strong dark outline or filled dark treatment, with a fully rounded pill shape; illustrations layer shapes and linework as graphic compositions.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Minimal header with a compact menu icon at the upper left and a bold Talk to us link with a small blue directional mark at the upper right.
Hero
Large left-aligned black headline with a blue phrase, concise supporting paragraph, and oversized geometric illustration in a two-column arrangement.
Alternating service features
Service stories pair short headings and copy with geometric artwork, alternating which side holds the text and illustration.
Outlined CTA button
Use a 3px solid #000609 border, 9999px radius, and bold 18px Usual label for secondary actions.
Filled CTA button
Use #000609 fill and border with #fff9f0 text, a 3px border, 9999px radius, and bold 18px Usual label.
Footer
Full-width #0a65db band with compact navigation links and small light legal and copyright text.
Imagery · Use custom flat geometric illustrations rather than photography or 3D. Combine circles, rectangles, checkerboard tiles, triangles, and thin radial linework in bright blue and warm contrasting colors. Keep artwork large and crisp beside the service copy, with simple, open compositions and no photographic textures. Illustration colors may be more varied than the measured core brand palette.
Reserve #0a65db for deliberate emphasis and the footer band.
Set major headlines in a bold display face.
Keep body copy dark, readable, and left aligned.
Alternate the image and text sides in service features.
Use simple geometric illustrations with crisp edges.
Make CTA buttons fully pill-shaped.
✕ 不该做
Don’t replace the warm canvas with stark white.
Don’t use blue as a background for every section.
Don’t crowd the page with dense cards or content.
Don’t add shadows or gradients absent from the measured style.
Don’t make illustrations photographic or realistic 3D.
Don’t use a generic grid of identical feature cards.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new EarlyDog-style SaaS page with a spacious, editorial layout and a measured maximum width of 1200px. Use Warm Canvas (#fff9f0) for the main surface, Deep Ink (#000609) for copy and outlines, and Signal Blue (#0a65db) for selective headline emphasis and a strong footer band. Set large headings in a bold display sans similar to Degular Display; use a clean sans such as Inter for body copy, navigation, and controls. Lead with a two-column hero: left-aligned message and large flat geometric artwork. Follow with alternating service-story layouts, generous whitespace, and a concise closing CTA. Use pill-shaped outlined or dark-filled buttons. Keep depth flat: no shadows, gradients, or card-heavy layouts. Treat illustration colors as artwork, not additional core brand colors.
