Light
Light is the only ornament
标志原样切进墙里做成窗，所有效果都是光照出来的：光束、地上的光、反光、浮尘。标志本身从不变形。
System
光，黑白，一点撞色。两个网站都从这里取值。
01
Principles
四条规则，比任何组件都重要。
Colour
Black, white, one clash
界面只用墨和纸。颜色只来自玻璃指尖，和产品自己（Pop Cafe 的拼贴）。
Motion
Still until touched
同一时刻只有一个东西在动。字标动效只在页面静止时播放：打开菜单、到达页脚、在静态页 hover 标志。
Words
Few words
不写 Sound on/off、Menu/Close。能用图标和动作说清的，不用字。
02
Colour
两套主题共用同一组令牌名。默认夜间；访客切换过就记住。撞色只在产品和贴纸里出现。
Page --bg#0e0e0f
Raised --bg-2#18181a
Ink --fg#f1efe9
Quiet ink --fg-mutergba(241,239,233,.56)
Room --room#0a0a0b
Lids --lid#050506
Glass --dot#4aa8ff
Page --bg#edece7
Raised --bg-2#f6f5f1
Ink --fg#1b1a18
Quiet ink --fg-mutergba(27,26,24,.56)
Room --room#6e6b66
Lids --lid#1c1b19
Glass --dot#3f9fe8
--pink#ef197c
--rose#fb63da
--blue#9cd7ff
--lime#a2d159
--sun#fbb040
--cream#fffdde
03
Type
Funnel Display 负责标题和界面，Funnel Sans 负责正文。像素字只属于 Pop Cafe 的 App，不上网页。
Display · UI
AaFunnel Display 300–800Text
AaFunnel Sans 300–800Pop Cafe only
Chill Pixels, inside the app.display-xlFunnel Display 600
clamp(64px, 15.5vw, 260px) / 0.86 · −0.06em
clamp(64px, 15.5vw, 260px) / 0.86 · −0.06em
Work
.display-lFunnel Display 600
clamp(48px, 8.4vw, 140px) / 0.9 · −0.05em
clamp(48px, 8.4vw, 140px) / 0.9 · −0.05em
About
.display-mFunnel Display 600
clamp(34px, 4.6vw, 72px) / 0.95 · −0.04em
clamp(34px, 4.6vw, 72px) / 0.95 · −0.04em
Pop Cafe
.title-sFunnel Display 600
clamp(22px, 2vw, 30px) / 1.05 · −0.025em
clamp(22px, 2vw, 30px) / 1.05 · −0.025em
Layer, animate, export
.ledeFunnel Sans 400
clamp(17px, 1.35vw, 21px) / 1.4
clamp(17px, 1.35vw, 21px) / 1.4
3D collage & animation for iPhone.
.uiFunnel Display 500
15px / 1 · −0.01em
15px / 1 · −0.01em
Work About Contact
.smallFunnel Display 500
13px / 1
13px / 1
© 2026 OMO · aha & oho
04
Space
宽松：段落之间留足呼吸。页脚正好一屏高；矮屏幕上让巨大字标少露一点，而不是挤内容。
--gutterclamp(16px, 3.2vw, 48px)
--radiusclamp(20px, 2.4vw, 34px)
--header-h76px · 64px on phones
.sectionclamp(110px, 13vw, 210px) top · clamp(80px, 10vw, 150px) bottom
.wrapmax 1440px, gutter on both sides
05
Marks
左上角放页面主体没有的那个标志：首页主体是 OK，页头放字标；Contact 主体是字标，页头放 OK。
Wordmark
页头 76px。动效只在静止时播放。
OK
页头 58px。首页的窗；五个指尖是玻璃。
Sparkle
Pop Cafe 的贴纸与光标。只在产品里出现。
06
Light rooms
标志是窗，光穿过它落在地上。房间跟随昼夜主题；指针移动太阳。往下滚到这里时开灯。
移动指针：玻璃珠、光针、指尖音阶
| Night | Day | |
|---|---|---|
| Wall | #5e5e61 | #b8b5ad |
| Floor | #6c6c6f | #aaa79f |
| Glass | #4aa8ff | #3d9ff7 |
| Sun | × 9.0 | × 7.2 |
| Sky through the window | × 1.9 | × 1.7 |
| Ambient | 0.006 | 0.16 |
| Air (beams) | 0.011 | 0.046 |
| Bounce off the floor | 1.0 | 0.55 |
| Floor gloss | 0.14 | 0.18 |
| Exposure | 1.0 | 0.93 |
Glass marble
光标是一颗玻璃珠
它总在你指向的那束光里：倒映房间，把光聚成一根细光针，在影子中间留一个亮点，拨开浮尘。
Fingertips
指尖是音阶
划过玻璃指尖：闪一下，响一个音，地上的蓝色光斑荡开一圈。
Framing
按留白构图
和文字同屏时（Contact），窗与地上的光整体放进文字上方的空间，任何窗口比例都不挤。
Pop Cafe
彩色玻璃
Pop Cafe 自己的房间：App 的像素杯子做成窗，每个像素是一块玻璃，彩色的玻璃给光上色。两只像素眼睛看着指针，偶尔眨眼。
07
Motion
只有一种转场：从你按下的地方，一圈柔边光圈向外打开。点下面两张卡片试试。
Next page
Ring · 1250ms
点任意位置
导航、卡片、昼夜切换、菜单都是它。
Work
Blink
首页往下滚
眼睑合上，再在下一页睁开。
| --ease-out | cubic-bezier(.16, 1, .3, 1) | 出现、停下：揭示、光标变形、按钮 |
|---|---|---|
| --ease-in-out | cubic-bezier(.65, 0, .35, 1) | 从一处到另一处：转场光圈、菜单、眼睑 |
| --spring | cubic-bezier(.34, 1.56, .64, 1) | 轻微回弹：按下、波浪出现 |
| Ring | 1250ms · 羽化 150px · ease-in-out | 唯一的转场：导航、卡片、昼夜切换都用它（wipe.mjs → RING） |
| Menu | 开 .9s · 关 .8s | 从按钮打开、收回按钮；从菜单进子页时只有收回这一个动作 |
| Blink | 合 p .30–.58 · 换页 .61 · 睁 .64–.92 | 首页滚动；眼睑只做位移，合上后房间停止渲染 |
| Light on | 暗 260ms → 一帧亮起 → 曝光 ×1.9 回落 | 太阳从侧面低角度进来（az −1.05, el .42），约 3 秒转回正位 |
| Breathing | 亮度 0.86–1.0 | 两层很慢的起伏，像云飘过；减少动态时关闭 |
| Reveal | .8s · 每行错开 80ms | 标题逐行升起；从菜单进入的页面不播 |
| Pace | 60fps 交互中 · 30fps 静止 | 被盖住的房间不画；GPU 跟不上时自动降分辨率 |
08
Cursor
只在有鼠标的设备上。紧贴指针、不拖尾；把指针移到下面的格子上试试它的形状。
Dot
默认
反色小点，任何底色上都看得见。
Link
链接
变成圆圈。
Snap
圆形按钮
圆圈吸附成按钮的大小。
Open
打开一页的卡片
反色大圆，中间 ↗。
Marble
光房间里
缩成准星，玻璃珠才是光标。
Spark
Pop Cafe
品牌闪星，顺着移动方向倾斜。
09
Components
细圈图标按钮，hover 时填满；次要链接是带箭头的文字。没有胶囊按钮、没有阴影卡片。
Icon buttons
主题（月牙 / 带虚线光晕的圆点）、声音（静止是一条线，开启后是流动的波）、菜单。52px 细圈。
Ring buttons
hover 时填满，文字从圈里滑出。复制后文字变成 Copied。
Links
文字链接带细下划线和箭头；卡片右下角是实心圆箭头。
邮箱里的 o 是眼睛，看着你的指针。
10
Sound
默认关闭，只有一个开关，没有文字。点下面的格子试听（不会打开全站声音）。
Glass
玻璃指尖、卡片。三个变体随机。
Fingertips
五声音阶 0 2 4 7 9，从左扫到右是一句。
Knock
卡片的木头轻响。
Light switch
Knock 降 19 个半音：开灯那一下。
Twinkle
在房间里点一下，阳光一闪。
Air
换页和菜单的气流。
11
Voice
界面用短英文；Notes 的长文可以用中文。
Navigation
Work · About · Contact工作室最常见的三项；Notes 放在菜单和页脚。
Controls
◐ ∿ ─图标和状态自己说明。
About
A studio of two.一句话，具体，不夸张。
12
Files
这页上的一切都来自这些文件。数值以代码为准。
| studio/omo.css | 令牌（昼夜）、版式、组件、页脚、菜单、光标样式 |
|---|---|
| studio/light.mjs | 光房间：窗形、两套光、开灯、呼吸、玻璃珠、指尖、构图 |
| studio/wipe.mjs | RING：唯一的转场参数 |
| studio/studio.mjs | 页面生命周期：开场、眨眼、昼夜、菜单、页头取色、手电筒 |
| studio/cursor.mjs | 光标与它的形状 |
| studio/sound.mjs | 音色与每页配乐（默认关） |
| studio/brand/omoh-motion.mjs | 字标和 OK 手的品牌动效 |
| studio/overlay.mjs | 浏览器后退/前进时的眨眼 |