Twingate

一个安全、高性能且易于使用的网络网关。

高对比度深色模式用于专注，搭配明亮的点缀色引导行动。

geometric-sans · humanist-sans · monospace

• display56px · 500
• body18px · 400

展示型字体为几何风格粗体。 · 正文为简洁的人文主义无衬线字体。 · 等宽字体用于特定UI元素，如'Zero Trust with No Boundaries'。

基于4px的统一节奏用于精细对齐，关键区域留有充足间距。

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

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

两栏式主视觉区域布局，左侧为醒目标题，右侧为浮动UI插图。

内容区块微妙的淡入效果。 · 按钮和链接平滑的hover过渡。

背景色加深或变亮，交互元素带有微妙的缩放变化。 · 通过轻微的下压效果提供即时反馈。

• button 胶囊形、高对比度按钮，主按钮为黄绿色点缀，次按钮为描边样式。
• card 深色、圆角卡片，带有微妙边框和最小阴影。
• chip 小型、圆角的标签，用于'New'等标签。
• input 深色、圆角的输入框，带有微妙边框。
• hero 具有冲击力的主视觉区域，包含醒目标题和浮动UI插图。

• 语气 专业、自信且直接。
• 标题风格 粗体、简洁且以收益为导向。
• 按钮文案 行动导向且清晰，例如'免费试用Twingate'。

• 不要使用浅色背景——网站使用深黑色背景(#000000)以营造专注感。
• 不要使用多种颜色——调色板仅限于黑、白和单一亮色点缀。
• 不要使用装饰性衬线字体——所有字体均为简洁的几何或人文主义无衬线字体。
• 不要用过多的边框或阴影使界面杂乱——表面由微妙的线条和最小的深度来界定。
• 不要对关键内容使用复杂、多栏布局——主视觉区域使用清晰的两栏分割。
• 不要使用小号、难以阅读的文字——正文大小确保阅读舒适性。
• 避免: 未经解释的过度技术术语。
• 避免: 激进或强迫性的销售语言。
• 避免: 模糊或含糊的承诺。