Authkit
午夜的磨砂玻璃大教堂
AuthKit营造了一种夜间产品展示的视觉美感：近乎黑色的画布上点缀着磨砂玻璃般的表面，网格状的线条若隐若现，文字则仿佛被一层玻璃照亮。字体几乎全白，与深色背景形成鲜明对比，仅有一抹亮紫色作为功能性元素——每个交互界面都以柔和的蓝白色细线勾勒轮廓，而非传统的硬质边框。组件排列在半透明图层上，层层叠加在柔和的光晕之上，卡片看起来像是从下方发光的玻璃板，而非纸质面板。页面间距宽阔且富有韵律感；主要元素是一个横跨整个页面宽度的发光Logo，周围环绕着悬浮的玻璃卡片，而非传统的分屏布局。
一个全宽深色画布，居中放置内容容器，最大宽度为 1200 像素。主要元素是一个居中发光的 Logo（“AuthKit”，采用渐变字体），下方是一个小巧的眉形文字，其后/下方是三个悬浮的玻璃卡片，卡片内包含登录表单（左侧卡片向左倾斜，中间卡片最大化，右侧卡片向右倾斜）。浅色/深色主题切换按钮位于主要元素下方居中。特色栏是一个水平时间轴，包含 6 个圆形图标，图标之间用细线连接。章节节奏：每个章节以居中的眉形文字开头，文字两侧是逐渐淡化的水平线条；随后是一个居中的大标题（44-48 像素）；最后是一行低调的正文（16-18 像素），最大宽度约为 640 像素。 “自定义”部分显示了一个浏览器窗口的模型，其中中央是登录卡，周围环绕着浮动的 UI 检查器面板（调色板、半径滑块、徽标图标选择器、按钮文本字段、页面背景字段），这些面板位于画布的角落，就像一个设计工具工作区。
视觉设计以登录表单模型为主，采用“玻璃形态”风格（包括邮箱/密码输入框、社交媒体登录按钮和无密码验证码输入），以悬浮的半透明卡片形式呈现在午夜蓝的画布上。功能图标是圆形哑光方块内的单色线性字形，颜色为#d1e4fa。整个页面覆盖着一层微妙的网格（1像素的rgba(186,215,247,0.06)线条），营造出独特的氛围，而锥形渐变聚光灯则在主元素顶部闪耀。没有照片、没有生活方式图片、没有产品截图——产品本身就是视觉元素：登录字段如同玻璃原型般排列在昏暗的工作室中。
调色板
品牌
- Void Violet
#663af3— 行动号召 (CTA) 按钮的主色调是唯一专门用于登录表单中“继续/提交”按钮的强调色；鲜艳的紫色与近乎黑色的背景形成对比，营造出一种紧迫感，而不会破坏单色调的配色方案。
中性的
- Midnight Canvas
#05060f— 页面背景，卡片最深的表面，徽章的填充——几乎全黑的底色，其他一切都漂浮在其上。 - Steel Plate
#2f343e— 凸起的表面，虚拟/辅助操作按钮，隐蔽的面板背衬。 - Fog Veil
#9da7ba— 卡片上的正文虽然清晰可读，但与标题相比，却显得不那么显眼，处于背景位置。 - Moon Mist
#c7d3ea— 正文、附加标签、静音辅助文本 - Frost Glow
#d1e4fa— 正文和链接文本、图标文本和图标填充的主要填充颜色是默认的发光前景色。 - Ice Highlight
#d8ecf8— 浅色文字搭配深色背景、反色标签和高对比度标题。不要将其用作行动号召的主色调；AuthKit 的徽标和关键标题均采用标题渐变色——从上到下由浅蓝色平滑过渡到柔和的蓝色。
排版
从 12 像素到 48 像素 · 8 步
- Untitled Sans — 替代品： Inter · 轮廓 400, 500, 600, 700 · 主要文本、用户界面、按钮、输入字段、图标、小标题——所有功能性元素都使用通用字体。
- aeonikPro — 替代品： Space Grotesk · 轮廓 400, 500 · 仅显示标题——AuthKit 品牌标识、章节标题和正文——500 磅字体粗细，44-48px，使品牌标识呈现出宽阔、低调的外观，而不是花哨的点缀。
- dotDigital — 替代品： JetBrains Mono · 轮廓 400 · 全部大写字母（“介绍”、“可扩展设计”、“闪耀光芒”） - 等宽全大写字母，间距为 0.10em，用作正文和标题之间的微妙分隔符。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 宽敞 |
| 基本步骤 | 16px |
| 按钮半径 | 999px |
| 卡片半径 | 16px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 120px |
| 页面宽度 | 1200px |
AI 将按照Authkit风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- Resend — 黑色天鹅绒，带有紫色霓虹色
- Gsap — 设计工作室里的一块动画白板。近乎黑色的墙面，温暖的米色粉笔，以及五支彩色马克笔——每支马克笔对应一种动画技法。
- Slash — 午夜金库，内有镀金账簿
- Raycast — 午夜指挥中心，珊瑚霓虹灯
- Dimension — 黄昏时分，灯光昏暗的工作台面配有磨砂玻璃面板。
- Modal — 昏暗的服务器机房里，一个发光的终端机——唯一的光源是明亮的绿色。
- Reflect Notes — 繁星点点的紫色空间是一个黑暗的天文台，音符像星座一样漂浮在近乎漆黑的靛蓝色空旷背景上。
- LaunchDarkly — 霓虹灯控制室是一个昏暗的驾驶舱，紫色信号在漆黑的面板上闪烁。
- Ameba — 午夜时分的控制室——磨砂玻璃面板内闪烁着电蓝色的光芒
- AgentQL — 夜幕降临，航站楼上空出现北极光
- Neon — 夜幕降临后的服务器机房。一片漆黑，唯一的光源来自数据和用户交互。
- N8n — 午夜时分的工作流引擎——在黑暗的服务器机房中，实时自动化画布被状态指示器和数据流照亮的感觉。