[{"data":1,"prerenderedAt":751},["ShallowReactive",2],{"navigation":3,"\u002Foverview\u002Ffor-developers":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":372,"body":441,"description":744,"extension":745,"links":746,"meta":747,"navigation":748,"path":373,"seo":749,"stem":374,"__hash__":750},"docs\u002F4.overview\u002F1.for-developers.md",{"type":442,"value":443,"toc":734},"minimark",[444,448,503,508,511,515,518,524,529,532,554,562,566,569,575,579,582,599,609,613,616,622,626,629,641,644,666,669,672,704,710,714,724,730],[445,446,447],"p",{},"Dr. Max Design System provides a unified and consistent foundation for building our products. We aim to make the process of developing interfaces more efficient and streamlined by encouraging the use of pre-existing components and design tokens.",[449,450,451,470,481,492],"card-group",{},[452,453,457,467],"card",{"target":454,"title":455,"to":456},"_blank","Atoms","https:\u002F\u002Fdesign.drmax.eu\u002F7cb14cc9e\u002Fp\u002F562abd",[458,459],"img",{"src":460,"alt":461,"className":462,":zoom":466},"\u002Fimages\u002Foverview-for-developers-atoms.svg","",[463,464,465],"mb-4","h-20","w-auto","false",[445,468,469],{},"Quick access for all available atoms",[452,471,474,478],{"target":454,"title":472,"to":473},"Molecules","https:\u002F\u002Fdesign.drmax.eu\u002F7cb14cc9e\u002Fp\u002F38ff14",[458,475],{"src":476,"alt":461,"className":477,":zoom":466},"\u002Fimages\u002Foverview-for-developers-molecules.svg",[463,464,465],[445,479,480],{},"Quick access for all available molecules",[452,482,485,489],{"target":454,"title":483,"to":484},"Accessibility4Dev","https:\u002F\u002Fmydrmax.atlassian.net\u002Fwiki\u002Fspaces\u002FGLECOM\u002Fpages\u002F4412473450\u002FDeveloper+guidelines+and+resources",[458,486],{"src":487,"alt":461,"className":488,":zoom":466},"\u002Fimages\u002Foverview-for-developers-accessibility.svg",[463,464,465],[445,490,491],{},"Developer guidelines and resources",[452,493,496,500],{"target":454,"title":494,"to":495},"Figma","https:\u002F\u002Fwww.figma.com\u002Fdesign\u002F9g0yoYvsTVTivt0tiKmFAi\u002F0.1.1-Design-Library?m=auto&node-id=109-6006&t=dhzX7r5cTwoXIsuu-1",[458,497],{"src":498,"alt":461,"className":499,":zoom":466},"\u002Fimages\u002Foverview-for-developers-figma.svg",[463,464,465],[445,501,502],{},"Design library",[504,505,507],"h2",{"id":506},"design-tokens","Design Tokens",[445,509,510],{},"Design tokens are visual values that construct and maintain our design system. These values ensure a consistent and scalable visual system across different platforms and devices. Here's an overview of the types of design tokens available:",[512,513,262],"h3",{"id":514},"color",[445,516,517],{},"Our colors are defined using design tokens. Use these color variables to ensure consistency and proper brand representation.",[445,519,520],{},[458,521],{"alt":522,"src":523},"How to inspect the color in Figma","\u002Fimages\u002Foverview-for-developers-color-inspection.png",[445,525,526],{},[527,528,522],"em",{},[445,530,531],{},"In design you should see what color variable individual elements use and so you just use the existing corresponding variable.",[533,534,538],"pre",{"className":535,"code":536,"language":537,"meta":461,"style":461},"language-scss shiki shiki-themes material-theme-palenight","color: $blue-600;\n","scss",[539,540,541],"code",{"__ignoreMap":461},[542,543,546,550],"span",{"class":544,"line":545},"line",1,[542,547,549],{"class":548},"s0W1g","color: $blue-600",[542,551,553],{"class":552},"sAklC",";\n",[445,555,556,557,561],{},"All colors in the design should be from the predefined variables, so there ",[558,559,560],"strong",{},"should be no need"," to define new colors.",[512,563,565],{"id":564},"typography","Typography",[445,567,568],{},"Font families, font sizes, line heights, and letter spacing are standardized through design tokens. Utilizing these token variables ensures appropriate hierarchy and legibility throughout our designs.",[445,570,571],{},[458,572],{"alt":573,"src":574},"How to inspect typography in Figma","\u002Fimages\u002Foverview-for-developers-typography-inspection.png",[445,576,577],{},[527,578,573],{},[445,580,581],{},"Typography should be annotated in Figma so that you know exactly what to use. Including the mixin as shown below will add all the needed type styles to your element.",[533,583,585],{"className":535,"code":584,"language":537,"meta":461,"style":461},"@include headline-small;\n",[539,586,587],{"__ignoreMap":461},[542,588,589,593,597],{"class":544,"line":545},[542,590,592],{"class":591},"s6cf3","@include",[542,594,596],{"class":595},"sdLwU"," headline-small",[542,598,553],{"class":552},[445,600,601,602,605,606,608],{},"As of now the naming isn't precisely 1:1, so feel free to have a look at ",[539,603,604],{},"ui-library\u002Fassets\u002Fstyles\u002Ftypography.scss"," to find the typography you need. Once again, in new designs there ",[558,607,560],{}," to implement new typography.",[512,610,612],{"id":611},"elevation","Elevation",[445,614,615],{},"Define shadow depths and blur radius consistently using elevation design tokens. Proper use of elevation tokens adds clarity regarding interaction layers within the user interface.",[445,617,618],{},[458,619],{"alt":620,"src":621},"How to inspect elevations in Figma","\u002Fimages\u002Foverview-for-developers-elevation-inspection.png",[445,623,624],{},[527,625,620],{},[445,627,628],{},"The elevations should be annotated in Figma, so that you know exactly what to use. In this example we have a soft 1dp elevation, so in your code you do:",[533,630,632],{"className":535,"code":631,"language":537,"meta":461,"style":461},"box-shadow: $elevation-soft-1dp;\n",[539,633,634],{"__ignoreMap":461},[542,635,636,639],{"class":544,"line":545},[542,637,638],{"class":548},"box-shadow: $elevation-soft-1dp",[542,640,553],{"class":552},[445,642,643],{},"The design tokens don't cover inset box shadows, so if you need to add more shadow styles you just add them to the end.",[533,645,647],{"className":535,"code":646,"language":537,"meta":461,"style":461},"box-shadow: $elevation-soft-1dp, 0 1px 0 0 #78be20 inset;\n",[539,648,649],{"__ignoreMap":461},[542,650,651,654,657,661,664],{"class":544,"line":545},[542,652,653],{"class":548},"box-shadow: $elevation-soft-1dp, 0 1px 0 0 ",[542,655,656],{"class":552},"#",[542,658,660],{"class":659},"sx098","78be20",[542,662,663],{"class":548}," inset",[542,665,553],{"class":552},[504,667,31],{"id":668},"components",[445,670,671],{},"We follow the Atomic Design Methodology, dividing our design elements into categories: atoms, molecules, and organisms.",[673,674,675,689,698],"ul",{},[676,677,678,681,682,688],"li",{},[558,679,680],{},"Atoms:"," Smallest building blocks such as buttons, inputs, labels, and icons. You can browse already created Atoms ",[683,684,687],"a",{"href":456,"rel":685},[686],"nofollow","here",".",[676,690,691,694,695,688],{},[558,692,693],{},"Molecules:"," Combinations of atoms to create reusable components like text input or quantity. You can browse already created Molecules ",[683,696,687],{"href":473,"rel":697},[686],[676,699,700,703],{},[558,701,702],{},"Organisms:"," Organisms consist of multiple molecules combined together to form complex functionalities, such as navigation headers.",[445,705,706],{},[458,707],{"alt":708,"src":709},"How to inspect a component and its properties in Figma","\u002Fimages\u002Foverview-for-developers-component-inspection.png",[445,711,712],{},[527,713,708],{},[445,715,716,717,720,721],{},"Please utilize the available components. Before creating a new component, always ",[558,718,719],{},"double-check both Figma and the ui-library"," to confirm whether a similar component has already been developed. ",[558,722,723],{},"Reusing existing components accelerates development and reduces inconsistencies.",[445,725,726,727],{},"By utilizing design tokens and adhering to our established components, you contribute to maintaining a coherent and consistent experience across our products. ",[558,728,729],{},"Thank you for being part of our effort to improve overall quality while reducing development time and potential errors.",[731,732,733],"style",{},"html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}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 pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":461,"searchDepth":545,"depth":735,"links":736},2,[737,743],{"id":506,"depth":735,"text":507,"children":738},[739,741,742],{"id":514,"depth":740,"text":262},3,{"id":564,"depth":740,"text":565},{"id":611,"depth":740,"text":612},{"id":668,"depth":735,"text":31},"How to use Dr. Max Design System as a developer","md",null,{},true,{"title":372,"description":744},"qqzUju6p3xGelKxch2ngcUKYGqNGb5TfCe6CkWvDURw",1793289676892]