DESIGN PREVIEW · 回归靶

认识你自己 · 设计系统目录

本页直连 tokens.css(结构层)与 src/app/styles/*.css(base 色板、fresh 色板与 press-* 组件语法),下方依次渲染亮色、暗色与 fresh 三套主题。换肤(含 html.fresh)、CSS 蒸馏、token 改动后,用 Edge headless 对本页截图对比(全新 user-data-dir,防缓存假渲染)。字体为系统近似,以色值/形状/节奏对比为准。

THEME · LIGHT :root

核心色 Core

paper 纸
paper-strong 纸·厚
ink 墨
night 夜
night-ink 夜墨
muted-text 灰墨
muted 灰面
accent 陶土
accent-ink 陶土上墨
accent-soft 陶土洗
teal 鼠尾草
teal-soft 鼠尾草洗
signal 蜜金
signal-ink 蜜金上墨
danger 危险
sheet-wash 稿纸洗
sheet-surface 稿纸面
sheet-ink 稿纸墨
surface-contrast 反差面
surface-contrast-ink

四个切面 Four topics

topic-self 自我 · 陶土
topic-emotion 情绪 · 炭火
topic-relationship 关系 · 蜜土
topic-life 生活 · 鼠尾草

线与刻度 Lines & meter

line 界线
soft-line 细线
meter-track 刻度槽
meter-fill 刻度针

62 / 100 — 蜜金指针永远表示"你在这里"。

字阶 Typography

DISPLAY · ARCHIVO 640

把你的问题递给对的测评

SECTION · ARCHIVO 620

先从性格和倾向开始,看清自己更常使用的反应方式。

QUESTION VOICE · 幼圆 500

最近总在问:我到底是什么样的人?

BODY · SYSTEM 400

正文样例:测评为读者服务,社区围绕答案生长。段落的度量在 65–75 字符之间,行高保持安静。

DATA · PLEX MONO

score 62 · count 16 · date 2026-09-26 · Q07

组件语法 Component grammar

FACET HEAD · 贴纸徽章(奇偶反向倾斜)

自我认知

先从性格和倾向开始,看清自己更常使用的反应方式。

情绪与能量

看见情绪如何流动,也看见你恢复能量的方式。

我明明已经很累了,却还在撑着。看看你如何理解、容纳和表达情绪。

CARD + WASHI TAPE · 锚点卡

一段被共鸣的分享

"原来不是只有我在深夜里怀疑自己适不适合现在的生活。"

THEME · DARK .dark

THEME · FRESH html.fresh