设计系统

Prism

为 Designed.org 提供的令牌、组件和布局基础组件。此页面上的每个示例都是真实的实时组件——而非截图——直接来自 src/prism/

颜色

优先使用语义别名——组件应使用这些别名,而不是直接使用色调(原因请参见 src/prism/tokens.css 自身的注释)。下面的品牌色调和中性色阶为这些别名提供支持。

语义化

Primary

--prism-color-primary

Primary hover

--prism-color-primary-hover

Accent

--prism-color-accent

Accent hover

--prism-color-accent-hover

Success

--prism-color-success

Warning

--prism-color-warning

Danger

--prism-color-danger

Info

--prism-color-info

品牌色调

Purple

--prism-color-purple

Blue

--prism-color-blue

Pink

--prism-color-pink

Yellow

--prism-color-yellow

Green

--prism-color-green

灰度色阶

50

--prism-color-gray-50

100

--prism-color-gray-100

200

--prism-color-gray-200

300

--prism-color-gray-300

400

--prism-color-gray-400

500

--prism-color-gray-500

600

--prism-color-gray-600

700

--prism-color-gray-700

800

--prism-color-gray-800

900

--prism-color-gray-900

排版

Heading — h1 / display

Heading — h2 / xl

Heading — h3 / lg

Heading — h4 / md

Heading — h5 / sm
Heading — h6 / xs

Text size="lg" — for lead paragraphs.

Text size="base" — the default body copy size.

Text size="sm" color="muted" — captions, metadata.

Text weight="semibold"

间距

一个简单的 4px 基础比例尺——它为什么取代了旧版 $spacing-1..9 令牌(每个值都带有字面量 !important),请参见 tokens.css 自身的注释。

--prism-space-1
4px
--prism-space-2
8px
--prism-space-3
12px
--prism-space-4
16px
--prism-space-5
24px
--prism-space-6
32px
--prism-space-7
48px
--prism-space-8
64px
--prism-space-9
96px

图标

导航的线性图标集(src/icons/nav-icons.tsx)——来自 Lucide 的路径数据,以纯 SVG 形式复制,而非为约 25 个图标添加 lucide-react 依赖。它在旧版导航和 Prism 自身的 Header/Footer 之间共享,因此位于 src/prism/ 之外;在此重新导出,以便仍属于 Prism 的公共接口的一部分。

newspaper

calendar

graduationCap

flaskConical

messageSquareText

headphones

users

messageCircle

folderKanban

briefcase

route

info

heart

handshake

gift

shoppingBag

mail

circleHelp

search

rocket

settings

shield

lightbulb

circleCheck

triangleAlert

按钮

variant="primary"

variant="accent"

variant="secondary"

variant="ghost"

variant="link"

disabled

徽章

PrimaryAccentSuccessWarningNeutral

all variants

卡片

默认

padding="md"(默认),无悬停效果。

交互式

interactive——悬停时会上浮并产生阴影。试试看。

头像

Jane DoeJane DoeJane DoeJane Doe

尺寸,以及没有照片时的替代显示