{ "source": "https://nethesis.github.io/design-system/?page=colors", "exportedAt": "2026-10-26", "note": "Use the semantic tokens, not the primitive colors. In code, the primary palette is the palette of the product, so the Product Primary and product link tokens use primary-* classes. classes is null when a value has no Tailwind color.", "groups": [ { "name": "Product Primary", "description": "The main color of each product, for buttons, checkboxes, radio buttons and other interactive elements.", "tokens": [ {"name":"Product Primary/NethSecurity/Active","description":"Primary active NethSecurity components like buttons, checkbox, radio buttons","light":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"dark":{"ref":"Cyan/500","hex":"#06b6d4","tailwind":"cyan-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/NethSecurity/Hover","description":"Hover for primary NethSecurity components like buttons, checkbox, radio buttons","light":{"ref":"Cyan/800","hex":"#155e75","tailwind":"cyan-800"},"dark":{"ref":"Cyan/300","hex":"#67e8f9","tailwind":"cyan-300"},"classes":"primary-800 · dark: primary-300"}, {"name":"Product Primary/NethSecurity/Focus","description":"Focus NethSecurity components","light":{"ref":"Cyan/500","hex":"#06b6d4","tailwind":"cyan-500"},"dark":{"ref":"Cyan/200","hex":"#a5f3fc","tailwind":"cyan-200"},"classes":"primary-500 · dark: primary-200"}, {"name":"Product Primary/NethSecurity/Favicon","description":"Focus NethSecurity components","light":{"ref":"Cyan/600","hex":"#0891b2","tailwind":"cyan-600"},"dark":{"ref":"Cyan/600","hex":"#0891b2","tailwind":"cyan-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/NethSecurity/Placeholder","description":"Focus NethSecurity components","light":{"ref":"Cyan/100","hex":"#cffafe","tailwind":"cyan-100"},"dark":{"ref":"Cyan/900","hex":"#164e63","tailwind":"cyan-900"},"classes":"primary-100 · dark: primary-900"}, {"name":"Product Primary/NethVoice/Active","description":"Primary active NethVoice components like buttons, checkbox, radio buttons","light":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"dark":{"ref":"Emerald/500","hex":"#10b981","tailwind":"emerald-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/NethVoice/Hover","description":"Hover for primary NethVoice components like buttons, checkbox, radio buttons","light":{"ref":"Emerald/800","hex":"#065f46","tailwind":"emerald-800"},"dark":{"ref":"Emerald/300","hex":"#6ee7b7","tailwind":"emerald-300"},"classes":"primary-800 · dark: primary-300"}, {"name":"Product Primary/NethVoice/Focus","description":"Focus NethVoice components","light":{"ref":"Emerald/500","hex":"#10b981","tailwind":"emerald-500"},"dark":{"ref":"Emerald/200","hex":"#a7f3d0","tailwind":"emerald-200"},"classes":"primary-500 · dark: primary-200"}, {"name":"Product Primary/NethVoice/Favicon","description":"Focus NethVoice components","light":{"ref":"Emerald/600","hex":"#059669","tailwind":"emerald-600"},"dark":{"ref":"Emerald/600","hex":"#059669","tailwind":"emerald-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/NethVoice/Placeholder","description":"Focus NethVoice components","light":{"ref":"Emerald/100","hex":"#d1fae5","tailwind":"emerald-100"},"dark":{"ref":"Emerald/900","hex":"#064e3b","tailwind":"emerald-900"},"classes":"primary-100 · dark: primary-900"}, {"name":"Product Primary/NethLink/Active","description":"Primary active NethLink components like buttons, checkbox, radio buttons","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/NethLink/Hover","description":"Hover for primary NethLink components like buttons, checkbox, radio buttons","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/300","hex":"#93c5fd","tailwind":"blue-300"},"classes":"primary-800 · dark: primary-300"}, {"name":"Product Primary/NethLink/Focus","description":"Focus NethLink components","light":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"dark":{"ref":"Blue/200","hex":"#bfdbfe","tailwind":"blue-200"},"classes":"primary-500 · dark: primary-200"}, {"name":"Product Primary/NethLink/Favicon","description":"Focus NethLink components","light":{"ref":"Blue/600","hex":"#2563eb","tailwind":"blue-600"},"dark":{"ref":"Blue/600","hex":"#2563eb","tailwind":"blue-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/NethService/Active","description":"Primary active NethService components like buttons, checkbox, radio buttons","light":{"ref":"Orange/700","hex":"#c2410c","tailwind":"orange-700"},"dark":{"ref":"Orange/500","hex":"#f97316","tailwind":"orange-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/NethService/Hover","description":"Hover for primary NethService components like buttons, checkbox, radio buttons","light":{"ref":"Orange/800","hex":"#9a3412","tailwind":"orange-800"},"dark":{"ref":"Orange/300","hex":"#fdba74","tailwind":"orange-300"},"classes":"primary-800 · dark: primary-300"}, {"name":"Product Primary/NethService/Focus","description":"Focus NethService components","light":{"ref":"Orange/500","hex":"#f97316","tailwind":"orange-500"},"dark":{"ref":"Orange/200","hex":"#fed7aa","tailwind":"orange-200"},"classes":"primary-500 · dark: primary-200"}, {"name":"Product Primary/NethService/Favicon","description":"Focus NethService components","light":{"ref":"Orange/600","hex":"#ea580c","tailwind":"orange-600"},"dark":{"ref":"Orange/600","hex":"#ea580c","tailwind":"orange-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/NethSpot/Active","description":"","light":{"ref":"Purple/700","hex":"#7e22ce","tailwind":"purple-700"},"dark":{"ref":"Purple/500","hex":"#a855f7","tailwind":"purple-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/NethServer/Logo text","description":"","light":{"ref":"Nethesis/Light blue","hex":"#009edb","tailwind":null},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":null}, {"name":"Product Primary/NethServer/Logo icon","description":"","light":{"ref":"Nethesis/Light blue","hex":"#009edb","tailwind":null},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":null}, {"name":"Product Primary/NethServer/Logo icon text","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Nethesis/Light blue","hex":"#009edb","tailwind":null},"classes":null}, {"name":"Product Primary/NethSpot/Favicon","description":"","light":{"ref":"Purple/600","hex":"#9333ea","tailwind":"purple-600"},"dark":{"ref":"Purple/600","hex":"#9333ea","tailwind":"purple-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/Website and My Nethesis/Active","description":"Primary active NethService components like buttons, checkbox, radio buttons","light":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"dark":{"ref":"Sky/500","hex":"#0ea5e9","tailwind":"sky-500"},"classes":"primary-700 · dark: primary-500"}, {"name":"Product Primary/Website and My Nethesis/Hover","description":"Hover for primary NethService components like buttons, checkbox, radio buttons","light":{"ref":"Sky/900","hex":"#0c4a6e","tailwind":"sky-900"},"dark":{"ref":"Sky/300","hex":"#7dd3fc","tailwind":"sky-300"},"classes":"primary-900 · dark: primary-300"}, {"name":"Product Primary/Website and My Nethesis/Focus","description":"Focus NethService components","light":{"ref":"Sky/500","hex":"#0ea5e9","tailwind":"sky-500"},"dark":{"ref":"Sky/200","hex":"#bae6fd","tailwind":"sky-200"},"classes":"primary-500 · dark: primary-200"}, {"name":"Product Primary/Website and My Nethesis/Favicon","description":"Focus NethService components","light":{"ref":"Sky/600","hex":"#0284c7","tailwind":"sky-600"},"dark":{"ref":"Sky/600","hex":"#0284c7","tailwind":"sky-600"},"classes":"primary-600 · dark: primary-600"}, {"name":"Product Primary/Website and My Nethesis/Logo","description":"Focus NethService components","light":{"ref":"Nethesis/Gray MyNethesis","hex":"#1e1e1c","tailwind":null},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":null} ] }, { "name": "Text", "description": "All the text of the interface: headings, titles, body text, placeholders, button labels.", "tokens": [ {"name":"Text/Primary neutral","description":"","light":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"text-gray-900 dark:text-gray-50"}, {"name":"Text/Primary invert neutral","description":"","light":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"dark":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"classes":"text-gray-50 dark:text-gray-900"}, {"name":"Text/Secondary","description":"","light":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"dark":{"ref":"Indigo/500","hex":"#6366f1","tailwind":"indigo-500"},"classes":"text-indigo-700 dark:text-indigo-500"}, {"name":"Text/Secondary neutral","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"classes":"text-gray-700 dark:text-gray-200"}, {"name":"Text/Tertiary neutral","description":"","light":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"text-gray-600 dark:text-gray-400"}, {"name":"Text/Placeholder","description":"Placeholder text inside components like text-input","light":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"text-gray-400 dark:text-gray-500"}, {"name":"Text/Danger","description":"For description text on rose background","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"classes":"text-rose-700 dark:text-rose-500"}, {"name":"Text/Warning","description":"For description text on rose background","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"classes":"text-amber-700 dark:text-amber-500"}, {"name":"Text/Inputs","description":"Text inside components like text-input","light":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"text-gray-900 dark:text-gray-50"}, {"name":"Text/Link/NethSecurity","description":"","light":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"dark":{"ref":"Cyan/500","hex":"#06b6d4","tailwind":"cyan-500"},"classes":"text-primary-700 dark:text-primary-500"}, {"name":"Text/Buttons","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"text-white dark:text-gray-950"}, {"name":"Text/Link/NethSecurity invert","description":"","light":{"ref":"Cyan/500","hex":"#06b6d4","tailwind":"cyan-500"},"dark":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"classes":"text-primary-500 dark:text-primary-700"}, {"name":"Text/Link/NethVoice","description":"","light":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"dark":{"ref":"Emerald/500","hex":"#10b981","tailwind":"emerald-500"},"classes":"text-primary-700 dark:text-primary-500"}, {"name":"Text/White","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":"text-white dark:text-white"}, {"name":"Text/Link/NethVoice invert","description":"","light":{"ref":"Emerald/500","hex":"#10b981","tailwind":"emerald-500"},"dark":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"classes":"text-primary-500 dark:text-primary-700"}, {"name":"Text/Link/MyNethesis invert","description":"","light":{"ref":"Sky/500","hex":"#0ea5e9","tailwind":"sky-500"},"dark":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"classes":"text-primary-500 dark:text-primary-700"}, {"name":"Text/Link/NethLink","description":"","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"classes":"text-primary-700 dark:text-primary-500"}, {"name":"Text/Black","description":"","light":{"ref":"Black","hex":"#000000","tailwind":"black"},"dark":{"ref":"Black","hex":"#000000","tailwind":"black"},"classes":"text-black dark:text-black"}, {"name":"Text/Link/NethService","description":"","light":{"ref":"Orange/700","hex":"#c2410c","tailwind":"orange-700"},"dark":{"ref":"Orange/500","hex":"#f97316","tailwind":"orange-500"},"classes":"text-primary-700 dark:text-primary-500"}, {"name":"Text/Link/Nethesis","description":"","light":{"ref":"Nethesis/Light blue","hex":"#009edb","tailwind":null},"dark":{"ref":"Nethesis/Light blue","hex":"#009edb","tailwind":null},"classes":null}, {"name":"Text/Badge/Gray","description":"","light":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"dark":{"ref":"Gray/100","hex":"#f3f4f6","tailwind":"gray-100"},"classes":"text-gray-800 dark:text-gray-100"}, {"name":"Text/Badge/Rose","description":"","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"classes":"text-rose-800 dark:text-rose-100"}, {"name":"Text/Badge/Amber","description":"","light":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"dark":{"ref":"Amber/50","hex":"#fffbeb","tailwind":"amber-50"},"classes":"text-amber-800 dark:text-amber-50"}, {"name":"Text/Badge/Green","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/50","hex":"#f0fdf4","tailwind":"green-50"},"classes":"text-green-800 dark:text-green-50"}, {"name":"Text/Badge/Indigo","description":"","light":{"ref":"Indigo/800","hex":"#3730a3","tailwind":"indigo-800"},"dark":{"ref":"Indigo/100","hex":"#e0e7ff","tailwind":"indigo-100"},"classes":"text-indigo-800 dark:text-indigo-100"}, {"name":"Text/Badge/Cyan","description":"","light":{"ref":"Cyan/800","hex":"#155e75","tailwind":"cyan-800"},"dark":{"ref":"Cyan/100","hex":"#cffafe","tailwind":"cyan-100"},"classes":"text-cyan-800 dark:text-cyan-100"}, {"name":"Text/Badge/Blue","description":"","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"classes":"text-blue-800 dark:text-blue-100"}, {"name":"Text/Badge/Emerald","description":"","light":{"ref":"Emerald/800","hex":"#065f46","tailwind":"emerald-800"},"dark":{"ref":"Emerald/50","hex":"#ecfdf5","tailwind":"emerald-50"},"classes":"text-emerald-800 dark:text-emerald-50"}, {"name":"Text/Badge/Orange","description":"","light":{"ref":"Orange/800","hex":"#9a3412","tailwind":"orange-800"},"dark":{"ref":"Orange/100","hex":"#ffedd5","tailwind":"orange-100"},"classes":"text-orange-800 dark:text-orange-100"}, {"name":"Text/Badge/Yellow","description":"","light":{"ref":"Yellow/700","hex":"#a16207","tailwind":"yellow-700"},"dark":{"ref":"Yellow/100","hex":"#fef9c3","tailwind":"yellow-100"},"classes":"text-yellow-700 dark:text-yellow-100"}, {"name":"Text/Badge/Teal","description":"","light":{"ref":"Teal/800","hex":"#115e59","tailwind":"teal-800"},"dark":{"ref":"Teal/100","hex":"#ccfbf1","tailwind":"teal-100"},"classes":"text-teal-800 dark:text-teal-100"}, {"name":"Text/Badge/Pink","description":"","light":{"ref":"Pink/800","hex":"#9d174d","tailwind":"pink-800"},"dark":{"ref":"Pink/100","hex":"#fce7f3","tailwind":"pink-100"},"classes":"text-pink-800 dark:text-pink-100"}, {"name":"Text/Badge/Sky","description":"","light":{"ref":"Sky/800","hex":"#075985","tailwind":"sky-800"},"dark":{"ref":"Sky/100","hex":"#e0f2fe","tailwind":"sky-100"},"classes":"text-sky-800 dark:text-sky-100"}, {"name":"Text/Badge/Purple","description":"","light":{"ref":"Purple/800","hex":"#6b21a8","tailwind":"purple-800"},"dark":{"ref":"Purple/100","hex":"#f3e8ff","tailwind":"purple-100"},"classes":"text-purple-800 dark:text-purple-100"}, {"name":"Text/Inline notification/Information/Title","description":"Title or primary text on info background","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"classes":"text-blue-800 dark:text-blue-100"}, {"name":"Text/Inline notification/Information/Description","description":"For description text on info background","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/200","hex":"#bfdbfe","tailwind":"blue-200"},"classes":"text-blue-700 dark:text-blue-200"}, {"name":"Text/Inline notification/Success/Title","description":"Title or primary text on success background","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"classes":"text-green-800 dark:text-green-100"}, {"name":"Text/Inline notification/Success/Description","description":"For description text on success background","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/200","hex":"#bbf7d0","tailwind":"green-200"},"classes":"text-green-700 dark:text-green-200"}, {"name":"Text/Inline notification/Warning/Title","description":"Title or primary text on warning background","light":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"dark":{"ref":"Amber/50","hex":"#fffbeb","tailwind":"amber-50"},"classes":"text-amber-800 dark:text-amber-50"}, {"name":"Text/Inline notification/Warning/Description","description":"For description text on warning background","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/100","hex":"#fef3c7","tailwind":"amber-100"},"classes":"text-amber-700 dark:text-amber-100"}, {"name":"Text/Inline notification/Error/Title","description":"Title or primary text on rose background","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"classes":"text-rose-800 dark:text-rose-100"}, {"name":"Text/Inline notification/Error/Description","description":"For description text on rose background","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/200","hex":"#fecdd3","tailwind":"rose-200"},"classes":"text-rose-700 dark:text-rose-200"}, {"name":"Text/Calls and status/Online","description":"Icons or content not text","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"text-green-700 dark:text-green-500"}, {"name":"Text/Calls and status/Busy","description":"Icons or content not text","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"classes":"text-red-700 dark:text-red-500"}, {"name":"Text/Calls and status/Busy on L2","description":"Icons or content not text","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"Red/400","hex":"#f87171","tailwind":"red-400"},"classes":"text-red-700 dark:text-red-400"}, {"name":"Text/Calls and status/Offline","description":"Icons or content not text","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"text-gray-700 dark:text-gray-400"}, {"name":"Text/Calls and status/Pause","description":"Icons or content not text","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"classes":"text-amber-700 dark:text-amber-500"} ] }, { "name": "Elevation", "description": "The backgrounds of the interface: page, top bar, sidebar, cards.", "tokens": [ {"name":"Elevation/L0","description":"Background color for content on S0 (es: cards)","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"bg-white dark:bg-gray-950"}, {"name":"Elevation/L1","description":"Background color for first surface (es: page bg, drawer bg)","light":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"dark":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"classes":"bg-gray-50 dark:bg-gray-900"}, {"name":"Elevation/L2","description":"Background color for content on S0 (es: cards)","light":{"ref":"Gray/100","hex":"#f3f4f6","tailwind":"gray-100"},"dark":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"classes":"bg-gray-100 dark:bg-gray-800"}, {"name":"Elevation/L2 invert","description":"Background color for content on S0 (es: cards)","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"bg-white dark:bg-gray-950"}, {"name":"Elevation/L3","description":"Background color for content on S0 (es: cards)","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-200 dark:bg-gray-700"}, {"name":"Elevation/L4","description":"Background color for content on S0 (es: cards)","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"bg-gray-300 dark:bg-gray-600"} ] }, { "name": "Icon", "description": "Icons, by role.", "tokens": [ {"name":"Icon/Tooltip","description":"","light":{"ref":"Indigo/800","hex":"#3730a3","tailwind":"indigo-800"},"dark":{"ref":"Indigo/300","hex":"#a5b4fc","tailwind":"indigo-300"},"classes":"text-indigo-800 dark:text-indigo-300"}, {"name":"Icon/Primary neutral","description":"","light":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"text-gray-900 dark:text-gray-50"}, {"name":"Icon/Primary invert","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"text-white dark:text-gray-950"}, {"name":"Icon/Secondary","description":"","light":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"dark":{"ref":"Indigo/500","hex":"#6366f1","tailwind":"indigo-500"},"classes":"text-indigo-700 dark:text-indigo-500"}, {"name":"Icon/Favourite","description":"","light":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"dark":{"ref":"Indigo/400","hex":"#818cf8","tailwind":"indigo-400"},"classes":"text-indigo-700 dark:text-indigo-400"}, {"name":"Icon/Secondary neutral","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"classes":"text-gray-700 dark:text-gray-200"}, {"name":"Icon/Tertiary neutral","description":"","light":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"text-gray-600 dark:text-gray-400"}, {"name":"Icon/Danger","description":"","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"classes":"text-rose-700 dark:text-rose-500"}, {"name":"Icon/Enabled","description":"","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"text-green-700 dark:text-green-500"}, {"name":"Icon/Disabled","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"text-gray-700 dark:text-gray-400"}, {"name":"Icon/Warning","description":"","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"classes":"text-amber-700 dark:text-amber-500"}, {"name":"Icon/Information","description":"","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"classes":"text-blue-700 dark:text-blue-500"}, {"name":"Icon/Badge/Gray","description":"","light":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"dark":{"ref":"Gray/100","hex":"#f3f4f6","tailwind":"gray-100"},"classes":"text-gray-800 dark:text-gray-100"}, {"name":"Icon/On surface/Info","description":"","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"classes":"text-blue-800 dark:text-blue-100"}, {"name":"Icon/On surface/Success","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"classes":"text-green-800 dark:text-green-100"}, {"name":"Icon/On surface/Warning","description":"","light":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"dark":{"ref":"Amber/50","hex":"#fffbeb","tailwind":"amber-50"},"classes":"text-amber-800 dark:text-amber-50"}, {"name":"Icon/On surface/Error","description":"","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"classes":"text-rose-800 dark:text-rose-100"}, {"name":"Icon/On surface/Empty state","description":"","light":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"text-gray-400 dark:text-gray-500"}, {"name":"Icon/Badge/Rose","description":"","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"classes":"text-rose-800 dark:text-rose-100"}, {"name":"Icon/Badge/Amber","description":"","light":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"dark":{"ref":"Amber/50","hex":"#fffbeb","tailwind":"amber-50"},"classes":"text-amber-800 dark:text-amber-50"}, {"name":"Icon/Badge/Green","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/50","hex":"#f0fdf4","tailwind":"green-50"},"classes":"text-green-800 dark:text-green-50"}, {"name":"Icon/Badge/Indigo","description":"","light":{"ref":"Indigo/800","hex":"#3730a3","tailwind":"indigo-800"},"dark":{"ref":"Indigo/100","hex":"#e0e7ff","tailwind":"indigo-100"},"classes":"text-indigo-800 dark:text-indigo-100"}, {"name":"Icon/Badge/Teal","description":"","light":{"ref":"Teal/800","hex":"#115e59","tailwind":"teal-800"},"dark":{"ref":"Teal/100","hex":"#ccfbf1","tailwind":"teal-100"},"classes":"text-teal-800 dark:text-teal-100"}, {"name":"Icon/Badge/Cyan","description":"","light":{"ref":"Cyan/800","hex":"#155e75","tailwind":"cyan-800"},"dark":{"ref":"Cyan/100","hex":"#cffafe","tailwind":"cyan-100"},"classes":"text-cyan-800 dark:text-cyan-100"}, {"name":"Icon/Badge/Blue","description":"","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"classes":"text-blue-800 dark:text-blue-100"}, {"name":"Icon/Badge/Emerald","description":"","light":{"ref":"Emerald/800","hex":"#065f46","tailwind":"emerald-800"},"dark":{"ref":"Emerald/50","hex":"#ecfdf5","tailwind":"emerald-50"},"classes":"text-emerald-800 dark:text-emerald-50"}, {"name":"Icon/Badge/Orange","description":"","light":{"ref":"Orange/800","hex":"#9a3412","tailwind":"orange-800"},"dark":{"ref":"Orange/100","hex":"#ffedd5","tailwind":"orange-100"},"classes":"text-orange-800 dark:text-orange-100"}, {"name":"Icon/Badge/Yellow","description":"","light":{"ref":"Yellow/700","hex":"#a16207","tailwind":"yellow-700"},"dark":{"ref":"Yellow/100","hex":"#fef9c3","tailwind":"yellow-100"},"classes":"text-yellow-700 dark:text-yellow-100"}, {"name":"Icon/Badge/Pink","description":"","light":{"ref":"Pink/800","hex":"#9d174d","tailwind":"pink-800"},"dark":{"ref":"Pink/100","hex":"#fce7f3","tailwind":"pink-100"},"classes":"text-pink-800 dark:text-pink-100"}, {"name":"Icon/Badge/Sky","description":"","light":{"ref":"Sky/800","hex":"#075985","tailwind":"sky-800"},"dark":{"ref":"Sky/100","hex":"#e0f2fe","tailwind":"sky-100"},"classes":"text-sky-800 dark:text-sky-100"}, {"name":"Icon/Badge/Purple","description":"","light":{"ref":"Purple/800","hex":"#6b21a8","tailwind":"purple-800"},"dark":{"ref":"Purple/100","hex":"#f3e8ff","tailwind":"purple-100"},"classes":"text-purple-800 dark:text-purple-100"}, {"name":"Icon/Rounded icon/Green","description":"","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/50","hex":"#f0fdf4","tailwind":"green-50"},"classes":"text-green-700 dark:text-green-50"}, {"name":"Icon/Rounded icon/Rose","description":"","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/50","hex":"#fff1f2","tailwind":"rose-50"},"classes":"text-rose-700 dark:text-rose-50"}, {"name":"Icon/Rounded icon/Blue","description":"","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/50","hex":"#eff6ff","tailwind":"blue-50"},"classes":"text-blue-700 dark:text-blue-50"}, {"name":"Icon/Rounded icon/Gray","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"text-gray-700 dark:text-gray-50"}, {"name":"Icon/Rounded icon/Light gray","description":"","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"text-gray-300 dark:text-gray-600"}, {"name":"Icon/Rounded icon/Teal","description":"","light":{"ref":"Teal/700","hex":"#0f766e","tailwind":"teal-700"},"dark":{"ref":"Teal/50","hex":"#f0fdfa","tailwind":"teal-50"},"classes":"text-teal-700 dark:text-teal-50"}, {"name":"Icon/Rounded icon/Indigo","description":"","light":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"dark":{"ref":"Indigo/50","hex":"#eef2ff","tailwind":"indigo-50"},"classes":"text-indigo-700 dark:text-indigo-50"}, {"name":"Icon/Rounded icon/Cyan","description":"","light":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"dark":{"ref":"Cyan/50","hex":"#ecfeff","tailwind":"cyan-50"},"classes":"text-cyan-700 dark:text-cyan-50"}, {"name":"Icon/Rounded icon/Violet","description":"","light":{"ref":"Violet/700","hex":"#6d28d9","tailwind":"violet-700"},"dark":{"ref":"Violet/50","hex":"#f5f3ff","tailwind":"violet-50"},"classes":"text-violet-700 dark:text-violet-50"}, {"name":"Icon/Rounded icon/Emerald","description":"","light":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"dark":{"ref":"Emerald/50","hex":"#ecfdf5","tailwind":"emerald-50"},"classes":"text-emerald-700 dark:text-emerald-50"}, {"name":"Icon/Rounded icon/Orange","description":"","light":{"ref":"Orange/700","hex":"#c2410c","tailwind":"orange-700"},"dark":{"ref":"Orange/50","hex":"#fff7ed","tailwind":"orange-50"},"classes":"text-orange-700 dark:text-orange-50"}, {"name":"Icon/Rounded icon/Pink","description":"","light":{"ref":"Pink/700","hex":"#be185d","tailwind":"pink-700"},"dark":{"ref":"Pink/50","hex":"#fdf2f8","tailwind":"pink-50"},"classes":"text-pink-700 dark:text-pink-50"}, {"name":"Icon/Rounded icon/Purple","description":"","light":{"ref":"Purple/700","hex":"#7e22ce","tailwind":"purple-700"},"dark":{"ref":"Purple/50","hex":"#faf5ff","tailwind":"purple-50"},"classes":"text-purple-700 dark:text-purple-50"}, {"name":"Icon/Rounded icon/Sky","description":"","light":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"dark":{"ref":"Sky/50","hex":"#f0f9ff","tailwind":"sky-50"},"classes":"text-sky-700 dark:text-sky-50"}, {"name":"Icon/Rounded icon/Pink My Nethesis","description":"","light":{"ref":"Pink/600","hex":"#db2777","tailwind":"pink-600"},"dark":{"ref":"Pink/400","hex":"#f472b6","tailwind":"pink-400"},"classes":"text-pink-600 dark:text-pink-400"}, {"name":"Icon/Rounded icon/Purple My Nethesis","description":"","light":{"ref":"Purple/700","hex":"#7e22ce","tailwind":"purple-700"},"dark":{"ref":"Purple/400","hex":"#c084fc","tailwind":"purple-400"},"classes":"text-purple-700 dark:text-purple-400"}, {"name":"Icon/Rounded icon/Blue My Nethesis","description":"","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/400","hex":"#60a5fa","tailwind":"blue-400"},"classes":"text-blue-700 dark:text-blue-400"}, {"name":"Icon/Rounded icon/Yellow My Nethesis","description":"","light":{"ref":"Yellow/600","hex":"#ca8a04","tailwind":"yellow-600"},"dark":{"ref":"Yellow/500","hex":"#eab308","tailwind":"yellow-500"},"classes":"text-yellow-600 dark:text-yellow-500"}, {"name":"Icon/White","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":"text-white dark:text-white"}, {"name":"Icon/Calls and status/Online","description":"Icons or content not text","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"text-green-700 dark:text-green-500"}, {"name":"Icon/Calls and status/Busy","description":"Icons or content not text","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"classes":"text-red-700 dark:text-red-500"}, {"name":"Icon/Calls and status/Offline","description":"Icons or content not text","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"text-gray-700 dark:text-gray-400"}, {"name":"Icon/Calls and status/Pause","description":"Icons or content not text","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"classes":"text-amber-700 dark:text-amber-500"}, {"name":"Icon/Phone island/Record bg","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"classes":"text-white dark:text-red-700"}, {"name":"Icon/Phone island/Record centre","description":"","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":"text-red-700 dark:text-white"} ] }, { "name": "Surface", "description": "The other surfaces, by role: inputs, badges, notifications, buttons.", "tokens": [ {"name":"Surface/Background/Input","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"bg-white dark:bg-gray-950"}, {"name":"Surface/Background/Input hover","description":"","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-200 dark:bg-gray-700"}, {"name":"Surface/Background/Table tag","description":"","light":{"ref":"Indigo/300","hex":"#a5b4fc","tailwind":"indigo-300"},"dark":{"ref":"Indigo/800","hex":"#3730a3","tailwind":"indigo-800"},"classes":"bg-indigo-300 dark:bg-indigo-800"}, {"name":"Surface/Background/Tooltip","description":"","light":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"dark":{"ref":"Gray/100","hex":"#f3f4f6","tailwind":"gray-100"},"classes":"bg-gray-800 dark:bg-gray-100"}, {"name":"Surface/Background/Progress bar","description":"Icons or content not text","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"bg-gray-300 dark:bg-gray-600"}, {"name":"Surface/Background/New email","description":"Icons or content not text","light":{"ref":"Indigo/100","hex":"#e0e7ff","tailwind":"indigo-100"},"dark":{"ref":"Indigo/950","hex":"#1e1b4b","tailwind":"indigo-950"},"classes":"bg-indigo-100 dark:bg-indigo-950"}, {"name":"Surface/Badge/Gray","description":"","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"bg-gray-200 dark:bg-gray-600"}, {"name":"Surface/Changes-badge/Update","description":"","light":{"ref":"Blue/50","hex":"#eff6ff","tailwind":"blue-50"},"dark":{"ref":"Blue/950","hex":"#172554","tailwind":"blue-950"},"classes":"bg-blue-50 dark:bg-blue-950"}, {"name":"Surface/Changes-badge/Create","description":"","light":{"ref":"Green/50","hex":"#f0fdf4","tailwind":"green-50"},"dark":{"ref":"Green/950","hex":"#052e16","tailwind":"green-950"},"classes":"bg-green-50 dark:bg-green-950"}, {"name":"Surface/Changes-badge/Delete","description":"","light":{"ref":"Rose/50","hex":"#fff1f2","tailwind":"rose-50"},"dark":{"ref":"Rose/950","hex":"#4c0519","tailwind":"rose-950"},"classes":"bg-rose-50 dark:bg-rose-950"}, {"name":"Surface/Changes-badge/Indigo","description":"","light":{"ref":"Indigo/50","hex":"#eef2ff","tailwind":"indigo-50"},"dark":{"ref":"Indigo/950","hex":"#1e1b4b","tailwind":"indigo-950"},"classes":"bg-indigo-50 dark:bg-indigo-950"}, {"name":"Surface/Badge/Rose","description":"","light":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"dark":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"classes":"bg-rose-100 dark:bg-rose-700"}, {"name":"Surface/Badge/Amber","description":"","light":{"ref":"Amber/100","hex":"#fef3c7","tailwind":"amber-100"},"dark":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"classes":"bg-amber-100 dark:bg-amber-700"}, {"name":"Surface/Badge/Green","description":"","light":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"dark":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"classes":"bg-green-100 dark:bg-green-700"}, {"name":"Surface/Badge/Indigo","description":"","light":{"ref":"Indigo/100","hex":"#e0e7ff","tailwind":"indigo-100"},"dark":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"classes":"bg-indigo-100 dark:bg-indigo-700"}, {"name":"Surface/Badge/Teal","description":"","light":{"ref":"Teal/100","hex":"#ccfbf1","tailwind":"teal-100"},"dark":{"ref":"Teal/700","hex":"#0f766e","tailwind":"teal-700"},"classes":"bg-teal-100 dark:bg-teal-700"}, {"name":"Surface/Badge/Pink","description":"","light":{"ref":"Pink/100","hex":"#fce7f3","tailwind":"pink-100"},"dark":{"ref":"Pink/700","hex":"#be185d","tailwind":"pink-700"},"classes":"bg-pink-100 dark:bg-pink-700"}, {"name":"Surface/Badge/Sky","description":"","light":{"ref":"Sky/100","hex":"#e0f2fe","tailwind":"sky-100"},"dark":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"classes":"bg-sky-100 dark:bg-sky-700"}, {"name":"Surface/Badge/Cyan NethSecurity","description":"","light":{"ref":"Cyan/100","hex":"#cffafe","tailwind":"cyan-100"},"dark":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"classes":"bg-cyan-100 dark:bg-cyan-700"}, {"name":"Surface/Badge/Emerald NethVoice","description":"","light":{"ref":"Emerald/100","hex":"#d1fae5","tailwind":"emerald-100"},"dark":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"classes":"bg-emerald-100 dark:bg-emerald-700"}, {"name":"Surface/Badge/Blue NethLink","description":"","light":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"dark":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"classes":"bg-blue-100 dark:bg-blue-700"}, {"name":"Surface/Badge/Orange NethService","description":"","light":{"ref":"Orange/100","hex":"#ffedd5","tailwind":"orange-100"},"dark":{"ref":"Orange/700","hex":"#c2410c","tailwind":"orange-700"},"classes":"bg-orange-100 dark:bg-orange-700"}, {"name":"Surface/Badge/Yellow","description":"","light":{"ref":"Yellow/100","hex":"#fef9c3","tailwind":"yellow-100"},"dark":{"ref":"Yellow/700","hex":"#a16207","tailwind":"yellow-700"},"classes":"bg-yellow-100 dark:bg-yellow-700"}, {"name":"Surface/Badge/Purple","description":"","light":{"ref":"Purple/100","hex":"#f3e8ff","tailwind":"purple-100"},"dark":{"ref":"Purple/700","hex":"#7e22ce","tailwind":"purple-700"},"classes":"bg-purple-100 dark:bg-purple-700"}, {"name":"Surface/Button/Secondary Hover","description":"","light":{"ref":"Opacity/Gray-200 A70","hex":"#e5e7ebb2","tailwind":"gray-200/70"},"dark":{"ref":"Opacity/Gray-600 A30","hex":"#4b55634d","tailwind":"gray-600/30"},"classes":"bg-gray-200/70 dark:bg-gray-600/30"}, {"name":"Surface/Card/Secondary Hover","description":"","light":{"ref":"Opacity/Gray-200 A70","hex":"#e5e7ebb2","tailwind":"gray-200/70"},"dark":{"ref":"Opacity/Gray-600 A30","hex":"#4b55634d","tailwind":"gray-600/30"},"classes":"bg-gray-200/70 dark:bg-gray-600/30"}, {"name":"Surface/Card/Tertiary Hover","description":"","light":{"ref":"Opacity/Gray-200 A70","hex":"#e5e7ebb2","tailwind":"gray-200/70"},"dark":{"ref":"Opacity/Gray-600 A30","hex":"#4b55634d","tailwind":"gray-600/30"},"classes":"bg-gray-200/70 dark:bg-gray-600/30"}, {"name":"Surface/Card/Focus ring black white","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Black","hex":"#000000","tailwind":"black"},"classes":"bg-white dark:bg-black"}, {"name":"Surface/Card/Accent/Emerald","description":"","light":{"ref":"Emerald/50","hex":"#ecfdf5","tailwind":"emerald-50"},"dark":{"ref":"Emerald/900","hex":"#064e3b","tailwind":"emerald-900"},"classes":"bg-emerald-50 dark:bg-emerald-900"}, {"name":"Surface/Card/Phone island/Active","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"classes":"bg-gray-700 dark:bg-gray-300"}, {"name":"Surface/Card/Phone island/Hover","description":"","light":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"bg-gray-800 dark:bg-gray-50"}, {"name":"Surface/Card/Phone island/Call","description":"","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"bg-green-700 dark:bg-green-500"}, {"name":"Surface/Card/Phone island/Call hover","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/300","hex":"#86efac","tailwind":"green-300"},"classes":"bg-green-800 dark:bg-green-300"}, {"name":"Surface/Card/Phone island/Close","description":"","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"classes":"bg-red-700 dark:bg-red-500"}, {"name":"Surface/Card/Phone island/Close hover","description":"","light":{"ref":"Red/800","hex":"#991b1b","tailwind":"red-800"},"dark":{"ref":"Red/300","hex":"#fca5a5","tailwind":"red-300"},"classes":"bg-red-800 dark:bg-red-300"}, {"name":"Surface/Inline notification/Info","description":"Background for components like InlineNotification","light":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"dark":{"ref":"Blue/900","hex":"#1e3a8a","tailwind":"blue-900"},"classes":"bg-blue-100 dark:bg-blue-900"}, {"name":"Surface/Inline notification/Success","description":"Background for components like InlineNotification","light":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"dark":{"ref":"Green/900","hex":"#14532d","tailwind":"green-900"},"classes":"bg-green-100 dark:bg-green-900"}, {"name":"Surface/Inline notification/Warning","description":"Background for components like InlineNotification","light":{"ref":"Amber/100","hex":"#fef3c7","tailwind":"amber-100"},"dark":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"classes":"bg-amber-100 dark:bg-amber-700"}, {"name":"Surface/Inline notification/Error","description":"Background for components like InlineNotification","light":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"dark":{"ref":"Rose/900","hex":"#881337","tailwind":"rose-900"},"classes":"bg-rose-100 dark:bg-rose-900"}, {"name":"Surface/Button/Tertiary Hover","description":"","light":{"ref":"Opacity/Gray-200 A70","hex":"#e5e7ebb2","tailwind":"gray-200/70"},"dark":{"ref":"Opacity/Gray-600 A30","hex":"#4b55634d","tailwind":"gray-600/30"},"classes":"bg-gray-200/70 dark:bg-gray-600/30"}, {"name":"Surface/Button/Focus ring black white","description":"","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"Black","hex":"#000000","tailwind":"black"},"classes":"bg-white dark:bg-black"}, {"name":"Surface/Button/Danger/Active","description":"","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/600","hex":"#e11d48","tailwind":"rose-600"},"classes":"bg-rose-700 dark:bg-rose-600"}, {"name":"Surface/Button/Danger/Hover","description":"","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"classes":"bg-rose-800 dark:bg-rose-500"}, {"name":"Surface/Info","description":"Icons or content not text","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/200","hex":"#bfdbfe","tailwind":"blue-200"},"classes":"bg-blue-700 dark:bg-blue-200"}, {"name":"Surface/Rounded icon/Blue","description":"Icons or content not text","light":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"dark":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"classes":"bg-blue-100 dark:bg-blue-700"}, {"name":"Surface/Phone island/Background","description":"Icons or content not text","light":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"bg-gray-50 dark:bg-gray-950"}, {"name":"Surface/Phone island/Sidebar","description":"Icons or content not text","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-700 dark:bg-gray-700"}, {"name":"Surface/Phone island/Sidebar hover","description":"Icons or content not text","light":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"bg-gray-600 dark:bg-gray-600"}, {"name":"Surface/Rounded icon/Gray","description":"Icons or content not text","light":{"ref":"Gray/100","hex":"#f3f4f6","tailwind":"gray-100"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-100 dark:bg-gray-700"}, {"name":"Surface/Rounded icon/Gray My Nethesis","description":"Icons or content not text","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-200 dark:bg-gray-700"}, {"name":"Surface/Rounded icon/Light Gray","description":"Icons or content not text","light":{"ref":"Gray/900","hex":"#111827","tailwind":"gray-900"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"bg-gray-900 dark:bg-gray-50"}, {"name":"Surface/Rounded icon/Green","description":"Icons or content not text","light":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"dark":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"classes":"bg-green-100 dark:bg-green-700"}, {"name":"Surface/Rounded icon/Indigo","description":"Icons or content not text","light":{"ref":"Indigo/100","hex":"#e0e7ff","tailwind":"indigo-100"},"dark":{"ref":"Indigo/700","hex":"#4338ca","tailwind":"indigo-700"},"classes":"bg-indigo-100 dark:bg-indigo-700"}, {"name":"Surface/Rounded icon/Rose","description":"Icons or content not text","light":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"dark":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"classes":"bg-rose-100 dark:bg-rose-700"}, {"name":"Surface/Rounded icon/Teal","description":"Icons or content not text","light":{"ref":"Teal/100","hex":"#ccfbf1","tailwind":"teal-100"},"dark":{"ref":"Teal/700","hex":"#0f766e","tailwind":"teal-700"},"classes":"bg-teal-100 dark:bg-teal-700"}, {"name":"Surface/Rounded icon/Cyan","description":"Icons or content not text","light":{"ref":"Cyan/100","hex":"#cffafe","tailwind":"cyan-100"},"dark":{"ref":"Cyan/700","hex":"#0e7490","tailwind":"cyan-700"},"classes":"bg-cyan-100 dark:bg-cyan-700"}, {"name":"Surface/Rounded icon/Violet","description":"Icons or content not text","light":{"ref":"Violet/100","hex":"#ede9fe","tailwind":"violet-100"},"dark":{"ref":"Violet/700","hex":"#6d28d9","tailwind":"violet-700"},"classes":"bg-violet-100 dark:bg-violet-700"}, {"name":"Surface/Rounded icon/Emerald","description":"Icons or content not text","light":{"ref":"Emerald/100","hex":"#d1fae5","tailwind":"emerald-100"},"dark":{"ref":"Emerald/700","hex":"#047857","tailwind":"emerald-700"},"classes":"bg-emerald-100 dark:bg-emerald-700"}, {"name":"Surface/Rounded icon/Orange","description":"Icons or content not text","light":{"ref":"Orange/100","hex":"#ffedd5","tailwind":"orange-100"},"dark":{"ref":"Orange/700","hex":"#c2410c","tailwind":"orange-700"},"classes":"bg-orange-100 dark:bg-orange-700"}, {"name":"Surface/Rounded icon/Pink","description":"Icons or content not text","light":{"ref":"Pink/100","hex":"#fce7f3","tailwind":"pink-100"},"dark":{"ref":"Pink/700","hex":"#be185d","tailwind":"pink-700"},"classes":"bg-pink-100 dark:bg-pink-700"}, {"name":"Surface/Rounded icon/Purple","description":"Icons or content not text","light":{"ref":"Purple/100","hex":"#f3e8ff","tailwind":"purple-100"},"dark":{"ref":"Purple/700","hex":"#7e22ce","tailwind":"purple-700"},"classes":"bg-purple-100 dark:bg-purple-700"}, {"name":"Surface/Rounded icon/Sky","description":"Icons or content not text","light":{"ref":"Sky/100","hex":"#e0f2fe","tailwind":"sky-100"},"dark":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"classes":"bg-sky-100 dark:bg-sky-700"}, {"name":"Surface/Success","description":"Icons or content not text","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/200","hex":"#bbf7d0","tailwind":"green-200"},"classes":"bg-green-700 dark:bg-green-200"}, {"name":"Surface/Warning","description":"Icons or content not text","light":{"ref":"Amber/700","hex":"#b45309","tailwind":"amber-700"},"dark":{"ref":"Amber/100","hex":"#fef3c7","tailwind":"amber-100"},"classes":"bg-amber-700 dark:bg-amber-100"}, {"name":"Surface/Error","description":"Icons or content not text","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/200","hex":"#fecdd3","tailwind":"rose-200"},"classes":"bg-rose-700 dark:bg-rose-200"}, {"name":"Surface/Skeleton","description":"Icons or content not text","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"bg-gray-200 dark:bg-gray-700"}, {"name":"Surface/Scrollbar","description":"Icons or content not text","light":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"bg-gray-400 dark:bg-gray-400"}, {"name":"Surface/Scrollbar bg","description":"Icons or content not text","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"classes":"bg-gray-200 dark:bg-gray-800"}, {"name":"Surface/Overlay","description":"","light":{"ref":"Opacity/Gray-500 A75","hex":"#6b7280bf","tailwind":"gray-500/75"},"dark":{"ref":"Opacity/Gray-700 A75","hex":"#374151bf","tailwind":"gray-700/75"},"classes":"bg-gray-500/75 dark:bg-gray-700/75"}, {"name":"Surface/Overlay indigo 10%","description":"","light":{"ref":"Opacity/Indigo-300 A10","hex":"#a5b4fc1a","tailwind":"indigo-300/10"},"dark":{"ref":"Opacity/Indigo-500 A10","hex":"#6366f11a","tailwind":"indigo-500/10"},"classes":"bg-indigo-300/10 dark:bg-indigo-500/10"}, {"name":"Surface/Overlay indigo 20%","description":"","light":{"ref":"Opacity/Indigo-300 A20","hex":"#a5b4fc33","tailwind":"indigo-300/20"},"dark":{"ref":"Opacity/Indigo-500 A20","hex":"#6366f133","tailwind":"indigo-500/20"},"classes":"bg-indigo-300/20 dark:bg-indigo-500/20"}, {"name":"Surface/Presence/Online","description":"","light":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"bg-green-500 dark:bg-green-500"}, {"name":"Surface/Presence/Busy","description":"","light":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"dark":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"classes":"bg-red-500 dark:bg-red-500"}, {"name":"Surface/Presence/DND","description":"","light":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"dark":{"ref":"Gray/950","hex":"#030712","tailwind":"gray-950"},"classes":"bg-gray-950 dark:bg-gray-950"}, {"name":"Surface/Presence/Offline","description":"","light":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"bg-gray-500 dark:bg-gray-500"}, {"name":"Surface/Notification button/Information/Active","description":"","light":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"dark":{"ref":"Blue/100","hex":"#dbeafe","tailwind":"blue-100"},"classes":"bg-blue-800 dark:bg-blue-100"}, {"name":"Surface/Toggle/Switch","description":"Icons or content not text","light":{"ref":"White","hex":"#ffffff","tailwind":"white"},"dark":{"ref":"White","hex":"#ffffff","tailwind":"white"},"classes":"bg-white dark:bg-white"}, {"name":"Surface/Toggle/Background disabled","description":"Icons or content not text","light":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"dark":{"ref":"Gray/400","hex":"#9ca3af","tailwind":"gray-400"},"classes":"bg-gray-400 dark:bg-gray-400"}, {"name":"Surface/Notification button/Information/Hover","description":"","light":{"ref":"Blue/200","hex":"#bfdbfe","tailwind":"blue-200"},"dark":{"ref":"Blue/800","hex":"#1e40af","tailwind":"blue-800"},"classes":"bg-blue-200 dark:bg-blue-800"}, {"name":"Surface/Notification button/Information/Focus","description":"","light":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"dark":{"ref":"Blue/200","hex":"#bfdbfe","tailwind":"blue-200"},"classes":"bg-blue-500 dark:bg-blue-200"}, {"name":"Surface/Notification button/Success/Active","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/100","hex":"#dcfce7","tailwind":"green-100"},"classes":"bg-green-800 dark:bg-green-100"}, {"name":"Surface/Notification button/Success/Hover","description":"","light":{"ref":"Green/200","hex":"#bbf7d0","tailwind":"green-200"},"dark":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"classes":"bg-green-200 dark:bg-green-800"}, {"name":"Surface/Notification button/Success/Focus","description":"","light":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"dark":{"ref":"Green/200","hex":"#bbf7d0","tailwind":"green-200"},"classes":"bg-green-500 dark:bg-green-200"}, {"name":"Surface/Notification button/Warning/Active","description":"","light":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"dark":{"ref":"Amber/50","hex":"#fffbeb","tailwind":"amber-50"},"classes":"bg-amber-800 dark:bg-amber-50"}, {"name":"Surface/Notification button/Warning/Hover","description":"","light":{"ref":"Amber/200","hex":"#fde68a","tailwind":"amber-200"},"dark":{"ref":"Amber/800","hex":"#92400e","tailwind":"amber-800"},"classes":"bg-amber-200 dark:bg-amber-800"}, {"name":"Surface/Notification button/Warning/Focus","description":"","light":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"dark":{"ref":"Amber/200","hex":"#fde68a","tailwind":"amber-200"},"classes":"bg-amber-500 dark:bg-amber-200"}, {"name":"Surface/Notification button/Error/Active","description":"","light":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"dark":{"ref":"Rose/100","hex":"#ffe4e6","tailwind":"rose-100"},"classes":"bg-rose-800 dark:bg-rose-100"}, {"name":"Surface/Notification button/Error/Hover","description":"","light":{"ref":"Rose/200","hex":"#fecdd3","tailwind":"rose-200"},"dark":{"ref":"Rose/800","hex":"#9f1239","tailwind":"rose-800"},"classes":"bg-rose-200 dark:bg-rose-800"}, {"name":"Surface/Notification button/Error/Focus","description":"","light":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"dark":{"ref":"Rose/200","hex":"#fecdd3","tailwind":"rose-200"},"classes":"bg-rose-500 dark:bg-rose-200"}, {"name":"Surface/Button/Phone island/Active","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"classes":"bg-gray-700 dark:bg-gray-300"}, {"name":"Surface/Button/Phone island/Hover","description":"","light":{"ref":"Gray/800","hex":"#1f2937","tailwind":"gray-800"},"dark":{"ref":"Gray/50","hex":"#f9fafb","tailwind":"gray-50"},"classes":"bg-gray-800 dark:bg-gray-50"}, {"name":"Surface/Button/Phone island/Call","description":"","light":{"ref":"Green/700","hex":"#15803d","tailwind":"green-700"},"dark":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"classes":"bg-green-700 dark:bg-green-500"}, {"name":"Surface/Button/Phone island/Call hover","description":"","light":{"ref":"Green/800","hex":"#166534","tailwind":"green-800"},"dark":{"ref":"Green/300","hex":"#86efac","tailwind":"green-300"},"classes":"bg-green-800 dark:bg-green-300"}, {"name":"Surface/Button/Phone island/Close","description":"","light":{"ref":"Red/700","hex":"#b91c1c","tailwind":"red-700"},"dark":{"ref":"Red/500","hex":"#ef4444","tailwind":"red-500"},"classes":"bg-red-700 dark:bg-red-500"}, {"name":"Surface/Button/Phone island/Close hover","description":"","light":{"ref":"Red/800","hex":"#991b1b","tailwind":"red-800"},"dark":{"ref":"Red/300","hex":"#fca5a5","tailwind":"red-300"},"classes":"bg-red-800 dark:bg-red-300"} ] }, { "name": "Border", "description": "Rings and accent borders of components.", "tokens": [ {"name":"Border/Ring/Button","description":"","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"ring-gray-300 dark:ring-gray-500"}, {"name":"Border/Ring/Input","description":"","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"ring-gray-300 dark:ring-gray-500"}, {"name":"Border/Ring/Input read only","description":"","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/600","hex":"#4b5563","tailwind":"gray-600"},"classes":"ring-gray-200 dark:ring-gray-600"}, {"name":"Border/Ring/Secondary","description":"","light":{"ref":"Gray/300","hex":"#d1d5db","tailwind":"gray-300"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"ring-gray-300 dark:ring-gray-700"}, {"name":"Border/Ring/Layout divider","description":"","light":{"ref":"Gray/200","hex":"#e5e7eb","tailwind":"gray-200"},"dark":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"classes":"ring-gray-200 dark:ring-gray-700"}, {"name":"Border/Ring/Error-focus","description":"Border for components like InlineNotification","light":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"dark":{"ref":"Rose/400","hex":"#fb7185","tailwind":"rose-400"},"classes":"ring-rose-500 dark:ring-rose-400"}, {"name":"Border/Ring/Toast","description":"Border for components like InlineNotification","light":{"ref":"Gray 500 5%","hex":"#6b72800d","tailwind":"gray-500/5"},"dark":{"ref":"Gray 500 10%","hex":"#6b72801a","tailwind":"gray-500/10"},"classes":"ring-gray-500/5 dark:ring-gray-500/10"}, {"name":"Border/Accent/Indigo","description":"Border for components like InlineNotification","light":{"ref":"Indigo/500","hex":"#6366f1","tailwind":"indigo-500"},"dark":{"ref":"Indigo/400","hex":"#818cf8","tailwind":"indigo-400"},"classes":"border-indigo-500 dark:border-indigo-400"}, {"name":"Border/Accent/Green","description":"Border for components like InlineNotification","light":{"ref":"Green/500","hex":"#22c55e","tailwind":"green-500"},"dark":{"ref":"Green/400","hex":"#4ade80","tailwind":"green-400"},"classes":"border-green-500 dark:border-green-400"}, {"name":"Border/Accent/Amber","description":"Border for components like InlineNotification","light":{"ref":"Amber/500","hex":"#f59e0b","tailwind":"amber-500"},"dark":{"ref":"Amber/400","hex":"#fbbf24","tailwind":"amber-400"},"classes":"border-amber-500 dark:border-amber-400"}, {"name":"Border/Accent/Rose","description":"","light":{"ref":"Rose/700","hex":"#be123c","tailwind":"rose-700"},"dark":{"ref":"Rose/500","hex":"#f43f5e","tailwind":"rose-500"},"classes":"border-rose-700 dark:border-rose-500"}, {"name":"Border/Accent/Gray","description":"","light":{"ref":"Gray/700","hex":"#374151","tailwind":"gray-700"},"dark":{"ref":"Gray/500","hex":"#6b7280","tailwind":"gray-500"},"classes":"border-gray-700 dark:border-gray-500"}, {"name":"Border/Accent/Blue","description":"","light":{"ref":"Blue/700","hex":"#1d4ed8","tailwind":"blue-700"},"dark":{"ref":"Blue/500","hex":"#3b82f6","tailwind":"blue-500"},"classes":"border-blue-700 dark:border-blue-500"}, {"name":"Border/Accent/Violet","description":"","light":{"ref":"Violet/700","hex":"#6d28d9","tailwind":"violet-700"},"dark":{"ref":"Violet/500","hex":"#8b5cf6","tailwind":"violet-500"},"classes":"border-violet-700 dark:border-violet-500"} ] }, { "name": "Utility", "description": "Colors for special cases, such as pulsing indicators.", "tokens": [ {"name":"Utility/Green","description":"","light":{"ref":"Lime/700","hex":"#4d7c0f","tailwind":"lime-700"},"dark":{"ref":"Lime/400","hex":"#a3e635","tailwind":"lime-400"},"classes":"lime-700 · dark: lime-400"}, {"name":"Utility/Yellow","description":"","light":{"ref":"Yellow/700","hex":"#a16207","tailwind":"yellow-700"},"dark":{"ref":"Yellow/400","hex":"#facc15","tailwind":"yellow-400"},"classes":"yellow-700 · dark: yellow-400"}, {"name":"Utility/Sky","description":"","light":{"ref":"Sky/700","hex":"#0369a1","tailwind":"sky-700"},"dark":{"ref":"Sky/400","hex":"#38bdf8","tailwind":"sky-400"},"classes":"sky-700 · dark: sky-400"}, {"name":"Utility/Pulsing green","description":"","light":{"ref":null,"hex":"#15803d4d","tailwind":null},"dark":{"ref":null,"hex":"#22c55e4d","tailwind":null},"classes":null}, {"name":"Utility/Pulsing red","description":"","light":{"ref":null,"hex":"#b91c1c4d","tailwind":null},"dark":{"ref":null,"hex":"#ef44444d","tailwind":null},"classes":null} ] } ], "primitives": [ { "name": "Red/50", "hex": "#fef2f2", "tailwind": "red-50" }, { "name": "Red/100", "hex": "#fee2e2", "tailwind": "red-100" }, { "name": "Red/200", "hex": "#fecaca", "tailwind": "red-200" }, { "name": "Red/300", "hex": "#fca5a5", "tailwind": "red-300" }, { "name": "Red/400", "hex": "#f87171", "tailwind": "red-400" }, { "name": "Red/500", "hex": "#ef4444", "tailwind": "red-500" }, { "name": "Red/600", "hex": "#dc2626", "tailwind": "red-600" }, { "name": "Red/700", "hex": "#b91c1c", "tailwind": "red-700" }, { "name": "Red/800", "hex": "#991b1b", "tailwind": "red-800" }, { "name": "Red/900", "hex": "#7f1d1d", "tailwind": "red-900" }, { "name": "Red/950", "hex": "#450a0a", "tailwind": "red-950" }, { "name": "Orange/50", "hex": "#fff7ed", "tailwind": "orange-50" }, { "name": "Amber/50", "hex": "#fffbeb", "tailwind": "amber-50" }, { "name": "Amber/100", "hex": "#fef3c7", "tailwind": "amber-100" }, { "name": "Amber/200", "hex": "#fde68a", "tailwind": "amber-200" }, { "name": "Amber/300", "hex": "#fcd34d", "tailwind": "amber-300" }, { "name": "Amber/400", "hex": "#fbbf24", "tailwind": "amber-400" }, { "name": "Amber/500", "hex": "#f59e0b", "tailwind": "amber-500" }, { "name": "Amber/600", "hex": "#d97706", "tailwind": "amber-600" }, { "name": "Amber/700", "hex": "#b45309", "tailwind": "amber-700" }, { "name": "Amber/800", "hex": "#92400e", "tailwind": "amber-800" }, { "name": "Amber/900", "hex": "#78350f", "tailwind": "amber-900" }, { "name": "Amber/950", "hex": "#451a03", "tailwind": "amber-950" }, { "name": "Orange/100", "hex": "#ffedd5", "tailwind": "orange-100" }, { "name": "Orange/200", "hex": "#fed7aa", "tailwind": "orange-200" }, { "name": "Orange/300", "hex": "#fdba74", "tailwind": "orange-300" }, { "name": "Orange/400", "hex": "#fb923c", "tailwind": "orange-400" }, { "name": "Orange/500", "hex": "#f97316", "tailwind": "orange-500" }, { "name": "Orange/600", "hex": "#ea580c", "tailwind": "orange-600" }, { "name": "Orange/700", "hex": "#c2410c", "tailwind": "orange-700" }, { "name": "Orange/800", "hex": "#9a3412", "tailwind": "orange-800" }, { "name": "Orange/900", "hex": "#7c2d12", "tailwind": "orange-900" }, { "name": "Orange/950", "hex": "#431407", "tailwind": "orange-950" }, { "name": "Yellow/50", "hex": "#fefce8", "tailwind": "yellow-50" }, { "name": "Yellow/100", "hex": "#fef9c3", "tailwind": "yellow-100" }, { "name": "Yellow/200", "hex": "#fef08a", "tailwind": "yellow-200" }, { "name": "Yellow/300", "hex": "#fde047", "tailwind": "yellow-300" }, { "name": "Yellow/400", "hex": "#facc15", "tailwind": "yellow-400" }, { "name": "Yellow/500", "hex": "#eab308", "tailwind": "yellow-500" }, { "name": "Yellow/600", "hex": "#ca8a04", "tailwind": "yellow-600" }, { "name": "Yellow/700", "hex": "#a16207", "tailwind": "yellow-700" }, { "name": "Yellow/800", "hex": "#854d0e", "tailwind": "yellow-800" }, { "name": "Yellow/900", "hex": "#713f12", "tailwind": "yellow-900" }, { "name": "Yellow/950", "hex": "#422006", "tailwind": "yellow-950" }, { "name": "Lime/50", "hex": "#f7fee7", "tailwind": "lime-50" }, { "name": "Lime/100", "hex": "#ecfccb", "tailwind": "lime-100" }, { "name": "Lime/200", "hex": "#d9f99d", "tailwind": "lime-200" }, { "name": "Lime/300", "hex": "#bef264", "tailwind": "lime-300" }, { "name": "Lime/400", "hex": "#a3e635", "tailwind": "lime-400" }, { "name": "Lime/500", "hex": "#84cc16", "tailwind": "lime-500" }, { "name": "Lime/600", "hex": "#65a30d", "tailwind": "lime-600" }, { "name": "Lime/700", "hex": "#4d7c0f", "tailwind": "lime-700" }, { "name": "Lime/800", "hex": "#3f6212", "tailwind": "lime-800" }, { "name": "Lime/900", "hex": "#365314", "tailwind": "lime-900" }, { "name": "Lime/950", "hex": "#1a2e05", "tailwind": "lime-950" }, { "name": "Green/50", "hex": "#f0fdf4", "tailwind": "green-50" }, { "name": "Green/100", "hex": "#dcfce7", "tailwind": "green-100" }, { "name": "Green/200", "hex": "#bbf7d0", "tailwind": "green-200" }, { "name": "Green/300", "hex": "#86efac", "tailwind": "green-300" }, { "name": "Green/400", "hex": "#4ade80", "tailwind": "green-400" }, { "name": "Green/500", "hex": "#22c55e", "tailwind": "green-500" }, { "name": "Green/600", "hex": "#16a34a", "tailwind": "green-600" }, { "name": "Green/700", "hex": "#15803d", "tailwind": "green-700" }, { "name": "Green/800", "hex": "#166534", "tailwind": "green-800" }, { "name": "Green/900", "hex": "#14532d", "tailwind": "green-900" }, { "name": "Green/950", "hex": "#052e16", "tailwind": "green-950" }, { "name": "Emerald/50", "hex": "#ecfdf5", "tailwind": "emerald-50" }, { "name": "Emerald/100", "hex": "#d1fae5", "tailwind": "emerald-100" }, { "name": "Emerald/200", "hex": "#a7f3d0", "tailwind": "emerald-200" }, { "name": "Emerald/300", "hex": "#6ee7b7", "tailwind": "emerald-300" }, { "name": "Emerald/400", "hex": "#34d399", "tailwind": "emerald-400" }, { "name": "Emerald/500", "hex": "#10b981", "tailwind": "emerald-500" }, { "name": "Emerald/600", "hex": "#059669", "tailwind": "emerald-600" }, { "name": "Emerald/700", "hex": "#047857", "tailwind": "emerald-700" }, { "name": "Emerald/800", "hex": "#065f46", "tailwind": "emerald-800" }, { "name": "Emerald/900", "hex": "#064e3b", "tailwind": "emerald-900" }, { "name": "Emerald/950", "hex": "#022c22", "tailwind": "emerald-950" }, { "name": "Teal/50", "hex": "#f0fdfa", "tailwind": "teal-50" }, { "name": "Teal/100", "hex": "#ccfbf1", "tailwind": "teal-100" }, { "name": "Teal/200", "hex": "#99f6e4", "tailwind": "teal-200" }, { "name": "Teal/300", "hex": "#5eead4", "tailwind": "teal-300" }, { "name": "Teal/400", "hex": "#2dd4bf", "tailwind": "teal-400" }, { "name": "Teal/500", "hex": "#14b8a6", "tailwind": "teal-500" }, { "name": "Teal/600", "hex": "#0d9488", "tailwind": "teal-600" }, { "name": "Teal/700", "hex": "#0f766e", "tailwind": "teal-700" }, { "name": "Teal/800", "hex": "#115e59", "tailwind": "teal-800" }, { "name": "Teal/900", "hex": "#134e4a", "tailwind": "teal-900" }, { "name": "Teal/950", "hex": "#042f2e", "tailwind": "teal-950" }, { "name": "Cyan/50", "hex": "#ecfeff", "tailwind": "cyan-50" }, { "name": "Cyan/100", "hex": "#cffafe", "tailwind": "cyan-100" }, { "name": "Cyan/200", "hex": "#a5f3fc", "tailwind": "cyan-200" }, { "name": "Cyan/300", "hex": "#67e8f9", "tailwind": "cyan-300" }, { "name": "Cyan/400", "hex": "#22d3ee", "tailwind": "cyan-400" }, { "name": "Cyan/500", "hex": "#06b6d4", "tailwind": "cyan-500" }, { "name": "Cyan/600", "hex": "#0891b2", "tailwind": "cyan-600" }, { "name": "Cyan/700", "hex": "#0e7490", "tailwind": "cyan-700" }, { "name": "Cyan/800", "hex": "#155e75", "tailwind": "cyan-800" }, { "name": "Cyan/900", "hex": "#164e63", "tailwind": "cyan-900" }, { "name": "Cyan/950", "hex": "#083344", "tailwind": "cyan-950" }, { "name": "Sky/50", "hex": "#f0f9ff", "tailwind": "sky-50" }, { "name": "Sky/100", "hex": "#e0f2fe", "tailwind": "sky-100" }, { "name": "Sky/200", "hex": "#bae6fd", "tailwind": "sky-200" }, { "name": "Sky/300", "hex": "#7dd3fc", "tailwind": "sky-300" }, { "name": "Sky/400", "hex": "#38bdf8", "tailwind": "sky-400" }, { "name": "Sky/500", "hex": "#0ea5e9", "tailwind": "sky-500" }, { "name": "Sky/600", "hex": "#0284c7", "tailwind": "sky-600" }, { "name": "Sky/700", "hex": "#0369a1", "tailwind": "sky-700" }, { "name": "Sky/800", "hex": "#075985", "tailwind": "sky-800" }, { "name": "Sky/900", "hex": "#0c4a6e", "tailwind": "sky-900" }, { "name": "Sky/950", "hex": "#082f49", "tailwind": "sky-950" }, { "name": "Blue/50", "hex": "#eff6ff", "tailwind": "blue-50" }, { "name": "Blue/100", "hex": "#dbeafe", "tailwind": "blue-100" }, { "name": "Blue/200", "hex": "#bfdbfe", "tailwind": "blue-200" }, { "name": "Blue/300", "hex": "#93c5fd", "tailwind": "blue-300" }, { "name": "Blue/400", "hex": "#60a5fa", "tailwind": "blue-400" }, { "name": "Blue/500", "hex": "#3b82f6", "tailwind": "blue-500" }, { "name": "Blue/600", "hex": "#2563eb", "tailwind": "blue-600" }, { "name": "Blue/700", "hex": "#1d4ed8", "tailwind": "blue-700" }, { "name": "Blue/800", "hex": "#1e40af", "tailwind": "blue-800" }, { "name": "Blue/900", "hex": "#1e3a8a", "tailwind": "blue-900" }, { "name": "Blue/950", "hex": "#172554", "tailwind": "blue-950" }, { "name": "Indigo/50", "hex": "#eef2ff", "tailwind": "indigo-50" }, { "name": "Indigo/100", "hex": "#e0e7ff", "tailwind": "indigo-100" }, { "name": "Indigo/200", "hex": "#c7d2fe", "tailwind": "indigo-200" }, { "name": "Indigo/300", "hex": "#a5b4fc", "tailwind": "indigo-300" }, { "name": "Indigo/400", "hex": "#818cf8", "tailwind": "indigo-400" }, { "name": "Indigo/500", "hex": "#6366f1", "tailwind": "indigo-500" }, { "name": "Indigo/600", "hex": "#4f46e5", "tailwind": "indigo-600" }, { "name": "Indigo/700", "hex": "#4338ca", "tailwind": "indigo-700" }, { "name": "Indigo/800", "hex": "#3730a3", "tailwind": "indigo-800" }, { "name": "Indigo/900", "hex": "#312e81", "tailwind": "indigo-900" }, { "name": "Indigo/950", "hex": "#1e1b4b", "tailwind": "indigo-950" }, { "name": "Violet/50", "hex": "#f5f3ff", "tailwind": "violet-50" }, { "name": "Violet/100", "hex": "#ede9fe", "tailwind": "violet-100" }, { "name": "Violet/200", "hex": "#ddd6fe", "tailwind": "violet-200" }, { "name": "Violet/300", "hex": "#c4b5fd", "tailwind": "violet-300" }, { "name": "Violet/400", "hex": "#a78bfa", "tailwind": "violet-400" }, { "name": "Violet/500", "hex": "#8b5cf6", "tailwind": "violet-500" }, { "name": "Violet/600", "hex": "#7c3aed", "tailwind": "violet-600" }, { "name": "Violet/700", "hex": "#6d28d9", "tailwind": "violet-700" }, { "name": "Violet/800", "hex": "#5b21b6", "tailwind": "violet-800" }, { "name": "Violet/900", "hex": "#4c1d95", "tailwind": "violet-900" }, { "name": "Violet/950", "hex": "#2e1065", "tailwind": "violet-950" }, { "name": "Purple/50", "hex": "#faf5ff", "tailwind": "purple-50" }, { "name": "Purple/100", "hex": "#f3e8ff", "tailwind": "purple-100" }, { "name": "Purple/200", "hex": "#e9d5ff", "tailwind": "purple-200" }, { "name": "Purple/300", "hex": "#d8b4fe", "tailwind": "purple-300" }, { "name": "Purple/400", "hex": "#c084fc", "tailwind": "purple-400" }, { "name": "Purple/500", "hex": "#a855f7", "tailwind": "purple-500" }, { "name": "Purple/600", "hex": "#9333ea", "tailwind": "purple-600" }, { "name": "Purple/700", "hex": "#7e22ce", "tailwind": "purple-700" }, { "name": "Purple/800", "hex": "#6b21a8", "tailwind": "purple-800" }, { "name": "Purple/900", "hex": "#581c87", "tailwind": "purple-900" }, { "name": "Purple/950", "hex": "#3b0764", "tailwind": "purple-950" }, { "name": "Fuchsia/50", "hex": "#fdf4ff", "tailwind": "fuchsia-50" }, { "name": "Fuchsia/100", "hex": "#fae8ff", "tailwind": "fuchsia-100" }, { "name": "Fuchsia/200", "hex": "#f5d0fe", "tailwind": "fuchsia-200" }, { "name": "Fuchsia/300", "hex": "#f0abfc", "tailwind": "fuchsia-300" }, { "name": "Fuchsia/400", "hex": "#e879f9", "tailwind": "fuchsia-400" }, { "name": "Fuchsia/500", "hex": "#d946ef", "tailwind": "fuchsia-500" }, { "name": "Fuchsia/600", "hex": "#c026d3", "tailwind": "fuchsia-600" }, { "name": "Fuchsia/700", "hex": "#a21caf", "tailwind": "fuchsia-700" }, { "name": "Fuchsia/800", "hex": "#86198f", "tailwind": "fuchsia-800" }, { "name": "Fuchsia/900", "hex": "#701a75", "tailwind": "fuchsia-900" }, { "name": "Fuchsia/950", "hex": "#4a044e", "tailwind": "fuchsia-950" }, { "name": "Pink/50", "hex": "#fdf2f8", "tailwind": "pink-50" }, { "name": "Pink/100", "hex": "#fce7f3", "tailwind": "pink-100" }, { "name": "Pink/200", "hex": "#fbcfe8", "tailwind": "pink-200" }, { "name": "Pink/300", "hex": "#f9a8d4", "tailwind": "pink-300" }, { "name": "Pink/400", "hex": "#f472b6", "tailwind": "pink-400" }, { "name": "Pink/500", "hex": "#ec4899", "tailwind": "pink-500" }, { "name": "Pink/600", "hex": "#db2777", "tailwind": "pink-600" }, { "name": "Pink/700", "hex": "#be185d", "tailwind": "pink-700" }, { "name": "Pink/800", "hex": "#9d174d", "tailwind": "pink-800" }, { "name": "Pink/900", "hex": "#831843", "tailwind": "pink-900" }, { "name": "Pink/950", "hex": "#500724", "tailwind": "pink-950" }, { "name": "Rose/50", "hex": "#fff1f2", "tailwind": "rose-50" }, { "name": "Rose/100", "hex": "#ffe4e6", "tailwind": "rose-100" }, { "name": "Rose/200", "hex": "#fecdd3", "tailwind": "rose-200" }, { "name": "Rose/300", "hex": "#fda4af", "tailwind": "rose-300" }, { "name": "Rose/400", "hex": "#fb7185", "tailwind": "rose-400" }, { "name": "Rose/500", "hex": "#f43f5e", "tailwind": "rose-500" }, { "name": "Rose/600", "hex": "#e11d48", "tailwind": "rose-600" }, { "name": "Rose/700", "hex": "#be123c", "tailwind": "rose-700" }, { "name": "Rose/800", "hex": "#9f1239", "tailwind": "rose-800" }, { "name": "Rose/900", "hex": "#881337", "tailwind": "rose-900" }, { "name": "Rose/950", "hex": "#4c0519", "tailwind": "rose-950" }, { "name": "Slate/50", "hex": "#f8fafc", "tailwind": "slate-50" }, { "name": "Slate/100", "hex": "#f1f5f9", "tailwind": "slate-100" }, { "name": "Slate/200", "hex": "#e2e8f0", "tailwind": "slate-200" }, { "name": "Slate/300", "hex": "#cbd5e1", "tailwind": "slate-300" }, { "name": "Slate/400", "hex": "#94a3b8", "tailwind": "slate-400" }, { "name": "Slate/500", "hex": "#64748b", "tailwind": "slate-500" }, { "name": "Slate/600", "hex": "#475569", "tailwind": "slate-600" }, { "name": "Slate/700", "hex": "#334155", "tailwind": "slate-700" }, { "name": "Slate/800", "hex": "#1e293b", "tailwind": "slate-800" }, { "name": "Slate/900", "hex": "#0f172a", "tailwind": "slate-900" }, { "name": "Slate/950", "hex": "#020617", "tailwind": "slate-950" }, { "name": "Gray/50", "hex": "#f9fafb", "tailwind": "gray-50" }, { "name": "Gray/100", "hex": "#f3f4f6", "tailwind": "gray-100" }, { "name": "Gray/200", "hex": "#e5e7eb", "tailwind": "gray-200" }, { "name": "Gray/300", "hex": "#d1d5db", "tailwind": "gray-300" }, { "name": "Gray/400", "hex": "#9ca3af", "tailwind": "gray-400" }, { "name": "Gray/500", "hex": "#6b7280", "tailwind": "gray-500" }, { "name": "Gray/600", "hex": "#4b5563", "tailwind": "gray-600" }, { "name": "Gray/700", "hex": "#374151", "tailwind": "gray-700" }, { "name": "Gray/800", "hex": "#1f2937", "tailwind": "gray-800" }, { "name": "Gray/900", "hex": "#111827", "tailwind": "gray-900" }, { "name": "Gray/950", "hex": "#030712", "tailwind": "gray-950" }, { "name": "Zinc/50", "hex": "#fafafa", "tailwind": "zinc-50" }, { "name": "Zinc/100", "hex": "#f4f4f5", "tailwind": "zinc-100" }, { "name": "Zinc/200", "hex": "#e4e4e7", "tailwind": "zinc-200" }, { "name": "Zinc/300", "hex": "#d4d4d8", "tailwind": "zinc-300" }, { "name": "Zinc/400", "hex": "#a1a1aa", "tailwind": "zinc-400" }, { "name": "Zinc/500", "hex": "#71717a", "tailwind": "zinc-500" }, { "name": "Zinc/600", "hex": "#52525b", "tailwind": "zinc-600" }, { "name": "Zinc/700", "hex": "#3f3f46", "tailwind": "zinc-700" }, { "name": "Zinc/800", "hex": "#27272a", "tailwind": "zinc-800" }, { "name": "Zinc/900", "hex": "#18181b", "tailwind": "zinc-900" }, { "name": "Zinc/950", "hex": "#09090b", "tailwind": "zinc-950" }, { "name": "Neutral/50", "hex": "#fafafa", "tailwind": "neutral-50" }, { "name": "Neutral/100", "hex": "#f5f5f5", "tailwind": "neutral-100" }, { "name": "Neutral/200", "hex": "#e5e5e5", "tailwind": "neutral-200" }, { "name": "Neutral/300", "hex": "#d4d4d4", "tailwind": "neutral-300" }, { "name": "Neutral/400", "hex": "#a3a3a3", "tailwind": "neutral-400" }, { "name": "Neutral/500", "hex": "#737373", "tailwind": "neutral-500" }, { "name": "Neutral/600", "hex": "#525252", "tailwind": "neutral-600" }, { "name": "Neutral/700", "hex": "#404040", "tailwind": "neutral-700" }, { "name": "Neutral/800", "hex": "#262626", "tailwind": "neutral-800" }, { "name": "Neutral/900", "hex": "#171717", "tailwind": "neutral-900" }, { "name": "Neutral/950", "hex": "#0a0a0a", "tailwind": "neutral-950" }, { "name": "Stone/50", "hex": "#fafaf9", "tailwind": "stone-50" }, { "name": "Stone/100", "hex": "#f5f5f4", "tailwind": "stone-100" }, { "name": "Stone/200", "hex": "#e7e5e4", "tailwind": "stone-200" }, { "name": "Stone/300", "hex": "#d6d3d1", "tailwind": "stone-300" }, { "name": "Stone/400", "hex": "#a8a29e", "tailwind": "stone-400" }, { "name": "Stone/500", "hex": "#78716c", "tailwind": "stone-500" }, { "name": "Stone/600", "hex": "#57534e", "tailwind": "stone-600" }, { "name": "Stone/700", "hex": "#44403c", "tailwind": "stone-700" }, { "name": "Stone/800", "hex": "#292524", "tailwind": "stone-800" }, { "name": "Stone/900", "hex": "#1c1917", "tailwind": "stone-900" }, { "name": "Stone/950", "hex": "#0c0a09", "tailwind": "stone-950" }, { "name": "Taupe/50", "hex": "#fbfaf9", "tailwind": "taupe-50" }, { "name": "Mauve/50", "hex": "#fafafa", "tailwind": "mauve-50" }, { "name": "Mist/50", "hex": "#f9fbfb", "tailwind": "mist-50" }, { "name": "Mist/100", "hex": "#f1f3f3", "tailwind": "mist-100" }, { "name": "Mist/200", "hex": "#e3e7e8", "tailwind": "mist-200" }, { "name": "Mist/300", "hex": "#d0d6d8", "tailwind": "mist-300" }, { "name": "Mist/400", "hex": "#9ca8ab", "tailwind": "mist-400" }, { "name": "Mist/500", "hex": "#67787c", "tailwind": "mist-500" }, { "name": "Mist/600", "hex": "#4b585b", "tailwind": "mist-600" }, { "name": "Mist/700", "hex": "#394447", "tailwind": "mist-700" }, { "name": "Mist/800", "hex": "#22292b", "tailwind": "mist-800" }, { "name": "Mist/900", "hex": "#161b1d", "tailwind": "mist-900" }, { "name": "Mist/950", "hex": "#090b0c", "tailwind": "mist-950" }, { "name": "Mauve/100", "hex": "#f3f1f3", "tailwind": "mauve-100" }, { "name": "Mauve/200", "hex": "#e7e4e7", "tailwind": "mauve-200" }, { "name": "Mauve/300", "hex": "#d7d0d7", "tailwind": "mauve-300" }, { "name": "Mauve/400", "hex": "#a89ea9", "tailwind": "mauve-400" }, { "name": "Mauve/500", "hex": "#79697b", "tailwind": "mauve-500" }, { "name": "Mauve/600", "hex": "#594c5b", "tailwind": "mauve-600" }, { "name": "Mauve/700", "hex": "#463947", "tailwind": "mauve-700" }, { "name": "Mauve/800", "hex": "#2a212c", "tailwind": "mauve-800" }, { "name": "Mauve/900", "hex": "#1d161e", "tailwind": "mauve-900" }, { "name": "Mauve/950", "hex": "#0c090c", "tailwind": "mauve-950" }, { "name": "Taupe/100", "hex": "#f3f1f1", "tailwind": "taupe-100" }, { "name": "Taupe/200", "hex": "#e8e4e3", "tailwind": "taupe-200" }, { "name": "Taupe/300", "hex": "#d8d2d0", "tailwind": "taupe-300" }, { "name": "Taupe/400", "hex": "#aba09c", "tailwind": "taupe-400" }, { "name": "Taupe/500", "hex": "#7c6d67", "tailwind": "taupe-500" }, { "name": "Taupe/600", "hex": "#5b4f4b", "tailwind": "taupe-600" }, { "name": "Taupe/700", "hex": "#473c39", "tailwind": "taupe-700" }, { "name": "Taupe/800", "hex": "#2b2422", "tailwind": "taupe-800" }, { "name": "Taupe/900", "hex": "#1d1816", "tailwind": "taupe-900" }, { "name": "Taupe/950", "hex": "#0c0a09", "tailwind": "taupe-950" }, { "name": "Olive/50", "hex": "#fbfbf9", "tailwind": "olive-50" }, { "name": "Olive/100", "hex": "#f4f4f0", "tailwind": "olive-100" }, { "name": "Olive/200", "hex": "#e8e8e3", "tailwind": "olive-200" }, { "name": "Olive/300", "hex": "#d8d8d0", "tailwind": "olive-300" }, { "name": "Olive/400", "hex": "#abab9c", "tailwind": "olive-400" }, { "name": "Olive/500", "hex": "#7c7c67", "tailwind": "olive-500" }, { "name": "Olive/600", "hex": "#5b5b4b", "tailwind": "olive-600" }, { "name": "Olive/700", "hex": "#474739", "tailwind": "olive-700" }, { "name": "Olive/800", "hex": "#2b2b22", "tailwind": "olive-800" }, { "name": "Olive/900", "hex": "#1d1d16", "tailwind": "olive-900" }, { "name": "Olive/950", "hex": "#0c0c09", "tailwind": "olive-950" }, { "name": "Nethesis/Gray", "hex": "#231f20", "tailwind": null }, { "name": "Nethesis/Gray MyNethesis", "hex": "#1e1e1c", "tailwind": null }, { "name": "Nethesis/Light blue", "hex": "#009edb", "tailwind": null }, { "name": "Nethesis/Dark blue", "hex": "#057bbc", "tailwind": null }, { "name": "Nethesis/Light gray bg", "hex": "#f3f3f3", "tailwind": null }, { "name": "White", "hex": "#ffffff", "tailwind": "white" }, { "name": "Black", "hex": "#000000", "tailwind": "black" }, { "name": "Black 5%", "hex": "#0000000d", "tailwind": "black/5" }, { "name": "Gray 500 5%", "hex": "#6b72800d", "tailwind": "gray-500/5" }, { "name": "Gray 500 10%", "hex": "#6b72801a", "tailwind": "gray-500/10" }, { "name": "Opacity/Gray-500 A75", "hex": "#6b7280bf", "tailwind": "gray-500/75" }, { "name": "Opacity/Gray-700 A75", "hex": "#374151bf", "tailwind": "gray-700/75" }, { "name": "Opacity/Indigo-300 A10", "hex": "#a5b4fc1a", "tailwind": "indigo-300/10" }, { "name": "Opacity/Indigo-300 A20", "hex": "#a5b4fc33", "tailwind": "indigo-300/20" }, { "name": "Opacity/Indigo-500 A10", "hex": "#6366f11a", "tailwind": "indigo-500/10" }, { "name": "Opacity/Indigo-500 A20", "hex": "#6366f133", "tailwind": "indigo-500/20" }, { "name": "Opacity/Gray-200 A70", "hex": "#e5e7ebb2", "tailwind": "gray-200/70" }, { "name": "Opacity/Gray-600 A30", "hex": "#4b55634d", "tailwind": "gray-600/30" } ] }