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 기본 스케일입니다 — 이것이 모든 값에 리터럴 !important가 포함된 기존 $spacing-1..9 토큰을 대체하는 이유는 tokens.css 자체 주석을 참조하세요.
아이콘
내비게이션의 라인 아이콘 세트(src/icons/nav-icons.tsx) — Lucide의 경로 데이터를 ~25개 아이콘을 위해 lucide-react를 의존성으로 추가하는 대신 일반 SVG로 복사한 것입니다. 기존 내비게이션과 Prism 자체의 Header/Footer 간에 공유되므로 src/prism/ 자체 외부에 위치합니다. 여전히 Prism의 공개 표면의 일부이도록 여기서 재내보내기됩니다.
newspaper
calendar
graduationCap
flaskConical
messageSquareText
headphones
users
messageCircle
folderKanban
briefcase
route
info
heart
handshake
gift
shoppingBag
circleHelp
search
rocket
settings
shield
lightbulb
circleCheck
triangleAlert
링크
Button 자체의 variant="link"와는 다른 인라인 텍스트 링크입니다 — variant="link"는 텍스트처럼 보이는 버튼 형태의 컨트롤입니다. src/prism/primitives/Link.tsx를 참조하세요.
underline="hover" (default)
배지
all variants
카드
기본값
padding="md"(기본값), 호버 동작 없음.
인터랙티브
interactive — 호버 시 위로 올라가고 그림자가 생깁니다. 직접 시도해 보세요.
아바타
크기, 그리고 등록된 사진이 없을 때의 대체 이미지