Канон системи
Радіуси, тіні, вкладеність і дві палітри — фіксований базис. Усі інші компоненти (атоми, молекули, композиції) спираються на ці токени. Зміна тут = зміна по всій системі.
01 · Радіуси
Три рівні + pill
Концентричні кути: внутрішній радіус ≈ зовнішній мінус ~2px. Глибше за три рівні не йдемо — після цього вкладеність ламає композицію, а не радіуси.
rounded-sm · 4pxInline-елемент усередині вже округленого блоку (icon shell, chip, tag)
rounded-md · 6pxСтандартний атом — Button, Input, Badge. Картка всередині Surface
rounded-lg · 8pxЗовнішній контейнер — Surface, Modal, Drawer, TableContainer
rounded-pill · 9999pxСемантика круглого — StatusPill, Avatar, лічильник
Концентричні кути на практиці
Outer rounded-lg (8px) → Mid rounded-md (6px) → Inner rounded-sm (4px)
02 · Тіні
Дві сім'ї тіней
Paper-hole — для всього, що приймає введення (вирізане в папері). Raised — для всього, що піднімається над поверхнею (фізичний об'єкт). Третьої сім'ї немає.
Paper-holeshadow-paper-hole
Тільки inset shadows. Drop-shadow ніколи. Верхня тінь = світло падає крізь край вирізу, нижня — лінія паперу під ним.
Raisedshadow-raised / shadow-raised-lg
Modal-tier
Глибша тінь — для overlay поверхонь
03 · Вкладеність
L1 → L2 → L3 · глибше = світліше
Зовнішній контейнер — найтемніший тон родини, картки всередині крокують до білого. Більше трьох рівнів не використовуємо.
L1 · ocean-200 → ocean-100 (nature)
L2 · ocean-50 → white
L3 · white
Контент найглибшого рівня. Радіус rounded-sm.
L2 · ocean-50 → white
L3 · white
Контент найглибшого рівня. Радіус rounded-sm.
L2 · ocean-50 → white
L3 · white
Контент найглибшого рівня. Радіус rounded-sm.
L1 · emerald-200 → emerald-100 (gem) — насиченіший gradient
L2 · emerald-50 → white
L3 · white
Та сама структура, але gem-родина яскравіша на L1.
L2 · emerald-50 → white
L3 · white
Та сама структура, але gem-родина яскравіша на L1.
L2 · emerald-50 → white
L3 · white
Та сама структура, але gem-родина яскравіша на L1.
04 · Природна палітра
Природна палітра
Мura, благородна одяг-палітра. Класичний костюм: вовна, льон, пігмент. Для серйозних поверхонь, фінансових даних, текстових ієрархій.
Методологія
Хрома знижена на краях (50/100 — без дитячих пастелей, 900/950 — без неону). Hue зміщується до тепла/холоду на крайніх стопах.
Нейтрали
ПерлинаpearlТёплий нейтрал, перлинно-кремовий — для світлих основ.
50#FBF9F5
100#F5F1E8
200#EEE5D5
300#E0D3BA
400#CDBC9A
500#B8A582
600#998571
700#7B6A5A
800#5C5043
900#3F362E
950#25201A
ГрафітgraphiteХолодний графіт — для глибоких текстових ієрархій.
50#F2F3F4
100#E2E4E6
200#C4C8CD
300#A0A5AD
400#79808B
500#5D6470
600#464C56
700#353A42
800#272B31
900#181A1F
950#0E0F12
Земля
Кора дубаbarkКора дуба — теплий коричневий із сірим підтоном.
50#F7F3ED
100#EEE3D2
200#D8C4A8
300#BFA381
400#A0855F
500#846B47
600#69553A
700#50412C
800#3B3022
900#2A2117
950#1A140E
ТеракотаterracottaТеплий клей-червоний — пігмент даху, м'якіший за корал.
50#FBF1EB
100#F4DAC8
200#E2AB94
300#D08664
400#BF6342
500#A24E2D
600#823C24
700#642D1C
800#481F14
900#2E130C
950#170906
ШампаньchampagneТеплий беж шовку — стриманий, не цитрусовий.
50#FCF8EF
100#F7ECD3
200#ECDAAE
300#DAC189
400#C2A669
500#A88E4F
600#877240
700#685932
800#4D4225
900#362D18
950#1F1A0E
ОхраochreЗолотиста охра — пігмент, не неон.
50#FCF6E0
100#F6E7AC
200#EFD475
300#E2BB44
400#CC9F25
500#B0851D
600#8C6918
700#6B5113
800#4D3A0E
900#322507
950#1C1404
СоняшникsunflowerСоняшник — насичена пелюстка, ярче за охру в середині.
50#FFFADC
100#FCEE99
200#F9DA50
300#F0C218
400#DDA70C
500#BC8C0A
600#966D08
700#715407
800#503B05
900#342702
950#1B1401
Зелені
МохmossТемний мох у тіні — приглушений, ніколи не лайм.
50#F2F4ED
100#DEE5CE
200#BCC9A0
300#95A878
400#74875B
500#5C6E47
600#495736
700#384329
800#2A331E
900#1C2213
950#11150B
НефритjadeІмператорський нефрит — холодніший, насиченіший за мох.
50#EDF6F0
100#CFE7D8
200#9CCFB4
300#69B68F
400#459A6F
500#347E5A
600#286547
700#1E4D36
800#163828
900#0D241A
950#07150F
ШавліяsageСухий шалфей — найнижча хрома серед зелених.
50#F3F5EE
100#E2E8D6
200#C7D0B2
300#A8B387
400#889168
500#6E7551
600#585E40
700#45492F
800#323621
900#222418
950#14150D
Сині
ОкеанoceanГлибокий океан — приглушений, ніколи не електричний.
50#F0F4F8
100#DDE7F0
200#B6C8DA
300#8EA5BD
400#687F9D
500#506682
600#3E5168
700#2F3F52
800#232E3D
900#131F2A
950#0B1319
Червоні
КоралcoralТёплий корал — оранжевий підтон у світлих стопах.
50#FCF1ED
100#F8DBD2
200#F0B7A4
300#E89077
400#DA6D54
500#C75240
600#A53D2E
700#832E23
800#5F2018
900#391410
950#1F0A08
МалинаraspberryХолодна стигла малина — рожевіша, насиченіша за корал.
50#FCEDF0
100#F8D0D8
200#F0A1B2
300#E47084
400#D14A66
500#B83352
600#952640
700#721B30
800#531222
900#320A16
950#1A050B
БордоbordeauxВитримане вино — глибокий формальний червоний.
50#F9EEEE
100#EECDCD
200#D89999
300#BE6566
400#A23E40
500#872D2E
600#6D2324
700#531B1B
800#3D1414
900#270C0C
950#130505
Фіолетові
СливаplumІмператорська слива — червонувато-фіолетовий підтон.
50#F3ECF7
100#DEC9E8
200#BB8ECD
300#9659AE
400#76358F
500#5F2475
600#4B1D5C
700#391648
800#281030
900#18081F
950#0C0410
ЛавандаlavenderСвітла квітка лаванди — синювато-фіолетова, легша за сливу.
50#F7F2FB
100#EADCF4
200#D2B7E7
300#B991D6
400#9F70BF
500#8556A6
600#6C4385
700#533367
800#3D2550
900#271832
950#150C1B
05 · Кольорове скло — Gem
Кольорове скло — Gem
Vitrage, насичені вітражні відтінки самоцвітів. Для скляних поверхонь, акцентів, бейджів, що мають читатися здалеку.
Методологія
Хрома утримується високою на всіх 11 стопах. 50 — це тонований майже-білий, який досі читається як hue, а не як off-white. 950 — насичений глибокий, не чорний.
Червоні
РубінrubyРубін — чистий насичений червоний, не приглушується.
50#FFEEF1
100#FFD2DA
200#FFA1B0
300#FB6D83
400#EE3F58
500#D81E3F
600#B5152F
700#8E1024
800#680B1A
900#44060F
950#2A0309
ГранатgarnetГранат — глибокий благородний червоний, гем між рубіном і бордо.
50#FBE9EA
100#F4BEC0
200#EA8084
300#DC4849
400#C5252C
500#A8181F
600#871318
700#680E13
800#4A090E
900#2B0508
950#160304
Тепле сяйво
СердолікcarnelianСердолік — чистий оранжевий, червонувато-теплий гем.
50#FFEEE3
100#FFD0B8
200#FFA67D
300#FB7B45
400#ED5615
500#D44508
600#B03806
700#862B05
800#621F03
900#401302
950#240900
БурштинamberБурштин — оранжево-золотистий, тепліший за охру в світлі.
50#FFF6E2
100#FFE6AA
200#FFCB60
300#FBAA28
400#ED8E0C
500#D27506
600#AC5D05
700#834704
800#5D3203
900#3D2002
950#221101
ТопазtopazТопаз — золотисто-жовтий, гем між бурштином і цитрином.
50#FFF7E2
100#FFE9A8
200#FFD16A
300#FBB22E
400#E59712
500#C68309
600#9F6708
700#794E06
800#573804
900#382403
950#1F1301
ЦитринcitrineЦитрин — насичений жовтий-золотий, прозорий, як вино.
50#FFFADC
100#FFF098
200#FFE051
300#F8C912
400#DEB008
500#BC9105
600#957204
700#6F5503
800#4D3B02
900#312501
950#1B1401
Зелені
ПеридотperidotПеридот — жовто-зелений лайм, гем між цитрином і смарагдом.
50#F5FAD8
100#E1F2A2
200#C3E461
300#9FCB23
400#84AE0E
500#6F920A
600#587308
700#425705
800#2F3E03
900#1F2902
950#111601
СмарагдemeraldСмарагд — яскравий зелений, утримує хрому на всіх стопах.
50#E9F9EF
100#BFEFD2
200#80DDA8
300#41C77C
400#1AA859
500#0F8945
600#0B6F37
700#08552A
800#053D1F
900#032712
950#011608
АквамаринaquamarineАквамарин — блакитно-зелений, між смарагдом і бірюзою.
50#E5F8F4
100#B6EEDF
200#74DCC0
300#38C6A0
400#15A985
500#0F8B6E
600#0B7059
700#085544
800#053D31
900#03271F
950#011611
Сині
БірюзаturquoiseБірюза — чиста ціан, енергійна без пастелі.
50#E2F8FA
100#ADECF1
200#6ADBE3
300#2DC4D0
400#0FA8B5
500#098A95
600#066E78
700#04545C
800#033D43
900#02282C
950#011619
ЦерулеанceruleanЦерулеан — чистий небесно-блакитний, між бірюзою і сапфіром.
50#E5F4FE
100#B5E2FB
200#6CC9F6
300#2BAAE8
400#0E8CCC
500#0772A8
600#065B86
700#044566
800#033249
900#02212F
950#011219
СапфірsapphireСапфір — яскравий насичений синій, ярче за океан.
50#ECF1FE
100#C8D8FB
200#8FB1F8
300#5683F0
400#2C5BDF
500#1B45C8
600#1538A6
700#102B82
800#0B1F60
900#07143E
950#040A21
ЛазуритlapisЛазурит — глибокий ультрамарин, насичений на всю шкалу.
50#EBEEFE
100#C4CDFB
200#8997F5
300#4F62E8
400#2A3DD0
500#1E2DB0
600#182490
700#131C70
800#0E1452
900#090C33
950#04061B
Фіолетові
ТанзанітtanzaniteТанзаніт — індиго-фіолет, гем між лазуритом і аметистом.
50#ECECFD
100#C7C8FA
200#8C8FF3
300#5557E5
400#3536CD
500#2727AC
600#1F1F8B
700#18186B
800#11114D
900#0A0A30
950#050519
АметистamethystАметист — насичений фіолет, теплий гем-варіант сливи.
50#F4ECFD
100#DFC8FA
200#BD8FF3
300#9659E5
400#7335CF
500#5C25B0
600#4A1C8F
700#38156D
800#270D4D
900#16062E
950#0B0319
ФіолетvioletФіолет — світлий пурпурно-магентовий, енергія аметиста.
50#FBEDFD
100#F2C9FA
200#E693F6
300#D75DEE
400#C637DD
500#A926BE
600#871E96
700#66176F
800#480F4E
900#2D082E
950#170415
Рожеві
ОрхідеяorchidОрхідея — пурпурно-рожевий, гем між фіолетом і фуксією.
50#FCEDFA
100#F8C9F2
200#F092E5
300#E45CD3
400#D434BD
500#B72BA1
600#952384
700#711B66
800#511349
900#320B2D
950#190516
ФуксіяfuchsiaФуксія — яскрава магента-рожева, акцент-роль.
50#FEEDF6
100#FCC8E5
200#F790C8
300#EE5AAA
400#E0348C
500#C42374
600#A11B5E
700#7B1547
800#570F32
900#36071F
950#1B0310
Рожевий кварцquartzРожевий кварц — насичений м'який рожевий, гем-варіант рози.
50#FEF0F4
100#FCD3DF
200#F8A6BD
300#F1799C
400#E5547F
500#CD3D67
600#A82F52
700#82243F
800#5C192C
900#3A0F1B
950#1D060D
Глибокий
ОніксonyxОнікс — глянцевий чорний з холодним підтоном, гем-варіант графіту.
50#ECEFF4
100#CDD3DC
200#9DA7B6
300#6F7B8C
400#495667
500#2F3D4F
600#232F3F
700#18222F
800#0F1622
900#060A14
950#02040A
06 · Tailwind native
Tailwind defaults — збережені поруч
Власні токени (ocean / moss / ruby / …) не перетинаються з Tailwind за іменами, тож обидва набори існують паралельно. Старий код (bg-blue-500 і т.д.) працює з нативним Tailwind, новий — з нашою nature/gem палітрою.
Без конфліктів
slate / sky / rose / stone прибрані з нашої природної палітри — Tailwind-варіанти залишаються повноцінно доступними під цими іменами.
bluetw-blue
50#EFF6FF
100#DBEAFE
200#BFDBFE
300#93C5FD
400#60A5FA
500#3B82F6
600#2563EB
700#1D4ED8
800#1E40AF
900#1E3A8A
950#172554
emeraldtw-emerald
50#ECFDF5
100#D1FAE5
200#A7F3D0
300#6EE7B7
400#34D399
500#10B981
600#059669
700#047857
800#065F46
900#064E3B
950#022C22
ambertw-amber
50#FFFBEB
100#FEF3C7
200#FDE68A
300#FCD34D
400#FBBF24
500#F59E0B
600#D97706
700#B45309
800#92400E
900#78350F
950#451A03
redtw-red
50#FEF2F2
100#FEE2E2
200#FECACA
300#FCA5A5
400#F87171
500#EF4444
600#DC2626
700#B91C1C
800#991B1B
900#7F1D1D
950#450A0A
orangetw-orange
50#FFF7ED
100#FFEDD5
200#FED7AA
300#FDBA74
400#FB923C
500#F97316
600#EA580C
700#C2410C
800#9A3412
900#7C2D12
950#431407
yellowtw-yellow
50#FEFCE8
100#FEF9C3
200#FEF08A
300#FDE047
400#FACC15
500#EAB308
600#CA8A04
700#A16207
800#854D0E
900#713F12
950#422006
limetw-lime
50#F7FEE7
100#ECFCCB
200#D9F99D
300#BEF264
400#A3E635
500#84CC16
600#65A30D
700#4D7C0F
800#3F6212
900#365314
950#1A2E05
greentw-green
50#F0FDF4
100#DCFCE7
200#BBF7D0
300#86EFAC
400#4ADE80
500#22C55E
600#16A34A
700#15803D
800#166534
900#14532D
950#052E16
tealtw-teal
50#F0FDFA
100#CCFBF1
200#99F6E4
300#5EEAD4
400#2DD4BF
500#14B8A6
600#0D9488
700#0F766E
800#115E59
900#134E4A
950#042F2E
cyantw-cyan
50#ECFEFF
100#CFFAFE
200#A5F3FC
300#67E8F9
400#22D3EE
500#06B6D4
600#0891B2
700#0E7490
800#155E75
900#164E63
950#083344
indigotw-indigo
50#EEF2FF
100#E0E7FF
200#C7D2FE
300#A5B4FC
400#818CF8
500#6366F1
600#4F46E5
700#4338CA
800#3730A3
900#312E81
950#1E1B4B
violettw-violet
50#F5F3FF
100#EDE9FE
200#DDD6FE
300#C4B5FD
400#A78BFA
500#8B5CF6
600#7C3AED
700#6D28D9
800#5B21B6
900#4C1D95
950#2E1065
purpletw-purple
50#FAF5FF
100#F3E8FF
200#E9D5FF
300#D8B4FE
400#C084FC
500#A855F7
600#9333EA
700#7E22CE
800#6B21A8
900#581C87
950#3B0764
fuchsiatw-fuchsia
50#FDF4FF
100#FAE8FF
200#F5D0FE
300#F0ABFC
400#E879F9
500#D946EF
600#C026D3
700#A21CAF
800#86198F
900#701A75
950#4A044E
pinktw-pink
50#FDF2F8
100#FCE7F3
200#FBCFE8
300#F9A8D4
400#F472B6
500#EC4899
600#DB2777
700#BE185D
800#9D174D
900#831843
950#500724
graytw-gray
50#F9FAFB
100#F3F4F6
200#E5E7EB
300#D1D5DB
400#9CA3AF
500#6B7280
600#4B5563
700#374151
800#1F2937
900#111827
950#030712
zinctw-zinc
50#FAFAFA
100#F4F4F5
200#E4E4E7
300#D4D4D8
400#A1A1AA
500#71717A
600#52525B
700#3F3F46
800#27272A
900#18181B
950#09090B
neutraltw-neutral
50#FAFAFA
100#F5F5F5
200#E5E5E5
300#D4D4D4
400#A3A3A3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0A0A0A