디자인 시스템
토리북 디자인 시스템 2.0 (Module 23) · 토큰 익스플로러
토리북 디자인 시스템 2.0
Foundation → Semantic → Theme → Primitives → Composite → Feature → Page → App
DimensionalSoftPremiumPlayfulWarmCalmMagicalReadableConsistentAccessible
현재 브레이크포인트
tablet
Reduced Motion
OFF
접근성 표준
WCAG 2.2 AA
원칙
- · System before page
- · Child friendly, parent trusted
- · Depth without clutter
- · Accessibility before decoration
- · Characters support the experience
- · Motion explains state
- · Tokens are source of truth
토큰 그룹
colortypographyspacingradiusbordershadowelevationopacitymotionbreakpointgridicongradient
프리미티브 (35)
BoxTextHeadingStackInlineGridDividerSurfaceIconImageCharacterImageButtonIconButtonInputTextareaSelectCheckboxRadio
컴포짓 (21)
StoryCardCharacterCardChildProfileCardRecommendationCardContinueReadingCardRewardCardAchievementCardFeatureCardEmptyStateErrorStateCharacterGuideGenerationProgressNarrationControlsReaderToolbarStoryStepperPhotoUploaderVoiceUploaderConsentPanel