Decorate
UI의 시각적 표현을 보조하는 스타일 기준이에요. 레이아웃·컬러 외에 형태와 상태를 구분하는 그림자·그라디언트·반경·투명도·인터랙션 표현을 정리해요.
Shadow
라이트 모드에서 요소 간 위계를 표현해요. 다크 모드에서는 사용하지 않아요.
$Shadow-01
shadow-1
$Shadow-02
shadow-2
$Shadow-03
shadow-3
Gradient
콘텐츠가 가려져 있음을 나타내는 scrim 이에요. 주로 스크롤 영역의 시작/끝을 표현해요.
bottom
$Gradient-Bottom
top
$Gradient-Top
left
$Gradient-Left
right
$Gradient-Right
사용: style={{ backgroundImage: 'var(--decorate-gradient-bottom)' }}
Radius
모서리의 둥근 정도예요. 기본 단위는 4px, 원형이 필요하면 full 을 써요.
none
0
sm
4px
md
8px
lg
12px
xl
16px
full
∞
Opacity
요소의 투명도예요. 5·10 단위로 관리하며 제한적인 시각 조정에 써요.
100
90
80
70
60
50
40
30
20
10
5
0
Interaction
사용자 입력에 따른 시각 변화예요. Hover·Pressed 상태의 오버레이를 정의해요.
Default
Hover
#000 5%
Pressed
#000 10%