North star · Let typography and precise dark-surface hierarchy lead; keep accents sparse and every divider quiet.
The page is built on a near-black canvas (#080a0e), with charcoal navigation and card surfaces that separate content without introducing bright section bands. Cool off-white (#e6e8eb) carries headings, navigation labels, and primary controls; muted gray (#9fa1a5) handles supporting copy and low-priority metadata. Hairline borders create quiet divisions around the sidebar, feature rows, and cards. Typography is compact and crisp: a bold Geist hero headline contrasts with Inter for navigation, body copy, and controls. The composition keeps a persistent, narrow left rail beside a broad content area. The hero aligns a large two-line message and concise copy on the left with a white line-art illustration on the right. Below it, six feature statements form a three-column grid with restrained icons and fine top rules. Spacing feels open around the hero but efficient in the feature area. Colorful green appears only as a small status accent, while a teal illustration tile belongs to the sidebar promo rather than the core identity.
Navigation, body copy, feature text, buttons, and compact metadata.
Aa 设计
Geist
网络字体 · 字重 500 / 700 · 占比 12%
免费替代：Inter
Large hero headline.
角色
示例
字号
字重
行高
字距
一级标题
Large bold, two-line hero headline.
Hashnode
48px
700
1
-0.025em
二级标题
Feature section heading or secondary page heading.
Hashnode
30px
400
1.2
0
三级标题
Feature titles and compact content headings.
The quick brown fox 敏捷的狐狸
18px
400
1.56
0
正文
Supporting descriptions and explanatory interface copy.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
辅助文字
Uppercase, letter-spaced compact labels and metadata.
The quick brown fox 敏捷的狐狸
12px
500
1.33
0.05em
按钮
Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
导航
Sidebar links and top navigation items.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
眉题
Small uppercase pre-heading labels, such as promo metadata.
The quick brown fox 敏捷的狐狸
12px
500
1.33
0.05em
间距与布局
基准单位 8px · 密度：适中
56px版块间距
8px元素间距
4px卡片内边距
—内容最大宽度
2px
4px
6px
8px
12px
16px
20px
32px
56px
64px
A persistent left sidebar anchors the viewport, with a thin divider before the wide main content. The top bar spans the content region, placing the page label at left and activity metadata at right. The hero uses a two-column split: text and CTA on the left, line illustration on the right. Six feature blocks sit below in three columns and two rows, aligned to a shared baseline with fine top rules. Preserve generous separation around the hero while keeping feature copy compact. No measured maximum content width is available.
圆角与层次
按钮 · 6px
卡片 · 12px
徽标 · 6px
导航 · 50%
链接 · 6px
md · other, card
The interface is predominantly flat. Thin graphite borders define the sidebar edge, feature divisions, and promotional card; dark surfaces provide the remaining hierarchy. A subtle shadow may lift the sidebar promo card, but avoid broad glow, strong drop shadows, or layered floating panels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Sidebar navigation
Charcoal left rail with the Hashnode mark, compact icon-and-label links, a selected Feed row, and utility actions near the bottom.
Top activity bar
Thin horizontal header with a page label at left and muted 24-hour article and writer counts at right.
Hero
Bold two-line Geist headline and muted supporting copy at left, a light line-art illustration at right, and a pale primary Get started button.
Feature grid
Six concise feature blocks arranged in three columns and two rows, each using a small outline icon, title, muted copy, and fine top border.
Sidebar promo card
Compact What's New card with muted metadata, a teal artwork tile, clipped title, and subdued supporting text.
Status badge
Small green New pill in the lower sidebar, used sparingly as a status cue.
Imagery · Use restrained monochrome line illustration rather than photography or 3D. The hero artwork sits to the right of the headline, drawn with thin light strokes against the dark canvas and generous negative space. Small interface icons are simple outlines. A saturated teal tile appears only inside the sidebar promotional card, so do not extend that treatment across the page.
Keep navigation and cards on restrained charcoal surfaces.
Set hero display text in bold Geist or a close substitute.
Use #9fa1a5 for supporting copy rather than competing white.
Separate feature blocks with subtle #1a1d22 hairlines.
Reserve green for small status indicators.
Keep hero illustration monochrome and line-based.
✕ 不该做
Do not brighten the canvas into light mode.
Do not use green or teal as broad page backgrounds.
Do not add gradients or glows as dominant decoration.
Do not replace the editorial grid with oversized cards.
Do not make secondary copy as bright as the headline.
Do not use photography where restrained line art belongs.
Do not remove the sidebar-led information hierarchy.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a developer-focused homepage in Hashnode’s restrained dark editorial style. Use Midnight Canvas (#080a0e) as the main background, Charcoal Panel (#15171c) for the sidebar and select surfaces, Cool Chalk (#e6e8eb) for primary text, and Slate Mist (#9fa1a5) for supporting copy. Use Quiet Graphite (#1a1d22) for subtle rules. Keep the left navigation persistent and compact, with a thin boundary before the content area. Compose a spacious two-column hero with a bold, tightly tracked Geist-like headline, concise Inter copy, a pale primary action, and monochrome line illustration. Follow with a three-column feature grid using small outline icons and fine top borders. Treat Status Green (#4cb86a) and Promo Teal (#003e41) as rare utility or promotional details, never broad brand fills. Favor flat surfaces, clean alignment, and restrained shadows.
