로고 설명
Irodori는 彩り, 곧 색의 다채로움을 뜻합니다. 마크는 브랜드 액센트 다섯 색으로 그린 구름이고, 그 안에 彩り를 전통의 홍과 남색으로 놓았습니다. 가운데를 가로지르는 흰 띠는 바로 페이지입니다 — 모든 도구는 중립 캔버스 위에서 동작하고, 색은 당신이 가져옵니다.
- 다섯 호, 다섯 액센트구름의 각 고리는 브랜드 액센트를 순서대로 보여주므로 이 마크는 그 자체로 팔레트 미리보기입니다.
- 안의 彩り두 글자는 전통 팔레트에서 채도가 가장 높은 홍(彩)과 남색(り)을 썼습니다.
- 흰 띠가로 띠가 작업면입니다. 라이트 모드는 흰색, 다크 모드는 거의 검은색 — 같은 캔버스입니다.
- 하나의 형태, 여러 크기같은 그림이 32px 탭 아이콘, 192/512px 앱 아이콘, maskable 아이콘, 그리고 이 페이지가 됩니다.
16px24px32px48px96px
라이트와 다크 비교
라이트light
Aa
The quick brown fox jumps over the lazy dog.
ButtonChip
다크dark
Aa
The quick brown fox jumps over the lazy dog.
ButtonChip
디자인 토큰
표면
--bg
#ffffff
#12101a
--bg-elev
#ffffff
#1a1822
--bg-sunken
#f5f5f6
#17151f
--bg-muted
#fafafa
#16141d
--header-bg
rgba(255,255,255,.82)
rgba(18,16,26,.82)
텍스트
--ink
#111113
#f5f5f7
--ink-2
#52525b
#a1a1aa
--ink-3
#8a8a93
#71717a
선
--line
#e7e7ea
rgba(255,255,255,.10)
--line-strong
#d4d4d8
rgba(255,255,255,.20)
브랜드
--brand
#5b4be0
—
--accent-2
#22b8e6
—
--accent-3
#3fbf6a
—
--accent-4
#f5b22e
—
--accent-5
#ec6f9e
—
형태
--r-sm
8px
—
--r-md
12px
—
--r-lg
16px
—
--r-xl
22px
—
--r-full
999px
—
--header-h
64px
—
--container
1152px
—
브랜드 팔레트
--brand
#5B4BE0
--accent-2
#22B8E6
--accent-3
#3FBF6A
--accent-4
#F5B22E
--accent-5
#EC6F9E
타이포그래피
인터페이스는 시스템 UI 스택을 써서 즉시 렌더링되고 폰트 다운로드 기다림이 없습니다. 숫자와 코드는 항상 고정폭으로 떨어집니다 — 색값은 정확히 읽혀야 쓸모가 있기 때문입니다.
Display40px / 700Color, in its true space
Title30px / 700WCAG contrast
Heading20px / 650Palette generator
Body15px / 400Convert #FF5733 to OKLCH and check the ratio
Caption12.5px / 500ΔE76 · oklch(0.421 0.118 252.7)
여백과 형태
여백은 4px 기준, 거터는 20px입니다. 패널 모서리 22px, 카드 16px, 컨트롤은 완전한 캡슐. 계층은 테두리 대신 그림자로 표현해 다크 모드에서도 평평하게 유지됩니다.
--r-sm--r-md--r-lg--r-xl--r-full