Becklyn

专注于软件与体验的高端数字建筑工作室

高对比度单色暗色模式，依靠深炭灰色背景上的纯白色文字实现最大可读性和戏剧性效果。

transitional-serif · grotesque-sans

• display92px · 400
• heading68px · 400
• subheading42px · 400
• body20px · 400
• label16px · 400

大型展示型文字使用过渡衬线体，营造精致且富有编辑感的气质。 · 所有功能性 UI 元素和正文采用无衬线怪诞体，确保清晰度与现代感。 · 在所有尺寸下保持紧凑的字距（tracking），以增强高端美学。 · 限制字体粗细为常规（400），以保持整洁统一的排版质感。

采用宽裕的垂直内边距和宽阔外边距，营造奢华感与聚焦感。

使用微妙的 1px solid rgba(255,255,255,0.1) 边框分隔列表项与交互元素。

0 4px 24px rgba(0,0,0,0.5)

基于网格的单栏主导布局，充分利用留白与居中的浮动导航。

悬停状态下平滑的背景色和颜色过渡。 · 次要元素的微妙透明度过渡。

导航项和列表行的背景色过渡。 · 主导航药丸的即时视觉状态变化。

• button 药丸形浮动导航栏，当前章节显示白色“激活”状态。
• card 扁平、行式列表组件，用于服务展示，以微妙水平线分隔。
• chip 小型药丸形语言切换器（例如“EN”）和通知徽章。
• input 提供的截图中未明确显示。
• hero 全视口、居中对齐的文字主视觉区，包含大尺寸衬线标题与浮动底部导航。

• 语气 自信、专业且富有前瞻性。
• 标题风格 使用精致衬线字体的粗体、陈述性语句。
• 按钮文案 融入导航结构，采用简洁的无衬线体。

• 不要使用明亮、饱和的强调色——截图显示了严格的 #1A1A1A 和 #FFFFFF 单色调色板。
• 不要应用多种字体粗细——截图显示所有元素一致使用 font-weight 400。
• 不要使用紧凑、网格密集的布局——截图展示了宽裕的留白和浮动的药丸导航。
• 不要使用俏皮、圆润的无衬线字体——截图展示了精致衬线体与中性怪诞体的组合。
• 不要隐藏导航——截图采用持久的浮动底部导航栏。
• 不要使用明亮的投影——截图依靠高对比度和微妙边框营造深度。
• 避免: 避免过于俏皮或随意的语言。
• 避免: 避免杂乱的布局或过度的装饰元素。
• 避免: 避免会破坏单色调色板的高饱和度色彩强调。