SCHEME B / i2t-dark-gallery-ui

琥珀画廊
琥珀与暖纸白

逆向自 img2threejs.io 官方 CSS 的深色画廊体系:四阶墨黑打底,层次靠 1px 暖白分割线而非色块;强调色是暗珊瑚红,不是亮橙;标签一律等宽小字大写,做出展览目录的气质。

Ink Levels4
Amber#cf765a
Heading Weight650
Ease Out.38s
01

色彩 Palette

底色四层由深到浅;强调色只有暗琥珀一种,冷色渐变仅限 logo 与 intro。

ink#0b0d0f

ink-1#101316

ink-2#171b1f

ink-3#20252a

amber#cf765a

amber-strong#e08a6e

paper#f3f0e8

paper-dim#a09f99

/* 暗色画廊 · 令牌 */
:root{
  --ink: #0b0d0f; --ink-1: #101316;
  --ink-2: #171b1f; --ink-3: #20252a;
  --amber: #cf765a; --amber-strong: #e08a6e;
  --paper: #f3f0e8; --paper-dim: #a09f99;
  --rule: rgba(236,233,225,.08); --rule-strong: rgba(236,233,225,.16);
  --ease: cubic-bezier(.2,.7,.2,1); --fast: .16s; --slow: .38s;
}
02

组件 Components

卡片圆角 14px,按钮 8px,徽章 999px。界面词用英文 mono 大写,正文可中文。

Buttons
Form
Badges
Live WebGL GLB Rigged 29 Components
Exhibit Card · 展陈卡(hover 上浮 3px + 琥珀边 + 三层阴影)
Exhibit 01
赛博少女 · Cyber GirlWebGL · GLB Rigged
Live
Exhibit 02
单图直出 · 分层重建Image · 2.5D Auto
Live
Exhibit 03
材质实验室 · Material LabThree.js · WebGL
Live
03

布局模式 Patterns

A · 画廊栅格:repeat(auto-fit,minmax(420px,1fr)),gap 1.6rem,容器上限 1200px。B · Hero + 统计行:眉行 + clamp 大标题 + 44em 副文案 + mono 统计行。

Exhibits · Open Live

把一张图
拆成可以走进去的房间

上传参考图,自动分层、重建法线与高度,输出可直接上架的三维展品。整个过程不离开浏览器。

Components29
RenderWebGL
Ease.38s
FormatGLB
04

规则 Rules

DO

  • 界面词用英文 mono 大写(EXHIBITS / OPEN LIVE),正文可中文。
  • 强调只给主 CTA、关键数字与 hover 辉光。
  • 卡片圆角 14px,按钮 8px,徽章 999px。
  • 阴影以琥珀辉光为主、黑投影为辅。

DON'T

  • 不要用亮橙 #f59e0b 替代暗琥珀。
  • 不要纯白文字,正文是暖纸白 #f3f0e8。
  • 不要大圆角(>16px)和重黑投影。
  • 不要彩色背景块,层次只靠 ink 四阶 + 1px 线。