Astro

一辆用于构建网站的高性能跑车。

深邃的暗色背景营造出高级、高对比度的画布，以衬托鲜亮的渐变和清晰的白色排版。

grotesque-sans · monospace

• display64px · 700
• h230px · 600
• body16px · 400
• caption13px · 400

标题和正文使用干净、几何感的 grotesque-sans 字体，以保持技术感和现代感。 · 代码片段和 CLI 命令严格使用等宽字体。 · 大号展示文本保持紧凑的字间距，以增强冲击力。

基于 4px 网格，使用充足的 padding（16px, 24px, 32px）来定义章节边界和组件间距。

1px solid rgba(133, 139, 152, 0.2)

rgba(24, 24, 27, 0.3) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px

居中的单栏主视觉区域，内容垂直堆叠，随后过渡到用于主题展示的多栏网格。

交互元素使用平滑的颜色和背景色过渡。 · 悬停状态使用微妙的透明度和 box-shadow 过渡。 · 交互反馈使用 transform 过渡。

平滑的颜色和背景色过渡，采用标准缓动曲线。 · 标准指针光标，无突兀的视觉跳变。

• button 药丸形状，使用实色背景（白色或紫色），搭配高对比度文字。
• card 深色背景，带有微妙边框和圆角，用于展示主题。
• chip 药丸形的类别过滤器，带有微妙边框。
• input 深色背景的代码块，使用等宽字体，并配有复制图标。
• hero 全宽区域，采用醒目的线性渐变背景，文字居中。

• 语气 自信、以开发者为中心、直接明了。
• 标题风格 粗体、直接、以价值为导向的陈述。
• 按钮文案 清晰、以行动为导向的短语，例如“立即开始”。

• 不要使用明亮、饱和的背景——截图显示的是深邃的暗色渐变。
• 不要使用装饰性或衬线字体——截图显示的是干净的几何无衬线字体。
• 不要使用尖锐的矩形按钮——截图显示的是全圆角药丸形按钮。
• 不要在标题中使用纤细、浅色的字重——截图显示的是粗体（700）和半粗体（600）字重。
• 不要使用拥挤或杂乱的布局——截图显示的是充足的留白和清晰的层次结构。
• 不要使用范围广泛的色彩——截图显示的是有限的调色板，包含深蓝、紫色和白色。
• 避免: 浮夸或过度营销化的语言
• 避免: 被动语态
• 避免: 缺乏上下文的技术术语

历史提取与模型分析 · 尚未逐项校验