Relate

一个时尚的数字店面，叠加在充满活力的社区背景上。

高对比度的排版与干净的白色容器，分层置于彩色摄影网格之上，以确保可读性。

geometric-sans · humanist-sans · monospace

• display56px · 700
• h136px · 700
• h224px · 600
• body16px · 400
• caption13px · 400

展示字体采用粗体几何无衬线字体，以产生强烈视觉冲击。 · 正文使用高度可读的人文主义无衬线字体。 · 文字颜色主要依赖纯黑（#000000）和深灰（#333333）以获得最大对比度。 · 小标签和次要文本使用柔和的灰色（#666666 或 #999999）。 · 价格数字通过粗体字重和独特的背景色进行强调。

内容卡片内充足的填充（24px-32px），尽管背景网格密集，仍创造了舒适的阅读节奏。

1px solid rgba(0,0,0,0.1)

0 4px 12px rgba(0,0,0,0.1) · 0 2px 4px rgba(0,0,0,0.05)

一个严格的人像照片网格作为底层，白色内容块通过绝对定位或重叠的 z-index 覆盖其上。

内容卡片加载时的淡入效果 · 按钮和交互链接的细微 hover 效果

按钮轻微变暗或增加阴影；链接变色或显示下划线。 · 通过主要操作按钮的轻微缩放或颜色偏移提供视觉反馈。

• button 醒目的矩形按钮，通常为蓝色背景（#007BFF）和白色文字，或用于次级操作的青色轮廓按钮。
• card 白色背景卡片，圆角（8-12px），带有细微阴影，漂浮于摄影网格之上。
• chip 小的、药丸状的标签（例如 '可用!'、'额外'），用作快速状态指示器。
• input 干净、带边框的输入框，用于潜在的搜索或筛选交互，但并非重点。
• hero 大字体的主要域名名称与充满活力、多面板摄影网格的组合。

• 语气 直接、专业且交易导向，聚焦于清晰性和紧迫感。
• 标题风格 粗体、大写且高度可见，清晰地陈述域名名称及其状态。
• 按钮文案 面向行动且明确无误，使用诸如 '立即购买!' 和 '了解更多' 等短语，并搭配高对比度按钮。

• 不要使用细体、低对比度的排版——截图显示了粗体、高对比度的标题以确保清晰。
• 不要隐藏价格——截图在专用的彩色框中醒目地显示了 '$34,999'。
• 不要使用深色模式或复杂的背景渐变——截图使用白色主背景作为内容卡片。
• 不要仅依赖图标——截图使用明确的文本标签和详细的段落来传递信息。
• 不要创建扁平的单栏布局——截图利用了动态的、重叠的图像和内容块网格。
• 不要使用俏皮或圆润的排版——截图采用了严格、干净的无衬线字体以营造专业外观。
• 避免: 过于随意的语言
• 避免: 模糊的描述
• 避免: 复杂的术语
• 避免: 低对比度文本