[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"navigation":3,"\u002Ffoundations\u002Fcolor\u002Foverview":439},[4,30,256,281,366,375,402,424],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Nuxt","\u002Fgetting-started\u002Fnuxt","1.getting-started\u002F3.nuxt","i-lucide-mountain",{"title":21,"path":22,"stem":23,"icon":24},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming","i-lucide-palette",{"title":26,"path":27,"stem":28,"icon":29},"MCP","\u002Fgetting-started\u002Fmcp","1.getting-started\u002F5.mcp","i-lucide-plug",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Components","\u002Fcomponents","2.components",[35,43,51,59,67,75,83,92,100,104,108,116,124,133,141,149,157,166,174,182,191,199,203,211,220,228,236,240,248],{"title":36,"path":37,"stem":38,"children":39,"page":6},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002F01.accordion",[40],{"title":36,"path":41,"stem":42},"\u002Fcomponents\u002Faccordion\u002Foverview","2.components\u002F01.accordion\u002F1.overview",{"title":44,"path":45,"stem":46,"children":47,"page":6},"Alert","\u002Fcomponents\u002Falert","2.components\u002F02.alert",[48],{"title":44,"path":49,"stem":50},"\u002Fcomponents\u002Falert\u002Foverview","2.components\u002F02.alert\u002F1.overview",{"title":52,"path":53,"stem":54,"children":55,"page":6},"Button","\u002Fcomponents\u002Fbutton","2.components\u002F03.button",[56],{"title":52,"path":57,"stem":58},"\u002Fcomponents\u002Fbutton\u002Foverview","2.components\u002F03.button\u002F1.overview",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Card","\u002Fcomponents\u002Fcard","2.components\u002F04.card",[64],{"title":60,"path":65,"stem":66},"\u002Fcomponents\u002Fcard\u002Foverview","2.components\u002F04.card\u002F1.overview",{"title":68,"path":69,"stem":70,"children":71,"page":6},"Carousel","\u002Fcomponents\u002Fcarousel","2.components\u002F05.carousel",[72],{"title":68,"path":73,"stem":74},"\u002Fcomponents\u002Fcarousel\u002Foverview","2.components\u002F05.carousel\u002F1.overview",{"title":76,"path":77,"stem":78,"children":79,"page":6},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002F06.checkbox",[80],{"title":76,"path":81,"stem":82},"\u002Fcomponents\u002Fcheckbox\u002Foverview","2.components\u002F06.checkbox\u002F1.overview",{"title":84,"path":85,"stem":86,"children":87,"page":6},"Date Picker","\u002Fcomponents\u002Fdate-picker","2.components\u002F07.date-picker",[88],{"title":89,"path":90,"stem":91},"Date picker","\u002Fcomponents\u002Fdate-picker\u002Foverview","2.components\u002F07.date-picker\u002F1.overview",{"title":93,"path":94,"stem":95,"children":96,"page":6},"Dropdown","\u002Fcomponents\u002Fdropdown","2.components\u002F08.dropdown",[97],{"title":93,"path":98,"stem":99},"\u002Fcomponents\u002Fdropdown\u002Foverview","2.components\u002F08.dropdown\u002F1.overview",{"title":101,"path":102,"stem":103},"Heading","\u002Fcomponents\u002Fheading","2.components\u002F09.heading",{"title":105,"path":106,"stem":107},"Icon","\u002Fcomponents\u002Ficon","2.components\u002F10.icon",{"title":109,"path":110,"stem":111,"children":112,"page":6},"Input","\u002Fcomponents\u002Finput","2.components\u002F11.input",[113],{"title":109,"path":114,"stem":115},"\u002Fcomponents\u002Finput\u002Foverview","2.components\u002F11.input\u002F1.overview",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Label","\u002Fcomponents\u002Flabel","2.components\u002F12.label",[121],{"title":117,"path":122,"stem":123},"\u002Fcomponents\u002Flabel\u002Foverview","2.components\u002F12.label\u002F1.overview",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Phone Number","\u002Fcomponents\u002Fphone-number","2.components\u002F13.phone-number",[129],{"title":130,"path":131,"stem":132},"Phone number","\u002Fcomponents\u002Fphone-number\u002Foverview","2.components\u002F13.phone-number\u002F1.overview",{"title":134,"path":135,"stem":136,"children":137,"page":6},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002F14.popover",[138],{"title":134,"path":139,"stem":140},"\u002Fcomponents\u002Fpopover\u002Foverview","2.components\u002F14.popover\u002F1.overview",{"title":142,"path":143,"stem":144,"children":145,"page":6},"Quantity","\u002Fcomponents\u002Fquantity","2.components\u002F15.quantity",[146],{"title":142,"path":147,"stem":148},"\u002Fcomponents\u002Fquantity\u002Foverview","2.components\u002F15.quantity\u002F1.overview",{"title":150,"path":151,"stem":152,"children":153,"page":6},"Radio","\u002Fcomponents\u002Fradio","2.components\u002F16.radio",[154],{"title":150,"path":155,"stem":156},"\u002Fcomponents\u002Fradio\u002Foverview","2.components\u002F16.radio\u002F1.overview",{"title":158,"path":159,"stem":160,"children":161,"page":6},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002F17.radio-group",[162],{"title":163,"path":164,"stem":165},"Radio group","\u002Fcomponents\u002Fradio-group\u002Foverview","2.components\u002F17.radio-group\u002F1.overview",{"title":167,"path":168,"stem":169,"children":170,"page":6},"Rating","\u002Fcomponents\u002Frating","2.components\u002F18.rating",[171],{"title":167,"path":172,"stem":173},"\u002Fcomponents\u002Frating\u002Foverview","2.components\u002F18.rating\u002F1.overview",{"title":175,"path":176,"stem":177,"children":178,"page":6},"Required","\u002Fcomponents\u002Frequired","2.components\u002F19.required",[179],{"title":175,"path":180,"stem":181},"\u002Fcomponents\u002Frequired\u002Foverview","2.components\u002F19.required\u002F1.overview",{"title":183,"path":184,"stem":185,"children":186,"page":6},"Scroll Area","\u002Fcomponents\u002Fscroll-area","2.components\u002F20.scroll-area",[187],{"title":188,"path":189,"stem":190},"Scroll area","\u002Fcomponents\u002Fscroll-area\u002Foverview","2.components\u002F20.scroll-area\u002F1.overview",{"title":192,"path":193,"stem":194,"children":195,"page":6},"Select","\u002Fcomponents\u002Fselect","2.components\u002F21.select",[196],{"title":192,"path":197,"stem":198},"\u002Fcomponents\u002Fselect\u002Foverview","2.components\u002F21.select\u002F1.overview",{"title":200,"path":201,"stem":202},"Spinner","\u002Fcomponents\u002Fspinner","2.components\u002F22.spinner",{"title":204,"path":205,"stem":206,"children":207,"page":6},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002F23.switch",[208],{"title":204,"path":209,"stem":210},"\u002Fcomponents\u002Fswitch\u002Foverview","2.components\u002F23.switch\u002F1.overview",{"title":212,"path":213,"stem":214,"children":215,"page":6},"Tab Badge","\u002Fcomponents\u002Ftab-badge","2.components\u002F24.tab-badge",[216],{"title":217,"path":218,"stem":219},"Tab badge","\u002Fcomponents\u002Ftab-badge\u002Foverview","2.components\u002F24.tab-badge\u002F1.overview",{"title":221,"path":222,"stem":223,"children":224,"page":6},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002F25.tabs",[225],{"title":221,"path":226,"stem":227},"\u002Fcomponents\u002Ftabs\u002Foverview","2.components\u002F25.tabs\u002F1.overview",{"title":229,"path":230,"stem":231,"children":232,"page":6},"Tag","\u002Fcomponents\u002Ftag","2.components\u002F26.tag",[233],{"title":229,"path":234,"stem":235},"\u002Fcomponents\u002Ftag\u002Foverview","2.components\u002F26.tag\u002F1.overview",{"title":237,"path":238,"stem":239},"Text","\u002Fcomponents\u002Ftext","2.components\u002F27.text",{"title":241,"path":242,"stem":243,"children":244,"page":6},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002F28.textarea",[245],{"title":241,"path":246,"stem":247},"\u002Fcomponents\u002Ftextarea\u002Foverview","2.components\u002F28.textarea\u002F1.overview",{"title":249,"path":250,"stem":251,"children":252,"page":6},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002F29.tooltip",[253],{"title":249,"path":254,"stem":255},"\u002Fcomponents\u002Ftooltip\u002Foverview","2.components\u002F29.tooltip\u002F1.overview",{"title":257,"icon":6,"path":258,"stem":259,"children":260,"page":6},"Foundations","\u002Ffoundations","2.foundations",[261,269,273,277],{"title":262,"icon":6,"path":263,"stem":264,"children":265,"page":6},"Color","\u002Ffoundations\u002Fcolor","2.foundations\u002F1.color",[266],{"title":262,"path":267,"stem":268},"\u002Ffoundations\u002Fcolor\u002Foverview","2.foundations\u002F1.color\u002F1.overview",{"title":270,"path":271,"stem":272},"Icons","\u002Ffoundations\u002Ficons","2.foundations\u002F2.icons",{"title":274,"path":275,"stem":276},"Logos and Pins","\u002Ffoundations\u002Flogos-and-pins","2.foundations\u002F3.logos-and-pins",{"title":278,"path":279,"stem":280},"Web layers","\u002Ffoundations\u002Fweb-layers","2.foundations\u002F4.web-layers",{"title":282,"icon":6,"path":283,"stem":284,"children":285,"page":6},"WIP","\u002Fwip","3.wip",[286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362],{"title":287,"path":288,"stem":289},"Additional","\u002Fwip\u002Fadditional","3.wip\u002Fadditional",{"title":291,"path":292,"stem":293},"Alt text","\u002Fwip\u002Falt-text","3.wip\u002Falt-text",{"title":295,"path":296,"stem":297},"AnnouncementBar","\u002Fwip\u002Fannouncement-bar","3.wip\u002Fannouncement-bar",{"title":299,"path":300,"stem":301},"Avatar","\u002Fwip\u002Favatar","3.wip\u002Favatar",{"title":303,"path":304,"stem":305},"Banner","\u002Fwip\u002Fbanner","3.wip\u002Fbanner",{"title":307,"path":308,"stem":309},"Breadcrumbs","\u002Fwip\u002Fbreadcrumbs","3.wip\u002Fbreadcrumbs",{"title":311,"path":312,"stem":313},"Divider & scroll","\u002Fwip\u002Fdivider-scroll","3.wip\u002Fdivider-scroll",{"title":315,"path":316,"stem":317},"FieldMessage","\u002Fwip\u002Ffield-message","3.wip\u002Ffield-message",{"title":319,"path":320,"stem":321},"Focus Ring","\u002Fwip\u002Ffocus-ring","3.wip\u002Ffocus-ring",{"title":323,"path":324,"stem":325},"InlineSeparator","\u002Fwip\u002Finline-separator","3.wip\u002Finline-separator",{"title":327,"path":328,"stem":329},"Modal & drawer","\u002Fwip\u002Fmodal-drawer","3.wip\u002Fmodal-drawer",{"title":331,"path":332,"stem":333},"Optional","\u002Fwip\u002Foptional","3.wip\u002Foptional",{"title":335,"path":336,"stem":337},"Pagination","\u002Fwip\u002Fpagination","3.wip\u002Fpagination",{"title":339,"path":340,"stem":341},"PasswordInput","\u002Fwip\u002Fpassword-input","3.wip\u002Fpassword-input",{"title":343,"path":344,"stem":345},"Pinned bar page","\u002Fwip\u002Fpinned-bar-page","3.wip\u002Fpinned-bar-page",{"title":347,"path":348,"stem":349},"PromotionalBar","\u002Fwip\u002Fpromotional-bar","3.wip\u002Fpromotional-bar",{"title":351,"path":352,"stem":353},"SearchInput","\u002Fwip\u002Fsearch-input","3.wip\u002Fsearch-input",{"title":355,"path":356,"stem":357},"StatusLine","\u002Fwip\u002Fstatus-line","3.wip\u002Fstatus-line",{"title":359,"path":360,"stem":361},"Stepper & loaderBar","\u002Fwip\u002Fstepper-loader-bar","3.wip\u002Fstepper-loader-bar",{"title":363,"path":364,"stem":365},"TextInput","\u002Fwip\u002Ftext-input","3.wip\u002Ftext-input",{"title":367,"icon":6,"path":368,"stem":369,"children":370,"page":6},"Overview","\u002Foverview","4.overview",[371],{"title":372,"path":373,"stem":374},"For developers","\u002Foverview\u002Ffor-developers","4.overview\u002F1.for-developers",{"title":376,"icon":6,"path":377,"stem":378,"children":379,"page":6},"Brand","\u002Fbrand","5.brand",[380,389],{"title":381,"icon":6,"path":382,"stem":383,"children":384,"page":6},"Brand guidelines","\u002Fbrand\u002Fbrand-guidelines","5.brand\u002F1.brand-guidelines",[385],{"title":386,"path":387,"stem":388},"Dr. Max Trademarks Guidelines","\u002Fbrand\u002Fbrand-guidelines\u002Fdr-max-trademarks-guidelines","5.brand\u002F1.brand-guidelines\u002F2.dr-max-trademarks-guidelines",{"title":390,"icon":6,"path":391,"stem":392,"children":393,"page":6},"Assets","\u002Fbrand\u002Fassets","5.brand\u002F2.assets",[394,398],{"title":395,"path":396,"stem":397},"Logos","\u002Fbrand\u002Fassets\u002Flogos","5.brand\u002F2.assets\u002F2.logos",{"title":399,"path":400,"stem":401},"Dr. Max Tagline","\u002Fbrand\u002Fassets\u002Fdr-max-tagline","5.brand\u002F2.assets\u002F3.dr-max-tagline",{"title":403,"icon":6,"path":404,"stem":405,"children":406,"page":6},"Content","\u002Fcontent","6.content",[407,411],{"title":408,"path":409,"stem":410},"Content accessibility","\u002Fcontent\u002Fcontent-accessibility","6.content\u002F1.content-accessibility",{"title":412,"icon":6,"path":413,"stem":414,"children":415,"page":6},"Content guidance","\u002Fcontent\u002Fcontent-guidelines","6.content\u002F2.content-guidelines",[416,420],{"title":417,"path":418,"stem":419},"Category color-coding","\u002Fcontent\u002Fcontent-guidelines\u002Fcategory-color-coding","6.content\u002F2.content-guidelines\u002F2.category-color-coding",{"title":421,"path":422,"stem":423},"Pop-up banners","\u002Fcontent\u002Fcontent-guidelines\u002Fpop-up-banners","6.content\u002F2.content-guidelines\u002F3.pop-up-banners",{"title":425,"icon":6,"path":426,"stem":427,"children":428,"page":6},"Accessibility","\u002Faccessibility","7.accessibility",[429],{"title":430,"path":431,"stem":432,"children":433,"icon":6},"Accessibility guidance","\u002Faccessibility\u002Faccessibility-guidance","7.accessibility\u002F1.accessibility-guidance\u002F1.index",[434,435],{"title":425,"path":431,"stem":432},{"title":436,"path":437,"stem":438},"Understanding WCAG 2.2","\u002Faccessibility\u002Faccessibility-guidance\u002Funderstanding-wcag-2-2","7.accessibility\u002F1.accessibility-guidance\u002F2.understanding-wcag-2-2",{"id":440,"title":262,"body":441,"description":641,"extension":642,"links":643,"meta":644,"navigation":645,"path":267,"seo":646,"stem":268,"__hash__":647},"docs\u002F2.foundations\u002F1.color\u002F1.overview.md",{"type":442,"value":443,"toc":613},"minimark",[444,448,452,481,485,488,508,511,514,518,521,525,530,533,537,539,543,547,549,553,557,559,563,565,569,571,575,577,581,583,587,589,593,595,599,601,605,607,611],[445,446,367],"h2",{"id":447},"overview",[449,450,451],"p",{},"In web design, color serves these main purposes:",[453,454,455,463,469,475],"ul",{},[456,457,458,462],"li",{},[459,460,461],"strong",{},"Brand identity:"," Establishes and reinforces a brand's identity through consistent use of specific colors.",[456,464,465,468],{},[459,466,467],{},"Usability and user experience:"," Proper use of color can enhance the usability of a website. It can draw attention to important elements, create visual hierarchies, and guide users through a site intuitively.",[456,470,471,474],{},[459,472,473],{},"Aesthetics:"," Enhances the overall visual appeal and attractiveness of the website.",[456,476,477,480],{},[459,478,479],{},"Emotional and psychological impact:"," Evokes specific emotional responses or conveys particular moods, influencing how users feel.",[445,482,484],{"id":483},"color-roles","Color roles",[449,486,487],{},"Given these purposes, each color can be viewed through a different lens and serve a different role:",[453,489,490,496,502],{},[456,491,492,495],{},[459,493,494],{},"Brand:"," The “Add to cart” button can be green on Dr.Max websites, but red on eDrogeria. This role takes precedence over semantics and importance.",[456,497,498,501],{},[459,499,500],{},"Semantics:"," A “Create” button can be green because it conveys positive meaning. A “Delete” button can be red because it conveys destructive meaning. This role takes precedence over importance.",[456,503,504,507],{},[459,505,506],{},"Importance:"," A button can be green, blue, or white depending on the importance of the action, such as primary or secondary.",[449,509,510],{},"Take these aspects into account when creating tokens for website color variations. The visual representation of some elements can coincide, but that does not mean they serve the same role. Each color token should remain within its original role.",[449,512,513],{},"Otherwise, changing variable values for a different brand can turn the green used for successful input validation into red, inadvertently changing its semantics and causing confusion.",[445,515,517],{"id":516},"color-scale","Color scale",[449,519,520],{},"The scale covers values from 25 through 900, with 25 being the lightest and 900 the darkest. The colors were derived in the perceptually uniform HCT color space, where they follow a linear progression in lightness. As a result, Green 700 text on a Green 50 background should have roughly the same contrast as Yellow 700 text on a Yellow 50 background.",[445,522,524],{"id":523},"primary-palette","Primary palette",[526,527,529],"h3",{"id":528},"green","Green",[531,532],"color-palette",{"family":528},[526,534,536],{"id":535},"red","Red",[531,538],{"family":535},[445,540,542],{"id":541},"neutral-palette","Neutral palette",[526,544,546],{"id":545},"gray","Gray",[531,548],{"family":545},[445,550,552],{"id":551},"additional-palette","Additional palette",[526,554,556],{"id":555},"blue","Blue",[531,558],{"family":555},[526,560,562],{"id":561},"cyan","Cyan",[531,564],{"family":561},[526,566,568],{"id":567},"turquoise","Turquoise",[531,570],{"family":567},[526,572,574],{"id":573},"purple","Purple",[531,576],{"family":573},[526,578,580],{"id":579},"yellow","Yellow",[531,582],{"family":579},[526,584,586],{"id":585},"orange","Orange",[531,588],{"family":585},[526,590,592],{"id":591},"brown","Brown",[531,594],{"family":591},[526,596,598],{"id":597},"lip","Lip",[531,600],{"family":597},[526,602,604],{"id":603},"pink","Pink",[531,606],{"family":603},[526,608,610],{"id":609},"magenta","Magenta",[531,612],{"family":609},{"title":614,"searchDepth":615,"depth":616,"links":617},"",1,2,[618,619,620,621,626,629],{"id":447,"depth":616,"text":367},{"id":483,"depth":616,"text":484},{"id":516,"depth":616,"text":517},{"id":523,"depth":616,"text":524,"children":622},[623,625],{"id":528,"depth":624,"text":529},3,{"id":535,"depth":624,"text":536},{"id":541,"depth":616,"text":542,"children":627},[628],{"id":545,"depth":624,"text":546},{"id":551,"depth":616,"text":552,"children":630},[631,632,633,634,635,636,637,638,639,640],{"id":555,"depth":624,"text":556},{"id":561,"depth":624,"text":562},{"id":567,"depth":624,"text":568},{"id":573,"depth":624,"text":574},{"id":579,"depth":624,"text":580},{"id":585,"depth":624,"text":586},{"id":591,"depth":624,"text":592},{"id":597,"depth":624,"text":598},{"id":603,"depth":624,"text":604},{"id":609,"depth":624,"text":610},"Communicate hierarchy, state and brand.","md",null,{},{"title":262},{"title":262,"description":641},"NzzDZ6YVobgLB1uyy0Z53Q8olgIGgjNzsaye5C9KGXw",1793289677620]