ZZEM Sprints
Explore Clusters System

Color

ZZEM의 컬러 체계. 중성·퍼플·시맨틱 3계층.

3-layer 구조

토큰은 세 계층: primitive(원시 hex) → semantic(의미 별칭, light/dark) → component(컴포넌트 슬롯). 컴포넌트에서는 primitive를 직접 참조하지 말고 semantic 또는 component 토큰을 경유해야 다크모드가 자동 동작한다.

사용 규칙

blue

blue.100 #E0F0FF
blue.200 #B8DBFF
blue.300 #80BFFF
blue.400 #409CFF
blue.50 #F0F7FF
blue.500 #007AFF
blue.600 #006AE0
blue.700 #0054B3
blue.800 #003F85
blue.900 #002B5C

brand

brand.apple-dark #FFFFFF
brand.apple-light #000000
brand.google #4285F4
brand.kakao #FEE500
brand.naver #03C75A

green

green.100 #E3F9E8
green.200 #B8F0C5
green.300 #7DE596
green.400 #4DD672
green.50 #F0FFF4
green.500 #34C759
green.600 #28A745
green.700 #1E8535
green.800 #156425
green.900 #0D4318

neutral

neutral.0 #FFFFFF
neutral.100 #F0F1F3
neutral.1000 #000000
neutral.200 #E4E5E9
neutral.300 #D1D3D8
neutral.400 #B5B8BF
neutral.50 #F7F8F9
neutral.500 #8E9199
neutral.600 #6B6E76
neutral.700 #4D5058
neutral.800 #35373E
neutral.900 #212228
neutral.950 #141517

purple

purple.100 #EBE1FF
purple.200 #D4C0FF
purple.300 #B899FF
purple.400 #A17BFF
purple.50 #F5F0FF
purple.500 #8752FA
purple.600 #7040E0
purple.700 #5A30C0
purple.800 #44239A
purple.900 #301875
purple.950 #1E0D50

red

red.100 #FFE5E3
red.200 #FFC5C2
red.300 #FF9E99
red.400 #FF6B63
red.50 #FFF5F5
red.500 #FF3B30
red.600 #D93025
red.700 #B3241C
red.800 #8C1A14
red.900 #66110D

yellow

yellow.100 #FFF8E0
yellow.200 #FFEFB8
yellow.300 #FFE480
yellow.400 #FFD840
yellow.50 #FFFDF0
yellow.500 #FFCC00
yellow.600 #E6B800
yellow.700 #B89200
yellow.800 #8A6D00
yellow.900 #5C4900

Exemplars referencing color

7