[{"data":1,"prerenderedAt":6228},["ShallowReactive",2],{"content-\u002Fdesign\u002Ffoundations":3,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":36,"$f8f5lnJ37FCtouC_Q-20Y_lk47T8QT59vG2H3NVA0ikU":400,"$fH8KF6TaNm7Prkw5PjE_U_K0_jhwqU4rL9IgcxTR8qEY":515,"sidebar-component-doc-meta":1012,"guidelines":1142},{"id":4,"title":5,"badge":6,"body":7,"description":24,"excludeFromSearch":25,"extension":26,"external":25,"icon":6,"keywords":6,"menuSection":27,"meta":28,"native":25,"navTitle":6,"navigation":29,"order":6,"path":31,"railLabel":6,"seo":32,"sidebar":25,"sitemap":33,"stem":34,"tabs":6,"__hash__":35},"docs\u002Fdesign\u002F02.foundations\u002F0.index.md","Foundations",null,{"type":8,"value":9,"toc":20},"minimark",[10,17],[11,12,13],"nord-intro",{},[14,15,16],"p",{},"Follow these practical guides to get started designing and developing experiences with Nord Design System.",[18,19],"guidelines-list",{},{"title":21,"searchDepth":22,"depth":22,"links":23},"",2,[],"Practical guides for designing and developing accessible, consistent experiences with Nord Design System.",false,"md","design",{},{"order":30},1,"\u002Fdesign\u002Ffoundations",{"title":5,"description":24},{"loc":31},"design\u002F02.foundations\u002F0.index","HSchIdhC47etMKBvOxE5FAtS7Hn3cG9_WKHJnX5uszY",[37,231,348,366],{"title":38,"children":39,"path":229,"stem":230,"page":25},"Docs",[40,142],{"path":41,"title":42,"icon":43,"keywords":44,"children":45},"\u002Fdocs\u002Fdeveloper","Developer","file-code","docs developer start install setup web components ai faq",[46,50,55,60,64,68,110,132,137],{"path":41,"title":47,"icon":48,"keywords":49},"Getting started","navigation-dashboard","docs start install setup npm",{"path":51,"title":52,"icon":53,"keywords":54},"\u002Fdocs\u002Fdeveloper\u002Fweb-components","Using Web Components","generic-module","web components setup install usage custom elements",{"path":56,"title":57,"icon":58,"keywords":59},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts","Webfonts","interface-content-book","fonts typography webfonts",{"path":61,"title":62,"icon":53,"keywords":63},"\u002Fdocs\u002Fdeveloper\u002Fcdn","CDN","cdn package delivery script link",{"path":65,"title":66,"icon":58,"keywords":67},"\u002Fdocs\u002Fdeveloper\u002Flocalization","Localization","localization translation rtl ltr",{"path":69,"title":70,"icon":43,"keywords":71,"badge":72,"children":73},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework","CSS Framework","css framework legacy utilities","legacy",[74,77,80,83,86,89,92,95,98,101,104,107],{"path":75,"title":76},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#installation","Installation",{"path":78,"title":79},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#usage","Usage",{"path":81,"title":82},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#utilities","Utilities",{"path":84,"title":85},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#reset-utility","Reset Utility",{"path":87,"title":88},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#typographic-utilities","Typographic Utilities",{"path":90,"title":91},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#font-size-utilities","Font Size Utilities",{"path":93,"title":94},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#color-utilities","Color Utilities",{"path":96,"title":97},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#border-utilities","Border Utilities",{"path":99,"title":100},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#box-shadow-utilities","Box Shadow Utilities",{"path":102,"title":103},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#grid-and-container-utilities","Grid & Container Utilities",{"path":105,"title":106},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#spacing-utilities","Spacing Utilities",{"path":108,"title":109},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#css-custom-properties","CSS Custom Properties",{"path":111,"title":112,"icon":113,"keywords":114,"children":115},"\u002Fdocs\u002Fdeveloper\u002Feslint","ESLint Plugin","interface-checked","eslint lint rules css tailwind",[116,118,120,123,126,129],{"path":117,"title":76},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#installation",{"path":119,"title":79},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#usage",{"path":121,"title":122},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#nord-rules","Nord Rules",{"path":124,"title":125},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#tailwind-rules","Tailwind Rules",{"path":127,"title":128},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#custom-configuration","Custom Configuration",{"path":130,"title":131},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#class-detection","Class Detection",{"path":133,"title":134,"icon":135,"keywords":136},"\u002Fdocs\u002Fdeveloper\u002Fworking-with-ai","Working with AI","interface-ai","ai llms skills agents",{"path":138,"title":139,"icon":140,"keywords":141},"\u002Fdocs\u002Fdeveloper\u002Ffaq","FAQ","interface-help","questions answers support",{"path":143,"title":144,"icon":58,"keywords":145,"children":146},"\u002Fdesign","Design","design foundations themes brand tools figma",[147,149,181,219,224],{"path":143,"title":47,"icon":48,"keywords":148},"design start foundations figma",{"path":31,"title":5,"icon":58,"keywords":150,"children":151},"principles accessibility colors typography grid naming",[152,155,158,160,163,166,169,172,175,178],{"path":153,"title":154},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist","Accessibility",{"path":156,"title":157},"\u002Fdesign\u002Ffoundations\u002Fcolors","Color System",{"path":159,"title":94},"\u002Fdesign\u002Ffoundations\u002Fcolor-utilities",{"path":161,"title":162},"\u002Fdesign\u002Ffoundations\u002Fprinciples","Principles",{"path":164,"title":165},"\u002Fdesign\u002Ffoundations\u002Ffigma","Figma Toolkit",{"path":167,"title":168},"\u002Fdesign\u002Ffoundations\u002Fgrid","Grid",{"path":170,"title":171},"\u002Fdesign\u002Ffoundations\u002Ficonography","Iconography",{"path":173,"title":174},"\u002Fdesign\u002Ffoundations\u002Fnaming","Naming",{"path":176,"title":177},"\u002Fdesign\u002Ffoundations\u002Fbrand","Nordhealth Brand",{"path":179,"title":180},"\u002Fdesign\u002Ffoundations\u002Ftypography","Typography",{"path":182,"title":183,"icon":184,"keywords":185,"children":186},"\u002Fdesign\u002Fthemes","Themes","interface-mode-light","themes brand dark light contrast",[187,190,192,195,198,201,204,207,210,213,216],{"path":188,"title":189},"#top","Overview",{"path":191,"title":76},"#installation",{"path":193,"title":194},"#available-themes","Available Themes",{"path":196,"title":197},"#examples","Examples",{"path":199,"title":200},"#dark-mode","Dark Mode",{"path":202,"title":203},"#creating-themes","Creating Themes",{"path":205,"title":206},"#accent-color","Accent Color",{"path":208,"title":209},"#top-bar-theming","Top Bar theming",{"path":211,"title":212},"#logo-usage","Logo Usage",{"path":214,"title":215},"#theming-in-figma","Theming in Figma",{"path":217,"title":218},"#theme-builder","Theme Builder",{"path":220,"title":221,"icon":222,"keywords":223},"\u002Fdesign\u002Fassets","Brand assets","interface-attachment","assets downloads logo brand figma",{"path":225,"title":226,"icon":227,"keywords":228},"\u002Fdesign\u002Ftools","Tools","navigation-settings","tools color generator theme builder accessibility checklist","\u002Fdocs","docs",{"title":232,"children":233,"path":346,"stem":347},"Core",[234,239,277,325,330,335,340],{"path":235,"title":236,"icon":237,"keywords":238},"\u002Fcomponents","Components","interface-grid","components web components reference api examples",{"path":240,"title":241,"icon":242,"keywords":243,"children":244},"\u002Fcore\u002Ftokens","Design Tokens","interface-tag","tokens variables color space typography",[245,248,251,254,257,260,263,266,269,272,275],{"path":246,"title":247},"#color","Color",{"path":249,"title":250},"#border-radius","Border Radius",{"path":252,"title":253},"#box-shadow","Box Shadow",{"path":255,"title":256},"#font-size","Font Size",{"path":258,"title":259},"#font","Font",{"path":261,"title":262},"#line-height","Line Height",{"path":264,"title":265},"#size","Size",{"path":267,"title":268},"#space","Space",{"path":270,"title":271},"#transition","Transition",{"path":273,"title":274},"#z-index","Z-index",{"path":276,"title":79},"#usage",{"path":278,"title":279,"icon":280,"keywords":281,"children":282},"\u002Fcore\u002Fcss\u002Ftailwind","Tailwind CSS","interface-edit","tailwind utilities css tokens",[283,285,287,290,293,296,299,302,305,308,311,314,317,319,322],{"path":284,"title":76},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#installation",{"path":286,"title":79},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#usage",{"path":288,"title":289},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#peer-dependencies","Peer Dependencies",{"path":291,"title":292},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#theme-variables","Theme Variables",{"path":294,"title":295},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#logical-properties","Logical Properties",{"path":297,"title":298},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#typography-examples","Typography Examples",{"path":300,"title":301},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#color-examples","Color Examples",{"path":303,"title":304},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#border-examples","Border Examples",{"path":306,"title":307},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#shadow-examples","Shadow Examples",{"path":309,"title":310},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#miscellaneous-utilities","Miscellaneous Utilities",{"path":312,"title":313},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#nord-components","Nord Components",{"path":315,"title":316},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#form-utilities","Form Utilities",{"path":318,"title":168},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#grid",{"path":320,"title":321},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":323,"title":324},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#extending-the-theme","Extending the Theme",{"path":326,"title":327,"icon":328,"keywords":329},"\u002Fblocks","Blocks","interface-table","blocks patterns sections examples",{"path":331,"title":332,"icon":333,"keywords":334},"\u002Ftemplates","Templates","navigation-catalog","templates pages layouts examples",{"path":336,"title":337,"icon":338,"keywords":339},"\u002Ficons","Icons","interface-bookmark","icons nordicons symbols",{"path":341,"title":342,"icon":343,"native":344,"keywords":345},"\u002Fstorybook","Playground","interface-play",true,"playground storybook examples","\u002Fcore","core",{"title":349,"path":350,"stem":351,"children":352},"Updates","\u002Fupdates","updates\u002Findex",[353,357,362],{"path":350,"title":354,"icon":355,"keywords":356},"Latest Updates","file-notes","latest updates blog announcements news",{"path":358,"title":359,"icon":360,"keywords":361},"\u002Fchangelogs","Changelog","text-list","changelog releases packages versions",{"path":363,"title":364,"icon":43,"keywords":365},"\u002Fmigrations","Migration guides","migrations upgrade guides breaking changes",{"title":367,"children":368,"path":398,"stem":399},"Resources",[369,374,378,382,386,390,394],{"path":370,"title":371,"icon":372,"keywords":373},"\u002Fresources\u002Fabout","About the design system","interface-info","about nord design system team goals",{"path":375,"title":376,"icon":140,"keywords":377},"\u002Fresources\u002Fsupport","Support","help feedback support slack office hours status",{"path":379,"title":380,"icon":280,"keywords":381},"\u002Fresources\u002Fcontributing","Contributing","contributing contribution proposal process",{"path":383,"title":384,"icon":360,"keywords":385},"\u002Fresources\u002Fbacklog-prioritization","Backlog prioritization","backlog prioritization roadmap requests",{"path":387,"title":388,"icon":140,"keywords":389},"\u002Fresources\u002Faccessibility-statement","Accessibility statement","accessibility statement wcag website",{"path":391,"title":392,"icon":372,"keywords":393},"\u002Fresources\u002Fcareers","Careers","careers jobs team",{"path":395,"title":396,"icon":355,"keywords":397},"\u002Fresources\u002Fterms","Terms of use","terms legal license usage","\u002Fresources","resources",[401,464,501,506],{"title":38,"children":402,"path":229,"stem":230,"page":25},[403,434],{"path":41,"title":42,"icon":43,"keywords":44,"children":404},[405,406,407,408,409,410,424,432,433],{"path":41,"title":47,"icon":48,"keywords":49},{"path":51,"title":52,"icon":53,"keywords":54},{"path":56,"title":57,"icon":58,"keywords":59},{"path":61,"title":62,"icon":53,"keywords":63},{"path":65,"title":66,"icon":58,"keywords":67},{"path":69,"title":70,"icon":43,"keywords":71,"badge":72,"children":411},[412,413,414,415,416,417,418,419,420,421,422,423],{"path":75,"title":76},{"path":78,"title":79},{"path":81,"title":82},{"path":84,"title":85},{"path":87,"title":88},{"path":90,"title":91},{"path":93,"title":94},{"path":96,"title":97},{"path":99,"title":100},{"path":102,"title":103},{"path":105,"title":106},{"path":108,"title":109},{"path":111,"title":112,"icon":113,"keywords":114,"children":425},[426,427,428,429,430,431],{"path":117,"title":76},{"path":119,"title":79},{"path":121,"title":122},{"path":124,"title":125},{"path":127,"title":128},{"path":130,"title":131},{"path":133,"title":134,"icon":135,"keywords":136},{"path":138,"title":139,"icon":140,"keywords":141},{"path":143,"title":144,"icon":58,"keywords":145,"children":435},[436,437,449,462,463],{"path":143,"title":47,"icon":48,"keywords":148},{"path":31,"title":5,"icon":58,"keywords":150,"children":438},[439,440,441,442,443,444,445,446,447,448],{"path":153,"title":154},{"path":156,"title":157},{"path":159,"title":94},{"path":161,"title":162},{"path":164,"title":165},{"path":167,"title":168},{"path":170,"title":171},{"path":173,"title":174},{"path":176,"title":177},{"path":179,"title":180},{"path":182,"title":183,"icon":184,"keywords":185,"children":450},[451,452,453,454,455,456,457,458,459,460,461],{"path":188,"title":189},{"path":191,"title":76},{"path":193,"title":194},{"path":196,"title":197},{"path":199,"title":200},{"path":202,"title":203},{"path":205,"title":206},{"path":208,"title":209},{"path":211,"title":212},{"path":214,"title":215},{"path":217,"title":218},{"path":220,"title":221,"icon":222,"keywords":223},{"path":225,"title":226,"icon":227,"keywords":228},{"title":232,"children":465,"path":346,"stem":347},[466,467,480,497,498,499,500],{"path":235,"title":236,"icon":237,"keywords":238},{"path":240,"title":241,"icon":242,"keywords":243,"children":468},[469,470,471,472,473,474,475,476,477,478,479],{"path":246,"title":247},{"path":249,"title":250},{"path":252,"title":253},{"path":255,"title":256},{"path":258,"title":259},{"path":261,"title":262},{"path":264,"title":265},{"path":267,"title":268},{"path":270,"title":271},{"path":273,"title":274},{"path":276,"title":79},{"path":278,"title":279,"icon":280,"keywords":281,"children":481},[482,483,484,485,486,487,488,489,490,491,492,493,494,495,496],{"path":284,"title":76},{"path":286,"title":79},{"path":288,"title":289},{"path":291,"title":292},{"path":294,"title":295},{"path":297,"title":298},{"path":300,"title":301},{"path":303,"title":304},{"path":306,"title":307},{"path":309,"title":310},{"path":312,"title":313},{"path":315,"title":316},{"path":318,"title":168},{"path":320,"title":321},{"path":323,"title":324},{"path":326,"title":327,"icon":328,"keywords":329},{"path":331,"title":332,"icon":333,"keywords":334},{"path":336,"title":337,"icon":338,"keywords":339},{"path":341,"title":342,"icon":343,"native":344,"keywords":345},{"title":349,"path":350,"stem":351,"children":502},[503,504,505],{"path":350,"title":354,"icon":355,"keywords":356},{"path":358,"title":359,"icon":360,"keywords":361},{"path":363,"title":364,"icon":43,"keywords":365},{"title":367,"children":507,"path":398,"stem":399},[508,509,510,511,512,513,514],{"path":370,"title":371,"icon":372,"keywords":373},{"path":375,"title":376,"icon":140,"keywords":377},{"path":379,"title":380,"icon":280,"keywords":381},{"path":383,"title":384,"icon":360,"keywords":385},{"path":387,"title":388,"icon":140,"keywords":389},{"path":391,"title":392,"icon":372,"keywords":393},{"path":395,"title":396,"icon":355,"keywords":397},[516,539,553,558,563,568,572,577,581,585,589,593,606,619,628,632,636,640,644,662,666,707,711,740,744,748,752,756,798,807,811,815,819,823,841,850,854,858,867,896,900,904,908,912,916,920,924,933,937,941,945,949,962,966,975,979,983,992,996,1000,1004,1008],{"name":517,"tagName":518,"description":519,"category":520,"status":521,"isNew":25,"lightDom":344,"parts":522},"Accordion","nord-accordion","Accordion is a set of collapsible sections, each with a header that toggles\nthe visibility of its content. It coordinates a group of\nAccordion Item elements, keyboard focus\nmovement between them, and which items are open.","container","ready",[523,527,531,535],{"name":524,"tagName":525,"description":526},"AccordionHeader","nord-accordion-header","Accordion Header is the heading that labels an\nAccordion Panel. Following the WAI-ARIA\naccordion pattern, its Accordion Trigger\nbutton is wrapped in a heading element.",{"name":528,"tagName":529,"description":530},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":532,"tagName":533,"description":534},"AccordionPanel","nord-accordion-panel","Accordion Panel holds the content revealed by its\nAccordion Trigger. It must be placed inside\nan Accordion Item and animates its height as it\nopens and closes.",{"name":536,"tagName":537,"description":538},"AccordionTrigger","nord-accordion-trigger","Accordion Trigger is the button that opens and closes its\nAccordion Panel. It must be placed inside an\nAccordion Header.",{"name":540,"tagName":541,"description":542,"category":543,"status":521,"isNew":25,"lightDom":25,"parts":544},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.","layout",[545,549],{"name":546,"tagName":547,"description":548},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":550,"tagName":551,"description":552},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":554,"tagName":555,"description":556,"category":557,"status":521,"isNew":25,"lightDom":344},"Autocomplete","nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.","form",{"name":559,"tagName":560,"description":561,"category":562,"status":521,"isNew":25,"lightDom":25},"Avatar","nord-avatar","Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.","content",{"name":564,"tagName":565,"description":566,"category":567,"status":521,"isNew":25,"lightDom":25},"Badge","nord-badge","Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.","feedback",{"name":569,"tagName":570,"description":571,"category":567,"status":521,"isNew":25,"lightDom":25},"Banner","nord-banner","Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",{"name":573,"tagName":574,"description":575,"category":576,"status":521,"isNew":25,"lightDom":25},"Button","nord-button","Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.","action",{"name":578,"tagName":579,"description":580,"category":576,"status":521,"isNew":25,"lightDom":25},"ButtonGroup","nord-button-group","Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",{"name":582,"tagName":583,"description":584,"category":557,"status":521,"isNew":25,"lightDom":25},"Calendar","nord-calendar","Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",{"name":586,"tagName":587,"description":588,"category":520,"status":521,"isNew":25,"lightDom":25},"Card","nord-card","Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",{"name":590,"tagName":591,"description":592,"category":557,"status":521,"isNew":25,"lightDom":25},"Checkbox","nord-checkbox","Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",{"name":594,"tagName":595,"description":596,"category":520,"status":521,"isNew":25,"lightDom":344,"parts":597},"Collapsible","nord-collapsible","Collapsible is a disclosure that shows or hides a section of content. It wires\ntogether a Collapsible Trigger and a\nCollapsible Panel, animating the panel\nheight as it opens and closes.",[598,602],{"name":599,"tagName":600,"description":601},"CollapsiblePanel","nord-collapsible-panel","Collapsible Panel holds the content revealed by its\nCollapsible Trigger. It must be placed\ninside a Collapsible and animates its height as it\nopens and closes.",{"name":603,"tagName":604,"description":605},"CollapsibleTrigger","nord-collapsible-trigger","Collapsible Trigger is the interactive control that opens and closes its\nCollapsible panel. It must be placed inside a\nCollapsible.",{"name":607,"tagName":608,"description":609,"category":557,"status":521,"isNew":25,"lightDom":344,"parts":610},"Combobox","nord-combobox","Combobox lets users choose one option (or several) from a list by typing to\nfilter, then picking with the keyboard or pointer. Use it when a Select\nwould be unwieldy because there are many options to scan.\n\nCombobox is a control only — it has no built-in label, hint or error. Compose\nit inside a Field to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed value is an option's value (or an array of them with\nmultiple); the input is a filter\u002Fsearch field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[611,615],{"name":612,"tagName":613,"description":614},"ComboboxGroup","nord-combobox-group","Groups declarative \u003Cnord-combobox-option> children under a heading inside a\nCombobox:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-group label=\"Frameworks\">\n    \u003Cnord-combobox-option value=\"next\">Next.js\u003C\u002Fnord-combobox-option>\n  \u003C\u002Fnord-combobox-group>\n\u003C\u002Fnord-combobox>\n`\n\nContained options inherit this label as their group. The element renders\nnothing itself and is hidden with display: none`.",{"name":616,"tagName":617,"description":618},"ComboboxOption","nord-combobox-option","A declarative option for a Combobox. Place these as\nchildren of \u003Cnord-combobox> instead of (or as an alternative to) setting the\n.options property:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-option value=\"bug\">Bug\u003C\u002Fnord-combobox-option>\n  \u003Cnord-combobox-option value=\"feature\">Feature\u003C\u002Fnord-combobox-option>\n\u003C\u002Fnord-combobox>\n`\n\nThe option's child markup becomes the rendered row, so you can author custom\nitems (e.g. an avatar + text) without an html string or a render function.\nSet the label attribute when the visible markup isn't plain text, so\nfiltering and the accessible name have something to match on.\n\nThe element renders nothing itself — it is a data source the combobox reads via\ncontext and is hidden with display: none`.",{"name":620,"tagName":621,"description":622,"category":576,"status":521,"isNew":25,"lightDom":25,"parts":623},"CommandMenu","nord-command-menu","Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",[624],{"name":625,"tagName":626,"description":627},"CommandMenuAction","nord-command-menu-action","Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",{"name":629,"tagName":630,"description":631,"category":557,"status":521,"isNew":25,"lightDom":25},"DatePicker","nord-date-picker","\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",{"name":633,"tagName":634,"description":635,"category":557,"status":521,"isNew":25,"lightDom":344},"DateRangePicker","nord-date-range-picker","Date Range Picker lets people choose a start and end date as a single range,\neither from a built-in list of presets (Today, Last 7 days, This month, …) or\nfrom a range calendar. It is a control only — compose it inside a\nField for a label, hint or error, like a native input.\n\nThe committed value is an ISO-8601 interval string YYYY-MM-DD\u002FYYYY-MM-DD;\nthe convenience start-date \u002F end-date props and the valueAsDateRange\ngetter\u002Fsetter stay in sync with it. Selecting in the popout builds a *pending*\nrange; **Apply** commits it (firing change), **Cancel** reverts to the last\ncommitted value, and **Clear** empties it.",{"name":637,"tagName":638,"description":639,"category":543,"status":521,"isNew":25,"lightDom":25},"Divider","nord-divider","Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",{"name":641,"tagName":642,"description":643,"category":543,"status":521,"isNew":25,"lightDom":25},"Drawer","nord-drawer","Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",{"name":645,"tagName":646,"description":647,"category":648,"status":521,"isNew":25,"lightDom":25,"parts":649},"Dropdown","nord-dropdown","Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.","overlay",[650,654,658],{"name":651,"tagName":652,"description":653},"DropdownGroup","nord-dropdown-group","Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",{"name":655,"tagName":656,"description":657},"DropdownItem","nord-dropdown-item","Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",{"name":659,"tagName":660,"description":661},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":663,"tagName":664,"description":665,"category":567,"status":521,"isNew":25,"lightDom":25},"EmptyState","nord-empty-state","Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",{"name":667,"tagName":668,"description":669,"category":557,"status":521,"isNew":25,"lightDom":344,"parts":670},"Field","nord-field","Field is the wrapper for a single form control. It lays out a\nField Label, a control (such as an\nInput), an optional\nField Description and a\nField Error with consistent spacing.\n\nCombine several together in a Field Group and\ngroup related groups with a Field Set.\n\nThe Field shares its state with the control through context: a Nord control\nplaced inside a Field suppresses its own built-in label\u002Fhint\u002Ferror and takes\nits accessible name, description and invalid\u002Fdisabled state from the Field.",[671,675,679,683,687,691,695,699,703],{"name":672,"tagName":673,"description":674},"FieldContent","nord-field-content","Field Content wraps a Field Label and\nField Description so they stay aligned as a\nsingle text block, which is especially useful in horizontal\nField layouts.",{"name":676,"tagName":677,"description":678},"FieldDescription","nord-field-description","Field Description is the helper or hint text for a Field.\nIt is styled to match the hint text used by Nord form controls such as\nInput.",{"name":680,"tagName":681,"description":682},"FieldError","nord-field-error","Field Error displays validation error text for a Field.\nIt is styled to match the error text used by Nord form controls such as\nInput.\n\nExposes itself as a live region (role=\"alert\", aria-live=\"polite\") so the\nmessage is announced when it appears. The message is supplied as the\nelement's children.",{"name":684,"tagName":685,"description":686},"FieldGroup","nord-field-group","Field Group stacks a set of Field controls vertically\nwith consistent spacing. Separate sections with a\nField Separator when needed.",{"name":688,"tagName":689,"description":690},"FieldLabel","nord-field-label","Field Label is the label for a control inside a Field.\nIt is styled to match the labels used by Nord form controls such as\nInput.\n\nThe enclosing Field shares this label's id and text with the control through\ncontext, so the control names itself (aria-labelledby for light-DOM controls,\naria-label for shadow-DOM ones) — no wiring needed. Set the for attribute to\na control's id to additionally get native-style click-to-focus.\n\nThe required indicator is driven by the control: mark the control required\nand the Field toggles this label's required attribute automatically.",{"name":692,"tagName":693,"description":694},"FieldLegend","nord-field-legend","Field Legend labels a Field Set, naming the group of\nfields for assistive technology. Place it as the first child of a Field Set.",{"name":696,"tagName":697,"description":698},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":700,"tagName":701,"description":702},"FieldSet","nord-field-set","Field Set groups related fields under a Field Legend\nfor semantic, accessible grouping. It exposes role=\"group\" named by its\nlegend; wrap a Field Group inside.",{"name":704,"tagName":705,"description":706},"FieldTitle","nord-field-title","Field Title is an emphasized inline title used inside choice-card style\nField layouts, where a Field Label\nwraps a whole selectable field.",{"name":708,"tagName":709,"description":710,"category":557,"status":521,"isNew":25,"lightDom":25},"Fieldset","nord-fieldset","Deprecated: for new code, group related controls with the composable Field\nfamily — see grouping fields with Field.\nnord-fieldset remains supported for backwards compatibility and is not\nscheduled for removal.\n\nFieldset is used for grouping sets of input components. It is necessary to use a\nfieldset with radio and checkbox components, and can also be useful for logically\ngrouping other types of inputs.",{"name":712,"tagName":713,"description":714,"category":557,"status":521,"isNew":25,"lightDom":344,"parts":715},"FilterBar","nord-filter-bar","Filter Bar is a layout wrapper for a row of filter controls. It lays its\nchildren out in a wrapping flex row with a consistent gap, so you can drop in\nFilter Field, Filter Input,\nFilter Add Button and\nFilter Reset Button (or any controls) and\nhave them align without extra styling.\n\nLike Pagination, it is composition-first: it owns no\nfilter state and emits no events. Your app owns the active filters and any URL\nor query-string syncing; the filter primitives only emit intent.",[716,720,724,728,732,736],{"name":717,"tagName":718,"description":719},"FilterAddButton","nord-filter-add-button","Filter Add Button opens a popout of available filters and emits the chosen one\nso your app can add it to the bar. Pass a flat list of options, or group them\nunder headings; selecting one fires a select event with the option's id\nand closes the popout.\n\nLike the other filter primitives it is intent-only: it does not track which\nfilters are active. Your app owns the active filters and decides what to do on\nselect (typically render a new Filter Field).\nMirrors the Provet Cloud filter add button.",{"name":721,"tagName":722,"description":723},"FilterDateRange","nord-filter-date-range","Filter Date Range is a self-contained date-range **filter**: a chip that opens\na popout containing an inline Date Range Picker\n(presets + two-month calendar + Apply). It is the date-range counterpart to\nFilter Dropdown and renders the shared filter\nchip via Filter Field.\n\nComposition-first: it emits change\u002Fclear\u002Fremove and leaves the active\nfilters and any URL\u002Fquery state to your app.",{"name":725,"tagName":726,"description":727},"FilterDropdown","nord-filter-dropdown","Filter Dropdown is a full-featured filter control: a chip trigger that opens a\npopout list of options. It owns its selection and tracks value, unlike the\ncomposition-first Filter Field — pass it options\nand listen for change. It ports the Provet Cloud filter dropdown.\n\nOptions come in three shapes: a flat list ({ value, label }), groups\n({ heading, children }) rendered with dividers, and tree-style options\n(a selectable option with children) where the parent stays selectable and the\nchildren render indented. Single mode tracks a string value and closes on\nselect; multiple tracks an array, shows checkboxes and keeps the popout open.",{"name":729,"tagName":730,"description":731},"FilterField","nord-filter-field","Filter Field is the presentation-only filter **chip**: a joined pill showing a\nleading icon, the filter's label, the active selection summary (value) and\na clear or remove affordance, dashed while inactive. It is the shared chip used\nacross the filter family and the building block for custom filters.\n\nIt owns no popout and tracks no value — drop it into a popout-owning control as\nits slot=\"trigger\" (the host opens\u002Fpositions the popout and sets\naria-controls\u002Faria-haspopup\u002Faria-expanded on this element). Show the\nactive selection with value, reset it in response to clear, and remove the\nwhole field in response to remove. Your app owns the active filters and any\nURL\u002Fquery state.",{"name":733,"tagName":734,"description":735},"FilterInput","nord-filter-input","Filter Input is a compact search\u002Ftext field for filtering a collection. It\nreplaces the small ad-hoc search inputs that sit in toolbars and table\nheaders. By default it renders inline as a small search field with a leading\nsearch icon; set mode=\"chip\" to collapse it behind a chip button that opens\nthe input in a popout, which is handy in a crowded Filter Bar.\n\nIt emits intent only: input as the user types and change when the value is\ncommitted. Your app owns the active filters and any URL\u002Fquery state — read the\nvalue from the event target (or bind value) and filter accordingly.\n\nIt is a control only, like Combobox: compose it inside\na Field for a visible label, or set label for an\naccessible name when used standalone.",{"name":737,"tagName":738,"description":739},"FilterResetButton","nord-filter-reset-button","Filter Reset Button clears every active filter at once. It is a thin,\nintent-only control: it renders a plain button and dispatches a reset event\nwhen pressed. Your app owns the active filters and is responsible for clearing\nthem (and any URL\u002Fquery state) in the handler — the button holds no state of\nits own.\n\nDisable it while there is nothing to reset by binding disabled to whether any\nfilter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud\nfilter reset button.",{"name":741,"tagName":742,"description":743,"category":543,"status":521,"isNew":25,"lightDom":25},"Footer","nord-footer","The footer is a block of designated space for providing additional information or actions that are positioned below the main content.",{"name":745,"tagName":746,"description":747,"category":543,"status":521,"isNew":25,"lightDom":25},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":749,"tagName":750,"description":751,"category":562,"status":521,"isNew":25,"lightDom":25},"Icon","nord-icon","Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",{"name":753,"tagName":754,"description":755,"category":557,"status":521,"isNew":25,"lightDom":25},"Input","nord-input","Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",{"name":757,"tagName":758,"description":759,"category":760,"status":521,"isNew":25,"lightDom":344,"parts":761},"Item","nord-item","Item is a flexible, composable row used to display a piece of content such as\na person, a file or a setting. Combine it with Item Media,\nItem Content, Item Title,\nItem Description and Item Actions\nto build rich list rows. Stack several together with Item Group.\n\nTo make a whole Item act as a link, wrap it in an \u003Ca> element. The row\nhighlights on hover when wrapped this way.","list",[762,766,770,774,778,782,786,790,794],{"name":763,"tagName":764,"description":765},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":767,"tagName":768,"description":769},"ItemContent","nord-item-content","Item Content holds the textual content of an Item,\ntypically an Item Title and an\nItem Description. It grows to fill the\navailable space.",{"name":771,"tagName":772,"description":773},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":775,"tagName":776,"description":777},"ItemFooter","nord-item-footer","Item Footer spans the full width at the bottom of an Item,\nuseful for a row of metadata or trailing actions.",{"name":779,"tagName":780,"description":781},"ItemGroup","nord-item-group","Item Group stacks a set of Item rows vertically and\nexposes them to assistive technology as a list. Separate individual items\nwith Item Separator.",{"name":783,"tagName":784,"description":785},"ItemHeader","nord-item-header","Item Header spans the full width at the top of an Item,\nuseful for a leading image or a row of metadata.",{"name":787,"tagName":788,"description":789},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":791,"tagName":792,"description":793},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":795,"tagName":796,"description":797},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":799,"tagName":800,"description":801,"category":562,"status":521,"isNew":25,"lightDom":344,"parts":802},"Kbd","nord-kbd","Kbd is used to display a keyboard key, such as a shortcut or a key the user\nshould press. Group related keys together with Kbd Group.",[803],{"name":804,"tagName":805,"description":806},"KbdGroup","nord-kbd-group","Kbd Group lays out a set of Kbd keys together, for example\nto represent a multi-key shortcut such as \u003Ckbd>Ctrl\u003C\u002Fkbd> \u003Ckbd>K\u003C\u002Fkbd>.",{"name":808,"tagName":809,"description":810,"category":543,"status":521,"isNew":25,"lightDom":25},"Layout","nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":812,"tagName":813,"description":814,"category":576,"status":521,"isNew":25,"lightDom":25},"Message","nord-message","Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",{"name":816,"tagName":817,"description":818,"category":567,"status":521,"isNew":25,"lightDom":344},"Meter","nord-meter","Meter is a graphical display of a numeric value within a known range,\nsuch as disk usage, a battery level or a score. Unlike Progress Bar, it\nrepresents a static measurement rather than the completion of a task.",{"name":820,"tagName":821,"description":822,"category":648,"status":521,"isNew":25,"lightDom":25},"Modal","nord-modal","Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",{"name":824,"tagName":825,"description":826,"category":827,"status":521,"isNew":25,"lightDom":25,"parts":828},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.","navigation",[829,833,837],{"name":830,"tagName":831,"description":832},"NavGroup","nord-nav-group","Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",{"name":834,"tagName":835,"description":836},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":838,"tagName":839,"description":840},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":842,"tagName":843,"description":844,"category":567,"status":521,"isNew":25,"lightDom":25,"parts":845},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[846],{"name":847,"tagName":848,"description":849},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":851,"tagName":852,"description":853,"category":557,"status":521,"isNew":25,"lightDom":344},"NumberField","nord-number-field","Number Field is a control for entering a numeric value, with decrement and\nincrement stepper buttons, optional drag-to-scrub, and locale-aware\nformatting. It ports the behaviour of Base UI's Number Field: arrow\u002FPage\nstepping, Home\u002FEnd to the bounds, press-and-hold auto-repeat, optional\nwheel\u002Fscrub, clamping, and Intl.NumberFormat formatting.\n\nNumber Field is a control only — it has no built-in label, hint or error.\nCompose it inside a Field with a\nField Label to give it a label, hint and error,\nthe same way you would a native input.\n\nFORM PARTICIPATION: the value is submitted as the raw numeric string under the\nhost name via FormDataController (the inner input has no name, avoiding a\ndouble submit). Unlike Base UI there is no hidden native number input, and —\nlike the other new Nord controls — Number Field does NOT use\nElementInternals, so it performs no native constraint validation: required,\nmin, max and step are NOT enforced as form-blocking validity. min\u002Fmax\ngovern interactive stepping and (unless allow-out-of-range is set) clamp the\nvalue; required only surfaces as required\u002Faria-required on the inner input\nfor assistive technology. Authors must validate constraints themselves and\nreflect failures via invalid and a nord-field-error.\n\nACCESSIBILITY NOTE: the inner control is a text input (with inputmode) and\naria-roledescription=\"Number field\", NOT role=\"spinbutton\" and NOT a\nnative type=\"number\". A text input lets us show locale-formatted text\n(currency, percent, grouping) while keeping full text editing — assistive tech\nreads the formatted value from the input's text. We do NOT add\naria-valuenow\u002Fvaluemin\u002Fvaluemax\u002Fvaluetext: those are only valid on a\nrange role (e.g. spinbutton\u002Fslider) and would fail aria-allowed-attr\nvalidation on a text input. This mirrors what Base UI's NumberFieldInput\nactually ships (only aria-roledescription).",{"name":855,"tagName":856,"description":857,"category":557,"status":521,"isNew":25,"lightDom":344},"OtpField","nord-otp-field","OTP Field is a segmented one-time-code input: it renders length individual\ncharacter cells plus a visually-hidden input that holds the full value, enabling\nSMS \u002F keychain autofill and native pattern\u002Frequired validation. Typing fills\nand auto-advances, Backspace clears and moves back, the arrow keys navigate, and\npasting a code distributes its characters across the cells.\n\nOTP Field is a control only — it has no built-in label, hint or error. Compose\nit inside a Field with a Field Label\n(connected with for) to give it an accessible name, helper text and an error\nmessage, exactly like a native input.",{"name":859,"tagName":860,"description":861,"category":827,"status":521,"isNew":25,"lightDom":25,"parts":862},"Outline","nord-outline","Outline is an in-page table of contents that lists a page's headings and\nhighlights the section currently in view as you scroll.\n\nProvide Outline Item children, or point for at\na container to build the list from its headings.",[863],{"name":864,"tagName":865,"description":866},"OutlineItem","nord-outline-item","Outline Item is a single link within an Outline. It\npoints at an in-page heading via its href and indents according to its\nlevel. Its active state is managed by the parent Outline — you normally\ndon't set it yourself.",{"name":868,"tagName":869,"description":870,"category":827,"status":521,"isNew":25,"lightDom":344,"parts":871},"Pagination","nord-pagination","Pagination is the navigation root for a paginated collection. It is\ncomposition-first: it owns no page state, renders no controls, and emits no\nevents. Your app owns the page state, URL\u002Fquery syncing, cursors and any data\nfetching; Nord supplies the semantic\u002Flayout primitives, the styling and the\npaginate() math utility for building the page window.\n\nAs a root it is a navigation landmark — it sets role=\"navigation\" and a\ndefault accessible label so screen-reader users can jump to it. Compose the\nlower-level primitives inside it:\n\n- Pagination Content — the list row.\n- Pagination Item — a slot in the row.\n- Pagination Link — a page link (set current).\n- Pagination Previous — the previous control.\n- Pagination Next — the next control.\n- Pagination Ellipsis — the collapsed-pages marker.\n\nBring your own interactive element — an \u003Ca> (e.g. a framework \u003CLink> \u002F\n\u003CNuxtLink>) or a nord-button — and own its href, navigation and\ndisabled state. See the framework adapters in the docs.",[872,876,880,884,888,892],{"name":873,"tagName":874,"description":875},"PaginationContent","nord-pagination-content","The list container for composed Pagination controls.\nLays its Pagination Item children out in a row.\n\nPlace it inside Pagination, which is already the\nnavigation landmark (it sets role=\"navigation\" and an accessible label).\nDo not add your own \u003Cnav> wrapper — a second landmark around the same\ncontrols would be a duplicate that screen-reader users have to wade through.",{"name":877,"tagName":878,"description":879},"PaginationEllipsis","nord-pagination-ellipsis","The collapsed-pages marker (…) in a composed Pagination.\nThe glyph is decorative; a visually-hidden label gives it meaning for\nassistive tech. Set label to localise it.",{"name":881,"tagName":882,"description":883},"PaginationItem","nord-pagination-item","A single slot in a composed Pagination Content\nrow. Wrap each control — a Pagination Link,\nPagination Previous, Pagination Next\nor Pagination Ellipsis — in its own item.",{"name":885,"tagName":886,"description":887},"PaginationLink","nord-pagination-link","A page link in a composed Pagination. A layout\nwrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink> for crawlable, SSR-friendly links) or a nord-button. Set\ncurrent on the link for the active page; it mirrors aria-current=\"page\"\nonto the interactive child so assistive tech announces it.",{"name":889,"tagName":890,"description":891},"PaginationNext","nord-pagination-next","The \"next page\" control in a composed Pagination. A\nlayout wrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no next page.",{"name":893,"tagName":894,"description":895},"PaginationPrevious","nord-pagination-previous","The \"previous page\" control in a composed Pagination.\nA layout wrapper around your own interactive element — provide an \u003Ca>\n(e.g. a framework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no previous page.",{"name":897,"tagName":898,"description":899,"category":648,"status":521,"isNew":25,"lightDom":25},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":901,"tagName":902,"description":903,"category":567,"status":521,"isNew":25,"lightDom":25},"Progress","nord-progress","Progress component is used to display a circular pie-chart style progress indicator.\nYou can customize the size and color of the progress indicator with the\nprovided properties.",{"name":905,"tagName":906,"description":907,"category":567,"status":521,"isNew":25,"lightDom":25},"ProgressBar","nord-progress-bar","Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",{"name":909,"tagName":910,"description":911,"category":562,"status":521,"isNew":25,"lightDom":25},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":913,"tagName":914,"description":915,"category":557,"status":521,"isNew":25,"lightDom":25},"Radio","nord-radio","Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",{"name":917,"tagName":918,"description":919,"category":557,"status":521,"isNew":25,"lightDom":25},"Range","nord-range","Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",{"name":921,"tagName":922,"description":923,"category":543,"status":521,"isNew":25,"lightDom":25},"ScrollArea","nord-scroll-area","Scroll Area is a container that wraps overflowing content in a custom scroll\nviewport with consistently-styled scrollbars. Native scrollbars are hidden and\nreplaced with a thin overlay thumb that appears on hover or while scrolling.\n\nIt also exposes the distance from each edge as CSS custom properties\n(--scroll-area-overflow-*), which can drive an edge-fade mask on\n::part(viewport) — see the docs example.\n\nThe scroll machinery lives in shadow DOM; slot your content directly inside.",{"name":925,"tagName":926,"description":927,"category":576,"status":521,"isNew":25,"lightDom":25,"parts":928},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[929],{"name":930,"tagName":931,"description":932},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":934,"tagName":935,"description":936,"category":557,"status":521,"isNew":25,"lightDom":25},"Select","nord-select","Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",{"name":938,"tagName":939,"description":940,"category":567,"status":521,"isNew":25,"lightDom":25},"Skeleton","nord-skeleton","Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",{"name":942,"tagName":943,"description":944,"category":567,"status":521,"isNew":25,"lightDom":25},"Spinner","nord-spinner","Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",{"name":946,"tagName":947,"description":948,"category":543,"status":521,"isNew":25,"lightDom":25},"Stack","nord-stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":950,"tagName":951,"description":952,"category":827,"status":521,"isNew":25,"lightDom":25,"parts":953},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[954,958],{"name":955,"tagName":956,"description":957},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":959,"tagName":960,"description":961},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":963,"tagName":964,"description":965,"category":760,"status":521,"isNew":25,"lightDom":25},"Table","nord-table","Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",{"name":967,"tagName":968,"description":969,"category":562,"status":521,"isNew":25,"lightDom":25,"parts":970},"Tag","nord-tag","Tags represent a set of keywords that help label, categorize,\nand organize objects. Commonly used to signify the attributes of an object.",[971],{"name":972,"tagName":973,"description":974},"TagGroup","nord-tag-group","Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",{"name":976,"tagName":977,"description":978,"category":557,"status":521,"isNew":25,"lightDom":25},"Textarea","nord-textarea","Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",{"name":980,"tagName":981,"description":982,"category":557,"status":521,"isNew":25,"lightDom":25},"TimePicker","nord-time-picker","Time Picker pairs the browser's native time field with a dropdown of quick\noptions, generated at a configurable interval between start and end.\nThe native field handles typing, locale-aware display and validation; the\ndropdown is a shortcut for common times.\n\nThe value is held in ISO HH:mm format.\n\nLike a native input, Time Picker is a control only — it has no built-in\nlabel, hint or error. Compose it inside a Field (with a\nField Label, Field Description\nand Field Error) to label it and add help or error text.",{"name":984,"tagName":985,"description":986,"category":567,"status":521,"isNew":25,"lightDom":25,"parts":987},"Toast","nord-toast","Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",[988],{"name":989,"tagName":990,"description":991},"ToastGroup","nord-toast-group","Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",{"name":993,"tagName":994,"description":995,"category":557,"status":521,"isNew":25,"lightDom":25},"Toggle","nord-toggle","Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",{"name":997,"tagName":998,"description":999,"category":648,"status":521,"isNew":25,"lightDom":25},"Tooltip","nord-tooltip","Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",{"name":1001,"tagName":1002,"description":1003,"category":543,"status":521,"isNew":25,"lightDom":25},"TopBar","nord-top-bar","Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",{"name":1005,"tagName":1006,"description":1007,"category":562,"status":521,"isNew":25,"lightDom":25},"Truncate","nord-truncate","Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.",{"name":1009,"tagName":1010,"description":1011,"category":562,"status":521,"isNew":25,"lightDom":25},"VisuallyHidden","nord-visually-hidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",[1013,1015,1017,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140],{"path":1014,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Faccordion",{"path":1016,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Faside",{"path":1018,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Fautocomplete","2026-07-06",{"path":1021,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Favatar",{"path":1023,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fbadge",{"path":1025,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fbanner",{"path":1027,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fbutton",{"path":1029,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fbutton-group",{"path":1031,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fcalendar",{"path":1033,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fcard",{"path":1035,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fcheckbox",{"path":1037,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fcollapsible",{"path":1039,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Fcombobox",{"path":1041,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fcommand-menu",{"path":1043,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fdate-picker",{"path":1045,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Fdate-range-picker",{"path":1047,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fdivider",{"path":1049,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fdrawer",{"path":1051,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fdropdown",{"path":1053,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fempty-state",{"path":1055,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Ffield",{"path":1057,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ffieldset",{"path":1059,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Ffilter-bar",{"path":1061,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ffilter-date-range",{"path":1063,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ffilter-dropdown",{"path":1065,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ffooter",{"path":1067,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fheader",{"path":1069,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ficon",{"path":1071,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Finput",{"path":1073,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fitem",{"path":1075,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fkbd",{"path":1077,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Flayout",{"path":1079,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fmessage",{"path":1081,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fmeter",{"path":1083,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fmodal",{"path":1085,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fnavigation",{"path":1087,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fnotification",{"path":1089,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Fnumber-field",{"path":1091,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Fotp-field",{"path":1093,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Foutline",{"path":1095,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fpagination",{"path":1097,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fpopout",{"path":1099,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fprogress",{"path":1101,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fprogress-bar",{"path":1103,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fqrcode",{"path":1105,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fradio",{"path":1107,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Frange",{"path":1109,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Fscroll-area",{"path":1111,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fsegmented-control",{"path":1113,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Fselect",{"path":1115,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fskeleton",{"path":1117,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fspinner",{"path":1119,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fstack",{"path":1121,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftab",{"path":1123,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftable",{"path":1125,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftag",{"path":1127,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Ftextarea",{"path":1129,"isNew":344,"updated":1019},"\u002Fcomponent-docs\u002Ftime-picker",{"path":1131,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftoast",{"path":1133,"isNew":25,"updated":1019},"\u002Fcomponent-docs\u002Ftoggle",{"path":1135,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftooltip",{"path":1137,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Ftop-bar",{"path":1139,"isNew":344,"updated":6},"\u002Fcomponent-docs\u002Ftruncate",{"path":1141,"isNew":25,"updated":6},"\u002Fcomponent-docs\u002Fvisually-hidden",[1143,1649,1925,2723,2787,3021,3207,3402,4803,5633],{"id":1144,"title":154,"badge":6,"body":1145,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":1644,"native":25,"navTitle":6,"navigation":344,"path":153,"railLabel":6,"seo":1645,"sidebar":25,"sitemap":1646,"stem":1647,"tabs":6,"__hash__":1648},"guidelines\u002Fdesign\u002Ffoundations\u002F01.accessibility-checklist.md",{"type":8,"value":1146,"toc":1634},[1147,1152,1161,1166,1263,1266,1328,1332,1448,1452,1496,1500,1532,1536,1562,1566,1592,1596],[11,1148,1149],{},[14,1150,1151],{},"This is an accessibility checklist that we use when building new features. It helps us improve the experience for everyone who uses our products and ensures our high standards are met.",[14,1153,1154,1155,1160],{},"For our public commitment to accessibility, see the ",[1156,1157,1159],"a",{"href":1158},"\u002Fresources\u002Faccessibility-statement\u002F","accessibility statement",".",[1162,1163,1165],"h2",{"id":1164},"generic","Generic",[947,1167,1168,1182,1193,1203,1213,1224,1235,1246,1257],{},[1169,1170,1172],"checklist-item",{"label":1171},"Nord's automated accessibility tests pass.",[14,1173,1174,1175,1181],{},"You can run automated tests by running \"pnpm test\" in the ",[1156,1176,1180],{"href":1177,"rel":1178},"https:\u002F\u002Fgithub.com\u002Fnordhealth\u002Fdesign-system",[1179],"nofollow","root of the project",". Please note this runs Axe too.",[1169,1183,1185],{"label":1184},"Passes automated validation using Axe Chrome extension.",[14,1186,1187,1192],{},[1156,1188,1191],{"href":1189,"rel":1190},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Faxe-devtools-web-accessib\u002Flhdoppojpmngadmnindnejefpokejbdd?hl=en-US",[1179],"Download and install"," Axe Chrome extension to check off this item.",[1169,1194,1196],{"label":1195},"Works with NVDA screen reader on Windows.",[14,1197,1198,1202],{},[1156,1199,1191],{"href":1200,"rel":1201},"https:\u002F\u002Fwww.nvaccess.org\u002Fdownload\u002F",[1179]," NVDA for Windows to check off this item.",[1169,1204,1206],{"label":1205},"Works with Jaws screen reader on Windows.",[14,1207,1208,1212],{},[1156,1209,1191],{"href":1210,"rel":1211},"https:\u002F\u002Fsupport.freedomscientific.com\u002FDownloads\u002FJAWS",[1179]," Jaws for Windows to check off this item.",[1169,1214,1216],{"label":1215},"Works with VoiceOver on macOS.",[14,1217,1218,1219,1160],{},"macOS ships with VoiceOver which can be enabled ",[1156,1220,1223],{"href":1221,"rel":1222},"https:\u002F\u002Fsupport.apple.com\u002Fguide\u002Fvoiceover\u002Fwelcome\u002Fmac",[1179],"through preferences",[1169,1225,1227],{"label":1226},"Works with TalkBack on Android.",[14,1228,1229,1230,1160],{},"Android ships with TalkBack which can be enabled by following ",[1156,1231,1234],{"href":1232,"rel":1233},"https:\u002F\u002Fsupport.google.com\u002Faccessibility\u002Fandroid\u002Fanswer\u002F6007100?hl=en",[1179],"these instructions",[1169,1236,1238],{"label":1237},"Works with Windows high contrast mode.",[14,1239,1240,1245],{},[1156,1241,1244],{"href":1242,"rel":1243},"https:\u002F\u002Fassistivlabs.com\u002Fassistive-tech\u002Fdisplay\u002Fhigh-contrast-mode",[1179],"High contrast mode"," uses a limited color palette with contrasting colors to make an interface easier to use.",[1169,1247,1249],{"label":1248},"Works when text size is increased to 200%.",[14,1250,1251,1252,1256],{},"Follow ",[1156,1253,1234],{"href":1254,"rel":1255},"https:\u002F\u002Fsupport.google.com\u002Fchrome\u002Fanswer\u002F96810?hl=en&co=GENIE.Platform%3DDesktop",[1179]," to change the default text size in Chrome.",[1169,1258,1260],{"label":1259},"Works when zoomed in 400%.",[14,1261,1262],{},"Most browsers allow you to zoom in or out using Cmd and +\u002F- keys.",[1162,1264,1265],{"id":562},"Content",[947,1267,1268,1280,1286,1298,1304,1310,1316,1322],{},[1169,1269,1271],{"label":1270},"Content is written in a plain and clear language.",[14,1272,1273,1274,1279],{},"Accessible writing ensures your content is understandable for everyone to read. Use ",[1156,1275,1278],{"href":1276,"rel":1277},"https:\u002F\u002Fdatayze.com\u002Freadability-analyzer.php",[1179],"Readability Analyzer set to '8th grade level'"," to check your writing.",[1169,1281,1283],{"label":1282},"\u003Cbutton>, \u003Ca>, and \u003Clabel> contents are unique and descriptive.",[14,1284,1285],{},"Avoid terms like \"click here\" and \"read more\" which do not provide any context for the user.",[1169,1287,1289],{"label":1288},"There is only one \u003Ch1> heading per page.",[14,1290,1291,1292,1297],{},"The ",[1156,1293,1296],{"href":1294,"rel":1295},"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.1\u002Fpage-has-heading-one",[1179],"h1 element"," should be used to communicate the high-level purpose of the page or view.",[1169,1299,1301],{"label":1300},"Heading elements appear in logical order.",[14,1302,1303],{},"The order of heading elements should descend, based on the depth of the content.",[1169,1305,1307],{"label":1306},"Heading levels aren't skipped.",[14,1308,1309],{},"If heading levels need to be skipped for a specific visual style, use CSS classes instead.",[1169,1311,1313],{"label":1312},"List elements (\u003Col>, \u003Cul>, \u003Cdl>) are used for list content.",[14,1314,1315],{},"This may also include sections of related content and items displayed in a grid layout.",[1169,1317,1319],{"label":1318},"A skip link is provided that is keyboard focusable.",[14,1320,1321],{},"A skip link is used to provide direct access to the main content of a page or view.",[1169,1323,1325],{"label":1324},"Main content's line height is at least 1.5 times the font size.",[14,1326,1327],{},"People with low vision require increased space between lines to be able to read text.",[1162,1329,1331],{"id":1330},"markup","Markup",[947,1333,1334,1345,1357,1368,1379,1390,1396,1408,1414,1420,1426,1432,1438],{},[1169,1335,1337],{"label":1336},"HTML has been validated with W3 validator.",[14,1338,1339,1344],{},[1156,1340,1343],{"href":1341,"rel":1342},"https:\u002F\u002Fvalidator.w3.org\u002Fnu\u002F",[1179],"Valid HTML"," helps to provide a consistent, expected experience across all browsers.",[1169,1346,1348],{"label":1347},"\u003Chtml> element has correct lang attribute.",[14,1349,1350,1351,1356],{},"This ",[1156,1352,1355],{"href":1353,"rel":1354},"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.1\u002Fhtml-has-lang",[1179],"helps assistive technologies",", such as screen readers, to pronounce content correctly.",[1169,1358,1360],{"label":1359},"Each page has a unique \u003Ctitle>.",[14,1361,1350,1362,1367],{},[1156,1363,1366],{"href":1364,"rel":1365},"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.1\u002Fdocument-title",[1179],"helps people"," using assistive technologies to understand what view they are going to start navigating.",[1169,1369,1371],{"label":1370},"Markup uses landmarks to indicate content regions.",[14,1372,1373,1378],{},[1156,1374,1377],{"href":1375,"rel":1376},"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.1\u002Fregion",[1179],"Landmarks"," help communicate the layout, and allow direct access to these regions.",[1169,1380,1382],{"label":1381},"No tabindex attribute values other than 0 or -1.",[14,1383,1384,1385,1160],{},"Elements that are inherently focusable ",[1156,1386,1389],{"href":1387,"rel":1388},"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.1\u002Ftabindex",[1179],"don't require a tabindex",[1169,1391,1393],{"label":1392},"No autofocus attributes in markup.",[14,1394,1395],{},"Autofocus HTML attribute should be avoided. Focus into fields programmatically instead where necessary.",[1169,1397,1399],{"label":1398},"No title attribute tooltips in markup.",[14,1400,1401,1402,1407],{},"The title attribute has ",[1156,1403,1406],{"href":1404,"rel":1405},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FGlobal_attributes\u002Ftitle#accessibility_concerns",[1179],"multiple issues"," and should not be used.",[1169,1409,1411],{"label":1410},"\u003Ca> element is used for all links.",[14,1412,1413],{},"Links should always have a href attribute, even in SPAs. Without this, the link won't be properly recognized.",[1169,1415,1417],{"label":1416},"\u003Cbutton> element is used for all buttons.",[14,1418,1419],{},"Users of assistive technology expect a button to do an action. If you need to navigate into another view, use a link.",[1169,1421,1423],{"label":1422},"\u003Ctable> element is used to describe tabular data.",[14,1424,1425],{},"Do you need to display data in rows and columns? Use table element.",[1169,1427,1429],{"label":1428},"\u003Cth> is used for table headers.",[14,1430,1431],{},"Correct use of table headers helps users of assistive technology to understand your data.",[1169,1433,1435],{"label":1434},"\u003Ccaption> element is used to provide titles for tables.",[14,1436,1437],{},"A caption should describe what kind of information the table contains.",[1169,1439,1441],{"label":1440},"\u003Cnord-visually-hidden> is used instead of aria-label.",[14,1442,1443,1447],{},[1156,1444,1446],{"href":1445},"\u002Fcomponents\u002Fvisually-hidden\u002F","Nord Visually Hidden"," provides wider support for assistive technology and different locales.",[1162,1449,1451],{"id":1450},"keyboard","Keyboard",[947,1453,1454,1460,1472,1478,1484,1490],{},[1169,1455,1457],{"label":1456},"Tested to be keyboard accessible.",[14,1458,1459],{},"Some people cannot use a mouse, so it's important that the interface can be navigated with a keyboard.",[1169,1461,1463],{"label":1462},"All interactive elements have visible focus styles.",[14,1464,1465,1466,1471],{},"Can a person navigating with a keyboard, ",[1156,1467,1470],{"href":1468,"rel":1469},"https:\u002F\u002Faxesslab.com\u002Fswitches\u002F",[1179],"switch",", voice control, or screen reader see where they currently are?",[1169,1473,1475],{"label":1474},"Keyboard focus order matches the visual layout.",[14,1476,1477],{},"Can a person move around the page in a predictable way?",[1169,1479,1481],{"label":1480},"There are no invisible focusable elements.",[14,1482,1483],{},"Remove any elements that are not presently meant to be discoverable.",[1169,1485,1487],{"label":1486},"Buttons are accessible using space and enter keys.",[14,1488,1489],{},"Users of assistive technology expect a button to behave in a certain way.",[1169,1491,1493],{"label":1492},"Dialogs and overlays can be closed using esc key.",[14,1494,1495],{},"As well as using the \"close\" button, it should be possible to close a dialog by pressing the Esc key.",[1162,1497,1499],{"id":1498},"images","Images",[947,1501,1502,1508,1514,1520],{},[1169,1503,1505],{"label":1504},"All \u003Cimg> elements have alt attribute values.",[14,1506,1507],{},"alt attributes help explain images to people who may not be able to view them.",[1169,1509,1511],{"label":1510},"Complex charts and graphs have text alternatives.",[14,1512,1513],{},"Describe all visible information in text format as well. This includes graph axes, data points and labels.",[1169,1515,1517],{"label":1516},"Decorative \u003Csvg> elements use aria-hidden='true'.",[14,1518,1519],{},"Decorative images don't communicate information that is required to understand the interface's overall meaning.",[1169,1521,1523],{"label":1522},"\u003Cimg> elements with an \u003Csvg> source use role='img' attribute.",[14,1524,1525,1526,1531],{},"If you are using embedded SVGs, ",[1156,1527,1530],{"href":1528,"rel":1529},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FRoles\u002Fimg_role#svg_and_roleimg",[1179],"always set role=\"img\""," and give the element a label.",[1162,1533,1535],{"id":1534},"forms","Forms",[947,1537,1538,1544,1550,1556],{},[1169,1539,1541],{"label":1540},"All inputs are associated with a corresponding label element.",[14,1542,1543],{},"Use a for\u002Fid pairing to guarantee the highest level of browser support.",[1169,1545,1547],{"label":1546},"\u003Cfieldset> and \u003Clegend> elements are used where appropriate.",[14,1548,1549],{},"Use fieldset to group sections of related inputs, and legend to provide a label for the section.",[1169,1551,1553],{"label":1552},"Form input fields support autocomplete where appropriate.",[14,1554,1555],{},"Supporting autocomplete allows users to utilise existing text entry features on their device, minimising friction when filling in forms.",[1169,1557,1559],{"label":1558},"Input error messages are associated with the inputs they correspond to.",[14,1560,1561],{},"This allows users to clearly understand the difference between the input and the error.",[1162,1563,1565],{"id":1564},"color-contrast","Color contrast",[947,1567,1568,1574,1580,1586],{},[1169,1569,1571],{"label":1570},"All text contents have a contrast ratio of at least 4.5:1.",[14,1572,1573],{},"Level AA compliance requires a contrast ratio of 4.5:1.",[1169,1575,1577],{"label":1576},"All UI components have a contrast ratio of at least 3:1.",[14,1578,1579],{},"Level AA compliance requires a contrast ratio of 3:1.",[1169,1581,1583],{"label":1582},"Interface has been tested with a color blindness simulator.",[14,1584,1585],{},"If you are not suffering from a color vision deficiency, it's hard to imagine what it looks like to be colorblind.",[1169,1587,1589],{"label":1588},"Color isn't the only way information\u002Fmeaning is conveyed.",[14,1590,1591],{},"This makes it impossible for people who are visually impaired, or who struggle to distinguish colors, to access information.",[1162,1593,1595],{"id":1594},"mobile","Mobile",[947,1597,1598,1604,1610,1616,1628],{},[1169,1599,1601],{"label":1600},"Website can be rotated to any orientation.",[14,1602,1603],{},"Does the interface allow both landscape and portrait orientations?",[1169,1605,1607],{"label":1606},"Website works on 320px wide viewport.",[14,1608,1609],{},"Make sure the interface stays usable even on the smallest viewports.",[1169,1611,1613],{"label":1612},"The whole page doesn't scroll horizontally.",[14,1614,1615],{},"Requiring users to scroll horizontally can be difficult for some people.",[1169,1617,1619],{"label":1618},"All touch targets are at least 44x44px, except when placed inline.",[14,1620,1621,1622,1627],{},"Ensure that touch target sizes are ",[1156,1623,1626],{"href":1624,"rel":1625},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Ftarget-size.html",[1179],"large enough"," for users to activate them.",[1169,1629,1631],{"label":1630},"Viewport zooming isn't disabled.",[14,1632,1633],{},"Some users need to increase the size of content so that they can read it. Do not stop them from doing this.",{"title":21,"searchDepth":22,"depth":22,"links":1635},[1636,1637,1638,1639,1640,1641,1642,1643],{"id":1164,"depth":22,"text":1165},{"id":562,"depth":22,"text":1265},{"id":1330,"depth":22,"text":1331},{"id":1450,"depth":22,"text":1451},{"id":1498,"depth":22,"text":1499},{"id":1534,"depth":22,"text":1535},{"id":1564,"depth":22,"text":1565},{"id":1594,"depth":22,"text":1595},{},{"title":154,"description":21},{"loc":153},"design\u002Ffoundations\u002F01.accessibility-checklist","QGMEl3aW-iVYD52EW2q4XhWNHl53dnvfDfrJihHKQnk",{"id":1650,"title":157,"badge":6,"body":1651,"description":1904,"extension":26,"external":25,"icon":6,"keywords":6,"meta":1905,"native":25,"navTitle":6,"navigation":344,"path":156,"railLabel":6,"seo":1907,"sidebar":25,"sitemap":1908,"stem":1923,"tabs":6,"__hash__":1924},"guidelines\u002Fdesign\u002Ffoundations\u002F02.colors.md",{"type":8,"value":1652,"toc":1884},[1653,1658,1669,1674,1682,1685,1688,1693,1700,1704,1716,1720,1734,1736,1740,1747,1751,1754,1761,1769,1773,1776,1780,1784,1787,1791,1795,1799,1802,1806,1810,1814,1817,1821,1825,1828,1832,1836,1839,1843,1847,1850,1854,1858,1860,1864,1870,1872,1876],[11,1654,1655],{},[14,1656,1657],{},"Nord Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.",[1659,1660],"img",{"src":1661,"className":1662,"height":1666,"width":1667,"alt":1668},"\u002Fimg\u002Fcolors\u002Fcolors.svg",[1663,1664,1665],"n-border","n-border-radius","n-brand-therapy",450,800,"Nord Color System",[1659,1670],{"src":1671,"className":1672,"height":1666,"width":1667,"alt":1668},"\u002Fimg\u002Fcolors\u002Fcolors-vet.svg",[1663,1664,1673],"n-brand-veterinary",[14,1675,1676,1677,1681],{},"When designing digital products you can use Nord Design System’s ",[1156,1678,1680],{"href":1679},"\u002Fcore\u002Ftokens\u002F","color system"," to pick color combinations that work harmoniously, adapt based on usage, and provide support for different appearance modes like light and dark.",[1683,1684],"hr",{},[1162,1686,162],{"id":1687},"principles",[1689,1690,1692],"h3",{"id":1691},"use-sparingly-and-intentionally","Use sparingly and intentionally",[14,1694,1695,1696,1699],{},"Nord Design System uses ",[1156,1697,1698],{"href":1679},"functional coloring"," that supports products designed to be run on workstations. Color is used to communicate not to decorate. We use color sparingly and intentionally in order to emphasize important information. The color system facilitates all-day use while minimizing visual fatigue.",[1689,1701,1703],{"id":1702},"utilize-color-roles","Utilize color roles",[14,1705,1706,1707,1710,1711,1715],{},"We offer a ",[1156,1708,1709],{"href":1679},"curated palette of colors"," that are intended for specific roles within Nord Design System. For example, we apply consistent coloring to ",[1156,1712,1714],{"href":1713},"\u002Fcomponents\u002F","components"," such as text, status, buttons, and navigation. This helps users to identify a component and understand its relationship to its environment.",[1689,1717,1719],{"id":1718},"make-it-accessible","Make it accessible",[14,1721,1722,1723,1727,1728,1733],{},"When the color system is applied, it will be in compliance with color ",[1156,1724,1726],{"href":1725},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist\u002F","accessibility standards",". We support ",[1156,1729,1732],{"href":1730,"rel":1731},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG21\u002F#distinguishable",[1179],"WCAG 2.1"," level AA which requires 4.5:1 contrast for text. We never rely solely on color for communication in Nord Design System. Accessibility ensures that our product works for people with visual impairments and improves legibility for all users.",[1683,1735],{},[1162,1737,1739],{"id":1738},"applying-colors-to-interface","Applying colors to interface",[14,1741,1742,1743,1746],{},"Nord Design System uses common patterns of color application to create consistency and convey meaning. The below sections explain in detail how to use and apply ",[1156,1744,1745],{"href":1679},"Nord Design System’s colors"," in different contexts.",[1689,1748,1750],{"id":1749},"surface-colors","Surface colors",[14,1752,1753],{},"Surface colors are the default UI surfaces for applications. Surface colors are used for pages, modals, tables, headers, and cards. Surfaces live on top of backgrounds. All content such as text, buttons, forms, and icons should be placed on a surface.",[14,1755,1756,1757,1160],{},"The basic structure of an application in Nord Design System is ",[1758,1759,1760],"code",{},"Background > Surface > Content",[1659,1762],{"src":1763,"width":1764,"height":1765,"className":1766,"style":1767,"alt":1750,"loading":1768},"\u002Fimg\u002Fcolors\u002F1.png",1600,950,[1663],"border-radius: var(--n-border-radius)","lazy",[1689,1770,1772],{"id":1771},"text-colors","Text colors",[14,1774,1775],{},"Text always appears on a surface and contains modifiers to indicate hierarchy, status, and importance.",[1659,1777],{"src":1778,"width":1764,"height":1765,"className":1779,"style":1767,"alt":1772,"loading":1768},"\u002Fimg\u002Fcolors\u002F2.png",[1663],[1689,1781,1783],{"id":1782},"accent-colors","Accent colors",[14,1785,1786],{},"This is the accent color for a design. It is used as primary button background, hero area backgrounds, selected states, and such.",[1659,1788],{"src":1789,"width":1764,"height":1765,"className":1790,"style":1767,"alt":1783,"loading":1768},"\u002Fimg\u002Fcolors\u002F3.png",[1663,1665],[1659,1792],{"src":1793,"width":1764,"height":1765,"className":1794,"style":1767,"alt":1783,"loading":1768},"\u002Fimg\u002Fcolors\u002F3-vet.png",[1663,1673],[1689,1796,1798],{"id":1797},"navigation-colors","Navigation colors",[14,1800,1801],{},"This is the color for sidebar navigation. The sidebar color helps to distinguish navigation from other surfaces.",[1659,1803],{"src":1804,"width":1764,"height":1765,"className":1805,"style":1767,"alt":1798,"loading":1768},"\u002Fimg\u002Fcolors\u002F4.png",[1663,1665],[1659,1807],{"src":1808,"width":1764,"height":1765,"className":1809,"style":1767,"alt":1798,"loading":1768},"\u002Fimg\u002Fcolors\u002F4-vet.png",[1663,1673],[1689,1811,1813],{"id":1812},"border-colors","Border colors",[14,1815,1816],{},"Borders can define the edges of a component or separate content areas.",[1659,1818],{"src":1819,"width":1764,"height":1765,"className":1820,"style":1767,"alt":1813,"loading":1768},"\u002Fimg\u002Fcolors\u002F5.png",[1663],[1689,1822,1824],{"id":1823},"status-colors","Status colors",[14,1826,1827],{},"Color can be used to highlight important information by giving it a status. For example the green success status indicates a strong positive state.",[1659,1829],{"src":1830,"width":1764,"height":1765,"className":1831,"style":1767,"alt":1824,"loading":1768},"\u002Fimg\u002Fcolors\u002F6.png",[1663],[1689,1833,1835],{"id":1834},"button-colors","Button colors",[14,1837,1838],{},"Button colors are used to define the default button style and states in Nord Design System.",[1659,1840],{"src":1841,"width":1764,"height":1765,"className":1842,"style":1767,"alt":1835,"loading":1768},"\u002Fimg\u002Fcolors\u002F7.png",[1663],[1689,1844,1846],{"id":1845},"icon-colors","Icon colors",[14,1848,1849],{},"Icon colors should be used when an icon is placed on a surface. If an icon appears on the accent color, use the text-on-accent color in place of the default icon color.",[1659,1851],{"src":1852,"width":1764,"height":1765,"className":1853,"style":1767,"alt":1846,"loading":1768},"\u002Fimg\u002Fcolors\u002F8.png",[1663,1665],[1659,1855],{"src":1856,"width":1764,"height":1765,"className":1857,"style":1767,"alt":1846,"loading":1768},"\u002Fimg\u002Fcolors\u002F8-vet.png",[1663,1673],[1683,1859],{},[1162,1861,1863],{"id":1862},"figma-usage","Figma usage",[14,1865,1866,1867,1160],{},"You can find the color variables for all our themes in the ",[1156,1868,165],{"href":1869},"\u002Fdesign\u002Ffoundations\u002Ffigma\u002F",[1683,1871],{},[1162,1873,1875],{"id":1874},"getting-support","Getting support",[14,1877,1878,1879,1883],{},"Have a question about color usage? Please head over to the ",[1156,1880,1882],{"href":1881},"\u002Fresources\u002Fsupport\u002F","Support page"," for more guidelines and ways to contact us.",{"title":21,"searchDepth":22,"depth":22,"links":1885},[1886,1892,1902,1903],{"id":1687,"depth":22,"text":162,"children":1887},[1888,1890,1891],{"id":1691,"depth":1889,"text":1692},3,{"id":1702,"depth":1889,"text":1703},{"id":1718,"depth":1889,"text":1719},{"id":1738,"depth":22,"text":1739,"children":1893},[1894,1895,1896,1897,1898,1899,1900,1901],{"id":1749,"depth":1889,"text":1750},{"id":1771,"depth":1889,"text":1772},{"id":1782,"depth":1889,"text":1783},{"id":1797,"depth":1889,"text":1798},{"id":1812,"depth":1889,"text":1813},{"id":1823,"depth":1889,"text":1824},{"id":1834,"depth":1889,"text":1835},{"id":1845,"depth":1889,"text":1846},{"id":1862,"depth":22,"text":1863},{"id":1874,"depth":22,"text":1875},"Nord Design System uses a color system to guide users, create a branded look-and-feel, draw attention to important information, and make content more accessible.",{"menuSection":1906},"guidelines",{"title":157,"description":1904},{"loc":156,"images":1909},[1910,1911,1912,1913,1914,1915,1916,1917,1918,1919,1920,1921,1922],{"loc":1661},{"loc":1671},{"loc":1763},{"loc":1778},{"loc":1789},{"loc":1793},{"loc":1804},{"loc":1808},{"loc":1819},{"loc":1830},{"loc":1841},{"loc":1852},{"loc":1856},"design\u002Ffoundations\u002F02.colors","BfGIf9yXC8I4Zn1sW44u15XZ5sQgtP9mX0VM1WopJDQ",{"id":1926,"title":94,"badge":1927,"body":1930,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":2718,"native":25,"navTitle":6,"navigation":344,"path":159,"railLabel":6,"seo":2719,"sidebar":25,"sitemap":2720,"stem":2721,"tabs":6,"__hash__":2722},"guidelines\u002Fdesign\u002Ffoundations\u002F03.color-utilities.md",{"package":1928,"variant":1929},"color","highlight",{"type":8,"value":1931,"toc":2709},[1932,1937,1948,1951,1958,2084,2090,2092,2095,2104,2123,2126,2190,2193,2219,2240,2242,2246,2259,2310,2317,2319,2323,2328,2355,2368,2373,2490,2493,2567,2569,2573,2578,2617,2619,2623,2628,2665,2671,2673,2677,2690,2697,2699,2701,2705],[11,1933,1934],{},[14,1935,1936],{},"Nord Design System includes a collection of color utilities that are meant for creating and maintaining consistent and accessible color palettes.",[14,1938,1939,1940,1943,1944,1947],{},"Integrating ",[1758,1941,1942],{},"@nordhealth\u002Fcolor"," into your project is straightforward. You can start using our color utilities immediately by adding this tag to the ",[1758,1945,1946],{},"\u003Chead>"," of your application:",[1949,1950],"nord-asset",{"name":1928},[14,1952,1953,1954,1957],{},"With the above script tag added, you now have access to all of Nord’s color utilities via ",[1758,1955,1956],{},"NordColor"," function:",[1959,1960,1964],"pre",{"className":1961,"code":1962,"language":1963,"meta":21,"style":21},"language-html shiki shiki-themes github-light github-dark","\u003Cscript>\n  const contrastRatio = NordColor.getContrastRatio(textColor, backgroundColor)\n  const colorPalette = NordColor.getColorPalette({ hues: 18 })\n  const hexToRgb = NordColor.hexToRgb('#3559c7')\n  const rgbToHex = NordColor.rgbToHex('rgb(53, 89, 199)')\n\u003C\u002Fscript>\n","html",[1758,1965,1966,1981,2004,2027,2052,2074],{"__ignoreMap":21},[1967,1968,1970,1974,1978],"span",{"class":1969,"line":30},"line",[1967,1971,1973],{"class":1972},"sVt8B","\u003C",[1967,1975,1977],{"class":1976},"s9eBZ","script",[1967,1979,1980],{"class":1972},">\n",[1967,1982,1983,1987,1991,1994,1997,2001],{"class":1969,"line":22},[1967,1984,1986],{"class":1985},"szBVR","  const",[1967,1988,1990],{"class":1989},"sj4cs"," contrastRatio",[1967,1992,1993],{"class":1985}," =",[1967,1995,1996],{"class":1972}," NordColor.",[1967,1998,2000],{"class":1999},"sScJk","getContrastRatio",[1967,2002,2003],{"class":1972},"(textColor, backgroundColor)\n",[1967,2005,2006,2008,2011,2013,2015,2018,2021,2024],{"class":1969,"line":1889},[1967,2007,1986],{"class":1985},[1967,2009,2010],{"class":1989}," colorPalette",[1967,2012,1993],{"class":1985},[1967,2014,1996],{"class":1972},[1967,2016,2017],{"class":1999},"getColorPalette",[1967,2019,2020],{"class":1972},"({ hues: ",[1967,2022,2023],{"class":1989},"18",[1967,2025,2026],{"class":1972}," })\n",[1967,2028,2030,2032,2035,2037,2039,2042,2045,2049],{"class":1969,"line":2029},4,[1967,2031,1986],{"class":1985},[1967,2033,2034],{"class":1989}," hexToRgb",[1967,2036,1993],{"class":1985},[1967,2038,1996],{"class":1972},[1967,2040,2041],{"class":1999},"hexToRgb",[1967,2043,2044],{"class":1972},"(",[1967,2046,2048],{"class":2047},"sZZnC","'#3559c7'",[1967,2050,2051],{"class":1972},")\n",[1967,2053,2055,2057,2060,2062,2064,2067,2069,2072],{"class":1969,"line":2054},5,[1967,2056,1986],{"class":1985},[1967,2058,2059],{"class":1989}," rgbToHex",[1967,2061,1993],{"class":1985},[1967,2063,1996],{"class":1972},[1967,2065,2066],{"class":1999},"rgbToHex",[1967,2068,2044],{"class":1972},[1967,2070,2071],{"class":2047},"'rgb(53, 89, 199)'",[1967,2073,2051],{"class":1972},[1967,2075,2077,2080,2082],{"class":1969,"line":2076},6,[1967,2078,2079],{"class":1972},"\u003C\u002F",[1967,2081,1977],{"class":1976},[1967,2083,1980],{"class":1972},[570,2085,2087],{"variant":2086},"warning",[14,2088,2089],{},"Whilst this is a fast way to get started, we recommend using a bundler for production, for optimal performance. For instructions, keep reading below.",[1683,2091],{},[1162,2093,76],{"id":2094},"installation",[14,2096,2097,2098,2103],{},"Before moving further with the installation, please make sure you have ",[1156,2099,2102],{"href":2100,"rel":2101},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[1179],"Node.js"," installed on your machine. You can install the latest version through their website.",[14,2105,2106,2107,2112,2113,2118,2119,2122],{},"If you’re planning on using Nord Design System’s Color Utilities in a project that doesn’t yet use ",[1156,2108,2111],{"href":2109,"rel":2110},"https:\u002F\u002Fwww.npmjs.com",[1179],"Node Package Manager",", you’ll have to first create a ",[1156,2114,2117],{"href":2115,"rel":2116},"https:\u002F\u002Fdocs.npmjs.com\u002Ffiles\u002Fpackage.json",[1179],"package.json"," file. To do this, run ",[1758,2120,2121],{},"npm init"," and follow the steps provided. Once finished, you can install Nord’s Color Utilities by following the instructions below.",[14,2124,2125],{},"Run in your project or website root directory (where package.json lives):",[1959,2127,2131],{"className":2128,"code":2129,"language":2130,"meta":21,"style":21},"language-bash shiki shiki-themes github-light github-dark","# With npm\nnpm install @nordhealth\u002Fcolor\n\n# With pnpm\npnpm install @nordhealth\u002Fcolor\n\n# With Yarn\nyarn add @nordhealth\u002Fcolor\n","bash",[1758,2132,2133,2139,2150,2155,2160,2169,2173,2179],{"__ignoreMap":21},[1967,2134,2135],{"class":1969,"line":30},[1967,2136,2138],{"class":2137},"sJ8bj","# With npm\n",[1967,2140,2141,2144,2147],{"class":1969,"line":22},[1967,2142,2143],{"class":1999},"npm",[1967,2145,2146],{"class":2047}," install",[1967,2148,2149],{"class":2047}," @nordhealth\u002Fcolor\n",[1967,2151,2152],{"class":1969,"line":1889},[1967,2153,2154],{"emptyLinePlaceholder":344},"\n",[1967,2156,2157],{"class":1969,"line":2029},[1967,2158,2159],{"class":2137},"# With pnpm\n",[1967,2161,2162,2165,2167],{"class":1969,"line":2054},[1967,2163,2164],{"class":1999},"pnpm",[1967,2166,2146],{"class":2047},[1967,2168,2149],{"class":2047},[1967,2170,2171],{"class":1969,"line":2076},[1967,2172,2154],{"emptyLinePlaceholder":344},[1967,2174,2176],{"class":1969,"line":2175},7,[1967,2177,2178],{"class":2137},"# With Yarn\n",[1967,2180,2182,2185,2188],{"class":1969,"line":2181},8,[1967,2183,2184],{"class":1999},"yarn",[1967,2186,2187],{"class":2047}," add",[1967,2189,2149],{"class":2047},[14,2191,2192],{},"Once installed, you can import the necessary tools from the color package:",[1959,2194,2198],{"className":2195,"code":2196,"language":2197,"meta":21,"style":21},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F Import one utility\nimport { getContrastRatio } from '@nordhealth\u002Fcolor'\n","js",[1758,2199,2200,2205],{"__ignoreMap":21},[1967,2201,2202],{"class":1969,"line":30},[1967,2203,2204],{"class":2137},"\u002F\u002F Import one utility\n",[1967,2206,2207,2210,2213,2216],{"class":1969,"line":22},[1967,2208,2209],{"class":1985},"import",[1967,2211,2212],{"class":1972}," { getContrastRatio } ",[1967,2214,2215],{"class":1985},"from",[1967,2217,2218],{"class":2047}," '@nordhealth\u002Fcolor'\n",[1959,2220,2222],{"className":2195,"code":2221,"language":2197,"meta":21,"style":21},"\u002F\u002F Import all utilities\nimport { getColorPalette, getContrastRatio, hexToRgb, rgbToHex } from '@nordhealth\u002Fcolor'\n",[1758,2223,2224,2229],{"__ignoreMap":21},[1967,2225,2226],{"class":1969,"line":30},[1967,2227,2228],{"class":2137},"\u002F\u002F Import all utilities\n",[1967,2230,2231,2233,2236,2238],{"class":1969,"line":22},[1967,2232,2209],{"class":1985},[1967,2234,2235],{"class":1972}," { getColorPalette, getContrastRatio, hexToRgb, rgbToHex } ",[1967,2237,2215],{"class":1985},[1967,2239,2218],{"class":2047},[1683,2241],{},[1162,2243,2245],{"id":2244},"contrast-ratio-utility","Contrast Ratio utility",[14,2247,2248,2250,2251,2254,2255,2258],{},[1758,2249,2000],{}," utility calculates and returns the contrast ratio between two CSS colors. Most commonly used for calculating the contrast between text and background. Please note that the utility expects the input color to be in ",[1758,2252,2253],{},"HEX"," or ",[1758,2256,2257],{},"RGB"," format:",[1959,2260,2262],{"className":2195,"code":2261,"language":2197,"meta":21,"style":21},"\u002F\u002F Get contrast ratio between two colors\nconst textColor = '#fafafa'\nconst backgroundColor = '#fafafa'\n\nconst contrastRatio = getContrastRatio(textColor, backgroundColor)\n",[1758,2263,2264,2269,2282,2293,2297],{"__ignoreMap":21},[1967,2265,2266],{"class":1969,"line":30},[1967,2267,2268],{"class":2137},"\u002F\u002F Get contrast ratio between two colors\n",[1967,2270,2271,2274,2277,2279],{"class":1969,"line":22},[1967,2272,2273],{"class":1985},"const",[1967,2275,2276],{"class":1989}," textColor",[1967,2278,1993],{"class":1985},[1967,2280,2281],{"class":2047}," '#fafafa'\n",[1967,2283,2284,2286,2289,2291],{"class":1969,"line":1889},[1967,2285,2273],{"class":1985},[1967,2287,2288],{"class":1989}," backgroundColor",[1967,2290,1993],{"class":1985},[1967,2292,2281],{"class":2047},[1967,2294,2295],{"class":1969,"line":2029},[1967,2296,2154],{"emptyLinePlaceholder":344},[1967,2298,2299,2301,2303,2305,2308],{"class":1969,"line":2054},[1967,2300,2273],{"class":1985},[1967,2302,1990],{"class":1989},[1967,2304,1993],{"class":1985},[1967,2306,2307],{"class":1999}," getContrastRatio",[1967,2309,2003],{"class":1972},[14,2311,2312,2313,2316],{},"This utility can be be used to determine whether a certain color combination passes the color contrast requirements (4.5:1 or higher contrast). We’re utilizing it in our ",[1156,2314,2315],{"href":1679},"Design Tokens documentation"," to determine accessible color combinations.",[1683,2318],{},[1162,2320,2322],{"id":2321},"color-palette-utility","Color Palette utility",[14,2324,2325,2327],{},[1758,2326,2017],{}," utility takes a valid CSS color as the base which is used for generating complementary colors. This utility is meant for creating and maintaining consistent and accessible color palettes. We use it internally to develop our existing Figma color palettes and to test new color variations:",[1959,2329,2331],{"className":2195,"code":2330,"language":2197,"meta":21,"style":21},"\u002F\u002F Generate a color palette with 18 hues\nconst colorPalette = getColorPalette({ hues: 18 })\n",[1758,2332,2333,2338],{"__ignoreMap":21},[1967,2334,2335],{"class":1969,"line":30},[1967,2336,2337],{"class":2137},"\u002F\u002F Generate a color palette with 18 hues\n",[1967,2339,2340,2342,2344,2346,2349,2351,2353],{"class":1969,"line":22},[1967,2341,2273],{"class":1985},[1967,2343,2010],{"class":1989},[1967,2345,1993],{"class":1985},[1967,2347,2348],{"class":1999}," getColorPalette",[1967,2350,2020],{"class":1972},[1967,2352,2023],{"class":1989},[1967,2354,2026],{"class":1972},[14,2356,2357,2358,2363,2364,2367],{},"This utility can be be used to for example ",[1156,2359,2362],{"href":2360,"target":2361},"\u002Fcolor-generator\u002F","_blank","generate status colors programmatically",". Combined with ",[1758,2365,2366],{},"getTextColor"," utility you can make sure that generated color combinations stay accessible.",[14,2369,2370,2372],{},[1758,2371,2017],{}," also allows you to set the number of color hues, number of shades, the amount of lightness, and whether gray is included or not:",[1959,2374,2376],{"className":2195,"code":2375,"language":2197,"meta":21,"style":21},"\u002F\u002F Generate a color palette with 12 hues and 1 shade\ngetColorPalette({ hues: 12, shades: 1 })\n\n\u002F\u002F Generate a color palette with 12 hues, 1 shade and a gray hue\ngetColorPalette({ hues: 12, shades: 1, gray: true })\n\n\u002F\u002F Generate a color palette with 12 hues and 1 shade, based on a custom accent color\ngetColorPalette({ hues: 12, shades: 1, accent: '#2a469d' })\n\n\u002F\u002F Generate a color palette with 12 hues and 1 shade, with custom lightness\ngetColorPalette({ hues: 12, shades: 1, lightness: 0.7 })\n",[1758,2377,2378,2383,2400,2404,2409,2429,2433,2438,2458,2463,2469],{"__ignoreMap":21},[1967,2379,2380],{"class":1969,"line":30},[1967,2381,2382],{"class":2137},"\u002F\u002F Generate a color palette with 12 hues and 1 shade\n",[1967,2384,2385,2387,2389,2392,2395,2398],{"class":1969,"line":22},[1967,2386,2017],{"class":1999},[1967,2388,2020],{"class":1972},[1967,2390,2391],{"class":1989},"12",[1967,2393,2394],{"class":1972},", shades: ",[1967,2396,2397],{"class":1989},"1",[1967,2399,2026],{"class":1972},[1967,2401,2402],{"class":1969,"line":1889},[1967,2403,2154],{"emptyLinePlaceholder":344},[1967,2405,2406],{"class":1969,"line":2029},[1967,2407,2408],{"class":2137},"\u002F\u002F Generate a color palette with 12 hues, 1 shade and a gray hue\n",[1967,2410,2411,2413,2415,2417,2419,2421,2424,2427],{"class":1969,"line":2054},[1967,2412,2017],{"class":1999},[1967,2414,2020],{"class":1972},[1967,2416,2391],{"class":1989},[1967,2418,2394],{"class":1972},[1967,2420,2397],{"class":1989},[1967,2422,2423],{"class":1972},", gray: ",[1967,2425,2426],{"class":1989},"true",[1967,2428,2026],{"class":1972},[1967,2430,2431],{"class":1969,"line":2076},[1967,2432,2154],{"emptyLinePlaceholder":344},[1967,2434,2435],{"class":1969,"line":2175},[1967,2436,2437],{"class":2137},"\u002F\u002F Generate a color palette with 12 hues and 1 shade, based on a custom accent color\n",[1967,2439,2440,2442,2444,2446,2448,2450,2453,2456],{"class":1969,"line":2181},[1967,2441,2017],{"class":1999},[1967,2443,2020],{"class":1972},[1967,2445,2391],{"class":1989},[1967,2447,2394],{"class":1972},[1967,2449,2397],{"class":1989},[1967,2451,2452],{"class":1972},", accent: ",[1967,2454,2455],{"class":2047},"'#2a469d'",[1967,2457,2026],{"class":1972},[1967,2459,2461],{"class":1969,"line":2460},9,[1967,2462,2154],{"emptyLinePlaceholder":344},[1967,2464,2466],{"class":1969,"line":2465},10,[1967,2467,2468],{"class":2137},"\u002F\u002F Generate a color palette with 12 hues and 1 shade, with custom lightness\n",[1967,2470,2472,2474,2476,2478,2480,2482,2485,2488],{"class":1969,"line":2471},11,[1967,2473,2017],{"class":1999},[1967,2475,2020],{"class":1972},[1967,2477,2391],{"class":1989},[1967,2479,2394],{"class":1972},[1967,2481,2397],{"class":1989},[1967,2483,2484],{"class":1972},", lightness: ",[1967,2486,2487],{"class":1989},"0.7",[1967,2489,2026],{"class":1972},[14,2491,2492],{},"Here’s a list of all available options with their default values:",[1959,2494,2496],{"className":2195,"code":2495,"language":2197,"meta":21,"style":21},"getColorPalette({\n  accent: nColorAccent, \u002F\u002F {String}  Valid CSS color to be used as the base for calculations\n  hues: 12, \u002F\u002F {Number}  How many hues should be generated based on the accent color\n  shades: 1, \u002F\u002F {Number}  How many shades of each hue should be generated\n  lightness: 0.5, \u002F\u002F {Number}  Controls the overall lightness of color palettes (0-1)\n  gray: false \u002F\u002F {Boolean} Whether or not to include a specific gray palette\n})\n",[1758,2497,2498,2505,2513,2526,2538,2551,2562],{"__ignoreMap":21},[1967,2499,2500,2502],{"class":1969,"line":30},[1967,2501,2017],{"class":1999},[1967,2503,2504],{"class":1972},"({\n",[1967,2506,2507,2510],{"class":1969,"line":22},[1967,2508,2509],{"class":1972},"  accent: nColorAccent, ",[1967,2511,2512],{"class":2137},"\u002F\u002F {String}  Valid CSS color to be used as the base for calculations\n",[1967,2514,2515,2518,2520,2523],{"class":1969,"line":1889},[1967,2516,2517],{"class":1972},"  hues: ",[1967,2519,2391],{"class":1989},[1967,2521,2522],{"class":1972},", ",[1967,2524,2525],{"class":2137},"\u002F\u002F {Number}  How many hues should be generated based on the accent color\n",[1967,2527,2528,2531,2533,2535],{"class":1969,"line":2029},[1967,2529,2530],{"class":1972},"  shades: ",[1967,2532,2397],{"class":1989},[1967,2534,2522],{"class":1972},[1967,2536,2537],{"class":2137},"\u002F\u002F {Number}  How many shades of each hue should be generated\n",[1967,2539,2540,2543,2546,2548],{"class":1969,"line":2054},[1967,2541,2542],{"class":1972},"  lightness: ",[1967,2544,2545],{"class":1989},"0.5",[1967,2547,2522],{"class":1972},[1967,2549,2550],{"class":2137},"\u002F\u002F {Number}  Controls the overall lightness of color palettes (0-1)\n",[1967,2552,2553,2556,2559],{"class":1969,"line":2076},[1967,2554,2555],{"class":1972},"  gray: ",[1967,2557,2558],{"class":1989},"false",[1967,2560,2561],{"class":2137}," \u002F\u002F {Boolean} Whether or not to include a specific gray palette\n",[1967,2563,2564],{"class":1969,"line":2175},[1967,2565,2566],{"class":1972},"})\n",[1683,2568],{},[1162,2570,2572],{"id":2571},"hex-to-rgb-utility","Hex to RGB utility",[14,2574,2575,2577],{},[1758,2576,2041],{}," utility converts a HEX color to a RGB color:",[1959,2579,2581],{"className":2195,"code":2580,"language":2197,"meta":21,"style":21},"\u002F\u002F Convert hex to rgb\nconst hex = '#3559c7'\nconst rgb = hexToRgb(hex) \u002F\u002F outputs \"rgb(53, 89, 199)\"\n",[1758,2582,2583,2588,2600],{"__ignoreMap":21},[1967,2584,2585],{"class":1969,"line":30},[1967,2586,2587],{"class":2137},"\u002F\u002F Convert hex to rgb\n",[1967,2589,2590,2592,2595,2597],{"class":1969,"line":22},[1967,2591,2273],{"class":1985},[1967,2593,2594],{"class":1989}," hex",[1967,2596,1993],{"class":1985},[1967,2598,2599],{"class":2047}," '#3559c7'\n",[1967,2601,2602,2604,2607,2609,2611,2614],{"class":1969,"line":1889},[1967,2603,2273],{"class":1985},[1967,2605,2606],{"class":1989}," rgb",[1967,2608,1993],{"class":1985},[1967,2610,2034],{"class":1999},[1967,2612,2613],{"class":1972},"(hex) ",[1967,2615,2616],{"class":2137},"\u002F\u002F outputs \"rgb(53, 89, 199)\"\n",[1683,2618],{},[1162,2620,2622],{"id":2621},"rgb-to-hex-utility","RGB to HEX utility",[14,2624,2625,2627],{},[1758,2626,2066],{}," utility converts a RGB color to a HEX color:",[1959,2629,2631],{"className":2195,"code":2630,"language":2197,"meta":21,"style":21},"\u002F\u002F Convert rgb to hex\nconst rgb = 'rgb(53, 89, 199)'\nconst hex = rgbToHex(rgb) \u002F\u002F outputs \"#3559c7\"\n",[1758,2632,2633,2638,2649],{"__ignoreMap":21},[1967,2634,2635],{"class":1969,"line":30},[1967,2636,2637],{"class":2137},"\u002F\u002F Convert rgb to hex\n",[1967,2639,2640,2642,2644,2646],{"class":1969,"line":22},[1967,2641,2273],{"class":1985},[1967,2643,2606],{"class":1989},[1967,2645,1993],{"class":1985},[1967,2647,2648],{"class":2047}," 'rgb(53, 89, 199)'\n",[1967,2650,2651,2653,2655,2657,2659,2662],{"class":1969,"line":1889},[1967,2652,2273],{"class":1985},[1967,2654,2594],{"class":1989},[1967,2656,1993],{"class":1985},[1967,2658,2059],{"class":1999},[1967,2660,2661],{"class":1972},"(rgb) ",[1967,2663,2664],{"class":2137},"\u002F\u002F outputs \"#3559c7\"\n",[14,2666,2667,2668,1160],{},"For more examples, see ",[1156,2669,2670],{"href":2360,"target":2361},"Nord Color Generator",[1683,2672],{},[1162,2674,2676],{"id":2675},"color-generator","Color generator",[14,2678,2679,2681,2682,2686,2687,2689],{},[1156,2680,2670],{"href":2360}," is a tool that generates color palettes program­matically for use with ",[1156,2683,2685],{"href":2684},"\u002Fdesign\u002Fthemes\u002F","Nord Themes",". While this tool demonstrates the capabilities of the color utilities found from ",[1758,2688,1942],{}," package, it also acts as an internal tool for our team. We use it to develop our existing color palettes and test new color variations.",[2691,2692],"banner-link",{"button":2693,"description":2694,"href":2695,"title":2696},"Open tool","Updated 28.4.2025","\u002Fcolor-generator","Color Generator",[1683,2698],{},[1162,2700,1875],{"id":1874},[14,2702,1878,2703,1883],{},[1156,2704,1882],{"href":1881},[2706,2707,2708],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":21,"searchDepth":22,"depth":22,"links":2710},[2711,2712,2713,2714,2715,2716,2717],{"id":2094,"depth":22,"text":76},{"id":2244,"depth":22,"text":2245},{"id":2321,"depth":22,"text":2322},{"id":2571,"depth":22,"text":2572},{"id":2621,"depth":22,"text":2622},{"id":2675,"depth":22,"text":2676},{"id":1874,"depth":22,"text":1875},{},{"title":94,"description":21},{"loc":159},"design\u002Ffoundations\u002F03.color-utilities","lFcZrdoSI1Ly3tNiy5WRzBo31siY0s03wPdyaiInlvw",{"id":2724,"title":162,"badge":6,"body":2725,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":2780,"native":25,"navTitle":6,"navigation":2781,"path":161,"railLabel":6,"seo":2783,"sidebar":25,"sitemap":2784,"stem":2785,"tabs":6,"__hash__":2786},"guidelines\u002Fdesign\u002Ffoundations\u002F05.principles.md",{"type":8,"value":2726,"toc":2772},[2727,2732,2736,2739,2743,2746,2750,2753,2755,2758,2762,2765,2769],[11,2728,2729],{},[14,2730,2731],{},"These principles form the foundation of our design system. They guide our team when working on different parts of the system and help us do better and more informed decisions.",[1162,2733,2735],{"id":2734},"put-user-needs-first","Put user needs first",[14,2737,2738],{},"We care for the people who use our products. We’re here to make their day-to-day and long-term work better and more pleasant through great user experience.",[1162,2740,2742],{"id":2741},"strive-for-consistency-not-uniformity","Strive for consistency, not uniformity",[14,2744,2745],{},"We should use the same language and design patterns wherever possible. This helps people get familiar with our services. Same holds true for the system and its developer experience.",[1162,2747,2749],{"id":2748},"default-to-openness","Default to openness",[14,2751,2752],{},"We should share what we’re doing whenever we can. Building our services transparently increases their visibility and accountability and makes us push towards higher quality.",[1162,2754,1719],{"id":1718},[14,2756,2757],{},"Our services are for everyone. We make sure people with different needs can use our products and that they meet the accessibility standards outlined in WCAG 2.1.",[1162,2759,2761],{"id":2760},"provide-a-good-developer-experience","Provide a good developer experience",[14,2763,2764],{},"Providing a good developer experience is very important to us. Developers should be able to start using our tools in minutes, not hours, days or weeks.",[1162,2766,2768],{"id":2767},"automate-everything-you-can","Automate everything you can",[14,2770,2771],{},"We value the time of our colleagues, users, and our future selves over our own. We are always proactively looking for ways to automate repetitive tasks and testing.",{"title":21,"searchDepth":22,"depth":22,"links":2773},[2774,2775,2776,2777,2778,2779],{"id":2734,"depth":22,"text":2735},{"id":2741,"depth":22,"text":2742},{"id":2748,"depth":22,"text":2749},{"id":1718,"depth":22,"text":1719},{"id":2760,"depth":22,"text":2761},{"id":2767,"depth":22,"text":2768},{},{"title":2782},"Design Principles",{"title":162,"description":21},{"loc":161},"design\u002Ffoundations\u002F05.principles","clhD2QZyFmSE163KcqaTDUzcOT4tPXfbRWzGNpsTbNk",{"id":2788,"title":165,"badge":6,"body":2789,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":3016,"native":25,"navTitle":6,"navigation":344,"path":164,"railLabel":6,"seo":3017,"sidebar":25,"sitemap":3018,"stem":3019,"tabs":6,"__hash__":3020},"guidelines\u002Fdesign\u002Ffoundations\u002F06.figma.md",{"type":8,"value":2790,"toc":3006},[2791,2796,2805,2807,2811,2814,2837,2841,2856,2870,2873,2875,2879,2886,2888,2890,2893,2896,2902,2905,2911,2913,2915,2919,2922,2933,2939,2941,2945,2953,2971,2973,2977,2990,2992,2995],[11,2792,2793],{},[14,2794,2795],{},"Nord Figma Toolkit is a resource for exploration and collaboration. It contains all the building blocks for designing with Nord and allows you to build beautiful, accessible experiences rapidly.",[14,2797,2798,2799,2804],{},"Use our ",[1156,2800,2803],{"href":2801,"rel":2802},"https:\u002F\u002Fnordhealth.design\u002Fcomponents\u002F",[1179],"documentation"," for guidance on how to use the components in this toolkit. You can get started with the Nord Figma Toolkit by enabling the Nord Team Library inside Figma. Follow the below instruction for guidelines on how to do this.",[1683,2806],{},[1162,2808,2810],{"id":2809},"nord-team-library","Nord Team Library",[14,2812,2813],{},"We offer access to the team libraries for Nordhealth team members. The libraries are:",[2815,2816,2817,2825,2831],"ul",{},[2818,2819,2820,2824],"li",{},[2821,2822,2823],"strong",{},"Nord Figma Toolkit v4",": Color, type, grids, and components for building digital products using Nord.",[2818,2826,2827,2830],{},[2821,2828,2829],{},"Nordicons",": Nord's icon library.",[2818,2832,2833,2836],{},[2821,2834,2835],{},"Brand Elements",": Color, type, logo, and components for marketing and branding of Nordhealth.",[1162,2838,2840],{"id":2839},"how-to-get-the-libraries","How to get the libraries",[2842,2843,2844,2847,2850,2853],"ol",{},[2818,2845,2846],{},"Sign into Figma using your Nordhealth email.",[2818,2848,2849],{},"Open a design file.",[2818,2851,2852],{},"Navigate to the Figma Menu then select Libraries.",[2818,2854,2855],{},"In the Libraries modal that appears, find the team called Nordhealth and add the libraries called “Nord Figma Toolkit v4” and “Nordicons” (if they haven't been added to your file yet).",[2857,2858,2863,2864,2869],"video",{"width":2859,"height":2860,"controls":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":2862},1080,640,"width: 100%; max-width: 800px; height: auto","\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-add-library.jpg","\n  ",[2865,2866],"source",{"src":2867,"type":2868},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-add-library.mp4","video\u002Fmp4","\n  Your browser does not support the video tag.\n",[2871,2872],"br",{},[1683,2874],{},[1162,2876,2878],{"id":2877},"not-a-part-of-the-nord-figma-team","Not a part of the Nord Figma team?",[14,2880,2881,2882,2885],{},"If you're working with Nordhealth as an external partner, we can add you to our Figma Team. We recommend that you do all of your work in the Nordhealth Figma Team instead of an external team. Please contact ",[1156,2883,2884],{"href":1881},"our support"," to gain access.",[1683,2887],{},[1162,2889,236],{"id":1714},[14,2891,2892],{},"Included in the library are the Nord components and their variants. To insert a component go to the Asset panel and find the component you would like to use. You can drag it from the asset panel onto the canvas.",[14,2894,2895],{},"If a component includes variants, you will see them displayed in the right sidebar.",[2857,2897,2863,2899,2869],{"width":2859,"height":2860,"controls":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":2898},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-drag-component.jpg",[2865,2900],{"src":2901,"type":2868},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-drag-component.mp4",[14,2903,2904],{},"Variables (tokens) plus Text, Drop Shadow, and Grid styles in Nord Figma Toolkit can be found from the right sidebar in Figma.",[2857,2906,2863,2908,2869],{"width":2859,"height":2860,"controls":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":2907},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-apply-variables-and-styles.jpg",[2865,2909],{"src":2910,"type":2868},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-apply-variables-and-styles.mp4",[2871,2912],{},[1683,2914],{},[1162,2916,2918],{"id":2917},"theming","Theming",[14,2920,2921],{},"Nord Figma Toolkit supports theming natively in Figma using Figma Variables. To get started with theming, follow the below instructions.",[2842,2923,2924,2927,2930],{},[2818,2925,2926],{},"In the right sidebar, click the \"Apply variable mode\" button (swatch icon).",[2818,2928,2929],{},"Select the \"Tokens\" variable collection.",[2818,2931,2932],{},"Choose your desired theme from the dropdown.",[2857,2934,2863,2936,2869],{"width":2859,"height":2860,"controls":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":2935},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-theme-switching.jpg",[2865,2937],{"src":2938,"type":2868},"\u002Fimg\u002Ffigma\u002Fnord-figma-toolkit-v4-theme-switching.mp4",[1683,2940],{},[1162,2942,2944],{"id":2943},"figma-assets","Figma assets",[14,2946,2947,2948,2952],{},"In addition to components, we've created ",[1156,2949,2951],{"href":2950,"target":2361},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FG6E9A44lTA7aOFcNXosKCR\u002FInterface-Templates-v4?node-id=2-9&t=VRwF0X33GVvnkgdH-1","Interface Templates v4"," that show our components in context. You can use this Figma Design File as an example of how to use Nord.",[947,2954,2955,2960,2963,2967],{},[2691,2956],{"button":2957,"description":2958,"href":2959,"title":2823},"Download","Updated 14.11.2025","https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FyarhTRV8eFffff0BIpevi6\u002FNord-Figma-Toolkit-v4?node-id=1696-298217",[2691,2961],{"button":2957,"description":2694,"href":2962,"title":2829},"https:\u002F\u002Fwww.figma.com\u002Ffile\u002F2uz2VbPlyMR5QHi9eGDMFf\u002FNordicons?node-id=2%3A36",[2691,2964],{"button":2957,"description":2958,"href":2965,"title":2966},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FG6E9A44lTA7aOFcNXosKCR\u002FInterface-Templates-v4?node-id=2-9","Nord Interface Templates v4",[2691,2968],{"button":2957,"description":2694,"href":2969,"title":2970},"https:\u002F\u002Fwww.figma.com\u002Ffile\u002Fn03Z6aG3GAP31Oc9V6IKYy\u002FComponent-Illustrations?node-id=0%3A1","Nord Component Illustrations",[1683,2972],{},[1162,2974,2976],{"id":2975},"versioning-and-changelog","Versioning and changelog",[14,2978,2979,2980,2985,2986,1160],{},"We follow ",[1156,2981,2984],{"href":2982,"rel":2983},"https:\u002F\u002Fsemver.org\u002F",[1179],"Semantic Versioning"," for Figma Toolkit. Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, see ",[1156,2987,2989],{"href":2988},"\u002Fchangelogs\u002Ffigma","our changelog",[1683,2991],{},[1162,2993,376],{"id":2994},"support",[14,2996,2997,2998,3000,3001,1160],{},"Need help with our Figma Toolkit? Please head over to the ",[1156,2999,1882],{"href":1881}," for more guidelines and ways to contact us. For additional support specific to Figma, please reference the ",[1156,3002,3005],{"href":3003,"rel":3004},"https:\u002F\u002Fresources\u002Fsupport\u002F.figma.com\u002Fhc\u002Fen-us",[1179],"Figma Help Center",{"title":21,"searchDepth":22,"depth":22,"links":3007},[3008,3009,3010,3011,3012,3013,3014,3015],{"id":2809,"depth":22,"text":2810},{"id":2839,"depth":22,"text":2840},{"id":2877,"depth":22,"text":2878},{"id":1714,"depth":22,"text":236},{"id":2917,"depth":22,"text":2918},{"id":2943,"depth":22,"text":2944},{"id":2975,"depth":22,"text":2976},{"id":2994,"depth":22,"text":376},{},{"title":165,"description":21},{"loc":164},"design\u002Ffoundations\u002F06.figma","bo8Ot1hCInEL7LLCiP_IJJNABT7q4Mc0Gg7Pne2x5wM",{"id":3022,"title":168,"badge":6,"body":3023,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":3193,"native":25,"navTitle":6,"navigation":344,"path":167,"railLabel":6,"seo":3194,"sidebar":25,"sitemap":3195,"stem":3205,"tabs":6,"__hash__":3206},"guidelines\u002Fdesign\u002Ffoundations\u002F07.grid.md",{"type":8,"value":3024,"toc":3179},[3025,3030,3034,3037,3042,3044,3048,3051,3056,3058,3062,3070,3075,3077,3081,3087,3092,3094,3098,3101,3106,3110,3113,3117,3121,3124,3128,3132,3135,3141,3144,3150,3152,3154,3157,3161,3163,3165,3170,3172,3174],[11,3026,3027],{},[14,3028,3029],{},"The grid helps us achieve visual balance and makes the user interface easier to scan. With the grid we can create consistent layouts that work across devices, screen sizes, and environments.",[1162,3031,3033],{"id":3032},"grid-anatomy","Grid anatomy",[14,3035,3036],{},"Grids in Nord Design System contain columns (1), gutters (2), and margins (3).",[1659,3038],{"src":3039,"className":3040,"style":1767,"alt":3033},"\u002Fimg\u002Fgrid\u002Fanatomy.png",[3041],"n:border",[1683,3043],{},[1162,3045,3047],{"id":3046},"columns","Columns",[14,3049,3050],{},"Columns define the areas of a design that contain content. The column widths are defined by percentages, and will resize based on the viewport. The number of columns available will also be affected by the viewport. A general rule of thumb is to allow the content to determine the breakpoints and how many columns to show at each viewport size.",[1659,3052],{"src":3053,"className":3054,"style":1767,"alt":3055},"\u002Fimg\u002Fgrid\u002Fcolumns.png",[3041],"Grid colums",[1683,3057],{},[1162,3059,3061],{"id":3060},"gutters","Gutters",[14,3063,3064,3065,3069],{},"Gutters are fixed-width spacing between columns that separate content. We use our ",[1156,3066,3068],{"href":3067},"\u002Fcore\u002Ftokens\u002F#space","space tokens"," to define the gutters for the grid.",[1659,3071],{"src":3072,"className":3073,"style":1767,"alt":3074},"\u002Fimg\u002Fgrid\u002Fgutters.png",[3041],"Grid gutters",[1683,3076],{},[1162,3078,3080],{"id":3079},"margins","Margins",[14,3082,3083,3084,3086],{},"Margins separate content from the left and right edges of the grid. Margins are fixed-width and defined by using our ",[1156,3085,3068],{"href":3067},". In general, wider margins are more suited for larger screens. Margins should either be the same width, or wider than the gutter width.",[1659,3088],{"src":3089,"className":3090,"style":1767,"alt":3091},"\u002Fimg\u002Fgrid\u002Fmargins.png",[3041],"Grid margins",[1683,3093],{},[1162,3095,3097],{"id":3096},"applying-the-grid","Applying the Grid",[14,3099,3100],{},"Nord Design System offers options for customizing the grid. We support up to 12 column layouts that can be fixed or fluid.",[1659,3102],{"src":3103,"className":3104,"style":1767,"alt":3105},"\u002Fimg\u002Fgrid\u002Fapplying.png",[3041],"Applying the grid",[1689,3107,3109],{"id":3108},"layout-across-columns","Layout across columns",[14,3111,3112],{},"Content can span multiple columns or use a subset of columns in a grid.",[1659,3114],{"src":3115,"className":3116,"style":1767,"alt":3109},"\u002Fimg\u002Fgrid\u002Facross.png",[3041],[1689,3118,3120],{"id":3119},"gutter-and-margin-spacing","Gutter and margin spacing",[14,3122,3123],{},"We offer three types of spacing for gutters and margins: S, L, and XL. These options align with our space tokens. Typically, larger spacing makes sense on larger screens.",[1659,3125],{"src":3126,"className":3127,"style":1767,"alt":3120},"\u002Fimg\u002Fgrid\u002Fspacing.png",[3041],[1689,3129,3131],{"id":3130},"fixed-width-or-fluid-grid","Fixed-width or fluid grid",[14,3133,3134],{},"You can apply a fixed-width or a fluid grid to your design. The fixed-width grid works well when dealing with long pages of content (fixed grid behaves like fluid grid when the viewport is smaller than the grid’s max-width):",[2857,3136,2863,3138,2869],{"width":2859,"height":2860,"autoPlay":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":3137},"\u002Fimg\u002Fgrid\u002Ffixed.png",[2865,3139],{"src":3140,"type":2868},"\u002Fimg\u002Fgrid\u002Ffixed.mp4",[14,3142,3143],{},"The fluid grid work well when you’re dealing with screens that require lots of interaction or large datasets:",[2857,3145,2863,3147,2869],{"width":2859,"height":2860,"autoPlay":344,"loop":344,"muted":344,"playsInline":344,"style":2861,"poster":3146},"\u002Fimg\u002Fgrid\u002Ffluid.png",[2865,3148],{"src":3149,"type":2868},"\u002Fimg\u002Fgrid\u002Ffluid.mp4",[1683,3151],{},[1162,3153,808],{"id":543},[14,3155,3156],{},"For laying out applications, we place navigation (2) on the left and page header (1) across the top of the screen. The grid is applied to the content area (3).",[1659,3158],{"src":3159,"className":3160,"style":1767,"alt":808},"\u002Fimg\u002Fgrid\u002Flayout.png",[3041],[1683,3162],{},[1162,3164,1863],{"id":1862},[14,3166,3167,3168,1160],{},"You can find the different grids from our ",[1156,3169,165],{"href":1869},[1683,3171],{},[1162,3173,1875],{"id":1874},[14,3175,3176,3177,1883],{},"Have a question about grid usage? Please head over to the ",[1156,3178,1882],{"href":1881},{"title":21,"searchDepth":22,"depth":22,"links":3180},[3181,3182,3183,3184,3185,3190,3191,3192],{"id":3032,"depth":22,"text":3033},{"id":3046,"depth":22,"text":3047},{"id":3060,"depth":22,"text":3061},{"id":3079,"depth":22,"text":3080},{"id":3096,"depth":22,"text":3097,"children":3186},[3187,3188,3189],{"id":3108,"depth":1889,"text":3109},{"id":3119,"depth":1889,"text":3120},{"id":3130,"depth":1889,"text":3131},{"id":543,"depth":22,"text":808},{"id":1862,"depth":22,"text":1863},{"id":1874,"depth":22,"text":1875},{},{"title":168,"description":21},{"loc":167,"images":3196},[3197,3198,3199,3200,3201,3202,3203,3204],{"loc":3039},{"loc":3053},{"loc":3072},{"loc":3089},{"loc":3103},{"loc":3115},{"loc":3126},{"loc":3159},"design\u002Ffoundations\u002F07.grid","rC4hsxt7Vgwf9NsXtUyRx02t7dqJ4zKfe0nZgwANTYI",{"id":3208,"title":171,"badge":6,"body":3209,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":3392,"native":25,"navTitle":6,"navigation":344,"path":170,"railLabel":6,"seo":3393,"sidebar":25,"sitemap":3394,"stem":3400,"tabs":6,"__hash__":3401},"guidelines\u002Fdesign\u002Ffoundations\u002F08.iconography.md",{"type":8,"value":3210,"toc":3382},[3211,3216,3227,3230,3234,3240,3244,3246,3250,3253,3256,3258,3262,3274,3294,3297,3299,3302,3305,3315,3318,3320,3324,3327,3331,3335,3361,3363,3365,3368,3373,3375,3377],[11,3212,3213],{},[14,3214,3215],{},"Nord Design System uses icons to provide additional meaning or in places where text label doesn’t fit. They communicate messages at a glance and draw attention to important information.",[14,3217,3218,3219,3222,3223,1160],{},"Our icon library is called ",[1156,3220,2829],{"href":3221},"\u002Ficons\u002F",". Nordicons are designed to be used at small sizes and were built on a 20px grid which ensures that they render well when used with inline text or inside small interface items and buttons. Their design language is friendly and matches closely the shape and thickness of ",[1156,3224,3226],{"href":3225},"\u002Fdesign\u002Ffoundations\u002Fbrand\u002F","Nordhealth’s logomark",[14,3228,3229],{},"When designing new icons, try to stick to symbols that represent the most basic ideas, objects or actions. Always prioritize representing the function, rather than how nice the icon looks.",[1162,3231,3233],{"id":3232},"base-grid","Base grid",[14,3235,3236,3237,3239],{},"A 20 × 20px grid is used as the foundation for all ",[1156,3238,2829],{"href":3221}," to determine line thickness, proportions, and shape across the entire icon set. This foundational grid guides you when designing new icons and ensures a unified visual look.",[1659,3241],{"src":3242,"alt":21,"style":3243},"\u002Fimg\u002Ficonography\u002Fgrid.svg","max-width:700px;",[1683,3245],{},[1162,3247,3249],{"id":3248},"keyshapes","Keyshapes",[14,3251,3252],{},"Predefined key lines give you consistent sizing for basic shapes and proportions across the icon set. This helps to establish relationships between similar icons.",[1659,3254],{"src":3255,"alt":21,"style":3243},"\u002Fimg\u002Ficonography\u002Fguidelines.svg",[1683,3257],{},[1162,3259,3261],{"id":3260},"style-and-anatomy","Style and Anatomy",[14,3263,3264,3265,3269,3270,3273],{},"The stylistic conventions of Nordicons create a meaningful connection with our ",[1156,3266,3268],{"href":3267},"\u002Fdesign\u002Ffoundations\u002Ftypography\u002F","UI typeface"," and the ",[1156,3271,3272],{"href":3225},"Nordhealth logomark",". The overall style is friendly, rounded, and matches closely the shape and thickness of both Nordhealth’s logomark and the typeface we use to set text in user interfaces.",[2842,3275,3276,3279,3282,3285,3288,3291],{},[2818,3277,3278],{},"Corner",[2818,3280,3281],{},"Stroke",[2818,3283,3284],{},"Stroke terminal",[2818,3286,3287],{},"Bounding area",[2818,3289,3290],{},"Counter stroke",[2818,3292,3293],{},"Counter area",[1659,3295],{"src":3296,"alt":21,"style":3243},"\u002Fimg\u002Ficonography\u002Fshape.svg",[1683,3298],{},[1162,3300,3281],{"id":3301},"stroke",[14,3303,3304],{},"Nordicons use a consistent stroke width of 2px, including curves and angles. When designing new icons, maintain the same visual weight by using this stroke thickness for all new icons.",[14,3306,3307,3308,3311,3312,1160],{},"The only exception to this rule is when designing icons for tiny contexts. These icons use a stroke width of 3px and are marked with ",[1758,3309,3310],{},"-small"," suffix in our ",[1156,3313,3314],{"href":3221},"icon library",[1659,3316],{"src":3317,"alt":21,"style":3243},"\u002Fimg\u002Ficonography\u002Fstroke.svg",[1683,3319],{},[1162,3321,3323],{"id":3322},"icon-sizes","Icon sizes",[14,3325,3326],{},"Nordicons are drawn on a 20 × 20px grid and are scaled up and down linearly to different sizes. The most common sizes Nordicons are used in are:",[3328,3329],"tokens-table",{"category":3330},"size",[1162,3332,3334],{"id":3333},"creating-an-icon","Creating an icon",[2842,3336,3337,3340,3346,3349,3352,3355,3358],{},[2818,3338,3339],{},"Create a 20 × 20px artboard for each icon.",[2818,3341,3342,3343,3345],{},"Use 2px stroke to draw regular icons and 3px stroke to draw ",[1758,3344,3310],{}," versions.",[2818,3347,3348],{},"In most cases Nordicons shouldn’t have padding around them.",[2818,3350,3351],{},"Set your workspace to snap to pixels and round most values to whole pixels.",[2818,3353,3354],{},"Don’t use borders or strokes to draw the icon.",[2818,3356,3357],{},"All possible shapes and paths should be combined into one.",[2818,3359,3360],{},"Make sure to properly name layers and artboards.",[1683,3362],{},[1162,3364,1863],{"id":1862},[14,3366,3367],{},"You can find the design guidelines for Nordicons from our Figma Toolkit.",[2691,3369],{"button":2957,"description":3370,"href":3371,"title":3372},"Updated 25.1.2023","https:\u002F\u002Fwww.figma.com\u002Ffile\u002FBzNVNU56npd4nCLVShMmor\u002FIconography-Guidelines?node-id=0%3A1","Iconography Guidelines",[1683,3374],{},[1162,3376,1875],{"id":1874},[14,3378,3379,3380,1883],{},"Have a question about iconography guidelines? Please head over to the ",[1156,3381,1882],{"href":1881},{"title":21,"searchDepth":22,"depth":22,"links":3383},[3384,3385,3386,3387,3388,3389,3390,3391],{"id":3232,"depth":22,"text":3233},{"id":3248,"depth":22,"text":3249},{"id":3260,"depth":22,"text":3261},{"id":3301,"depth":22,"text":3281},{"id":3322,"depth":22,"text":3323},{"id":3333,"depth":22,"text":3334},{"id":1862,"depth":22,"text":1863},{"id":1874,"depth":22,"text":1875},{},{"title":171,"description":21},{"loc":170,"images":3395},[3396,3397,3398,3399],{"loc":3242},{"loc":3255},{"loc":3296},{"loc":3317},"design\u002Ffoundations\u002F08.iconography","BD2DLhqRg9dODvz6nhFYZcxMgPoWcpyP_hZrmOX-5L4",{"id":3403,"title":174,"badge":6,"body":3404,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":4798,"native":25,"navTitle":6,"navigation":344,"path":173,"railLabel":6,"seo":4799,"sidebar":25,"sitemap":4800,"stem":4801,"tabs":6,"__hash__":4802},"guidelines\u002Fdesign\u002Ffoundations\u002F10.naming.md",{"type":8,"value":3405,"toc":4783},[3406,3411,3419,3423,3426,3430,3433,3437,3440,3442,3445,3448,3503,3505,3509,3512,3578,3580,3584,3587,3590,3593,3656,3658,3660,3663,3774,3776,3779,3872,3874,3878,3936,3938,3942,3945,4612,4614,4617,4656,4663,4741,4743,4747,4750,4771,4773,4775,4780],[11,3407,3408],{},[14,3409,3410],{},"Different disciplines use names defined in the design system to communicate about tokens, components and similar. Hence, names must be modular, meaningful and pronounceable.",[14,3412,3413,3414,1160],{},"The following set of principles guide our team when naming things and help us do better and more informed decisions. These principles are adapted from Brad Frost’s ",[1156,3415,3418],{"href":3416,"rel":3417},"http:\u002F\u002Fbradfrost.com\u002Fblog\u002Fpost\u002Fcss-architecture-for-design-systems\u002F",[1179],"CSS Architecture for Design Systems",[1162,3420,3422],{"id":3421},"make-it-modular","Make it modular",[14,3424,3425],{},"Nord consists of independent modules which applies to our naming as well. Different parts of the system need to be clearly separated.",[1162,3427,3429],{"id":3428},"make-it-legible","Make it legible",[14,3431,3432],{},"Developers should be able to understand code at a glance and understand the purpose of any given part. Same is true for design components.",[1162,3434,3436],{"id":3435},"avoid-conflicts","Avoid conflicts",[14,3438,3439],{},"Since Nord’s components will be used on many platforms, it’s critical to ensure that its naming doesn’t conflict with other systems.",[1683,3441],{},[1162,3443,241],{"id":3444},"design-tokens",[14,3446,3447],{},"Users should be able understand the purpose of any given token at a glance. To make sure naming stays consistent and straightforward, we follow these guidelines:",[2815,3449,3450,3459,3472,3490],{},[2818,3451,3452,3455,3456,1160],{},[2821,3453,3454],{},"Naming structure:"," ",[1758,3457,3458],{},"{prefix}-{category}-{subcategory}-{name}",[2818,3460,3461,3464,3465,2254,3468,3471],{},[2821,3462,3463],{},"Prefix:"," Token names always start with a prefix and a hyphen. For example ",[1758,3466,3467],{},"n-color-success",[1758,3469,3470],{},"n-space-xl",". “N” stands for Nord Design System. Prefixing is critical to ensure that our naming doesn’t conflict with other systems.",[2818,3473,3474,3477,3478,2522,3480,3483,3484,2254,3487,1160],{},[2821,3475,3476],{},"Categorization:"," Token names always include at least one category, like ",[1758,3479,1928],{},[1758,3481,3482],{},"space",", or similar. If it makes sense in your use case, you can also include subcategory in the name. For example ",[1758,3485,3486],{},"n-color-status-success",[1758,3488,3489],{},"n-color-status-warning",[2818,3491,3492,3455,3495,2522,3498,2522,3501,1160],{},[2821,3493,3494],{},"Examples:",[1758,3496,3497],{},"n-color-accent",[1758,3499,3500],{},"n-font-family-code",[1758,3502,3470],{},[1683,3504],{},[1162,3506,3508],{"id":3507},"sizes","Sizes",[14,3510,3511],{},"We define sizing using T-shirt sizes. This makes it possible for anyone, technical or non-technical person, to understand the differences and how they relate to each other.",[2815,3513,3514,3520,3529,3548,3566],{},[2818,3515,3516,3519],{},[2821,3517,3518],{},"Keep it consistent and short:"," Always use the short form version (s, m, l, xl) when naming components, tokens, and symbols. This makes it quicker for developers to reference them.",[2818,3521,3522,3455,3525,3528],{},[2821,3523,3524],{},"Default size:",[1758,3526,3527],{},"m"," is always the default or the base value.",[2818,3530,3531,3534,3535,3537,3538,2522,3541,2522,3544,3547],{},[2821,3532,3533],{},"Larger than default:"," When you want to define a size larger than ",[1758,3536,3527],{}," we use ",[1758,3539,3540],{},"l",[1758,3542,3543],{},"xl",[1758,3545,3546],{},"xxl",", and so on. If it’s a component, make it possible to pass the size via a “size” property.",[2818,3549,3550,3553,3554,3556,3557,2522,3560,2522,3563,3547],{},[2821,3551,3552],{},"Smaller than default:"," When you want to define a size smaller than ",[1758,3555,3527],{},", we use ",[1758,3558,3559],{},"s",[1758,3561,3562],{},"xs",[1758,3564,3565],{},"xxs",[2818,3567,3568,3455,3570,2522,3573,2522,3575,1160],{},[2821,3569,3494],{},[1758,3571,3572],{},"n-space-l",[1758,3574,3470],{},[1758,3576,3577],{},"n-space-s",[1683,3579],{},[1162,3581,3583],{"id":3582},"colors","Colors",[14,3585,3586],{},"Each color name contains a role, modifier and theme. This accommodate needs such as state, interactivity, and emphasis for different products. For example, a component may require color variations for hover, active, selected, focused, and disabled states.",[14,3588,3589],{},"Roles in color names are used to indicate how color is applied. By defining roles instead of specific values, we can ensure the correct use of each color, allow for modifiers, and support theming.",[14,3591,3592],{},"Each color follows the same naming convention so that they are understandable at a glance:",[2815,3594,3595,3602,3624,3644],{},[2818,3596,3597,3455,3599],{},[2821,3598,3454],{},[1758,3600,3601],{},"n-color-{role}-{modifier}-{theme}",[2818,3603,3604,3607,3608,2522,3611,2522,3614,2522,3617,3620,3621,1160],{},[2821,3605,3606],{},"Role:"," Each color has a role in Nord such as ",[1758,3609,3610],{},"accent",[1758,3612,3613],{},"border",[1758,3615,3616],{},"text",[1758,3618,3619],{},"status",", or ",[1758,3622,3623],{},"surface",[2818,3625,3626,3629,3630,2522,3633,2522,3635,2522,3638,3620,3641,1160],{},[2821,3627,3628],{},"Modifier:"," Modifiers are optional and may include variations such as ",[1758,3631,3632],{},"weak",[1758,3634,2821],{},[1758,3636,3637],{},"active",[1758,3639,3640],{},"hover",[1758,3642,3643],{},"success",[2818,3645,3646,3455,3648,2522,3650,2522,3653,1160],{},[2821,3647,3494],{},[1758,3649,3497],{},[1758,3651,3652],{},"n-color-border-strong",[1758,3654,3655],{},"n-color-text-weak",[1683,3657],{},[1162,3659,236],{"id":1714},[14,3661,3662],{},"Different disciplines use component names to communicate about them. Hence, they must be short, meaningful, and pronounceable.",[2815,3664,3665,3672,3681,3709,3715,3725,3731,3761],{},[2818,3666,3667,3455,3669,1160],{},[2821,3668,3454],{},[1758,3670,3671],{},"{prefix}-{name}",[2818,3673,3674,3676,3677,2254,3679,3471],{},[2821,3675,3463],{}," Component names always start with a prefix and a hyphen. For example ",[1758,3678,574],{},[1758,3680,1010],{},[2818,3682,3683,3686,3687,3690,3691,3694,3695,2522,3698,2522,3701,3704,3705,3708],{},[2821,3684,3685],{},"Noun rather than verb:"," Components are not actions, they are conceptually “things.” It is better to use nouns instead of verbs, such as ",[1758,3688,3689],{},"\u003Canimation\u002F>"," instead of ",[1758,3692,3693],{},"\u003Canimating\u002F>",". ",[1758,3696,3697],{},"\u003Cinput\u002F>",[1758,3699,3700],{},"\u003Ctab\u002F>",[1758,3702,3703],{},"\u003Cnavigation\u002F>",", and ",[1758,3706,3707],{},"\u003Cmenu\u002F>"," are some examples.",[2818,3710,3711,3714],{},[2821,3712,3713],{},"Meaningful:"," Not over specific, not overly abstract.",[2818,3716,3717,3720,3721,3724],{},[2821,3718,3719],{},"Short:"," Maximum of 2 words after ",[1758,3722,3723],{},"nord-"," prefix.",[2818,3726,3727,3730],{},[2821,3728,3729],{},"Pronounceable:"," We want to be able talk about them.",[2818,3732,3733,3736,3737,2522,3740,2522,3743,2522,3746,2522,3749,2522,3752,2522,3755,2522,3758,1160],{},[2821,3734,3735],{},"Custom element spec compliant:"," Don’t use reserved names. Reserved names include: ",[1758,3738,3739],{},"annotation-xml",[1758,3741,3742],{},"font-face",[1758,3744,3745],{},"font-face-src",[1758,3747,3748],{},"font-face-uri",[1758,3750,3751],{},"font-face-format",[1758,3753,3754],{},"font-face-name",[1758,3756,3757],{},"missing-glyph",[1758,3759,3760],{},"color-profile",[2818,3762,3763,3455,3765,2522,3768,2522,3771,1160],{},[2821,3764,3494],{},[1758,3766,3767],{},"\u003Cnord-button\u002F>",[1758,3769,3770],{},"\u003Cnord-visually-hidden\u002F>",[1758,3772,3773],{},"\u003Cnord-tabs\u002F>",[1683,3775],{},[1162,3777,337],{"id":3778},"icons",[2815,3780,3781,3788,3799],{},[2818,3782,3783,3455,3785,1160],{},[2821,3784,3454],{},[1758,3786,3787],{},"{category}-{subcategory}-{name}",[2818,3789,3790,3792,3793,2254,3796,1160],{},[2821,3791,3463],{}," Icon names always start with a category name and a hyphen. For example ",[1758,3794,3795],{},"action-{name}",[1758,3797,3798],{},"messaging-{name}",[2818,3800,3801,3803,3804,2522,3806,3809,3810,3813,3814],{},[2821,3802,3476],{}," Icon names always include at least one category, like ",[1758,3805,576],{},[1758,3807,3808],{},"messaging",", or similar. If it makes sense in your use case, you can also include a subcategory in the name. For example ",[1758,3811,3812],{},"messaging-status-alert",". Nord uses the following icon categories:\n",[2815,3815,3816,3822,3828,3834,3840,3845,3851,3856,3861,3867],{},[2818,3817,3818,3821],{},[1758,3819,3820],{},"arrow",": represent any form of arrows.",[2818,3823,3824,3827],{},[1758,3825,3826],{},"file",": illustrate file types and files.",[2818,3829,3830,3833],{},[1758,3831,3832],{},"graph",": illustrate graphs and charts.",[2818,3835,3836,3839],{},[1758,3837,3838],{},"interface",": interface specific icons like close, add, or save.",[2818,3841,3842,3844],{},[1758,3843,1450],{},": illustrate keyboard keys.",[2818,3846,3847,3850],{},[1758,3848,3849],{},"medical",": health and medical icons.",[2818,3852,3853,3855],{},[1758,3854,827],{},": used for the nav item component.",[2818,3857,3858,3860],{},[1758,3859,3616],{},": represent text editor controls.",[2818,3862,3863,3866],{},[1758,3864,3865],{},"user",": show user related functions.",[2818,3868,3869,3871],{},[1758,3870,1164],{},": use when icons don’t fit into an existing categories.",[1683,3873],{},[1162,3875,3877],{"id":3876},"html-classes","HTML Classes",[2815,3879,3880,3891,3902,3914,3926],{},[2818,3881,3882,3455,3884,3887,3888,1160],{},[2821,3883,3454],{},[1758,3885,3886],{},".{prefix}-{name}-{modifier}"," and ",[1758,3889,3890],{},".is-{status}",[2818,3892,3893,3895,3896,2254,3899,3471],{},[2821,3894,3463],{}," HTML Class attributes always start with a prefix and a hyphen. For example ",[1758,3897,3898],{},".n-button",[1758,3900,3901],{},".n:sr-only",[2818,3903,3904,3907,3908,2522,3911,1160],{},[2821,3905,3906],{},"Modifiers:"," Modifier is a flag on an HTML element. Use them to change appearance or behavior. For example ",[1758,3909,3910],{},".n-button-primary",[1758,3912,3913],{},".n-button-secondary",[2818,3915,3916,3919,3920,3922,3923,1160],{},[2821,3917,3918],{},"Statuses:"," To indicate different statuses in the user interface, we use a specific HTML Class name formatting: ",[1758,3921,3890],{},". For example: ",[1758,3924,3925],{},".is-loading",[2818,3927,3928,3455,3930,2522,3932,2522,3934,1160],{},[2821,3929,3494],{},[1758,3931,3898],{},[1758,3933,3910],{},[1758,3935,3925],{},[1683,3937],{},[1162,3939,3941],{"id":3940},"component-props","Component Props",[14,3943,3944],{},"When naming Web Component properties we need to be careful that the names we use do not conflict with existing standardized prototype members. Reserved names include:",[14,3946,3947,2522,3950,2522,3953,2522,3956,2522,3959,2522,3962,2522,3965,2522,3968,2522,3971,2522,3974,2522,3977,2522,3980,2522,3983,2522,3986,2522,3989,2522,3992,2522,3995,2522,3998,2522,4001,2522,4004,2522,4007,2522,4009,2522,4012,2522,4015,2522,4018,2522,4021,2522,4024,2522,4027,2522,4030,2522,4033,2522,4036,2522,4039,2522,4042,2522,4045,2522,4048,2522,4051,2522,4054,2522,4057,2522,4060,2522,4063,2522,4066,2522,4069,2522,4072,2522,4075,2522,4078,2522,4081,2522,4084,2522,4087,2522,4090,2522,4093,2522,4096,2522,4099,2522,4102,2522,4105,2522,4108,2522,4111,2522,4114,2522,4117,2522,4120,2522,4123,2522,4126,2522,4129,2522,4132,2522,4135,2522,4138,2522,4141,2522,4144,2522,4147,2522,4150,2522,4153,2522,4156,2522,4159,2522,4162,2522,4165,2522,4168,2522,4171,2522,4174,2522,4177,2522,4180,2522,4183,2522,4186,2522,4189,2522,4192,2522,4195,2522,4198,2522,4201,2522,4204,2522,4207,2522,4210,2522,4213,2522,4216,2522,4219,2522,4222,2522,4225,2522,4228,2522,4231,2522,4234,2522,4237,2522,4240,2522,4243,2522,4246,2522,4249,2522,4252,2522,4255,2522,4258,2522,4261,2522,4264,2522,4267,2522,4270,2522,4273,2522,4276,2522,4279,2522,4282,2522,4285,2522,4288,2522,4291,2522,4294,2522,4297,2522,4300,2522,4303,2522,4306,2522,4309,2522,4312,2522,4315,2522,4318,2522,4321,2522,4324,2522,4327,2522,4330,2522,4333,2522,4336,2522,4339,2522,4342,2522,4345,2522,4348,2522,4351,2522,4354,2522,4357,2522,4360,2522,4363,2522,4366,2522,4369,2522,4372,2522,4375,2522,4378,2522,4381,2522,4384,2522,4387,2522,4390,2522,4393,2522,4396,2522,4399,2522,4402,2522,4405,2522,4408,2522,4411,2522,4414,2522,4417,2522,4420,2522,4423,2522,4426,2522,4429,2522,4432,2522,4435,2522,4438,2522,4441,2522,4444,2522,4447,2522,4450,2522,4453,2522,4456,2522,4459,2522,4462,2522,4465,2522,4468,2522,4471,2522,4474,2522,4477,2522,4480,2522,4483,2522,4486,2522,4489,2522,4492,2522,4495,2522,4498,2522,4501,2522,4504,2522,4507,2522,4510,2522,4513,2522,4516,2522,4519,2522,4522,2522,4525,2522,4528,2522,4531,2522,4534,2522,4537,2522,4540,2522,4543,2522,4546,2522,4549,2522,4552,2522,4555,2522,4558,2522,4561,2522,4564,2522,4567,2522,4570,2522,4573,2522,4576,2522,4579,2522,4582,2522,4585,2522,4588,2522,4591,2522,4594,2522,4597,2522,4600,2522,4603,2522,4606,3704,4609,1160],{},[1758,3948,3949],{},"align",[1758,3951,3952],{},"title",[1758,3954,3955],{},"lang",[1758,3957,3958],{},"translate",[1758,3960,3961],{},"dir",[1758,3963,3964],{},"dataset",[1758,3966,3967],{},"hidden",[1758,3969,3970],{},"tabIndex",[1758,3972,3973],{},"accessKey",[1758,3975,3976],{},"draggable",[1758,3978,3979],{},"spellcheck",[1758,3981,3982],{},"autocapitalize",[1758,3984,3985],{},"contentEditable",[1758,3987,3988],{},"isContentEditable",[1758,3990,3991],{},"inputMode",[1758,3993,3994],{},"offsetParent",[1758,3996,3997],{},"offsetTop",[1758,3999,4000],{},"offsetLeft",[1758,4002,4003],{},"offsetWidth",[1758,4005,4006],{},"offsetHeight",[1758,4008,2706],{},[1758,4010,4011],{},"innerText",[1758,4013,4014],{},"outerText",[1758,4016,4017],{},"oncopy",[1758,4019,4020],{},"oncut",[1758,4022,4023],{},"onpaste",[1758,4025,4026],{},"onabort",[1758,4028,4029],{},"onblur",[1758,4031,4032],{},"oncancel",[1758,4034,4035],{},"oncanplay",[1758,4037,4038],{},"oncanplaythrough",[1758,4040,4041],{},"onchange",[1758,4043,4044],{},"onclick",[1758,4046,4047],{},"onclose",[1758,4049,4050],{},"oncontextmenu",[1758,4052,4053],{},"oncuechange",[1758,4055,4056],{},"ondblclick",[1758,4058,4059],{},"ondrag",[1758,4061,4062],{},"ondragend",[1758,4064,4065],{},"ondragenter",[1758,4067,4068],{},"ondragleave",[1758,4070,4071],{},"ondragover",[1758,4073,4074],{},"ondragstart",[1758,4076,4077],{},"ondrop",[1758,4079,4080],{},"ondurationchange",[1758,4082,4083],{},"onemptied",[1758,4085,4086],{},"onended",[1758,4088,4089],{},"onerror",[1758,4091,4092],{},"onfocus",[1758,4094,4095],{},"onfocusin",[1758,4097,4098],{},"onfocusout",[1758,4100,4101],{},"oninput",[1758,4103,4104],{},"oninvalid",[1758,4106,4107],{},"onkeydown",[1758,4109,4110],{},"onkeypress",[1758,4112,4113],{},"onkeyup",[1758,4115,4116],{},"onload",[1758,4118,4119],{},"onloadeddata",[1758,4121,4122],{},"onloadedmetadata",[1758,4124,4125],{},"onloadstart",[1758,4127,4128],{},"onmousedown",[1758,4130,4131],{},"onmouseenter",[1758,4133,4134],{},"onmouseleave",[1758,4136,4137],{},"onmousemove",[1758,4139,4140],{},"onmouseout",[1758,4142,4143],{},"onmouseover",[1758,4145,4146],{},"onmouseup",[1758,4148,4149],{},"onmousewheel",[1758,4151,4152],{},"onpause",[1758,4154,4155],{},"onplay",[1758,4157,4158],{},"onplaying",[1758,4160,4161],{},"onprogress",[1758,4163,4164],{},"onratechange",[1758,4166,4167],{},"onreset",[1758,4169,4170],{},"onresize",[1758,4172,4173],{},"onscroll",[1758,4175,4176],{},"onseeked",[1758,4178,4179],{},"onseeking",[1758,4181,4182],{},"onselect",[1758,4184,4185],{},"onstalled",[1758,4187,4188],{},"onsubmit",[1758,4190,4191],{},"onsuspend",[1758,4193,4194],{},"ontimeupdate",[1758,4196,4197],{},"ontoggle",[1758,4199,4200],{},"onvolumechange",[1758,4202,4203],{},"onwaiting",[1758,4205,4206],{},"onwheel",[1758,4208,4209],{},"onauxclick",[1758,4211,4212],{},"ongotpointercapture",[1758,4214,4215],{},"onlostpointercapture",[1758,4217,4218],{},"onpointerdown",[1758,4220,4221],{},"onpointermove",[1758,4223,4224],{},"onpointerup",[1758,4226,4227],{},"onpointercancel",[1758,4229,4230],{},"onpointerover",[1758,4232,4233],{},"onpointerout",[1758,4235,4236],{},"onpointerenter",[1758,4238,4239],{},"onpointerleave",[1758,4241,4242],{},"onselectstart",[1758,4244,4245],{},"onselectionchange",[1758,4247,4248],{},"nonce",[1758,4250,4251],{},"click",[1758,4253,4254],{},"focus",[1758,4256,4257],{},"blur",[1758,4259,4260],{},"namespaceURI",[1758,4262,4263],{},"prefix",[1758,4265,4266],{},"localName",[1758,4268,4269],{},"tagName",[1758,4271,4272],{},"id",[1758,4274,4275],{},"className",[1758,4277,4278],{},"classList",[1758,4280,4281],{},"slot",[1758,4283,4284],{},"attributes",[1758,4286,4287],{},"shadowRoot",[1758,4289,4290],{},"assignedSlot",[1758,4292,4293],{},"innerHTML",[1758,4295,4296],{},"outerHTML",[1758,4298,4299],{},"scrollTop",[1758,4301,4302],{},"scrollLeft",[1758,4304,4305],{},"scrollWidth",[1758,4307,4308],{},"scrollHeight",[1758,4310,4311],{},"clientTop",[1758,4313,4314],{},"clientLeft",[1758,4316,4317],{},"clientWidth",[1758,4319,4320],{},"clientHeight",[1758,4322,4323],{},"attributeStyleMap",[1758,4325,4326],{},"onbeforecopy",[1758,4328,4329],{},"onbeforecut",[1758,4331,4332],{},"onbeforepaste",[1758,4334,4335],{},"onsearch",[1758,4337,4338],{},"previousElementSibling",[1758,4340,4341],{},"nextElementSibling",[1758,4343,4344],{},"children",[1758,4346,4347],{},"firstElementChild",[1758,4349,4350],{},"lastElementChild",[1758,4352,4353],{},"childElementCount",[1758,4355,4356],{},"onfullscreenchange",[1758,4358,4359],{},"onfullscreenerror",[1758,4361,4362],{},"onwebkitfullscreenchange",[1758,4364,4365],{},"onwebkitfullscreenerror",[1758,4367,4368],{},"setPointerCapture",[1758,4370,4371],{},"releasePointerCapture",[1758,4373,4374],{},"hasPointerCapture",[1758,4376,4377],{},"hasAttributes",[1758,4379,4380],{},"getAttributeNames",[1758,4382,4383],{},"getAttribute",[1758,4385,4386],{},"getAttributeNS",[1758,4388,4389],{},"setAttribute",[1758,4391,4392],{},"setAttributeNS",[1758,4394,4395],{},"removeAttribute",[1758,4397,4398],{},"removeAttributeNS",[1758,4400,4401],{},"hasAttribute",[1758,4403,4404],{},"hasAttributeNS",[1758,4406,4407],{},"toggleAttribute",[1758,4409,4410],{},"getAttributeNode",[1758,4412,4413],{},"getAttributeNodeNS",[1758,4415,4416],{},"setAttributeNode",[1758,4418,4419],{},"setAttributeNodeNS",[1758,4421,4422],{},"removeAttributeNode",[1758,4424,4425],{},"closest",[1758,4427,4428],{},"matches",[1758,4430,4431],{},"webkitMatchesSelector",[1758,4433,4434],{},"attachShadow",[1758,4436,4437],{},"getElementsByTagName",[1758,4439,4440],{},"getElementsByTagNameNS",[1758,4442,4443],{},"getElementsByClassName",[1758,4445,4446],{},"insertAdjacentElement",[1758,4448,4449],{},"insertAdjacentText",[1758,4451,4452],{},"insertAdjacentHTML",[1758,4454,4455],{},"requestPointerLock",[1758,4457,4458],{},"getClientRects",[1758,4460,4461],{},"getBoundingClientRect",[1758,4463,4464],{},"scrollIntoView",[1758,4466,4467],{},"scroll",[1758,4469,4470],{},"scrollTo",[1758,4472,4473],{},"scrollBy",[1758,4475,4476],{},"scrollIntoViewIfNeeded",[1758,4478,4479],{},"animate",[1758,4481,4482],{},"computedStyleMap",[1758,4484,4485],{},"before",[1758,4487,4488],{},"after",[1758,4490,4491],{},"replaceWith",[1758,4493,4494],{},"remove",[1758,4496,4497],{},"prepend",[1758,4499,4500],{},"append",[1758,4502,4503],{},"querySelector",[1758,4505,4506],{},"querySelectorAll",[1758,4508,4509],{},"requestFullscreen",[1758,4511,4512],{},"webkitRequestFullScreen",[1758,4514,4515],{},"webkitRequestFullscreen",[1758,4517,4518],{},"part",[1758,4520,4521],{},"createShadowRoot",[1758,4523,4524],{},"getDestinationInsertionPoints",[1758,4526,4527],{},"nodeType",[1758,4529,4530],{},"nodeName",[1758,4532,4533],{},"baseURI",[1758,4535,4536],{},"isConnected",[1758,4538,4539],{},"ownerDocument",[1758,4541,4542],{},"parentNode",[1758,4544,4545],{},"parentElement",[1758,4547,4548],{},"childNodes",[1758,4550,4551],{},"firstChild",[1758,4553,4554],{},"lastChild",[1758,4556,4557],{},"previousSibling",[1758,4559,4560],{},"nextSibling",[1758,4562,4563],{},"nodeValue",[1758,4565,4566],{},"textContent",[1758,4568,4569],{},"hasChildNodes",[1758,4571,4572],{},"getRootNode",[1758,4574,4575],{},"normalize",[1758,4577,4578],{},"cloneNode",[1758,4580,4581],{},"isEqualNode",[1758,4583,4584],{},"isSameNode",[1758,4586,4587],{},"compareDocumentPosition",[1758,4589,4590],{},"contains",[1758,4592,4593],{},"lookupPrefix",[1758,4595,4596],{},"lookupNamespaceURI",[1758,4598,4599],{},"isDefaultNamespace",[1758,4601,4602],{},"insertBefore",[1758,4604,4605],{},"appendChild",[1758,4607,4608],{},"replaceChild",[1758,4610,4611],{},"removeChild",[1683,4613],{},[1162,4615,109],{"id":4616},"css-custom-properties",[2815,4618,4619,4631,4643],{},[2818,4620,4621,3455,4623,4626,4627,4630],{},[2821,4622,3454],{},[1758,4624,4625],{},"--n-{component}-{property}"," for public properties, ",[1758,4628,4629],{},"--_n-{component}-{property}"," for private properties",[2818,4632,4633,3455,4635,4638,4639,4642],{},[2821,4634,3463],{},[1758,4636,4637],{},"--n-"," prefixes a public custom property, meaning developers can use it to fine tune components. ",[1758,4640,4641],{},"--_n-"," prefixes a private custom property, which is used internally by component authors",[2818,4644,4645,3455,4647,2522,4650,2522,4653],{},[2821,4646,3494],{},[1758,4648,4649],{},"--n-banner-border-radius",[1758,4651,4652],{},"--_n-banner-background",[1758,4654,4655],{},"--_n-banner-border-radius",[14,4657,4658,4659,4662],{},"All CSS custom properties should be created as a private custom property on the ",[1758,4660,4661],{},":host"," selector, but can be adjusted with other selectors. If the custom property needs to be opened up for public use, then the value of the private property should be set as its public custom property counterpart with a fallback. Here’s an example of both a public and private custom property:",[1959,4664,4668],{"className":4665,"code":4666,"language":4667,"meta":21,"style":21},"language-css shiki shiki-themes github-light github-dark",":host {\n  \u002F* Public properties *\u002F\n  --_n-banner-border-radius: var(--n-banner-border-radius, var(--n-border-radius));\n\n  \u002F* Private properties *\u002F\n  --_n-banner-background: var(--n-color-status-info-weak);\n}\n","css",[1758,4669,4670,4677,4682,4710,4714,4719,4736],{"__ignoreMap":21},[1967,4671,4672,4674],{"class":1969,"line":30},[1967,4673,4661],{"class":1999},[1967,4675,4676],{"class":1972}," {\n",[1967,4678,4679],{"class":1969,"line":22},[1967,4680,4681],{"class":2137},"  \u002F* Public properties *\u002F\n",[1967,4683,4684,4688,4691,4694,4696,4698,4700,4702,4704,4707],{"class":1969,"line":1889},[1967,4685,4687],{"class":4686},"s4XuR","  --_n-banner-border-radius",[1967,4689,4690],{"class":1972},": ",[1967,4692,4693],{"class":1989},"var",[1967,4695,2044],{"class":1972},[1967,4697,4649],{"class":4686},[1967,4699,2522],{"class":1972},[1967,4701,4693],{"class":1989},[1967,4703,2044],{"class":1972},[1967,4705,4706],{"class":4686},"--n-border-radius",[1967,4708,4709],{"class":1972},"));\n",[1967,4711,4712],{"class":1969,"line":2029},[1967,4713,2154],{"emptyLinePlaceholder":344},[1967,4715,4716],{"class":1969,"line":2054},[1967,4717,4718],{"class":2137},"  \u002F* Private properties *\u002F\n",[1967,4720,4721,4724,4726,4728,4730,4733],{"class":1969,"line":2076},[1967,4722,4723],{"class":4686},"  --_n-banner-background",[1967,4725,4690],{"class":1972},[1967,4727,4693],{"class":1989},[1967,4729,2044],{"class":1972},[1967,4731,4732],{"class":4686},"--n-color-status-info-weak",[1967,4734,4735],{"class":1972},");\n",[1967,4737,4738],{"class":1969,"line":2175},[1967,4739,4740],{"class":1972},"}\n",[1683,4742],{},[1162,4744,4746],{"id":4745},"repositories","Repositories",[14,4748,4749],{},"While we don’t follow a strict naming format on repositories, there’re a few rules we follow to make sure naming stays consistent and straightforward to follow:",[2815,4751,4752,4765],{},[2818,4753,4754,4757,4758,2254,4761,4764],{},[2821,4755,4756],{},"Separating words:"," We use kebab-case to separate words, e.g. ",[1758,4759,4760],{},"nord-design-system",[1758,4762,4763],{},"nord-react",". Never use camelCase, snake_case or any other format when naming a repository.",[2818,4766,4767,4770],{},[2821,4768,4769],{},"Always lowercase:"," The whole repository name should be in lowercase letters. Do not use uppercase letters or Capitalization.",[1683,4772],{},[1162,4774,1875],{"id":1874},[14,4776,4777,4778,1883],{},"Have questions about naming? Please head over to the ",[1156,4779,1882],{"href":1881},[2706,4781,4782],{},"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);}",{"title":21,"searchDepth":22,"depth":22,"links":4784},[4785,4786,4787,4788,4789,4790,4791,4792,4793,4794,4795,4796,4797],{"id":3421,"depth":22,"text":3422},{"id":3428,"depth":22,"text":3429},{"id":3435,"depth":22,"text":3436},{"id":3444,"depth":22,"text":241},{"id":3507,"depth":22,"text":3508},{"id":3582,"depth":22,"text":3583},{"id":1714,"depth":22,"text":236},{"id":3778,"depth":22,"text":337},{"id":3876,"depth":22,"text":3877},{"id":3940,"depth":22,"text":3941},{"id":4616,"depth":22,"text":109},{"id":4745,"depth":22,"text":4746},{"id":1874,"depth":22,"text":1875},{},{"title":174,"description":21},{"loc":173},"design\u002Ffoundations\u002F10.naming","7xW_9GlwpYdMg_lolQ3dsWaMGYMOgrh1QX6C_S9Dfxs",{"id":4804,"title":177,"badge":6,"body":4805,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":5593,"native":25,"navTitle":6,"navigation":344,"path":176,"railLabel":6,"seo":5594,"sidebar":25,"sitemap":5595,"stem":5631,"tabs":6,"__hash__":5632},"guidelines\u002Fdesign\u002Ffoundations\u002F11.brand.md",{"type":8,"value":4806,"toc":5544},[4807,4812,4815,4822,4827,4831,4839,4845,4850,4854,4858,4861,4864,4867,4871,4875,4879,4882,4885,4889,4893,4896,4899,4903,4907,4910,4913,4917,4921,4924,4928,4932,4936,4939,4942,4946,4950,4956,4960,4964,4968,4972,4976,4978,4981,4986,4990,4994,4997,5000,5004,5008,5011,5014,5018,5022,5025,5028,5032,5036,5039,5043,5047,5051,5054,5059,5063,5066,5069,5078,5082,5093,5097,5101,5105,5109,5113,5116,5119,5123,5127,5130,5134,5138,5141,5145,5149,5153,5156,5159,5163,5168,5172,5174,5183,5188,5193,5197,5201,5204,5208,5212,5216,5219,5224,5228,5232,5240,5243,5248,5251,5255,5259,5262,5266,5269,5273,5276,5280,5283,5287,5290,5294,5297,5301,5305,5308,5340,5344,5347,5351,5354,5358,5362,5366,5381,5385,5389,5393,5396,5401,5404,5408,5412,5415,5419,5423,5427,5431,5434,5438,5441,5445,5449,5452,5456,5459,5463,5467,5470,5474,5477,5481,5485,5488,5491,5493,5499,5503,5507,5510,5515,5524,5527,5532,5536,5538],[11,4808,4809],{},[14,4810,4811],{},"Welcome to Nordhealth’s brand guidelines. Here you’ll learn how to express our brand and follow our design philosophy to uniquely distinguishing us from the competitors.",[14,4813,4814],{},"We like to think that we’re not your traditional healthcare software provider. For starters, we have strong Nordic roots. That drives us to challenge the status quo with modern design thinking and innovation. We want our brand to reflect this.",[1659,4816],{"src":4817,"width":4818,"height":4819,"style":4820,"alt":4821},"\u002Fimg\u002Fbrand.svg",1486,721,"max-width: 1000px;","Nordhealth brand",[4823,4824,4825],"div",{},[1683,4826],{},[1162,4828,4830],{"id":4829},"our-logo","Our logo",[14,4832,4833,4834,4838],{},"The Nordhealth logo is composed of the “together” logomark and a logotype set in Armin Grotesk Ultrabold. The horizontal version is the primary logo and should be used in all external applications. Always use the logo files provided in our ",[1156,4835,4837],{"href":4836},"\u002Fdesign\u002Fassets\u002F","downloads section",". Do not try to re-create the logo yourself.",[574,4840,4842],{"href":4836,"size":3540,"variant":4841},"primary",[14,4843,4844],{},"Download logo",[1659,4846],{"id":4847,"src":4848,"alt":4849},"logo","\u002Fimg\u002Fbrand\u002Flogo.svg","Nordhealth logo",[4823,4851,4852],{},[1683,4853],{},[1162,4855,4857],{"id":4856},"logomark","Logomark",[14,4859,4860],{},"Nordhealth logomark is visually based on the N from our company name. But if you look closer it shows two individual elements coming together to form a solid structure.",[14,4862,4863],{},"This is where the idea of togetherness comes into play. Two sides working as one. On a business level it represents a key driver for Nordhealth, acquisition. For the customer and end users it expresses the seamless use of our products to improve productivity and communication. It brings healthcare professionals closer to their patients. It defines you and your teams working as a strong unit.",[14,4865,4866],{},"On a deeper level it illustrates a bigger idea, change and innovation on the global healthcare stage. We make our products available to the patients where it makes the biggest difference.",[1659,4868],{"src":4869,"style":4870,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo2.svg","max-width: 700px;",[4823,4872,4873],{},[1683,4874],{},[1162,4876,4878],{"id":4877},"getting-creative-with-logo","Getting creative with logo",[14,4880,4881],{},"The Nordhealth logomark can be re-created for a particular event or to emanate an idea. This is strictly for internal use only and should be led by the marketing and brand team.",[1659,4883],{"src":4884,"style":4870,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo3.svg",[4823,4886,4887],{},[1683,4888],{},[1162,4890,4892],{"id":4891},"logo-minimums","Logo minimums",[14,4894,4895],{},"Small logo rules apply when the logo is below 100px wide for digital and 26mm wide for print. The logo lockup should not go below 50px\u002F14mm wide. The singular mark can go as small as 25px × 25px or 7mm × 7mm and for a favicon, 16px × 16px.",[1659,4897],{"src":4898,"style":4870,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo4.svg",[4823,4900,4901],{},[1683,4902],{},[1162,4904,4906],{"id":4905},"logo-usage-on-backgrounds","Logo usage on backgrounds",[14,4908,4909],{},"The Nordhealth logo should only be used as a solid white on strong backgrounds. The blue combination variation can be used on white or very light backgrounds.",[1659,4911],{"src":4912,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo5.svg",[4823,4914,4915],{},[1683,4916],{},[1162,4918,4920],{"id":4919},"one-color-use-for-logo","One color use for Logo",[14,4922,4923],{},"For applications that don’t require color or need to be knocked back use either a solid black version or the secondary navy blue.",[1659,4925],{"src":4926,"style":4927,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo6.svg","max-width: 500px;",[4823,4929,4930],{},[1683,4931],{},[1162,4933,4935],{"id":4934},"partnership-logo","Partnership logo",[14,4937,4938],{},"When using the lockup with other logos be sure to apply the right amount of safe space so the logo can still be legible.",[1659,4940],{"src":4941,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo7.svg",[4823,4943,4944],{},[1683,4945],{},[1162,4947,4949],{"id":4948},"from-nordhealth-logo","From Nordhealth logo",[14,4951,4952,4953,1160],{},"When you need to indicate that another product is made by Nordhealth, use the following logo variation that is available on our ",[1156,4954,4955],{"href":4836},"downloads page",[1659,4957],{"src":4958,"style":4959,"alt":4949},"\u002Fimg\u002Fbrand\u002Ffrom-nordhealth.svg","max-width: 650px;",[4823,4961,4962],{},[1683,4963],{},[1162,4965,4967],{"id":4966},"logo-misuse","Logo misuse",[1659,4969],{"src":4970,"style":4971,"alt":4849},"\u002Fimg\u002Fbrand\u002Flogo8.svg","max-width: 1100px;",[4823,4973,4974],{},[1683,4975],{},[1162,4977,3583],{"id":3582},[14,4979,4980],{},"Our primary and secondary colors are Sky Blue and Navy Blue. They should be used in all applications within the brand with more weight than any other tertiary color.",[1659,4982],{"src":4983,"style":4984,"alt":4985},"\u002Fimg\u002Fbrand\u002Fcolors.svg","max-width: 900px;","Nordhealth colors",[4823,4987,4988],{},[1683,4989],{},[1162,4991,4993],{"id":4992},"tertiary-palette","Tertiary palette",[14,4995,4996],{},"Our tertiary colors should be used less frequently. They should be applied as a highlight or to create variation. They are used across the brand in underlines, illustrations, highlighted numbers, backgrounds and many more touchpoints.",[1659,4998],{"src":4999,"style":4984,"alt":4985},"\u002Fimg\u002Fbrand\u002Fcolors2.svg",[4823,5001,5002],{},[1683,5003],{},[1162,5005,5007],{"id":5006},"gray-palette","Gray palette",[14,5009,5010],{},"Grays are essential for any brand. They are used as backgrounds, secondary text, disabled states and in illustrations.",[1659,5012],{"src":5013,"style":4984,"alt":4985},"\u002Fimg\u002Fbrand\u002Fcolors3.svg",[4823,5015,5016],{},[1683,5017],{},[1162,5019,5021],{"id":5020},"gradients","Gradients",[14,5023,5024],{},"Gradients add depth when we want to keep some touchpoints simplistic and not too colorful. Only use in digital applications.",[1659,5026],{"src":5027,"style":4984,"alt":4985},"\u002Fimg\u002Fbrand\u002Fcolors4.svg",[4823,5029,5030],{},[1683,5031],{},[1162,5033,5035],{"id":5034},"accessible-color-combinations","Accessible color combinations",[14,5037,5038],{},"It’s essential that the brand colors used in conjuction with text are at least AA compliant when used on any digital application.",[1659,5040],{"src":5041,"style":4971,"alt":5042},"\u002Fimg\u002Fbrand\u002Fa11y.svg","Nordhealth accessible colors",[4823,5044,5045],{},[1683,5046],{},[1162,5048,5050],{"id":5049},"color-design-tokens","Color design tokens",[14,5052,5053],{},"Nord offers color design tokens which are a tech-agnostic way to store variables. We use tokens instead of hard coded values in all digital user interfaces to ensure a better consistency across different platforms.",[574,5055,5056],{"href":1679,"size":3540,"variant":4841},[14,5057,5058],{},"Browse tokens",[4823,5060,5061],{},[1683,5062],{},[1162,5064,180],{"id":5065},"typography",[14,5067,5068],{},"The Nordhealth typeface is called Armin Grotesk. It’s used in all aspects of the brand. In headings, body copy, captions and numbers.",[570,5070,5071],{"variant":2086},[14,5072,5073,5074,1160],{},"Please note that for application UIs (Veterinary & Healthcare) we use a typeface called Inter that should be utilized using ",[1156,5075,5077],{"href":5076},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts\u002F","Nord's Webfonts package",[1659,5079],{"src":5080,"style":4820,"alt":5081},"\u002Fimg\u002Fbrand\u002Ftypography.svg","Nordhealth type",[574,5083,5086,5090],{"href":5084,"size":3540,"variant":4841,"target":5085},"https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1pkgxdEF8SVtw-gNvAXwwOzpu49PnL0F9\u002Fview?usp=sharing","\\_blank",[750,5087],{"name":5088,"slot":5089},"interface-lock","start",[14,5091,5092],{},"Download typeface",[4823,5094,5095],{},[1683,5096],{},[1162,5098,5100],{"id":5099},"type-hierarchy","Type hierarchy",[1659,5102],{"src":5103,"style":5104,"alt":5081},"\u002Fimg\u002Fbrand\u002Ftypography2.svg","max-width: 1200px;",[4823,5106,5107],{},[1683,5108],{},[1162,5110,5112],{"id":5111},"number-style","Number style",[14,5114,5115],{},"We have two number styles. Style 01 is for larger number pullouts and style 02, which is more legible, is used for paragraphy and caption styles.",[1659,5117],{"src":5118,"style":4820,"alt":5081},"\u002Fimg\u002Fbrand\u002Ftypography3.svg",[4823,5120,5121],{},[1683,5122],{},[1162,5124,5126],{"id":5125},"ideal-stack","Ideal stack",[1659,5128],{"src":5129,"style":5104,"alt":5081},"\u002Fimg\u002Fbrand\u002Ftypography4.svg",[4823,5131,5132],{},[1683,5133],{},[1162,5135,5137],{"id":5136},"underlining","Underlining",[14,5139,5140],{},"The underline is used to highlight specific words from large statement text’s only. Use sparingly to pullout a handful of words. No more than 2-4 per text block.",[1659,5142],{"src":5143,"style":5144,"alt":5081},"\u002Fimg\u002Fbrand\u002Ftypography5.svg","max-width: 600px;",[4823,5146,5147],{},[1683,5148],{},[1162,5150,5152],{"id":5151},"illustrations","Illustrations",[14,5154,5155],{},"Our illustrations are inspired by process and product wireframe visuals used in software design processes. Style 01 illustrations all share the line element from the logomark. They are minimalistic in approach and idea but should be well drawn and use a minimum of 3 colors.",[14,5157,5158],{},"Line thickness can vary depending on scale. Extra small illustrations should start at 2px in stroke weight. As they increase in size they go up in 2px increments. Use your design eye.",[1659,5160],{"src":5161,"style":4820,"alt":5162},"\u002Fimg\u002Fbrand\u002Fillustrations.svg","Nordhealth illustrations",[574,5164,5165],{"href":4836,"size":3540,"variant":4841},[14,5166,5167],{},"Download illustrations",[4823,5169,5170],{},[1683,5171],{},[1162,5173,337],{"id":3778},[14,5175,5176,5177,5182],{},"Icons follow the same style as the illustrations. We have an extensive library of icons for any use which is based on ",[1156,5178,5181],{"href":5179,"rel":5180},"https:\u002F\u002Fstreamlineicons.com\u002F",[1179],"Streamline iconset",". We use them across all digital applications. Stroke weight is fully adjustable.",[1659,5184],{"src":5185,"style":5186,"alt":5187},"\u002Fimg\u002Fbrand\u002Fillustrations2.svg","max-width: 800px;","Nordhealth icons",[574,5189,5190],{"href":3221,"size":3540,"variant":4841},[14,5191,5192],{},"Download icons",[4823,5194,5195],{},[1683,5196],{},[1162,5198,5200],{"id":5199},"photography","Photography",[14,5202,5203],{},"We have two main styles of photography. For head shots we use a cutout with a colored background from our extensive color palette. For images that show our people and environments we should adopt a more reportage style that captures the tone of our culture.",[1659,5205],{"src":5206,"style":4820,"alt":5207},"\u002Fimg\u002Fbrand\u002Fphotography.png","Nordhealth photography",[4823,5209,5210],{},[1683,5211],{},[1162,5213,5215],{"id":5214},"our-mission","Our mission",[14,5217,5218],{},"Our mission statement communicates the brand’s purpose, objectives and how we plan to serve our audience.",[14,5220,5221],{},[2821,5222,5223],{},"Nordhealth’s mission is to redefine digital healthcare.",[1659,5225],{"src":5226,"style":5186,"alt":5227},"\u002Fimg\u002Fbrand\u002Fmission.svg","Nordhealth’s mission",[4823,5229,5230],{},[1683,5231],{},[1162,5233,5235,5236],{"id":5234},"our-vision-draft","Our vision ",[565,5237,5239],{"dataTippyContent":5238,"variant":2086},"Draft, not ready for use","Draft",[14,5241,5242],{},"Our vision brings to the surface what’s behind the brand. What inspires us, our employees and our customers. A vision gives us a clear direction into the future.",[14,5244,5245],{},[2821,5246,5247],{},"Nordhealth’s vision is to make healthcare more universal, efficient and secure through data and technology.",[1659,5249],{"src":5250,"style":5186,"alt":5227},"\u002Fimg\u002Fbrand\u002Fvision.svg",[4823,5252,5253],{},[1683,5254],{},[1162,5256,5258],{"id":5257},"our-values","Our values",[14,5260,5261],{},"With every ambition, comes a set of values. Ones that shape our day to day culture, define who we are, what we do, and how we push forward.",[1689,5263,5265],{"id":5264},"_1-put-customers-first","1. Put customers first",[14,5267,5268],{},"Never overlook what really matters. Great service, ease of use, honest pricing, and respect for our customer’s time, money, and trust.",[1689,5270,5272],{"id":5271},"_2-take-ownership","2. Take ownership",[14,5274,5275],{},"Think long-term and take initiative. Care about the outcome. Be accountable. Do the right thing for us, our customers, and the team.",[1689,5277,5279],{"id":5278},"_3-do-more-with-less","3. Do more with less",[14,5281,5282],{},"Simplicity is the key to great results. Create fewer features, but make them great instead of merely good. Dare to say “no” to prevent the core from being lost in the noise.",[1689,5284,5286],{"id":5285},"_4-be-stronger-together","4. Be stronger together",[14,5288,5289],{},"Engage beginners and attract experts to grow excellent teams. This isn’t something we do on our own — it’s all about sharing and exchanging ideas.",[1689,5291,5293],{"id":5292},"_5-embrace-change","5. Embrace change",[14,5295,5296],{},"Challenge the status quo. Seek out and embrace continuous change, evolution, and improvement.",[4823,5298,5299],{},[1683,5300],{},[1162,5302,5304],{"id":5303},"brand-personality","Brand personality",[14,5306,5307],{},"Brands are like peoples and people exhibit emotions through personality. As a brand we want to stay true to our personality in everything we do. The following personality traits express us:",[2815,5309,5310,5315,5320,5325,5330,5335],{},[2818,5311,5312],{},[2821,5313,5314],{},"Innovative",[2818,5316,5317],{},[2821,5318,5319],{},"Efficient",[2818,5321,5322],{},[2821,5323,5324],{},"Caring",[2818,5326,5327],{},[2821,5328,5329],{},"Passionate",[2818,5331,5332],{},[2821,5333,5334],{},"Trustworthy",[2818,5336,5337],{},[2821,5338,5339],{},"Customer oriented",[4823,5341,5342],{},[1683,5343],{},[1162,5345,197],{"id":5346},"examples",[1689,5348,5350],{"id":5349},"brand-with-two-tones","Brand with two tones",[14,5352,5353],{},"We have two sides to our brand. Internally we apply the brand in a colorful, conversational and creative manner. External applications can be more monotone, to the point and business focused.",[1659,5355],{"src":5356,"style":4820,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample5.png","Nordhealth examples",[4823,5359,5360],{},[1683,5361],{},[1162,5363,5365],{"id":5364},"website","Website",[14,5367,5368,5369,5374,5375,5380],{},"You can find our website’s living style guide under ",[1156,5370,5373],{"href":5371,"rel":5372},"https:\u002F\u002Fnordhealth.com\u002Fstyleguide\u002F",[1179],"nordhealth.com\u002Fstyleguide",". Additionally, if you press “g” on your keyboard at ",[1156,5376,5379],{"href":5377,"rel":5378},"https:\u002F\u002Fnordhealth.com\u002F",[1179],"nordhealth.com",", you’ll be able to view our design grid.",[1659,5382],{"src":5383,"style":4984,"alt":5384},"\u002Fimg\u002Fbrand\u002Fstyleguide.png","Nordhealth.com style guide",[4823,5386,5387],{},[1683,5388],{},[1162,5390,5392],{"id":5391},"business-cards","Business cards",[14,5394,5395],{},"Business cards can be printed using the templates provided. Get creative for internal applications and more monotone for external.",[574,5397,5398],{"href":4836,"size":3540,"variant":4841},[14,5399,5400],{},"Download template",[1659,5402],{"src":5403,"style":4820,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample.png",[4823,5405,5406],{},[1683,5407],{},[1162,5409,5411],{"id":5410},"letterheads","Letterheads",[14,5413,5414],{},"Letterhead can be used for multiple applications from writing paper to invoices. Make sure the logo is always positioned in the top left hand corner and type sizes are consistent.",[574,5416,5417],{"href":4836,"size":3540,"variant":4841},[14,5418,5400],{},[1659,5420],{"src":5421,"style":5422,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample2.png","max-width: 450px;",[4823,5424,5425],{},[1683,5426],{},[1162,5428,5430],{"id":5429},"posters","Posters",[14,5432,5433],{},"Posters are both for internal and external use. Be more creative and colorful for anything internal. For external applications use the more monotone approach.",[574,5435,5436],{"href":4836,"size":3540,"variant":4841},[14,5437,5400],{},[1659,5439],{"src":5440,"style":5186,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample3.png",[4823,5442,5443],{},[1683,5444],{},[1162,5446,5448],{"id":5447},"presentations","Presentations",[14,5450,5451],{},"Presentations should be large format, simplistic and clear in their creation. Use large type sizes and keep the slides clean but on brand.",[574,5453,5454],{"href":4836,"size":3540,"variant":4841},[14,5455,5400],{},[1659,5457],{"src":5458,"style":4971,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample4.png",[4823,5460,5461],{},[1683,5462],{},[1162,5464,5466],{"id":5465},"social-media","Social media",[14,5468,5469],{},"Try to keep social applications impactful and simplistic. They can be colorful or monotone and use either our illustrations or photos of people.",[574,5471,5472],{"href":4836,"size":3540,"variant":4841},[14,5473,5400],{},[1659,5475],{"src":5476,"style":5104,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample7.png",[4823,5478,5479],{},[1683,5480],{},[1162,5482,5484],{"id":5483},"merchandise","Merchandise",[14,5486,5487],{},"When designing merchandise keep it simplistic but creative. The brand works well with solid colors and illustrations. Combine the two with a subject matter for a great result.",[1659,5489],{"src":5490,"style":4927,"alt":5357},"\u002Fimg\u002Fbrand\u002Fexample6.jpg",[2871,5492],{},[574,5494,5496],{"href":5495,"size":3540,"variant":4841,":download":2426},"\u002Fassets\u002Fnordhealth\u002Fnordhealth-clothes-logo.zip",[14,5497,5498],{},"Download logo for clothes",[4823,5500,5501],{},[1683,5502],{},[1689,5504,5506],{"id":5505},"email-signature","Email signature",[14,5508,5509],{},"Nordhealth’s email signature is simplistic and to the point. It does not include images or any other assets. Copy and paste the below template to your email application to edit the details.",[570,5511,5512],{"variant":2086},[14,5513,5514],{},"Please note that the name of the person should be in bold and the text set in Sans Serif, Helvetica, or Arial typeface.",[1959,5516,5517],{},[1758,5518,5519,5523],{},[5520,5521,5522],"b",{},"Ariel Salminen","\nChief Design Officer, Nordhealth\n\nyour.name@nordhealth.com\n+358 00 000 0000\n\nhttps:\u002F\u002Fnordhealth.com",[14,5525,5526],{},"When adding the signature into your email application, please pay attention to the formatting. The name of the person should be in bold and the text set in Sans Serif, Helvetica, or Arial typeface. An example:",[1659,5528],{"src":5529,"style":5530,"alt":5531},"\u002Fimg\u002Fbrand\u002Fsignature.png","max-width: 280px;","Email signature example",[4823,5533,5534],{},[1683,5535],{},[1162,5537,1875],{"id":1874},[14,5539,5540,5541,5543],{},"Need support producing new brand assets? Have questions on how to express our brand? Please head over to the ",[1156,5542,1882],{"href":1881}," for ways to contact us.",{"title":21,"searchDepth":22,"depth":22,"links":5545},[5546,5547,5548,5549,5550,5551,5552,5553,5554,5555,5556,5557,5558,5559,5560,5561,5562,5563,5564,5565,5566,5567,5568,5569,5570,5572,5579,5580,5583,5584,5585,5586,5587,5588,5589,5592],{"id":4829,"depth":22,"text":4830},{"id":4856,"depth":22,"text":4857},{"id":4877,"depth":22,"text":4878},{"id":4891,"depth":22,"text":4892},{"id":4905,"depth":22,"text":4906},{"id":4919,"depth":22,"text":4920},{"id":4934,"depth":22,"text":4935},{"id":4948,"depth":22,"text":4949},{"id":4966,"depth":22,"text":4967},{"id":3582,"depth":22,"text":3583},{"id":4992,"depth":22,"text":4993},{"id":5006,"depth":22,"text":5007},{"id":5020,"depth":22,"text":5021},{"id":5034,"depth":22,"text":5035},{"id":5049,"depth":22,"text":5050},{"id":5065,"depth":22,"text":180},{"id":5099,"depth":22,"text":5100},{"id":5111,"depth":22,"text":5112},{"id":5125,"depth":22,"text":5126},{"id":5136,"depth":22,"text":5137},{"id":5151,"depth":22,"text":5152},{"id":3778,"depth":22,"text":337},{"id":5199,"depth":22,"text":5200},{"id":5214,"depth":22,"text":5215},{"id":5234,"depth":22,"text":5571},"Our vision Draft",{"id":5257,"depth":22,"text":5258,"children":5573},[5574,5575,5576,5577,5578],{"id":5264,"depth":1889,"text":5265},{"id":5271,"depth":1889,"text":5272},{"id":5278,"depth":1889,"text":5279},{"id":5285,"depth":1889,"text":5286},{"id":5292,"depth":1889,"text":5293},{"id":5303,"depth":22,"text":5304},{"id":5346,"depth":22,"text":197,"children":5581},[5582],{"id":5349,"depth":1889,"text":5350},{"id":5364,"depth":22,"text":5365},{"id":5391,"depth":22,"text":5392},{"id":5410,"depth":22,"text":5411},{"id":5429,"depth":22,"text":5430},{"id":5447,"depth":22,"text":5448},{"id":5465,"depth":22,"text":5466},{"id":5483,"depth":22,"text":5484,"children":5590},[5591],{"id":5505,"depth":1889,"text":5506},{"id":1874,"depth":22,"text":1875},{},{"title":177,"description":21},{"loc":176,"images":5596},[5597,5598,5599,5600,5601,5602,5603,5604,5605,5606,5607,5608,5609,5610,5611,5612,5613,5614,5615,5616,5617,5618,5619,5620,5621,5622,5623,5624,5625,5626,5627,5628,5629,5630],{"loc":4817},{"loc":4848},{"loc":4869},{"loc":4884},{"loc":4898},{"loc":4912},{"loc":4926},{"loc":4941},{"loc":4958},{"loc":4970},{"loc":4983},{"loc":4999},{"loc":5013},{"loc":5027},{"loc":5041},{"loc":5080},{"loc":5103},{"loc":5118},{"loc":5129},{"loc":5143},{"loc":5161},{"loc":5185},{"loc":5206},{"loc":5226},{"loc":5250},{"loc":5356},{"loc":5383},{"loc":5403},{"loc":5421},{"loc":5440},{"loc":5458},{"loc":5476},{"loc":5490},{"loc":5529},"design\u002Ffoundations\u002F11.brand","HYtA71GaQplh1T6ZxVA4P2Kj-c9755Y-wCCw5da8a9o",{"id":5634,"title":180,"badge":5635,"body":5637,"description":21,"extension":26,"external":25,"icon":6,"keywords":6,"meta":6214,"native":25,"navTitle":6,"navigation":344,"path":179,"railLabel":6,"seo":6215,"sidebar":25,"sitemap":6216,"stem":6226,"tabs":6,"__hash__":6227},"guidelines\u002Fdesign\u002Ffoundations\u002F12.typography.md",{"package":5636,"variant":1929},"fonts",{"type":8,"value":5638,"toc":6204},[5639,5644,5650,5652,5656,5663,5669,5856,5858,5860,5862,5866,5869,5872,5876,5878,5882,5889,5894,5896,5901,5903,5908,5910,5915,5917,5921,5924,5927,5932,5934,5938,5941,5945,5948,5950,5954,5957,5962,6023,6027,6039,6041,6045,6048,6055,6061,6064,6069,6074,6077,6082,6087,6090,6095,6100,6103,6108,6113,6116,6121,6126,6129,6134,6139,6150,6155,6160,6169,6174,6179,6182,6187,6192,6194,6196,6201],[11,5640,5641],{},[14,5642,5643],{},"Nord Design System provides a constrained, purposeful set of typographic styles that we use to present user interface and content as clearly and efficiently as possible.",[1659,5645],{"src":5646,"height":5647,"width":5648,"alt":5649},"\u002Fimg\u002Ftype.svg",981,1584,"Nord Webfonts",[1683,5651],{},[1162,5653,5655],{"id":5654},"typographic-scale","Typographic scale",[14,5657,5658,5659,5662],{},"We use the following typographic scale to communicate visual hierarchy in text and to create a predictable sizing for headers and text content. Our typographic scale is purposefully harmonious with our ",[1156,5660,5661],{"href":3067},"spacing scale",". The base font-size is 14px.",[14,5664,5665,5667],{},[2871,5666],{},[2871,5668],{},[5670,5671,5674,5694],"table",{"id":5672,"className":5673},"type-scale",[5672],[5675,5676,5677],"thead",{},[5678,5679,5680,5685,5687,5690],"tr",{},[5681,5682,5684],"th",{"width":5683},"40%","Category",[5681,5686,265],{},[5681,5688,5689],{},"Difference",[5681,5691,5693],{"width":5692},"30%","Size token",[5695,5696,5697,5718,5738,5757,5777,5797,5817,5837],"tbody",{},[5678,5698,5699,5707,5710,5713],{},[5700,5701,5702],"td",{},[4823,5703,5706],{"className":5704},[5705],"n-typescale-xxxl","Typescale XXXL",[5700,5708,5709],{},"\n36px (2.25rem)\n",[5700,5711,5712],{},"\n+12px\n",[5700,5714,5715],{},[1758,5716,5717],{},"var(--n-font-size-xxxl)",[5678,5719,5720,5727,5730,5733],{},[5700,5721,5722],{},[4823,5723,5726],{"className":5724},[5725],"n-typescale-xxl","Typescale XXL",[5700,5728,5729],{},"\n24px (1.5rem)\n",[5700,5731,5732],{},"\n+4px\n",[5700,5734,5735],{},[1758,5736,5737],{},"var(--n-font-size-xxl)",[5678,5739,5740,5747,5750,5752],{},[5700,5741,5742],{},[4823,5743,5746],{"className":5744},[5745],"n-typescale-xl","Typescale XL",[5700,5748,5749],{},"\n20px (1.25rem)\n",[5700,5751,5732],{},[5700,5753,5754],{},[1758,5755,5756],{},"var(--n-font-size-xl)",[5678,5758,5759,5766,5769,5772],{},[5700,5760,5761],{},[4823,5762,5765],{"className":5763},[5764],"n-typescale-l","Typescale L",[5700,5767,5768],{},"\n16px (1rem)\n",[5700,5770,5771],{},"\n+2px\n",[5700,5773,5774],{},[1758,5775,5776],{},"var(--n-font-size-l)",[5678,5778,5779,5786,5789,5792],{},[5700,5780,5781],{},[4823,5782,5785],{"className":5783},[5784],"n-typescale-m","Typescale M",[5700,5787,5788],{},"\n14px (0.875rem)\n",[5700,5790,5791],{},"\n0\n",[5700,5793,5794],{},[1758,5795,5796],{},"var(--n-font-size-m)",[5678,5798,5799,5806,5809,5812],{},[5700,5800,5801],{},[4823,5802,5805],{"className":5803},[5804],"n-typescale-s","Typescale S",[5700,5807,5808],{},"\n12px (0.75rem)\n",[5700,5810,5811],{},"\n-2px\n",[5700,5813,5814],{},[1758,5815,5816],{},"var(--n-font-size-s)",[5678,5818,5819,5826,5829,5832],{},[5700,5820,5821],{},[4823,5822,5825],{"className":5823},[5824],"n-typescale-xs","Typescale XS",[5700,5827,5828],{},"\n11px (0.6875rem)\n",[5700,5830,5831],{},"\n-1px\n",[5700,5833,5834],{},[1758,5835,5836],{},"var(--n-font-size-xs)",[5678,5838,5839,5846,5849,5851],{},[5700,5840,5841],{},[4823,5842,5845],{"className":5843},[5844],"n-typescale-xxs","Typescale XXS",[5700,5847,5848],{},"\n10px (0.625rem)\n",[5700,5850,5811],{},[5700,5852,5853],{},[1758,5854,5855],{},"var(--n-font-size-xxs)",[2871,5857],{},[2871,5859],{},[2871,5861],{},[1162,5863,5865],{"id":5864},"line-length","Line length",[14,5867,5868],{},"Set the reading environment to suit the reader. Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–90 characters, including spaces.",[14,5870,5871],{},"Please keep in mind that our users can control the application layout width, meaning that a line length can not always be specified. For this reason, it’s good practice to design for an ideal line length range, and use responsive design techniques to anticipate different contexts.",[1659,5873],{"src":5874,"alt":5875},"\u002Fimg\u002Fline-length.svg","Nord line length",[1683,5877],{},[1162,5879,5881],{"id":5880},"tables","Tables",[14,5883,5884,5885,5888],{},"For ",[1156,5886,5880],{"href":5887},"\u002Fcomponents\u002Ftable\u002F"," Nord offers default text styles that provide a legible and accessible typography. Typographic treatment should be consistent across all tables to create a cohesive language. The font size is large enough for users to read comfortably, and the font weight and color should be appropriate for the type of data in each table cell.",[1659,5890],{"src":5891,"className":5892,"alt":5893},"\u002Fimg\u002Ftable-text.png",[1663,1664],"Table text",[2871,5895],{},[1659,5897],{"src":5898,"className":5899,"alt":5900},"\u002Fimg\u002Ftable-headers.png",[1663,1664],"Table headers",[2871,5902],{},[1659,5904],{"src":5905,"className":5906,"alt":5907},"\u002Fimg\u002Ftable-deemphasized-text.png",[1663,1664],"Table deemphasized text",[2871,5909],{},[1659,5911],{"src":5912,"className":5913,"alt":5914},"\u002Fimg\u002Ftable-status-text.png",[1663,1664],"Table status text",[1683,5916],{},[1162,5918,5920],{"id":5919},"brand-typography","Brand typography",[14,5922,5923],{},"We use a typeface called Armin Grotesk for almost everything related to Nordhealth brand and marketing — from banner ads to print materials. This typeface should not be used for application UIs where we use a typeface called Inter.",[1659,5925],{"src":5080,"style":4820,"alt":5926},"Nordhealth brand type",[574,5928,5929,5931],{"href":5084,"variant":4841,"size":3540,"target":2361},[750,5930],{"slot":5089,"name":5088},"\nDownload typeface\n",[1683,5933],{},[1162,5935,5937],{"id":5936},"product-typography","Product typography",[14,5939,5940],{},"For digital products, we use a typeface called Inter which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates and slashed zero for when you need to disambiguate \"0\" from \"O\".",[1659,5942],{"src":5943,"alt":5944},"\u002Fimg\u002Finter.svg","Nordhealth product type",[574,5946,5931],{"href":5947,"variant":4841,"size":3540},"\u002Fassets\u002Fnordhealth\u002Fnord-ui-typeface.zip",[1683,5949],{},[1162,5951,5953],{"id":5952},"font-stacks","Font stacks",[14,5955,5956],{},"We use sans serif fonts for most of our type in digital products, the only exception being when you want to display code.",[5958,5959,5961],"h4",{"id":5960},"sans-serif-font-stack","Sans serif font stack:",[1959,5963,5965],{"className":4665,"code":5964,"language":4667,"meta":21,"style":21},"font-family:\n  'Nordhealth Sans',\n  -apple-system,\n  BlinkMacSystemFont,\n  'Segoe UI',\n  Helvetica,\n  Arial,\n  sans-serif,\n  'Apple Color Emoji',\n  'Segoe UI Emoji';\n",[1758,5966,5967,5975,5980,5985,5990,5995,6000,6005,6013,6018],{"__ignoreMap":21},[1967,5968,5969,5972],{"class":1969,"line":30},[1967,5970,5971],{"class":1976},"font-family",[1967,5973,5974],{"class":1972},":\n",[1967,5976,5977],{"class":1969,"line":22},[1967,5978,5979],{"class":1972},"  'Nordhealth Sans',\n",[1967,5981,5982],{"class":1969,"line":1889},[1967,5983,5984],{"class":1972},"  -apple-system,\n",[1967,5986,5987],{"class":1969,"line":2029},[1967,5988,5989],{"class":1972},"  BlinkMacSystemFont,\n",[1967,5991,5992],{"class":1969,"line":2054},[1967,5993,5994],{"class":1972},"  'Segoe UI',\n",[1967,5996,5997],{"class":1969,"line":2076},[1967,5998,5999],{"class":1972},"  Helvetica,\n",[1967,6001,6002],{"class":1969,"line":2175},[1967,6003,6004],{"class":1972},"  Arial,\n",[1967,6006,6007,6010],{"class":1969,"line":2181},[1967,6008,6009],{"class":1976},"  sans-serif",[1967,6011,6012],{"class":1972},",\n",[1967,6014,6015],{"class":1969,"line":2460},[1967,6016,6017],{"class":1972},"  'Apple Color Emoji',\n",[1967,6019,6020],{"class":1969,"line":2465},[1967,6021,6022],{"class":1972},"  'Segoe UI Emoji';\n",[5958,6024,6026],{"id":6025},"code-font-stack","Code font stack:",[1959,6028,6030],{"className":4665,"code":6029,"language":4667,"meta":21,"style":21},"font-family: 'Nordhealth Mono', monospace, monospace;\n",[1758,6031,6032],{"__ignoreMap":21},[1967,6033,6034,6036],{"class":1969,"line":30},[1967,6035,5971],{"class":1976},[1967,6037,6038],{"class":1972},": 'Nordhealth Mono', monospace, monospace;\n",[1683,6040],{},[1162,6042,6044],{"id":6043},"punctuation","Punctuation",[14,6046,6047],{},"Punctuation matters because it conveys pause and effect to the reader, and mastering it walks the fine line between a skill for typographers and a skill for copywriters. The most common mistake we often see is using a neutral or straight quote symbol in place of an apostrophe:",[6049,6050,6052],"usage",{"type":6051},"do",[14,6053,6054],{},"This’ll do nicely.",[6049,6056,6058],{"type":6057},"dont",[14,6059,6060],{},"Please don't do this.",[14,6062,6063],{},"Always use smart quotation marks and put commas and periods inside the quotation:",[6049,6065,6066],{"type":6051},[14,6067,6068],{},"“It’s a ‘magic’ sock.”",[6049,6070,6071],{"type":6057},[14,6072,6073],{},"\"It's a 'magic' sock\".",[14,6075,6076],{},"Use multiplication sign, minus sign and plus sign correctly:",[6049,6078,6079],{"type":6051},[14,6080,6081],{},"1 × 0.5 − 0 = ½",[6049,6083,6084],{"type":6057},[14,6085,6086],{},"1 X 0.5 - 0 = 1\u002F2",[14,6088,6089],{},"Use correct units of measurement symbols:",[6049,6091,6092],{"type":6051},[14,6093,6094],{},"Temperature °C",[6049,6096,6097],{"type":6057},[14,6098,6099],{},"Temperature C",[14,6101,6102],{},"Use real trademark and copyright symbols:",[6049,6104,6105],{"type":6051},[14,6106,6107],{},"© 2015 Corp™",[6049,6109,6110],{"type":6057},[14,6111,6112],{},"(c) 2015 Corp (TM)",[14,6114,6115],{},"When writing pixel dimensions, use times sign:",[6049,6117,6118],{"type":6051},[14,6119,6120],{},"1024×768",[6049,6122,6123],{"type":6057},[14,6124,6125],{},"1024X768",[14,6127,6128],{},"Use the prime and double prime instead of quotation marks to specify inches and feet:",[6049,6130,6131],{"type":6051},[14,6132,6133],{},"Steve Jobs is 6′ 10″",[6049,6135,6136],{"type":6057},[14,6137,6138],{},"Steve Jobs is 6' 10\"",[14,6140,6141,6142,6145,6146,6149],{},"Use em dash (",[1758,6143,6144],{},"—",") and thin spaces (",[1758,6147,6148],{}," ",") to make a break between parts of a sentence:",[6049,6151,6152],{"type":6051},[14,6153,6154],{},"A typeface — and thus a whole text — looks",[6049,6156,6157],{"type":6057},[14,6158,6159],{},"A typeface - and thus a whole text - looks",[14,6161,6162,6163,6145,6166,6168],{},"use en dash (",[1758,6164,6165],{},"–",[1758,6167,6148],{},") when indicating a range of values:",[6049,6170,6171],{"type":6051},[14,6172,6173],{},"1880 – 1912",[6049,6175,6176],{"type":6057},[14,6177,6178],{},"1880 - 1912",[14,6180,6181],{},"Use ellipsis instead of three periods to indicate an omission:",[6049,6183,6184],{"type":6051},[14,6185,6186],{},"from a … to z",[6049,6188,6189],{"type":6057},[14,6190,6191],{},"from a . . . to z",[1683,6193],{},[1162,6195,1875],{"id":1874},[14,6197,6198,6199,1883],{},"Need help with typography? Please head over to the ",[1156,6200,1882],{"href":1881},[2706,6202,6203],{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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);}",{"title":21,"searchDepth":22,"depth":22,"links":6205},[6206,6207,6208,6209,6210,6211,6212,6213],{"id":5654,"depth":22,"text":5655},{"id":5864,"depth":22,"text":5865},{"id":5880,"depth":22,"text":5881},{"id":5919,"depth":22,"text":5920},{"id":5936,"depth":22,"text":5937},{"id":5952,"depth":22,"text":5953},{"id":6043,"depth":22,"text":6044},{"id":1874,"depth":22,"text":1875},{},{"title":180,"description":21},{"loc":179,"images":6217},[6218,6219,6220,6221,6222,6223,6224,6225],{"loc":5646},{"loc":5874},{"loc":5891},{"loc":5898},{"loc":5905},{"loc":5912},{"loc":5080},{"loc":5943},"design\u002Ffoundations\u002F12.typography","bxxdnAd1oZWvBHcLwHmRl7C2QShVhKOcX6MptflGSHE",1783350287371]