WEILANX.AI · DESIGN SYSTEM

设计系统 Design System

纯白背景、苹方优先与主题适配的设计规范 —— 色彩、字体、度量、组件、舞台与动效全部直连 tokens.css / stage.css，本页即后续组件换皮的视觉契约。

tokens.css stage.css reveal.ts hero-motion.ts noindex · 不进 sitemap

01色彩谱系

品牌色、主按钮主题配色、墨色与玻璃层。色块一律 background: var(--w-*)。

开始学习主按钮--w-action-bg / --w-action-ink浅色黑底白字 · 深色浅蓝底深字
deep--w-deep深色品牌图形
mid--w-mid辅助蓝灰
blue--w-blue图形强调
primary--w-primary链接 / 主按钮
primary-deep--w-primary-deep主色 hover
light--w-light深色下的主色
pale--w-pale柔和辅助色
soft--w-soft胶囊标签底 / hover 洗色
--w-grad-hero-1--w-grad-hero-2--w-grad-hero-3--w-grad-hero-4--w-grad-hero-5--w-grad-hero-6

墨色一级 · 蔚蓝 AI 学 AI，也用 AI 做点真的东西

墨色二级 · 跟着蔚蓝，从看懂概念、用好工具，到亲手把一个想法做出来

墨色三级 · 正文辅助说明、时间与元信息

墨色四级 · 弱化的占位与备注文字

玻璃拟态 3 值 —— 设计用于深色渐变面

glass--w-glass
glass-strong--w-glass-strong
glass-line--w-glass-line

深色对照 —— 局部 data-theme="dark" 翻转 token

--w-bg
--w-bg-alt
--w-bg-elv

深色墨色一级 · 标题与正文

深色墨色二级 · 辅助说明

深色墨色三级 · 元信息

深色墨色四级 · 占位备注

深色主按钮 深色胶囊标签 玻璃 chip

02字体族

首选本地苹方；辅助文字至少 14px，正文 18px；缺失字形使用现有回退字体。

Learn AI, Build With AI

做点真的东西

--w-font-display · PingFang SC 优先 · 600 / 700

做点真的东西。Make something real.

--w-font-art · PingFang SC 优先 · 斜体样例

跟着蔚蓝，把想法做出来 →

--w-hand · PingFang SC 优先 · 强调样例

import { animate } from "animejs"

--w-mono · JetBrains Mono 400 / 600

中文正文字体栈样张：跟着蔚蓝，从看懂概念、用好工具，到亲手把一个想法做出来。加粗强调与链接样张在正文中的表现。

次级正文：轻量说明、摘要与列表的默认墨色，行高 1.6–1.8。

--w-font · PingFang SC / Weilan Studio / 系统回退

03度量

间距 9 档（4 scale）· 圆角 7 档 · 阴影 4 档 · 动效曲线 2 条。

间距 · spacing

xs
sm
md
base
lg
xl
2xl
3xl
4xl

圆角 · radii

xs 4
sm 8
md 12
lg 16
xl 20
2xl 32
pill 999

阴影 · shadows

--w-sh-1
--w-sh-2
--w-sh-3
--w-sh-blue

动效曲线 · motion

--w-ease
--w-ease-spring

同一位移、同一时长（1.6s alternate），仅曲线不同；prefers-reduced-motion 下静止。

04组件样品

Task 3+ 组件换皮的基准形态。

按钮与胶囊标签

主按钮 Primary 次按钮 Secondary 胶囊标签 Pill 幽灵胶囊 Ghost

卡片 · 白卡与玻璃卡

白卡 · Elevated

浅色抬升面 --w-bg-elv，圆角 --w-r-lg，阴影 --w-sh-2，hover 上浮换 --w-sh-3。

→

玻璃卡 · Glass

深色渐变面上的玻璃拟态：底 --w-glass、描边 --w-glass-line、backdrop-blur。

→

Badge

TIP INFO SUCCESS WARNING DANGER

导航条样品

05舞台样品

缩小版活体演示（420px）：.stage 渐变 + data-stage-wordmark 巨字描边 + .v3-gridlight 蓝图手电筒 + 星尘拖尾 + 跑马灯。移动指针试试。

LEARN / USE / BUILD

学 AI，做点真的东西

移动指针 · 手电筒网格与星尘（桌面端）

06动效样品

本页各分区即 .rv 显现的活体演示 —— 下方卡片为 .rv-card（上浮 + 微缩放 + blur 物质化，90ms 错峰）。

.rv

标题与文案：28px 轻上浮淡入，800ms。

.rv-card

卡片物质化：36px 上浮 + 0.965 缩放 + 10px blur 从虚到实，1000ms。

.rv-about

大区块缓显：更大幅度更慢节奏，1100ms。

时长档位：--w-dur-fast 200ms · --w-dur 350ms · --w-dur-slow 600ms。prefers-reduced-motion 下全部关闭（本页显现与曲线演示均静止）。