Design System
geist-nuxt
以 Vercel Geist 为视觉语言、 Adobe Spectrum 为规格方法论、 Nuxt UI (Vue) 为组件基座的可复用设计系统基座。 高对比中性色搭配紫色主色、Geist Sans / Mono 字体、小圆角与大留白。
Foundations
Geist tokens mapped onto Nuxt UI's semantic --ui-* layer. Every component below reads from these, so theming is a token change, not a rewrite.
Semantic colors
Background
--ui-bg
Background muted
--ui-bg-muted
Background elevated
--ui-bg-elevated
Border
--ui-border
Text muted
--ui-text-muted
Text
--ui-text
Primary ramp (violet)
50
100
200
300
400
500
600
700
800
900
950
Spacing scale
14px
28px
416px
624px
832px
1248px
Type scale · Geist Sans / Mono
DisplayShip at the speed of thought
HeadingBuild with Geist + Nuxt UI
BodyHigh-contrast neutrals, a violet primary, generous whitespace and small radii.
Monoconst theme = useColorMode()
Radii · 三层
Control
rounded-sm · 6px
按钮 · 输入 · 徽章
Panel
rounded-lg · 12px
卡片 · 面板 · 菜单
Overlay
rounded-xl · 16px
模态 · 全屏浮层
Elevation · 阴影层级
Raised
shadow-xs
卡片 · 提示
Overlay
shadow-lg
弹出层 · 菜单
Modal
shadow-xl
模态 · 抽屉