阴影与边框

卡片靠底色和页面区分，不靠阴影。层次感主要来自奶油色和深色两种底色的对比。

边框

奶油色卡片没有边框也没有阴影，底色就够了。和画布同色的卡片（对比卡、网格小块）加一条细线。细线是奶油色调的，看上去是高一级的层次，而不是一条墨线。浅一号的细线用来分隔同一张卡片或同一段里的内容。细线的颜色见颜色。

Token	浅色	深色	说明
--border-hairlineborder.hairline	1px solid #e6dfd8	1px solid #35332f	分割线和卡片边框。
--border-hairline-softborder.hairline-soft	1px solid #ebe6df	1px solid #2a2823	卡片内更淡的分割线。
--border-hairline-darkborder.hairline-dark	1px solid #31302c	1px solid #43413b	深色表面上的边框。

阴影

阴影只出现在两个地方：鼠标停在卡片上时的一层淡阴影，以及浮在页面上方的东西（比如横幅）的大一点的阴影。悬停效果到那层淡阴影为止：不浮起，不放大。

Token	值	说明
--shadow-noneshadow.none	0px 0px 0px 0px rgb(0 0 0 / 0%)	没有阴影。
--shadow-hovershadow.hover	0px 1px 3px 0px rgb(20 20 19 / 8%)	鼠标悬停的卡片。
--shadow-floatshadow.float	0px 8px 24px 0px rgb(20 20 19 / 10%)	浮层：菜单、弹出框、对话框。