[{"data":1,"prerenderedAt":1619},["ShallowReactive",2],{"guide-design-color-systems":3},{"id":4,"title":5,"body":6,"date":1611,"description":1612,"extension":1613,"meta":1614,"navigation":362,"path":1615,"readingTime":384,"seo":1616,"stem":1617,"__hash__":1618},"guides\u002Fguides\u002Fdesign-color-systems.md","Design Color Systems",{"type":7,"value":8,"toc":1583},"minimark",[9,14,18,21,24,28,47,52,252,255,259,273,277,284,288,517,521,680,683,687,726,730,733,737,908,912,1027,1031,1034,1113,1190,1200,1204,1207,1211,1365,1369,1417,1421,1424,1428,1474,1478,1481,1514,1518,1528,1532,1562,1566,1579],[10,11,13],"h2",{"id":12},"what-is-a-design-color-system","What Is a Design Color System",[15,16,17],"p",{},"A design color system is a structured set of color tokens that scale across your entire application. Unlike a simple palette, a color system assigns semantic meaning to each token so that every color maps to a specific purpose—primary actions, surfaces, danger states, and more.",[15,19,20],{},"The key difference is abstraction. A palette says \"here are six colors.\" A system says \"here is what each color means, how it adapts to dark mode, and where it appears in the interface.\" This makes your design predictable, maintainable, and accessible as your project grows.",[15,22,23],{},"Without a system, teams pick colors ad hoc. The result: five slightly different blues, inconsistent hover states, and contrast failures nobody catches until after launch.",[10,25,27],{"id":26},"semantic-naming","Semantic Naming",[15,29,30,31,35,36,39,40,35,43,46],{},"Semantic naming means tokens describe purpose, not appearance. Instead of ",[32,33,34],"code",{},"blue-500",", you write ",[32,37,38],{},"primary",". Instead of ",[32,41,42],{},"red-600",[32,44,45],{},"danger",".",[48,49,51],"h3",{"id":50},"core-semantic-tokens","Core Semantic Tokens",[53,54,55,71],"table",{},[56,57,58],"thead",{},[59,60,61,65,68],"tr",{},[62,63,64],"th",{},"Token",[62,66,67],{},"Purpose",[62,69,70],{},"Example Value",[72,73,74,89,104,119,134,149,164,179,194,208,223,238],"tbody",{},[59,75,76,81,84],{},[77,78,79],"td",{},[32,80,38],{},[77,82,83],{},"Main brand actions, links",[77,85,86],{},[32,87,88],{},"#3B82F6",[59,90,91,96,99],{},[77,92,93],{},[32,94,95],{},"primary-hover",[77,97,98],{},"Hovered primary state",[77,100,101],{},[32,102,103],{},"#2563EB",[59,105,106,111,114],{},[77,107,108],{},[32,109,110],{},"secondary",[77,112,113],{},"Supporting actions",[77,115,116],{},[32,117,118],{},"#14B8A6",[59,120,121,126,129],{},[77,122,123],{},[32,124,125],{},"surface",[77,127,128],{},"Card and panel backgrounds",[77,130,131],{},[32,132,133],{},"#FFFFFF",[59,135,136,141,144],{},[77,137,138],{},[32,139,140],{},"surface-alt",[77,142,143],{},"Alternate surface (sidebar, header)",[77,145,146],{},[32,147,148],{},"#F1F5F9",[59,150,151,156,159],{},[77,152,153],{},[32,154,155],{},"text",[77,157,158],{},"Primary body text",[77,160,161],{},[32,162,163],{},"#0F172A",[59,165,166,171,174],{},[77,167,168],{},[32,169,170],{},"text-muted",[77,172,173],{},"Secondary, helper text",[77,175,176],{},[32,177,178],{},"#64748B",[59,180,181,186,189],{},[77,182,183],{},[32,184,185],{},"border",[77,187,188],{},"Dividers, outlines",[77,190,191],{},[32,192,193],{},"#E2E8F0",[59,195,196,200,203],{},[77,197,198],{},[32,199,45],{},[77,201,202],{},"Errors, destructive actions",[77,204,205],{},[32,206,207],{},"#EF4444",[59,209,210,215,218],{},[77,211,212],{},[32,213,214],{},"success",[77,216,217],{},"Confirmations, valid states",[77,219,220],{},[32,221,222],{},"#10B981",[59,224,225,230,233],{},[77,226,227],{},[32,228,229],{},"warning",[77,231,232],{},"Caution states",[77,234,235],{},[32,236,237],{},"#F59E0B",[59,239,240,245,248],{},[77,241,242],{},[32,243,244],{},"info",[77,246,247],{},"Informational highlights",[77,249,250],{},[32,251,88],{},[15,253,254],{},"Semantic tokens decouple your CSS from specific color values. When you rebrand or adjust a shade, you change the token definition once—not hundreds of class references.",[48,256,258],{"id":257},"why-not-use-raw-color-names","Why Not Use Raw Color Names",[15,260,261,262,264,265,268,269,272],{},"Raw names like ",[32,263,34],{}," or ",[32,266,267],{},"gray-200"," couple your styles to a specific palette. If you switch from a blue brand to a green one, you must find and replace every ",[32,270,271],{},"blue-*"," reference. With semantic tokens, you update one variable and every component adapts.",[10,274,276],{"id":275},"css-custom-properties-approach","CSS Custom Properties Approach",[15,278,279,280,283],{},"CSS custom properties (variables) are the simplest way to implement a color system. Define tokens on ",[32,281,282],{},":root",", reference them everywhere, and override them for dark mode.",[48,285,287],{"id":286},"defining-tokens","Defining Tokens",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-css shiki shiki-themes github-light github-dark",":root {\n  \u002F* Brand *\u002F\n  --color-primary: #3B82F6;\n  --color-primary-hover: #2563EB;\n  --color-primary-active: #1D4ED8;\n\n  \u002F* Surfaces *\u002F\n  --color-surface: #FFFFFF;\n  --color-surface-alt: #F1F5F9;\n\n  \u002F* Text *\u002F\n  --color-text: #0F172A;\n  --color-text-muted: #64748B;\n\n  \u002F* Borders *\u002F\n  --color-border: #E2E8F0;\n\n  \u002F* Semantic *\u002F\n  --color-danger: #EF4444;\n  --color-success: #10B981;\n  --color-warning: #F59E0B;\n  --color-info: #3B82F6;\n}\n","css","",[32,296,297,309,316,332,344,357,364,370,382,394,399,405,417,429,434,440,452,457,463,475,487,499,511],{"__ignoreMap":294},[298,299,302,305],"span",{"class":300,"line":301},"line",1,[298,303,282],{"class":304},"sScJk",[298,306,308],{"class":307},"sVt8B"," {\n",[298,310,312],{"class":300,"line":311},2,[298,313,315],{"class":314},"sJ8bj","  \u002F* Brand *\u002F\n",[298,317,319,323,326,329],{"class":300,"line":318},3,[298,320,322],{"class":321},"s4XuR","  --color-primary",[298,324,325],{"class":307},": ",[298,327,88],{"class":328},"sj4cs",[298,330,331],{"class":307},";\n",[298,333,335,338,340,342],{"class":300,"line":334},4,[298,336,337],{"class":321},"  --color-primary-hover",[298,339,325],{"class":307},[298,341,103],{"class":328},[298,343,331],{"class":307},[298,345,347,350,352,355],{"class":300,"line":346},5,[298,348,349],{"class":321},"  --color-primary-active",[298,351,325],{"class":307},[298,353,354],{"class":328},"#1D4ED8",[298,356,331],{"class":307},[298,358,360],{"class":300,"line":359},6,[298,361,363],{"emptyLinePlaceholder":362},true,"\n",[298,365,367],{"class":300,"line":366},7,[298,368,369],{"class":314},"  \u002F* Surfaces *\u002F\n",[298,371,373,376,378,380],{"class":300,"line":372},8,[298,374,375],{"class":321},"  --color-surface",[298,377,325],{"class":307},[298,379,133],{"class":328},[298,381,331],{"class":307},[298,383,385,388,390,392],{"class":300,"line":384},9,[298,386,387],{"class":321},"  --color-surface-alt",[298,389,325],{"class":307},[298,391,148],{"class":328},[298,393,331],{"class":307},[298,395,397],{"class":300,"line":396},10,[298,398,363],{"emptyLinePlaceholder":362},[298,400,402],{"class":300,"line":401},11,[298,403,404],{"class":314},"  \u002F* Text *\u002F\n",[298,406,408,411,413,415],{"class":300,"line":407},12,[298,409,410],{"class":321},"  --color-text",[298,412,325],{"class":307},[298,414,163],{"class":328},[298,416,331],{"class":307},[298,418,420,423,425,427],{"class":300,"line":419},13,[298,421,422],{"class":321},"  --color-text-muted",[298,424,325],{"class":307},[298,426,178],{"class":328},[298,428,331],{"class":307},[298,430,432],{"class":300,"line":431},14,[298,433,363],{"emptyLinePlaceholder":362},[298,435,437],{"class":300,"line":436},15,[298,438,439],{"class":314},"  \u002F* Borders *\u002F\n",[298,441,443,446,448,450],{"class":300,"line":442},16,[298,444,445],{"class":321},"  --color-border",[298,447,325],{"class":307},[298,449,193],{"class":328},[298,451,331],{"class":307},[298,453,455],{"class":300,"line":454},17,[298,456,363],{"emptyLinePlaceholder":362},[298,458,460],{"class":300,"line":459},18,[298,461,462],{"class":314},"  \u002F* Semantic *\u002F\n",[298,464,466,469,471,473],{"class":300,"line":465},19,[298,467,468],{"class":321},"  --color-danger",[298,470,325],{"class":307},[298,472,207],{"class":328},[298,474,331],{"class":307},[298,476,478,481,483,485],{"class":300,"line":477},20,[298,479,480],{"class":321},"  --color-success",[298,482,325],{"class":307},[298,484,222],{"class":328},[298,486,331],{"class":307},[298,488,490,493,495,497],{"class":300,"line":489},21,[298,491,492],{"class":321},"  --color-warning",[298,494,325],{"class":307},[298,496,237],{"class":328},[298,498,331],{"class":307},[298,500,502,505,507,509],{"class":300,"line":501},22,[298,503,504],{"class":321},"  --color-info",[298,506,325],{"class":307},[298,508,88],{"class":328},[298,510,331],{"class":307},[298,512,514],{"class":300,"line":513},23,[298,515,516],{"class":307},"}\n",[48,518,520],{"id":519},"using-tokens-in-components","Using Tokens in Components",[289,522,524],{"className":291,"code":523,"language":293,"meta":294,"style":294},".button-primary {\n  background-color: var(--color-primary);\n  color: #FFFFFF;\n  border: none;\n}\n\n.button-primary:hover {\n  background-color: var(--color-primary-hover);\n}\n\n.card {\n  background-color: var(--color-surface);\n  border: 1px solid var(--color-border);\n  color: var(--color-text);\n}\n",[32,525,526,533,552,563,575,579,583,590,605,609,613,620,635,661,676],{"__ignoreMap":294},[298,527,528,531],{"class":300,"line":301},[298,529,530],{"class":304},".button-primary",[298,532,308],{"class":307},[298,534,535,538,540,543,546,549],{"class":300,"line":311},[298,536,537],{"class":328},"  background-color",[298,539,325],{"class":307},[298,541,542],{"class":328},"var",[298,544,545],{"class":307},"(",[298,547,548],{"class":321},"--color-primary",[298,550,551],{"class":307},");\n",[298,553,554,557,559,561],{"class":300,"line":318},[298,555,556],{"class":328},"  color",[298,558,325],{"class":307},[298,560,133],{"class":328},[298,562,331],{"class":307},[298,564,565,568,570,573],{"class":300,"line":334},[298,566,567],{"class":328},"  border",[298,569,325],{"class":307},[298,571,572],{"class":328},"none",[298,574,331],{"class":307},[298,576,577],{"class":300,"line":346},[298,578,516],{"class":307},[298,580,581],{"class":300,"line":359},[298,582,363],{"emptyLinePlaceholder":362},[298,584,585,588],{"class":300,"line":366},[298,586,587],{"class":304},".button-primary:hover",[298,589,308],{"class":307},[298,591,592,594,596,598,600,603],{"class":300,"line":372},[298,593,537],{"class":328},[298,595,325],{"class":307},[298,597,542],{"class":328},[298,599,545],{"class":307},[298,601,602],{"class":321},"--color-primary-hover",[298,604,551],{"class":307},[298,606,607],{"class":300,"line":384},[298,608,516],{"class":307},[298,610,611],{"class":300,"line":396},[298,612,363],{"emptyLinePlaceholder":362},[298,614,615,618],{"class":300,"line":401},[298,616,617],{"class":304},".card",[298,619,308],{"class":307},[298,621,622,624,626,628,630,633],{"class":300,"line":407},[298,623,537],{"class":328},[298,625,325],{"class":307},[298,627,542],{"class":328},[298,629,545],{"class":307},[298,631,632],{"class":321},"--color-surface",[298,634,551],{"class":307},[298,636,637,639,641,644,648,651,654,656,659],{"class":300,"line":419},[298,638,567],{"class":328},[298,640,325],{"class":307},[298,642,643],{"class":328},"1",[298,645,647],{"class":646},"szBVR","px",[298,649,650],{"class":328}," solid",[298,652,653],{"class":328}," var",[298,655,545],{"class":307},[298,657,658],{"class":321},"--color-border",[298,660,551],{"class":307},[298,662,663,665,667,669,671,674],{"class":300,"line":431},[298,664,556],{"class":328},[298,666,325],{"class":307},[298,668,542],{"class":328},[298,670,545],{"class":307},[298,672,673],{"class":321},"--color-text",[298,675,551],{"class":307},[298,677,678],{"class":300,"line":436},[298,679,516],{"class":307},[15,681,682],{},"When you need to rebrand or support dark mode, you only redefine the variables—not the component styles.",[48,684,686],{"id":685},"avoiding-common-pitfalls","Avoiding Common Pitfalls",[688,689,690,704,717],"ul",{},[691,692,693,325,697,700,701,703],"li",{},[694,695,696],"strong",{},"Don't nest variables deeply",[32,698,699],{},"--color-button-bg: var(--color-primary)"," adds indirection without value. Reference ",[32,702,548],{}," directly.",[691,705,706,709,710,712,713,716],{},[694,707,708],{},"Keep the naming flat",": A two-level hierarchy like ",[32,711,548],{}," is enough. Three levels (",[32,714,715],{},"--color-action-primary-bg",") become unwieldy fast.",[691,718,719,325,722,725],{},[694,720,721],{},"Always define a fallback",[32,723,724],{},"var(--color-primary, #3B82F6)"," prevents breakage if a token goes missing.",[10,727,729],{"id":728},"tailwind-theme-extension","Tailwind Theme Extension",[15,731,732],{},"Tailwind CSS lets you extend its default theme with custom colors. This is the most productive way to integrate a color system if you already use Tailwind.",[48,734,736],{"id":735},"basic-extension","Basic Extension",[289,738,742],{"className":739,"code":740,"language":741,"meta":294,"style":294},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          DEFAULT: '#3B82F6',\n          hover: '#2563EB',\n          active: '#1D4ED8',\n          light: '#DBEAFE',\n        },\n        surface: {\n          DEFAULT: '#FFFFFF',\n          alt: '#F1F5F9',\n        },\n        danger: '#EF4444',\n        success: '#10B981',\n        warning: '#F59E0B',\n      },\n    },\n  },\n}\n","javascript",[32,743,744,749,764,769,774,779,784,796,806,816,826,831,836,845,855,859,869,879,889,894,899,904],{"__ignoreMap":294},[298,745,746],{"class":300,"line":301},[298,747,748],{"class":314},"\u002F\u002F tailwind.config.js\n",[298,750,751,754,756,759,762],{"class":300,"line":311},[298,752,753],{"class":328},"module",[298,755,46],{"class":307},[298,757,758],{"class":328},"exports",[298,760,761],{"class":646}," =",[298,763,308],{"class":307},[298,765,766],{"class":300,"line":318},[298,767,768],{"class":307},"  theme: {\n",[298,770,771],{"class":300,"line":334},[298,772,773],{"class":307},"    extend: {\n",[298,775,776],{"class":300,"line":346},[298,777,778],{"class":307},"      colors: {\n",[298,780,781],{"class":300,"line":359},[298,782,783],{"class":307},"        primary: {\n",[298,785,786,789,793],{"class":300,"line":366},[298,787,788],{"class":307},"          DEFAULT: ",[298,790,792],{"class":791},"sZZnC","'#3B82F6'",[298,794,795],{"class":307},",\n",[298,797,798,801,804],{"class":300,"line":372},[298,799,800],{"class":307},"          hover: ",[298,802,803],{"class":791},"'#2563EB'",[298,805,795],{"class":307},[298,807,808,811,814],{"class":300,"line":384},[298,809,810],{"class":307},"          active: ",[298,812,813],{"class":791},"'#1D4ED8'",[298,815,795],{"class":307},[298,817,818,821,824],{"class":300,"line":396},[298,819,820],{"class":307},"          light: ",[298,822,823],{"class":791},"'#DBEAFE'",[298,825,795],{"class":307},[298,827,828],{"class":300,"line":401},[298,829,830],{"class":307},"        },\n",[298,832,833],{"class":300,"line":407},[298,834,835],{"class":307},"        surface: {\n",[298,837,838,840,843],{"class":300,"line":419},[298,839,788],{"class":307},[298,841,842],{"class":791},"'#FFFFFF'",[298,844,795],{"class":307},[298,846,847,850,853],{"class":300,"line":431},[298,848,849],{"class":307},"          alt: ",[298,851,852],{"class":791},"'#F1F5F9'",[298,854,795],{"class":307},[298,856,857],{"class":300,"line":436},[298,858,830],{"class":307},[298,860,861,864,867],{"class":300,"line":442},[298,862,863],{"class":307},"        danger: ",[298,865,866],{"class":791},"'#EF4444'",[298,868,795],{"class":307},[298,870,871,874,877],{"class":300,"line":454},[298,872,873],{"class":307},"        success: ",[298,875,876],{"class":791},"'#10B981'",[298,878,795],{"class":307},[298,880,881,884,887],{"class":300,"line":459},[298,882,883],{"class":307},"        warning: ",[298,885,886],{"class":791},"'#F59E0B'",[298,888,795],{"class":307},[298,890,891],{"class":300,"line":465},[298,892,893],{"class":307},"      },\n",[298,895,896],{"class":300,"line":477},[298,897,898],{"class":307},"    },\n",[298,900,901],{"class":300,"line":489},[298,902,903],{"class":307},"  },\n",[298,905,906],{"class":300,"line":501},[298,907,516],{"class":307},[48,909,911],{"id":910},"using-custom-colors-in-markup","Using Custom Colors in Markup",[289,913,917],{"className":914,"code":915,"language":916,"meta":294,"style":294},"language-html shiki shiki-themes github-light github-dark","\u003Cbutton class=\"bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded\">\n  Save Changes\n\u003C\u002Fbutton>\n\n\u003Cdiv class=\"bg-surface border border-gray-200 p-6 rounded-lg\">\n  \u003Cp class=\"text-gray-900\">Card content goes here.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cspan class=\"text-danger font-medium\">Error: Invalid email address\u003C\u002Fspan>\n","html",[32,918,919,940,945,954,958,974,995,1003,1007],{"__ignoreMap":294},[298,920,921,924,928,931,934,937],{"class":300,"line":301},[298,922,923],{"class":307},"\u003C",[298,925,927],{"class":926},"s9eBZ","button",[298,929,930],{"class":304}," class",[298,932,933],{"class":307},"=",[298,935,936],{"class":791},"\"bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded\"",[298,938,939],{"class":307},">\n",[298,941,942],{"class":300,"line":311},[298,943,944],{"class":307},"  Save Changes\n",[298,946,947,950,952],{"class":300,"line":318},[298,948,949],{"class":307},"\u003C\u002F",[298,951,927],{"class":926},[298,953,939],{"class":307},[298,955,956],{"class":300,"line":334},[298,957,363],{"emptyLinePlaceholder":362},[298,959,960,962,965,967,969,972],{"class":300,"line":346},[298,961,923],{"class":307},[298,963,964],{"class":926},"div",[298,966,930],{"class":304},[298,968,933],{"class":307},[298,970,971],{"class":791},"\"bg-surface border border-gray-200 p-6 rounded-lg\"",[298,973,939],{"class":307},[298,975,976,979,981,983,985,988,991,993],{"class":300,"line":359},[298,977,978],{"class":307},"  \u003C",[298,980,15],{"class":926},[298,982,930],{"class":304},[298,984,933],{"class":307},[298,986,987],{"class":791},"\"text-gray-900\"",[298,989,990],{"class":307},">Card content goes here.\u003C\u002F",[298,992,15],{"class":926},[298,994,939],{"class":307},[298,996,997,999,1001],{"class":300,"line":366},[298,998,949],{"class":307},[298,1000,964],{"class":926},[298,1002,939],{"class":307},[298,1004,1005],{"class":300,"line":372},[298,1006,363],{"emptyLinePlaceholder":362},[298,1008,1009,1011,1013,1015,1017,1020,1023,1025],{"class":300,"line":384},[298,1010,923],{"class":307},[298,1012,298],{"class":926},[298,1014,930],{"class":304},[298,1016,933],{"class":307},[298,1018,1019],{"class":791},"\"text-danger font-medium\"",[298,1021,1022],{"class":307},">Error: Invalid email address\u003C\u002F",[298,1024,298],{"class":926},[298,1026,939],{"class":307},[48,1028,1030],{"id":1029},"css-variables-with-tailwind","CSS Variables with Tailwind",[15,1032,1033],{},"For maximum flexibility—especially dark mode—combine Tailwind's theme extension with CSS variables:",[289,1035,1037],{"className":739,"code":1036,"language":741,"meta":294,"style":294},"\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: 'rgb(var(--color-primary) \u002F \u003Calpha-value>)',\n        surface: 'rgb(var(--color-surface) \u002F \u003Calpha-value>)',\n        text: 'rgb(var(--color-text) \u002F \u003Calpha-value>)',\n      },\n    },\n  },\n}\n",[32,1038,1039,1043,1055,1059,1063,1067,1077,1087,1097,1101,1105,1109],{"__ignoreMap":294},[298,1040,1041],{"class":300,"line":301},[298,1042,748],{"class":314},[298,1044,1045,1047,1049,1051,1053],{"class":300,"line":311},[298,1046,753],{"class":328},[298,1048,46],{"class":307},[298,1050,758],{"class":328},[298,1052,761],{"class":646},[298,1054,308],{"class":307},[298,1056,1057],{"class":300,"line":318},[298,1058,768],{"class":307},[298,1060,1061],{"class":300,"line":334},[298,1062,773],{"class":307},[298,1064,1065],{"class":300,"line":346},[298,1066,778],{"class":307},[298,1068,1069,1072,1075],{"class":300,"line":359},[298,1070,1071],{"class":307},"        primary: ",[298,1073,1074],{"class":791},"'rgb(var(--color-primary) \u002F \u003Calpha-value>)'",[298,1076,795],{"class":307},[298,1078,1079,1082,1085],{"class":300,"line":366},[298,1080,1081],{"class":307},"        surface: ",[298,1083,1084],{"class":791},"'rgb(var(--color-surface) \u002F \u003Calpha-value>)'",[298,1086,795],{"class":307},[298,1088,1089,1092,1095],{"class":300,"line":372},[298,1090,1091],{"class":307},"        text: ",[298,1093,1094],{"class":791},"'rgb(var(--color-text) \u002F \u003Calpha-value>)'",[298,1096,795],{"class":307},[298,1098,1099],{"class":300,"line":384},[298,1100,893],{"class":307},[298,1102,1103],{"class":300,"line":396},[298,1104,898],{"class":307},[298,1106,1107],{"class":300,"line":401},[298,1108,903],{"class":307},[298,1110,1111],{"class":300,"line":407},[298,1112,516],{"class":307},[289,1114,1116],{"className":291,"code":1115,"language":293,"meta":294,"style":294},":root {\n  --color-primary: 59, 130, 246;\n  --color-surface: 255, 255, 255;\n  --color-text: 15, 23, 42;\n}\n",[32,1117,1118,1124,1146,1165,1186],{"__ignoreMap":294},[298,1119,1120,1122],{"class":300,"line":301},[298,1121,282],{"class":304},[298,1123,308],{"class":307},[298,1125,1126,1128,1130,1133,1136,1139,1141,1144],{"class":300,"line":311},[298,1127,322],{"class":321},[298,1129,325],{"class":307},[298,1131,1132],{"class":328},"59",[298,1134,1135],{"class":307},", ",[298,1137,1138],{"class":328},"130",[298,1140,1135],{"class":307},[298,1142,1143],{"class":328},"246",[298,1145,331],{"class":307},[298,1147,1148,1150,1152,1155,1157,1159,1161,1163],{"class":300,"line":318},[298,1149,375],{"class":321},[298,1151,325],{"class":307},[298,1153,1154],{"class":328},"255",[298,1156,1135],{"class":307},[298,1158,1154],{"class":328},[298,1160,1135],{"class":307},[298,1162,1154],{"class":328},[298,1164,331],{"class":307},[298,1166,1167,1169,1171,1174,1176,1179,1181,1184],{"class":300,"line":334},[298,1168,410],{"class":321},[298,1170,325],{"class":307},[298,1172,1173],{"class":328},"15",[298,1175,1135],{"class":307},[298,1177,1178],{"class":328},"23",[298,1180,1135],{"class":307},[298,1182,1183],{"class":328},"42",[298,1185,331],{"class":307},[298,1187,1188],{"class":300,"line":346},[298,1189,516],{"class":307},[15,1191,1192,1193,1196,1197,46],{},"The ",[32,1194,1195],{},"\u003Calpha-value>"," placeholder enables Tailwind's opacity modifiers like ",[32,1198,1199],{},"bg-primary\u002F50",[10,1201,1203],{"id":1202},"dark-mode-considerations","Dark Mode Considerations",[15,1205,1206],{},"Dark mode is not just inverted colors. It requires deliberate adjustments to saturation, lightness, and contrast.",[48,1208,1210],{"id":1209},"define-dark-overrides","Define Dark Overrides",[289,1212,1214],{"className":291,"code":1213,"language":293,"meta":294,"style":294},":root {\n  --color-surface: #FFFFFF;\n  --color-surface-alt: #F1F5F9;\n  --color-text: #0F172A;\n  --color-text-muted: #64748B;\n  --color-border: #E2E8F0;\n  --color-primary: #3B82F6;\n}\n\n.dark {\n  --color-surface: #0F172A;\n  --color-surface-alt: #1E293B;\n  --color-text: #F1F5F9;\n  --color-text-muted: #94A3B8;\n  --color-border: #334155;\n  --color-primary: #60A5FA;\n}\n",[32,1215,1216,1222,1232,1242,1252,1262,1272,1282,1286,1290,1297,1307,1318,1328,1339,1350,1361],{"__ignoreMap":294},[298,1217,1218,1220],{"class":300,"line":301},[298,1219,282],{"class":304},[298,1221,308],{"class":307},[298,1223,1224,1226,1228,1230],{"class":300,"line":311},[298,1225,375],{"class":321},[298,1227,325],{"class":307},[298,1229,133],{"class":328},[298,1231,331],{"class":307},[298,1233,1234,1236,1238,1240],{"class":300,"line":318},[298,1235,387],{"class":321},[298,1237,325],{"class":307},[298,1239,148],{"class":328},[298,1241,331],{"class":307},[298,1243,1244,1246,1248,1250],{"class":300,"line":334},[298,1245,410],{"class":321},[298,1247,325],{"class":307},[298,1249,163],{"class":328},[298,1251,331],{"class":307},[298,1253,1254,1256,1258,1260],{"class":300,"line":346},[298,1255,422],{"class":321},[298,1257,325],{"class":307},[298,1259,178],{"class":328},[298,1261,331],{"class":307},[298,1263,1264,1266,1268,1270],{"class":300,"line":359},[298,1265,445],{"class":321},[298,1267,325],{"class":307},[298,1269,193],{"class":328},[298,1271,331],{"class":307},[298,1273,1274,1276,1278,1280],{"class":300,"line":366},[298,1275,322],{"class":321},[298,1277,325],{"class":307},[298,1279,88],{"class":328},[298,1281,331],{"class":307},[298,1283,1284],{"class":300,"line":372},[298,1285,516],{"class":307},[298,1287,1288],{"class":300,"line":384},[298,1289,363],{"emptyLinePlaceholder":362},[298,1291,1292,1295],{"class":300,"line":396},[298,1293,1294],{"class":304},".dark",[298,1296,308],{"class":307},[298,1298,1299,1301,1303,1305],{"class":300,"line":401},[298,1300,375],{"class":321},[298,1302,325],{"class":307},[298,1304,163],{"class":328},[298,1306,331],{"class":307},[298,1308,1309,1311,1313,1316],{"class":300,"line":407},[298,1310,387],{"class":321},[298,1312,325],{"class":307},[298,1314,1315],{"class":328},"#1E293B",[298,1317,331],{"class":307},[298,1319,1320,1322,1324,1326],{"class":300,"line":419},[298,1321,410],{"class":321},[298,1323,325],{"class":307},[298,1325,148],{"class":328},[298,1327,331],{"class":307},[298,1329,1330,1332,1334,1337],{"class":300,"line":431},[298,1331,422],{"class":321},[298,1333,325],{"class":307},[298,1335,1336],{"class":328},"#94A3B8",[298,1338,331],{"class":307},[298,1340,1341,1343,1345,1348],{"class":300,"line":436},[298,1342,445],{"class":321},[298,1344,325],{"class":307},[298,1346,1347],{"class":328},"#334155",[298,1349,331],{"class":307},[298,1351,1352,1354,1356,1359],{"class":300,"line":442},[298,1353,322],{"class":321},[298,1355,325],{"class":307},[298,1357,1358],{"class":328},"#60A5FA",[298,1360,331],{"class":307},[298,1362,1363],{"class":300,"line":454},[298,1364,516],{"class":307},[48,1366,1368],{"id":1367},"key-dark-mode-principles","Key Dark Mode Principles",[1370,1371,1372,1378,1384,1398,1411],"ol",{},[691,1373,1374,1377],{},[694,1375,1376],{},"Avoid pure black (#000000)",": Dark gray (#0F172A or #121212) reduces eye strain and produces better perceived contrast.",[691,1379,1380,1383],{},[694,1381,1382],{},"Desaturate accents",": Colors appear more vibrant on dark backgrounds. Reduce saturation by 10–20% in dark mode.",[691,1385,1386,1389,1390,1393,1394,1397],{},[694,1387,1388],{},"Lighten primary colors",": Your brand blue may need to shift from ",[32,1391,1392],{},"hsl(217, 91%, 60%)"," to ",[32,1395,1396],{},"hsl(217, 91%, 70%)"," to maintain visual weight against dark surfaces.",[691,1399,1400,1403,1404,1407,1408,1410],{},[694,1401,1402],{},"Elevate surfaces with lighter shades",": In dark mode, higher elevation = lighter surface. Use ",[32,1405,1406],{},"--color-surface-alt"," above ",[32,1409,632],{}," for stacked elements like modals.",[691,1412,1413,1416],{},[694,1414,1415],{},"Test all interactive states",": Hover, focus, and active states often need distinct dark mode values—do not assume light-mode values will work.",[10,1418,1420],{"id":1419},"wcag-contrast-requirements","WCAG Contrast Requirements",[15,1422,1423],{},"Accessibility is not optional. WCAG 2.1 defines minimum contrast ratios you must meet.",[48,1425,1427],{"id":1426},"minimum-ratios","Minimum Ratios",[53,1429,1430,1446],{},[56,1431,1432],{},[59,1433,1434,1437,1440,1443],{},[62,1435,1436],{},"Level",[62,1438,1439],{},"Normal Text",[62,1441,1442],{},"Large Text",[62,1444,1445],{},"UI Components",[72,1447,1448,1461],{},[59,1449,1450,1453,1456,1459],{},[77,1451,1452],{},"AA",[77,1454,1455],{},"4.5:1",[77,1457,1458],{},"3:1",[77,1460,1458],{},[59,1462,1463,1466,1469,1471],{},[77,1464,1465],{},"AAA",[77,1467,1468],{},"7:1",[77,1470,1455],{},[77,1472,1473],{},"—",[48,1475,1477],{"id":1476},"practical-checking","Practical Checking",[15,1479,1480],{},"Validate every text-and-background pair in both light and dark modes. Common failures include:",[688,1482,1483,1494,1508],{},[691,1484,1485,325,1488,1490,1491,1493],{},[694,1486,1487],{},"Muted text on light backgrounds",[32,1489,1336],{}," on ",[32,1492,133],{}," yields 2.9:1 — fails AA for normal text.",[691,1495,1496,325,1499,1490,1501,1503,1504,1507],{},[694,1497,1498],{},"Primary-colored text on white",[32,1500,88],{},[32,1502,133],{}," yields 3.6:1 — fails AA for normal text. Use the darker ",[32,1505,1506],{},"2563EB"," (5.7:1) instead.",[691,1509,1510,1513],{},[694,1511,1512],{},"White text on dark surfaces",": Usually passes, but verify—thin fonts at small sizes require higher ratios.",[48,1515,1517],{"id":1516},"automate-contrast-checks","Automate Contrast Checks",[15,1519,1520,1521,264,1524,1527],{},"Add a build step or linter rule that flags contrast failures. Tools like ",[32,1522,1523],{},"stylelint-a11y",[32,1525,1526],{},"eslint-plugin-jsx-a11y"," catch issues before they reach production.",[10,1529,1531],{"id":1530},"key-takeaways","Key Takeaways",[688,1533,1534,1537,1547,1550,1553,1556,1559],{},[691,1535,1536],{},"A design color system assigns semantic meaning to every color token so each shade maps to a purpose",[691,1538,1539,1540,1135,1542,1135,1544,1546],{},"Semantic naming (",[32,1541,38],{},[32,1543,45],{},[32,1545,125],{},") decouples styles from specific color values",[691,1548,1549],{},"CSS custom properties let you redefine tokens once for dark mode instead of updating every component",[691,1551,1552],{},"Tailwind theme extension integrates your token system directly into utility classes",[691,1554,1555],{},"Dark mode requires deliberate lightness and saturation adjustments—not simple inversion",[691,1557,1558],{},"WCAG AA requires 4.5:1 contrast for normal text; validate every text-background pair in both modes",[691,1560,1561],{},"Automate contrast checking in your build pipeline to catch failures early",[10,1563,1565],{"id":1564},"try-it-yourself","Try It Yourself",[15,1567,1568,1569,1574,1575,46],{},"Use our free ",[1570,1571,1573],"a",{"href":1572},"\u002Ftools\u002Fcolor-palette","Color Palette Generator"," to build a semantic palette and export it as CSS variables. Need to convert your hex tokens to RGB for Tailwind's alpha-value support? Try the ",[1570,1576,1578],{"href":1577},"\u002Ftools\u002Fhex-to-rgb","HEX to RGB Converter",[1580,1581,1582],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":294,"searchDepth":311,"depth":311,"links":1584},[1585,1586,1590,1595,1600,1604,1609,1610],{"id":12,"depth":311,"text":13},{"id":26,"depth":311,"text":27,"children":1587},[1588,1589],{"id":50,"depth":318,"text":51},{"id":257,"depth":318,"text":258},{"id":275,"depth":311,"text":276,"children":1591},[1592,1593,1594],{"id":286,"depth":318,"text":287},{"id":519,"depth":318,"text":520},{"id":685,"depth":318,"text":686},{"id":728,"depth":311,"text":729,"children":1596},[1597,1598,1599],{"id":735,"depth":318,"text":736},{"id":910,"depth":318,"text":911},{"id":1029,"depth":318,"text":1030},{"id":1202,"depth":311,"text":1203,"children":1601},[1602,1603],{"id":1209,"depth":318,"text":1210},{"id":1367,"depth":318,"text":1368},{"id":1419,"depth":311,"text":1420,"children":1605},[1606,1607,1608],{"id":1426,"depth":318,"text":1427},{"id":1476,"depth":318,"text":1477},{"id":1516,"depth":318,"text":1517},{"id":1530,"depth":311,"text":1531},{"id":1564,"depth":311,"text":1565},"2026-05-28","Build systematic color palettes for UI design with CSS variables and Tailwind configuration.","md",{"immutable":362},"\u002Fguides\u002Fdesign-color-systems",{"title":5,"description":1612},"guides\u002Fdesign-color-systems","BmEYyyPx1MdxCZb8zSccVGg_nubncMZ4zL9bgLpO68c",1780401328832]