zslab LMS · Slate + Sky/Blue · Raycast-inspired
Design System
zslab LMS의 디자인 토큰·컴포넌트·인터랙션 가이드. 다크·라이트 모드 양쪽에서 모든 시각 요소를 검증할 수 있습니다.
색상 토큰
--background
Background
--foreground
Foreground
--card
Card
--card-foreground
Card Fg
--popover
Popover
--popover-foreground
Popover Fg
--primary
Primary
--primary-foreground
Primary Fg
--secondary
Secondary
--secondary-foreground
Secondary Fg
--muted
Muted
--muted-foreground
Muted Fg
--accent
Accent
--accent-foreground
Accent Fg
--destructive
Destructive
--destructive-foreground
Destructive Fg
--border
Border
--input
Input
--ring
Ring
--success
Success
--warning
Warning
Elevation
--elevation-1
Elevation 1
--elevation-2
Elevation 2
--elevation-3
Elevation 3
Glow
--glow-primary
Primary Glow
--glow-success
Success Glow
Gradient
--gradient-surface
Surface Gradient
--gradient-primary
Primary Gradient
Motion
--motion-duration-fast
120ms
hover 효과 확인
--motion-duration-base
200ms
hover 효과 확인
--motion-duration-slow
320ms
hover 효과 확인
--motion-ease-standard
cubic-bezier(0.4, 0, 0.2, 1)
--motion-ease-emphasized
cubic-bezier(0.2, 0, 0, 1)
컴포넌트 프리뷰 (S3-1)
Button
transition-all·glow-primary(default)·glow-destructive·active:scale
Card
shadow-elevation-1 · transition-shadow · bg-card
기본 카드
elevation-1 그림자
학습 카드
hover로 elevation-2 추가 가능
강좌 카드
bg-card · border · rounded-xl
Input
focus: ring-ring · border-ring · glow-primary(shadow)
Badge
rounded-full · success/warning 신규 variant
Dialog
bg-background/80 backdrop-blur · bg-card · elevation-3 · motion-emphasized
컴포넌트 프리뷰 (S3-2)
Select
trigger transition-all·focus-visible border-ring·glow / content elevation-2·motion-emphasized / separator bg-border
Dropdown Menu
content elevation-2·motion-emphasized / item transition-colors·duration-fast / separator bg-border / label text-muted-foreground
Tabs
trigger transition-all·duration-fast / active bg-card·elevation-1 / inactive text-muted-foreground
강좌 개요 탭 콘텐츠 — bg-card · elevation-1 활성 탭
Switch
track transition-colors·duration-base / checked bg-primary·glow-primary / thumb elevation-1·motion-emphasized
Textarea
transition-all · focus: ring-ring·border-ring·glow-primary(shadow)
컴포넌트 프리뷰 (S3-3)
Avatar
AvatarFallback: bg-muted·text-muted-foreground / rounded-full
Label
text-sm·font-medium / peer-disabled: opacity-70
Separator
bg-border / horizontal h-[1px] / vertical w-[1px]
Horizontal
왼쪽
오른쪽
항목
Toast (sonner)
bg-card·border-border·elevation-2 / richColors 내장 색상 유지 / description: text-muted-foreground
학습자 재사용 컴포넌트
CourseCard
hover:shadow-elevation-2·duration-base / group-hover:text-primary / thumbnail 없을 때: bg-gradient-to-br from-primary/10
Motion Showcase
S4-1에서 도입한 Framer Motion 패턴 데모. 페이지 진입·카드 stagger·hover·스크롤 fade-in 4종.
1. Page Enter
opacity 0→1 · y 8px→0 · duration 200ms · ease-standard
2. Card Stagger
staggerChildren 0.05s · delayChildren 0.05s · 총 6개 카드
3. Hover Scale
whileHover scale 1.02 · whileTap scale 0.98 · duration 200ms
4. Scroll Fade-in
whileInView · viewport once · margin -100px · duration 320ms · ease-emphasized
아래로 스크롤하면 fade-in 트리거됩니다.