Latrix 设计逆向拆解

定位:把 AI 生命,当作一场新文艺复兴推断

latrix 卖的是「数字生命」(产品线 Cyra、Lives、Horizon、Cytopia),却几乎不用科技感的深色玄光,而是反其道:一整面米白画廊墙,配一批古典油画(卡拉瓦乔《怀疑的多马》、米开朗基罗《大卫》、《最后的晚餐》、《丘比特之吻》),把「造人、认知、怀疑、灵魂」这些文艺复兴母题,搬来讨论 AI 的「存在与认知」——标题一句 be, then know。这套「数字人文」的气质是全站的定调:先像人,再谈智能。观感推断,非抽取

色彩:米白展墙加一点橙实锤

近乎无彩:纸白底、暖墨字,几乎所有「颜色」只由一点橙承担——它是唯一的呼叫色(CTA、活动态、说明牌)。墨色以透明度铺出层级,不另调灰。点击色板复制。

值取自站点自身 :root 变量与线上高频色统计(topHex)。「accent」是站点变量原名,实际担任墨色。

字体:美术馆的三种嗓音实锤

三种角色分工清楚,且都是 Google Fonts(可自由嵌入,本页即用真字体呈现):Playfair Display 做高反差展示大标题(线上 h1 达 126.72px / 字重 400);Space Mono 做全大写、宽字距的说明牌与按钮;Italianno 花体做手写落款式的点睛。CJK 回退 Noto Serif SC。

Playfair Display · Display · 站点 h1 126.72px / 400

We create digital lives

Space Mono · Label & UI · letter-spacing 宽

Defining the system that sustains AI life

Italianno · 手写点睛 · --hand

be, then know

动效:一条缓动 + 双时间尺度实锤

全站基本只用一条缓动曲线 cubic-bezier(.22,1,.36,1)(快出慢收),配一套统一的亚秒级时长:揭示 .76s、换色 .22s、位移 .15s,外加一个 2.4s 的品牌回弹。没有长循环氛围动画——克制不靠慢,靠这条曲线的收尾手感。注:tokens.json 里的 16s / 22s / 76s 是挖掘时误删前导小数点所致,真实为 .16s、.22s、.76s,已在事实核查中更正。

主缓动 cubic-bezier(.22,1,.36,1)

时长梯(线上实测)

.15s 位移.16s.2s.22s 换色.42s.76s 揭示2.4s 品牌回弹

全在亚秒级,由同一条缓动统一收尾;唯一略长的是 2.4s 的品牌回弹。安静,但每次触碰都利落。

签名母题:拧转的品牌字母螺旋实锤 · 可跑

首屏正中,字母 L-A-T-R-I-X 不断向下堆叠、拧成一条字带,像一缕「数字生命的 DNA」——站点用一整块 <canvas> 绘制,其容器类名直接叫 _homeDnaBackdrop,印证了「DNA」正是设计者本意。下面是用纯 CSS 3D 做的近似复现(非原生 canvas),把它当作这份拆解的可跑签名。

CSS 3D 近似复现,原站为 canvas(_homeDnaBackdrop)

工艺细节实锤

圆与方的对话

导航是完全的胶囊(999px),主 CTA「START FREE TRIAL」却是彻底的直角(0px)。柔和的漂浮药丸里,嵌一枚硬边的橙色行动块——克制里唯一的重音。

Try Cyra ↗Start free trial

说明牌式的边角信息

四角撒着 Space Mono 小字:SINGAPORE、FOUNDED 2025、EST. 2026 / LATRIX STUDIO、还有一行 Italianno 斜体「We are a member of NVIDIA Inception program.」——像展签,不像 UI。

古典油画作纹理

下半页用文艺复兴与巴洛克名作(《大卫》《最后的晚餐》《怀疑的多马》)作图,承接「数字人文」的叙事。图源见 real-assets/manifest.json

David

Last Supper

Doubting Thomas

复刻:真实 :root实锤

直接抄走即得 latrix 的底色。完整机器可读见同目录 design-tokens.css 与 tokens.json;字体用 Google Fonts 同名即可全保真。

/* latrix.ai · 线上真实抽取 */
:root{
  --paper:#f1f1f3;      /* 纸白展墙 */
  --paper-plate:#e8dfd3;/* 暖色画版 */
  --ink:#1a1815;        /* 暖墨(站点变量名 accent) */
  --warm:#ff8c00;       /* 唯一呼叫橙;深一档 #e07a00 */
  --display:"Playfair Display","Noto Serif SC",serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --hand:"Italianno",cursive;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* 签名螺旋 CSS 3D 近似(原站用 canvas 绘制):每行一字母,绕 Y 轴累进旋转 */
.helix{transform-style:preserve-3d;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotateY(360deg)}}
.rung{position:absolute;transform:rotateY(calc(var(--i)*16deg)) translateZ(60px);
      top:calc(var(--i)*1.15em)}

出处与方法实锤 + 推断

实锤:色值、字体族、缓动、时长、圆角、媒体统计,均由 playwright 读计算样式 + 服务端抓样式表原文得到,真实资产(字体、图、源码)已下载(见 real-assets/manifest.json)。推断:「数字人文 / 新文艺复兴」的定位解读、古典画的叙事意图属观察推断。局限:抓取以首屏为主,首屏下的古典画分区经 manifest 与关键帧确认存在但未逐屏复刻;未探测到第三方动画库。逐值核对见 事实核查.md,完整解构见 设计解构.md 与 复刻指南.md。

latrix.ai 首屏真实渲染 — as-seen · latrix.ai 首屏真实抓取(screenshots/hero.jpg),与本页 CSS 复现对照。