本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Clerk 官网首页 Figma 公开稿。打开即可对照版面结构、标签切换与组件层级。
Clerk 首页把身份认证组件直接放进营销叙事的中心。顶栏黑条先给出融资消息，白底导航以小写 clerk 字标居左，右侧保留 Sign in 与 Sign up。首屏标题写「Everything you need for authentication」，副文补一句「More than APIs. The complete user layer for modern apps.」；紧接着是一套可切换的产品演示：User Authentication、Multi-tenancy、Enterprise Authentication、Agent Authentication。选中态用淡紫圆点标出，演示窗里是「Create your account」注册卡——Google / GitHub Continue、邮箱与密码字段，以及「Last used」一类细提示。右上角还有含框架图标的「Copy prompt」胶囊。页面先让访问者看见可嵌入的 UI，再展开能力清单。
白底首屏大标题、产品标签栏与居中 Create your account 注册组件演示
版面节奏外松内紧。首屏留白充足，标题字重偏重、字号很大，副文退到中灰；演示区被收进带圆角与轻阴影的大卡片，内部信息密度明显高于外层文案。导航保持浅色固定表面，行动按钮克制，不与演示窗抢对比。动效线索适合标签切换、卡片叠层淡入和细边框高光，不需要大幅度位移来制造注意力。整体更像一份可滚动的组件说明书，而不是概念插画集。
颜色预算同样明确。外层以白底与近黑字建立阅读入口；中段切入深色画布后，标题改为白色，「Auth that keeps evolving」下方用圆角深灰卡片铺开 Multifactor Authentication、Session Management、Email and SMS one-time passcodes、Magic Links、Fraud and Abuse Prevention 等内容。紫色只出现在小节标签与选中点缀上，大面积品牌色被压住，好让组件截图里的状态、头像和按钮成为视觉焦点。
深色 Auth that keeps evolving 区与 MFA、Session、OTP 等功能卡片网格
深浅分区承担了信息结构的分工。浅色首屏负责总览与信任建立；深色区负责能力深潜，卡片网格把安全能力拆成可并读的模块。Session Management 一类卡片还会叠出 Device / Browser / Location 的立体界面缩影，OTP 卡片则用手机通知形态提示通道。营销文案保持短句，证明责任仍交给组件与示意图。
由深到浅的分区过渡与 Multi-tenancy 三卡总览
回到浅色后，Multi-tenancy 区以紫色小标签引出「Everything your B2B SaaS needs」，下方三卡并列：Custom roles and permissions、Auto-join、Organization UI Components。角色卡用头像网格与 Administrator 胶囊标出权限差异；Auto-join 用环形关系图说明按邮箱域自动加入；Organization UI 则直接摆出下拉与管理入口。随后的 Billing 区继续同一套卡片语法，把订阅定价页嵌进浏览器窗框示意。组件化叙事在这里延伸到组织与计费：同一套圆角、细边框与人物头像语言贯穿 B2C 注册与 B2B 治理。
多租户角色权限、Auto-join 与 Organization UI 卡片细节
页末 Frameworks 区再次切回深色，双栏分别讲 SDK 与 Integrations：左侧「Build with SDKs for modern frameworks」配 Next.js、React、Remix、Node、Expo、Astro 等线框图标网格；右侧「Integrate with the tools you love」列出 Supabase、Firebase、Hasura 一类集成。细网格线背景强化工程感，底部以折角几何切回浅色。Clerk 的组件化观感正来自这种内外分工：外层用大字与分区告诉访问者读到哪一层，内层反复出示可拷贝、可嵌入的认证与组织 UI；标签、紫点、圆角卡与深浅切换共同服务于同一件事——让身份层看起来像产品里现成的界面，而不是事后补上的接口说明。
深色 Frameworks 区 SDK 与 Integrations 双栏图标网格