[{"data":1,"prerenderedAt":3149},["Reactive",2],{"content-query-agO0FD4XW6":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":10,"body":11,"_type":3145,"_id":3146,"_source":3147,"_file":3148,"_extension":1513},"/docs/ui/design-tokens","ui",false,"","Design Tokens - UI - Inkline","Learn how to customize the look and feel of your design system with Inkline's design tokens to create a beautiful and consistent user interface.","docs",{"type":12,"children":13,"toc":3127},"root",[14,23,29,35,68,75,80,85,94,101,105,201,294,387,480,573,666,672,675,718,761,771,781,787,790,800,810,820,830,840,850,860,870,876,879,889,899,909,919,929,939,949,955,960,969,972,983,994,1000,1005,1014,1017,1027,1037,1047,1057,1067,1077,1087,1097,1107,1117,1127,1137,1147,1157,1167,1173,1178,1187,1190,1228,1266,1304,1342,1379,1385,1390,1395,1404,1407,1417,1427,1437,1447,1457,1466,1472,1477,1482,1546,1555,1558,1569,1579,1589,1599,1609,1619,1625,1630,1639,1642,1652,1663,1669,1674,1679,1686,1689,1700,1739,1745,1750,1759,1762,1805,1815,1825,1835,1845,1855,1865,1875,1881,1886,1895,1898,1946,1957,1968,1978,1988,1998,2004,2009,2014,2023,2026,2114,2202,2290,2378,2466,2554,2642,2730,2818,2906,2912,2916,2920,2929,2932,2942,2952,2962,2972,2982,2992,3002,3012,3022,3032,3042,3052,3062,3072,3107,3117],{"type":15,"tag":16,"props":17,"children":19},"element","h1",{"id":18},"design-tokens",[20],{"type":21,"value":22},"text","Design Tokens",{"type":15,"tag":24,"props":25,"children":27},"h2",{"id":26},"learn-how-to-customize-the-look-and-feel-of-your-design-system-with-inklines-design-tokens-to-create-a-beautiful-and-consistent-user-interface",[28],{"type":21,"value":9},{"type":15,"tag":30,"props":31,"children":32},"p",{},[33],{"type":21,"value":34},"Design tokens are the visual design atoms of the Inkline Design System. They define the look and feel of the components, including colors, typography, and spacing. By using design tokens, we can create a cohesive and consistent user interface.",{"type":15,"tag":30,"props":36,"children":37},{},[38,40,50,52,59,61,66],{"type":21,"value":39},"Inkline's Design Tokens are generated automatically after updating your ",{"type":15,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":15,"tag":45,"props":46,"children":47},"code-inline",{},[48],{"type":21,"value":49},"inkline.config.ts",{"type":21,"value":51}," file if you've followed the official ",{"type":15,"tag":53,"props":54,"children":56},"a",{"href":55},"/docs/installation",[57],{"type":21,"value":58},"Installation guide",{"type":21,"value":60},". You could also customize them manually by overwriting their value in the ",{"type":15,"tag":45,"props":62,"children":63},{},[64],{"type":21,"value":65},":root",{"type":21,"value":67}," of your stylesheet.",{"type":15,"tag":69,"props":70,"children":72},"h3",{"id":71},"colors",[73],{"type":21,"value":74},"Colors",{"type":15,"tag":30,"props":76,"children":77},{},[78],{"type":21,"value":79},"Inkline uses a set of color variables to define the color palette of the Design System. These variables are used to define the color of the components, as well as the color of the text and background. It's important to keep in mind accessibility and contrast when defining color design tokens.",{"type":15,"tag":30,"props":81,"children":82},{},[83],{"type":21,"value":84},"By updating the base CSS variable for a color, all corresponding variants based on that color will automatically be updated as well, ensuring consistency throughout the UI.",{"type":15,"tag":30,"props":86,"children":87},{},[88],{"type":15,"tag":53,"props":89,"children":91},{"href":90},"/docs/configuration/file#color",[92],{"type":21,"value":93},"Read about color configuration",{"type":15,"tag":95,"props":96,"children":98},"h4",{"id":97},"brand-colors",[99],{"type":21,"value":100},"Brand Colors",{"type":15,"tag":102,"props":103,"children":104},"content-design-tokens-header",{},[],{"type":15,"tag":106,"props":107,"children":110},"content-design-token",{"title":108,"token":109},"Primary Color","--color-primary",[111,116],{"type":15,"tag":30,"props":112,"children":113},{},[114],{"type":21,"value":115},"Primary brand color for Inkline. This color provides accessible contrast when used for text on light background.",{"type":15,"tag":117,"props":118,"children":119},"template",{"v-slot:variants":7},[120,126,131,136,141,146,151,156,161,166,171,176,181,186,191,196],{"type":15,"tag":106,"props":121,"children":125},{"title":122,"token":123,"size":124},"Primary Tint 150 Color","--color-primary-tint-150","sm",[],{"type":15,"tag":106,"props":127,"children":130},{"title":128,"token":129,"size":124},"Primary Tint 100 Color","--color-primary-tint-100",[],{"type":15,"tag":106,"props":132,"children":135},{"title":133,"token":134,"size":124},"Primary Tint 50 Color","--color-primary-tint-50",[],{"type":15,"tag":106,"props":137,"children":140},{"title":138,"token":139,"size":124},"Primary Shade 50 Color","--color-primary-shade-50",[],{"type":15,"tag":106,"props":142,"children":145},{"title":143,"token":144,"size":124},"Primary Shade 100 Color","--color-primary-shade-100",[],{"type":15,"tag":106,"props":147,"children":150},{"title":148,"token":149,"size":124},"Primary Shade 150 Color","--color-primary-shade-150",[],{"type":15,"tag":106,"props":152,"children":155},{"title":153,"token":154,"size":124},"Primary 50 Color","--color-primary-50",[],{"type":15,"tag":106,"props":157,"children":160},{"title":158,"token":159,"size":124},"Primary 100 Color","--color-primary-100",[],{"type":15,"tag":106,"props":162,"children":165},{"title":163,"token":164,"size":124},"Primary 200 Color","--color-primary-200",[],{"type":15,"tag":106,"props":167,"children":170},{"title":168,"token":169,"size":124},"Primary 300 Color","--color-primary-300",[],{"type":15,"tag":106,"props":172,"children":175},{"title":173,"token":174,"size":124},"Primary 400 Color","--color-primary-400",[],{"type":15,"tag":106,"props":177,"children":180},{"title":178,"token":179,"size":124},"Primary 500 Color","--color-primary-500",[],{"type":15,"tag":106,"props":182,"children":185},{"title":183,"token":184,"size":124},"Primary 600 Color","--color-primary-600",[],{"type":15,"tag":106,"props":187,"children":190},{"title":188,"token":189,"size":124},"Primary 700 Color","--color-primary-700",[],{"type":15,"tag":106,"props":192,"children":195},{"title":193,"token":194,"size":124},"Primary 800 Color","--color-primary-800",[],{"type":15,"tag":106,"props":197,"children":200},{"title":198,"token":199,"size":124},"Primary 900 Color","--color-primary-900",[],{"type":15,"tag":106,"props":202,"children":205},{"title":203,"token":204},"Secondary Color","--color-secondary",[206,211],{"type":15,"tag":30,"props":207,"children":208},{},[209],{"type":21,"value":210},"The secondary brand color for Inkline is intended to complement the primary color and can be used for accents or to add visual interest.",{"type":15,"tag":117,"props":212,"children":213},{"v-slot:variants":7},[214,219,224,229,234,239,244,249,254,259,264,269,274,279,284,289],{"type":15,"tag":106,"props":215,"children":218},{"title":216,"token":217,"size":124},"Secondary Tint 150 Color","--color-secondary-tint-150",[],{"type":15,"tag":106,"props":220,"children":223},{"title":221,"token":222,"size":124},"Secondary Tint 100 Color","--color-secondary-tint-100",[],{"type":15,"tag":106,"props":225,"children":228},{"title":226,"token":227,"size":124},"Secondary Tint 50 Color","--color-secondary-tint-50",[],{"type":15,"tag":106,"props":230,"children":233},{"title":231,"token":232,"size":124},"Secondary Shade 50 Color","--color-secondary-shade-50",[],{"type":15,"tag":106,"props":235,"children":238},{"title":236,"token":237,"size":124},"Secondary Shade 100 Color","--color-secondary-shade-100",[],{"type":15,"tag":106,"props":240,"children":243},{"title":241,"token":242,"size":124},"Secondary Shade 150 Color","--color-secondary-shade-150",[],{"type":15,"tag":106,"props":245,"children":248},{"title":246,"token":247,"size":124},"Secondary 50 Color","--color-secondary-50",[],{"type":15,"tag":106,"props":250,"children":253},{"title":251,"token":252,"size":124},"Secondary 100 Color","--color-secondary-100",[],{"type":15,"tag":106,"props":255,"children":258},{"title":256,"token":257,"size":124},"Secondary 200 Color","--color-secondary-200",[],{"type":15,"tag":106,"props":260,"children":263},{"title":261,"token":262,"size":124},"Secondary 300 Color","--color-secondary-300",[],{"type":15,"tag":106,"props":265,"children":268},{"title":266,"token":267,"size":124},"Secondary 400 Color","--color-secondary-400",[],{"type":15,"tag":106,"props":270,"children":273},{"title":271,"token":272,"size":124},"Secondary 500 Color","--color-secondary-500",[],{"type":15,"tag":106,"props":275,"children":278},{"title":276,"token":277,"size":124},"Secondary 600 Color","--color-secondary-600",[],{"type":15,"tag":106,"props":280,"children":283},{"title":281,"token":282,"size":124},"Secondary 700 Color","--color-secondary-700",[],{"type":15,"tag":106,"props":285,"children":288},{"title":286,"token":287,"size":124},"Secondary 800 Color","--color-secondary-800",[],{"type":15,"tag":106,"props":290,"children":293},{"title":291,"token":292,"size":124},"Secondary 900 Color","--color-secondary-900",[],{"type":15,"tag":106,"props":295,"children":298},{"title":296,"token":297},"Info Color","--color-info",[299,304],{"type":15,"tag":30,"props":300,"children":301},{},[302],{"type":21,"value":303},"The info brand color for Inkline is used to convey information or highlight important elements, such as alerts, notifications, or messages.",{"type":15,"tag":117,"props":305,"children":306},{"v-slot:variants":7},[307,312,317,322,327,332,337,342,347,352,357,362,367,372,377,382],{"type":15,"tag":106,"props":308,"children":311},{"title":309,"token":310,"size":124},"Info Tint 150 Color","--color-info-tint-150",[],{"type":15,"tag":106,"props":313,"children":316},{"title":314,"token":315,"size":124},"Info Tint 100 Color","--color-info-tint-100",[],{"type":15,"tag":106,"props":318,"children":321},{"title":319,"token":320,"size":124},"Info Tint 50 Color","--color-info-tint-50",[],{"type":15,"tag":106,"props":323,"children":326},{"title":324,"token":325,"size":124},"Info Shade 50 Color","--color-info-shade-50",[],{"type":15,"tag":106,"props":328,"children":331},{"title":329,"token":330,"size":124},"Info Shade 100 Color","--color-info-shade-100",[],{"type":15,"tag":106,"props":333,"children":336},{"title":334,"token":335,"size":124},"Info Shade 150 Color","--color-info-shade-150",[],{"type":15,"tag":106,"props":338,"children":341},{"title":339,"token":340,"size":124},"Info 50 Color","--color-info-50",[],{"type":15,"tag":106,"props":343,"children":346},{"title":344,"token":345,"size":124},"Info 100 Color","--color-info-100",[],{"type":15,"tag":106,"props":348,"children":351},{"title":349,"token":350,"size":124},"Info 200 Color","--color-info-200",[],{"type":15,"tag":106,"props":353,"children":356},{"title":354,"token":355,"size":124},"Info 300 Color","--color-info-300",[],{"type":15,"tag":106,"props":358,"children":361},{"title":359,"token":360,"size":124},"Info 400 Color","--color-info-400",[],{"type":15,"tag":106,"props":363,"children":366},{"title":364,"token":365,"size":124},"Info 500 Color","--color-info-500",[],{"type":15,"tag":106,"props":368,"children":371},{"title":369,"token":370,"size":124},"Info 600 Color","--color-info-600",[],{"type":15,"tag":106,"props":373,"children":376},{"title":374,"token":375,"size":124},"Info 700 Color","--color-info-700",[],{"type":15,"tag":106,"props":378,"children":381},{"title":379,"token":380,"size":124},"Info 800 Color","--color-info-800",[],{"type":15,"tag":106,"props":383,"children":386},{"title":384,"token":385,"size":124},"Info 900 Color","--color-info-900",[],{"type":15,"tag":106,"props":388,"children":391},{"title":389,"token":390},"Success Color","--color-success",[392,397],{"type":15,"tag":30,"props":393,"children":394},{},[395],{"type":21,"value":396},"The success brand color for Inkline is used to indicate a positive action or outcome, such as a successful form submission or completion of a task.",{"type":15,"tag":117,"props":398,"children":399},{"v-slot:variants":7},[400,405,410,415,420,425,430,435,440,445,450,455,460,465,470,475],{"type":15,"tag":106,"props":401,"children":404},{"title":402,"token":403,"size":124},"Success Tint 150 Color","--color-success-tint-150",[],{"type":15,"tag":106,"props":406,"children":409},{"title":407,"token":408,"size":124},"Success Tint 100 Color","--color-success-tint-100",[],{"type":15,"tag":106,"props":411,"children":414},{"title":412,"token":413,"size":124},"Success Tint 50 Color","--color-success-tint-50",[],{"type":15,"tag":106,"props":416,"children":419},{"title":417,"token":418,"size":124},"Success Shade 50 Color","--color-success-shade-50",[],{"type":15,"tag":106,"props":421,"children":424},{"title":422,"token":423,"size":124},"Success Shade 100 Color","--color-success-shade-100",[],{"type":15,"tag":106,"props":426,"children":429},{"title":427,"token":428,"size":124},"Success Shade 150 Color","--color-success-shade-150",[],{"type":15,"tag":106,"props":431,"children":434},{"title":432,"token":433,"size":124},"Success 50 Color","--color-success-50",[],{"type":15,"tag":106,"props":436,"children":439},{"title":437,"token":438,"size":124},"Success 100 Color","--color-success-100",[],{"type":15,"tag":106,"props":441,"children":444},{"title":442,"token":443,"size":124},"Success 200 Color","--color-success-200",[],{"type":15,"tag":106,"props":446,"children":449},{"title":447,"token":448,"size":124},"Success 300 Color","--color-success-300",[],{"type":15,"tag":106,"props":451,"children":454},{"title":452,"token":453,"size":124},"Success 400 Color","--color-success-400",[],{"type":15,"tag":106,"props":456,"children":459},{"title":457,"token":458,"size":124},"Success 500 Color","--color-success-500",[],{"type":15,"tag":106,"props":461,"children":464},{"title":462,"token":463,"size":124},"Success 600 Color","--color-success-600",[],{"type":15,"tag":106,"props":466,"children":469},{"title":467,"token":468,"size":124},"Success 700 Color","--color-success-700",[],{"type":15,"tag":106,"props":471,"children":474},{"title":472,"token":473,"size":124},"Success 800 Color","--color-success-800",[],{"type":15,"tag":106,"props":476,"children":479},{"title":477,"token":478,"size":124},"Success 900 Color","--color-success-900",[],{"type":15,"tag":106,"props":481,"children":484},{"title":482,"token":483},"Warning Color","--color-warning",[485,490],{"type":15,"tag":30,"props":486,"children":487},{},[488],{"type":21,"value":489},"The warning brand color for Inkline is used to alert users to potential issues or problems, such as problems in form fields or incomplete information.",{"type":15,"tag":117,"props":491,"children":492},{"v-slot:variants":7},[493,498,503,508,513,518,523,528,533,538,543,548,553,558,563,568],{"type":15,"tag":106,"props":494,"children":497},{"title":495,"token":496,"size":124},"Warning Tint 150 Color","--color-warning-tint-150",[],{"type":15,"tag":106,"props":499,"children":502},{"title":500,"token":501,"size":124},"Warning Tint 100 Color","--color-warning-tint-100",[],{"type":15,"tag":106,"props":504,"children":507},{"title":505,"token":506,"size":124},"Warning Tint 50 Color","--color-warning-tint-50",[],{"type":15,"tag":106,"props":509,"children":512},{"title":510,"token":511,"size":124},"Warning Shade 50 Color","--color-warning-shade-50",[],{"type":15,"tag":106,"props":514,"children":517},{"title":515,"token":516,"size":124},"Warning Shade 100 Color","--color-warning-shade-100",[],{"type":15,"tag":106,"props":519,"children":522},{"title":520,"token":521,"size":124},"Warning Shade 150 Color","--color-warning-shade-150",[],{"type":15,"tag":106,"props":524,"children":527},{"title":525,"token":526,"size":124},"Warning 50 Color","--color-warning-50",[],{"type":15,"tag":106,"props":529,"children":532},{"title":530,"token":531,"size":124},"Warning 100 Color","--color-warning-100",[],{"type":15,"tag":106,"props":534,"children":537},{"title":535,"token":536,"size":124},"Warning 200 Color","--color-warning-200",[],{"type":15,"tag":106,"props":539,"children":542},{"title":540,"token":541,"size":124},"Warning 300 Color","--color-warning-300",[],{"type":15,"tag":106,"props":544,"children":547},{"title":545,"token":546,"size":124},"Warning 400 Color","--color-warning-400",[],{"type":15,"tag":106,"props":549,"children":552},{"title":550,"token":551,"size":124},"Warning 500 Color","--color-warning-500",[],{"type":15,"tag":106,"props":554,"children":557},{"title":555,"token":556,"size":124},"Warning 600 Color","--color-warning-600",[],{"type":15,"tag":106,"props":559,"children":562},{"title":560,"token":561,"size":124},"Warning 700 Color","--color-warning-700",[],{"type":15,"tag":106,"props":564,"children":567},{"title":565,"token":566,"size":124},"Warning 800 Color","--color-warning-800",[],{"type":15,"tag":106,"props":569,"children":572},{"title":570,"token":571,"size":124},"Warning 900 Color","--color-warning-900",[],{"type":15,"tag":106,"props":574,"children":577},{"title":575,"token":576},"Danger Color","--color-danger",[578,583],{"type":15,"tag":30,"props":579,"children":580},{},[581],{"type":21,"value":582},"The danger brand color for Inkline is used to signify a critical or urgent warning, such as a system error or potential loss of data.",{"type":15,"tag":117,"props":584,"children":585},{"v-slot:variants":7},[586,591,596,601,606,611,616,621,626,631,636,641,646,651,656,661],{"type":15,"tag":106,"props":587,"children":590},{"title":588,"token":589,"size":124},"Danger Tint 150 Color","--color-danger-tint-150",[],{"type":15,"tag":106,"props":592,"children":595},{"title":593,"token":594,"size":124},"Danger Tint 100 Color","--color-danger-tint-100",[],{"type":15,"tag":106,"props":597,"children":600},{"title":598,"token":599,"size":124},"Danger Tint 50 Color","--color-danger-tint-50",[],{"type":15,"tag":106,"props":602,"children":605},{"title":603,"token":604,"size":124},"Danger Shade 50 Color","--color-danger-shade-50",[],{"type":15,"tag":106,"props":607,"children":610},{"title":608,"token":609,"size":124},"Danger Shade 100 Color","--color-danger-shade-100",[],{"type":15,"tag":106,"props":612,"children":615},{"title":613,"token":614,"size":124},"Danger Shade 150 Color","--color-danger-shade-150",[],{"type":15,"tag":106,"props":617,"children":620},{"title":618,"token":619,"size":124},"Danger 50 Color","--color-danger-50",[],{"type":15,"tag":106,"props":622,"children":625},{"title":623,"token":624,"size":124},"Danger 100 Color","--color-danger-100",[],{"type":15,"tag":106,"props":627,"children":630},{"title":628,"token":629,"size":124},"Danger 200 Color","--color-danger-200",[],{"type":15,"tag":106,"props":632,"children":635},{"title":633,"token":634,"size":124},"Danger 300 Color","--color-danger-300",[],{"type":15,"tag":106,"props":637,"children":640},{"title":638,"token":639,"size":124},"Danger 400 Color","--color-danger-400",[],{"type":15,"tag":106,"props":642,"children":645},{"title":643,"token":644,"size":124},"Danger 500 Color","--color-danger-500",[],{"type":15,"tag":106,"props":647,"children":650},{"title":648,"token":649,"size":124},"Danger 600 Color","--color-danger-600",[],{"type":15,"tag":106,"props":652,"children":655},{"title":653,"token":654,"size":124},"Danger 700 Color","--color-danger-700",[],{"type":15,"tag":106,"props":657,"children":660},{"title":658,"token":659,"size":124},"Danger 800 Color","--color-danger-800",[],{"type":15,"tag":106,"props":662,"children":665},{"title":663,"token":664,"size":124},"Danger 900 Color","--color-danger-900",[],{"type":15,"tag":95,"props":667,"children":669},{"id":668},"neutral-colors",[670],{"type":21,"value":671},"Neutral Colors",{"type":15,"tag":102,"props":673,"children":674},{},[],{"type":15,"tag":106,"props":676,"children":679},{"title":677,"token":678},"Light Color","--color-light",[680,685],{"type":15,"tag":30,"props":681,"children":682},{},[683],{"type":21,"value":684},"The light neutral color has a higher luminance value and is often associated with purity, clarity, and simplicity. It can be used to create a sense of openness, spaciousness, and airiness in UI Design.",{"type":15,"tag":117,"props":686,"children":687},{"v-slot:variants":7},[688,693,698,703,708,713],{"type":15,"tag":106,"props":689,"children":692},{"title":690,"token":691,"size":124},"Light Tint 150 Color","--color-light-tint-150",[],{"type":15,"tag":106,"props":694,"children":697},{"title":695,"token":696,"size":124},"Light Tint 100 Color","--color-light-tint-100",[],{"type":15,"tag":106,"props":699,"children":702},{"title":700,"token":701,"size":124},"Light Tint 50 Color","--color-light-tint-50",[],{"type":15,"tag":106,"props":704,"children":707},{"title":705,"token":706,"size":124},"Light Shade 50 Color","--color-light-shade-50",[],{"type":15,"tag":106,"props":709,"children":712},{"title":710,"token":711,"size":124},"Light Shade 100 Color","--color-light-shade-100",[],{"type":15,"tag":106,"props":714,"children":717},{"title":715,"token":716,"size":124},"Light Shade 150 Color","--color-light-shade-150",[],{"type":15,"tag":106,"props":719,"children":722},{"title":720,"token":721},"Dark Color","--color-dark",[723,728],{"type":15,"tag":30,"props":724,"children":725},{},[726],{"type":21,"value":727},"The dark neutral color has a lower luminance value and can convey a sense of sophistication, elegance, and power. It can be used to create a sense of depth and contrast in UI Design, as well as to emphasize important elements.",{"type":15,"tag":117,"props":729,"children":730},{"v-slot:variants":7},[731,736,741,746,751,756],{"type":15,"tag":106,"props":732,"children":735},{"title":733,"token":734,"size":124},"Dark Tint 150 Color","--color-dark-tint-150",[],{"type":15,"tag":106,"props":737,"children":740},{"title":738,"token":739,"size":124},"Dark Tint 100 Color","--color-dark-tint-100",[],{"type":15,"tag":106,"props":742,"children":745},{"title":743,"token":744,"size":124},"Dark Tint 50 Color","--color-dark-tint-50",[],{"type":15,"tag":106,"props":747,"children":750},{"title":748,"token":749,"size":124},"Dark Shade 50 Color","--color-dark-shade-50",[],{"type":15,"tag":106,"props":752,"children":755},{"title":753,"token":754,"size":124},"Dark Shade 100 Color","--color-dark-shade-100",[],{"type":15,"tag":106,"props":757,"children":760},{"title":758,"token":759,"size":124},"Dark Shade 150 Color","--color-dark-shade-150",[],{"type":15,"tag":106,"props":762,"children":765},{"title":763,"token":764},"White Color","--color-white",[766],{"type":15,"tag":30,"props":767,"children":768},{},[769],{"type":21,"value":770},"White is a neutral color that is often associated with purity, clarity, and simplicity. It can be used in UI Design to create a clean and minimalistic look, as well as to emphasize other colors and elements.",{"type":15,"tag":106,"props":772,"children":775},{"title":773,"token":774},"Black Color","--color-black",[776],{"type":15,"tag":30,"props":777,"children":778},{},[779],{"type":21,"value":780},"Black is a versatile color that can represent elegance, sophistication, and power, as well as darkness, mystery, and edginess. It can be used in UI Design to create a sense of contrast and emphasis, as well as to convey a high-end or premium look and feel.",{"type":15,"tag":95,"props":782,"children":784},{"id":783},"basic-colors",[785],{"type":21,"value":786},"Basic Colors",{"type":15,"tag":102,"props":788,"children":789},{},[],{"type":15,"tag":106,"props":791,"children":794},{"title":792,"token":793},"Red Color","--color-red",[795],{"type":15,"tag":30,"props":796,"children":797},{},[798],{"type":21,"value":799},"Red is a bold and attention-grabbing color that is often associated with passion, energy, and urgency. It can be used to signify warning, danger, or importance in UI Design, but can also be used to convey warmth and excitement.",{"type":15,"tag":106,"props":801,"children":804},{"title":802,"token":803},"Orange Color","--color-orange",[805],{"type":15,"tag":30,"props":806,"children":807},{},[808],{"type":21,"value":809},"Orange is a vibrant and energetic color that is often associated with enthusiasm, creativity, and warmth. It can be used in UI Design to convey a sense of playfulness, excitement, and friendliness. In more subdued tones, orange can also be used to create a sense of warmth and comfort.",{"type":15,"tag":106,"props":811,"children":814},{"title":812,"token":813},"Yellow Color","--color-yellow",[815],{"type":15,"tag":30,"props":816,"children":817},{},[818],{"type":21,"value":819},"Yellow is a bright and cheerful color that is often associated with happiness, optimism, and positivity. It can be used in UI Design to convey a sense of energy, fun, and playfulness, and can also be used to create a sense of warmth and comfort.",{"type":15,"tag":106,"props":821,"children":824},{"title":822,"token":823},"Green Color","--color-green",[825],{"type":15,"tag":30,"props":826,"children":827},{},[828],{"type":21,"value":829},"Green is a versatile color that can represent growth, nature, and health, as well as money, wealth, and success. It is often used in UI Design to convey a sense of freshness, balance, and harmony.",{"type":15,"tag":106,"props":831,"children":834},{"title":832,"token":833},"Teal Color","--color-teal",[835],{"type":15,"tag":30,"props":836,"children":837},{},[838],{"type":21,"value":839},"Teal is a refreshing and modern color that is often associated with tranquility, stability, and innovation. It can be used in UI Design to convey a sense of confidence, creativity, and freshness.",{"type":15,"tag":106,"props":841,"children":844},{"title":842,"token":843},"Blue Color","--color-blue",[845],{"type":15,"tag":30,"props":846,"children":847},{},[848],{"type":21,"value":849},"Blue is a calm and soothing color that is associated with trust, stability, and loyalty. It can be used to convey a sense of professionalism and reliability in UI Design, as well as a feeling of depth and sophistication.",{"type":15,"tag":106,"props":851,"children":854},{"title":852,"token":853},"Purple Color","--color-purple",[855],{"type":15,"tag":30,"props":856,"children":857},{},[858],{"type":21,"value":859},"Purple is a regal and mysterious color that is often associated with luxury, creativity, and spirituality. It can be used in UI Design to convey a sense of elegance, sophistication, and imagination.",{"type":15,"tag":106,"props":861,"children":864},{"title":862,"token":863},"Pink Color","--color-pink",[865],{"type":15,"tag":30,"props":866,"children":867},{},[868],{"type":21,"value":869},"Pink is a soft color that can represent sweetness, romance, and playfulness. It is often used in UI Design to convey a sense of warmth, gentleness, and compassion.",{"type":15,"tag":95,"props":871,"children":873},{"id":872},"text-colors",[874],{"type":21,"value":875},"Text Colors",{"type":15,"tag":102,"props":877,"children":878},{},[],{"type":15,"tag":106,"props":880,"children":883},{"title":881,"token":882},"Contrast Text for Light Color","--contrast-text-color-light",[884],{"type":15,"tag":30,"props":885,"children":886},{},[887],{"type":21,"value":888},"The contrast text for light backgrounds is a dark-colored text that provides a high contrast ratio against a light-colored background. This type of text is often used to ensure legibility and accessibility for users with visual impairments.",{"type":15,"tag":106,"props":890,"children":893},{"title":891,"token":892},"Contrast Text for Dark Color","--contrast-text-color-dark",[894],{"type":15,"tag":30,"props":895,"children":896},{},[897],{"type":21,"value":898},"The contrast text on dark backgrounds is a light-colored text that provides a high contrast ratio against a dark-colored background. This type of text is also used to ensure legibility and accessibility for users with visual impairments.",{"type":15,"tag":106,"props":900,"children":903},{"title":901,"token":902},"Light Text Color","--text-color-light",[904],{"type":15,"tag":30,"props":905,"children":906},{},[907],{"type":21,"value":908},"The light text color can be used to create a softer and more approachable look and feel in UI Design, and can also be used to create a sense of contrast and emphasis.",{"type":15,"tag":106,"props":910,"children":913},{"title":911,"token":912},"Dark Text Color","--text-color-dark",[914],{"type":15,"tag":30,"props":915,"children":916},{},[917],{"type":21,"value":918},"The dark text color can be used to create a more sophisticated and elegant look and feel in UI Design, and can also be used to convey a sense of depth and richness.",{"type":15,"tag":106,"props":920,"children":923},{"title":921,"token":922},"Weak Text Color","--text-color-weak",[924],{"type":15,"tag":30,"props":925,"children":926},{},[927],{"type":21,"value":928},"A weak text color, typically used for subtext or captions that are less prominent than the main content.",{"type":15,"tag":106,"props":930,"children":933},{"title":931,"token":932},"Weaker Text Color","--text-color-weaker",[934],{"type":15,"tag":30,"props":935,"children":936},{},[937],{"type":21,"value":938},"An even weaker text color, typically used for secondary text elements that are meant to be less visible.",{"type":15,"tag":106,"props":940,"children":943},{"title":941,"token":942},"Weakest Text Color","--text-color-weakest",[944],{"type":15,"tag":30,"props":945,"children":946},{},[947],{"type":21,"value":948},"The weakest text color, typically used for text elements that should not stand out.",{"type":15,"tag":69,"props":950,"children":952},{"id":951},"animation",[953],{"type":21,"value":954},"Animation",{"type":15,"tag":30,"props":956,"children":957},{},[958],{"type":21,"value":959},"CSS transitions allow for smooth and gradual changes to occur over a specified duration. Transitions can be triggered by various events, such as hover, click, or page load, and can be applied to different properties such as background-color, opacity, width, height, and more.",{"type":15,"tag":30,"props":961,"children":962},{},[963],{"type":15,"tag":53,"props":964,"children":966},{"href":965},"/docs/configuration/file#animation",[967],{"type":21,"value":968},"Read about animation configuration",{"type":15,"tag":102,"props":970,"children":971},{},[],{"type":15,"tag":106,"props":973,"children":977},{"title":974,"token":975,"icon":976},"Transition Duration","--transition-duration","ic:outline-hourglass-top",[978],{"type":15,"tag":30,"props":979,"children":980},{},[981],{"type":21,"value":982},"This value defines the length of time it takes for an element to transition from one state to another. The duration is specified in seconds or milliseconds, and can be set to any positive number.",{"type":15,"tag":106,"props":984,"children":988},{"title":985,"token":986,"icon":987},"Transition Timing Function","--transition-timing-function","material-symbols:animation",[989],{"type":15,"tag":30,"props":990,"children":991},{},[992],{"type":21,"value":993},"This is used to define the easing function to be used in CSS transitions. An easing function defines the rate at which the transition progresses over time, affecting the speed and smoothness of the transition.",{"type":15,"tag":69,"props":995,"children":997},{"id":996},"border",[998],{"type":21,"value":999},"Border",{"type":15,"tag":30,"props":1001,"children":1002},{},[1003],{"type":21,"value":1004},"The border CSS Variables are used to define the properties of an element's border, such as its width, color, and style. By using variables to define these properties, you can ensure consistency across your design and make it easy to update borders across your components.",{"type":15,"tag":30,"props":1006,"children":1007},{},[1008],{"type":15,"tag":53,"props":1009,"children":1011},{"href":1010},"/docs/configuration/file#border",[1012],{"type":21,"value":1013},"Read about border configuration",{"type":15,"tag":102,"props":1015,"children":1016},{},[],{"type":15,"tag":106,"props":1018,"children":1021},{"title":1019,"token":1020},"Border Top Width","--border-top-width",[1022],{"type":15,"tag":30,"props":1023,"children":1024},{},[1025],{"type":21,"value":1026},"Design token used to set the top border width of an element.",{"type":15,"tag":106,"props":1028,"children":1031},{"title":1029,"token":1030},"Border Right Width","--border-right-width",[1032],{"type":15,"tag":30,"props":1033,"children":1034},{},[1035],{"type":21,"value":1036},"Design token used to set the right border width of an element.",{"type":15,"tag":106,"props":1038,"children":1041},{"title":1039,"token":1040},"Border Bottom Width","--border-bottom-width",[1042],{"type":15,"tag":30,"props":1043,"children":1044},{},[1045],{"type":21,"value":1046},"Design token used to set the bottom border width of an element.",{"type":15,"tag":106,"props":1048,"children":1051},{"title":1049,"token":1050},"Border Left Width","--border-left-width",[1052],{"type":15,"tag":30,"props":1053,"children":1054},{},[1055],{"type":21,"value":1056},"Design token used to set the left border width of an element.",{"type":15,"tag":106,"props":1058,"children":1061},{"title":1059,"token":1060},"Border Width","--border-width",[1062],{"type":15,"tag":30,"props":1063,"children":1064},{},[1065],{"type":21,"value":1066},"Design token used to set the border width for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.",{"type":15,"tag":106,"props":1068,"children":1071},{"title":1069,"token":1070},"Border Top Style","--border-top-style",[1072],{"type":15,"tag":30,"props":1073,"children":1074},{},[1075],{"type":21,"value":1076},"Design token used to set the top border style of an element.",{"type":15,"tag":106,"props":1078,"children":1081},{"title":1079,"token":1080},"Border Right Style","--border-right-style",[1082],{"type":15,"tag":30,"props":1083,"children":1084},{},[1085],{"type":21,"value":1086},"Design token used to set the right border style of an element.",{"type":15,"tag":106,"props":1088,"children":1091},{"title":1089,"token":1090},"Border Bottom Style","--border-bottom-style",[1092],{"type":15,"tag":30,"props":1093,"children":1094},{},[1095],{"type":21,"value":1096},"Design token used to set the bottom border style of an element.",{"type":15,"tag":106,"props":1098,"children":1101},{"title":1099,"token":1100},"Border Left Style","--border-left-style",[1102],{"type":15,"tag":30,"props":1103,"children":1104},{},[1105],{"type":21,"value":1106},"Design token used to set the left border style of an element.",{"type":15,"tag":106,"props":1108,"children":1111},{"title":1109,"token":1110},"Border Style","--border-style",[1112],{"type":15,"tag":30,"props":1113,"children":1114},{},[1115],{"type":21,"value":1116},"Design token used to set the border style for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.",{"type":15,"tag":106,"props":1118,"children":1121},{"title":1119,"token":1120},"Border Top Color","--border-top-color",[1122],{"type":15,"tag":30,"props":1123,"children":1124},{},[1125],{"type":21,"value":1126},"Design token used to set the top border color of an element.",{"type":15,"tag":106,"props":1128,"children":1131},{"title":1129,"token":1130},"Border Right Color","--border-right-color",[1132],{"type":15,"tag":30,"props":1133,"children":1134},{},[1135],{"type":21,"value":1136},"Design token used to set the right border color of an element.",{"type":15,"tag":106,"props":1138,"children":1141},{"title":1139,"token":1140},"Border Bottom Color","--border-bottom-color",[1142],{"type":15,"tag":30,"props":1143,"children":1144},{},[1145],{"type":21,"value":1146},"Design token used to set the bottom border color of an element.",{"type":15,"tag":106,"props":1148,"children":1151},{"title":1149,"token":1150},"Border Left Color","--border-left-color",[1152],{"type":15,"tag":30,"props":1153,"children":1154},{},[1155],{"type":21,"value":1156},"Design token used to set the left border color of an element.",{"type":15,"tag":106,"props":1158,"children":1161},{"title":1159,"token":1160},"Border Color","--border-color",[1162],{"type":15,"tag":30,"props":1163,"children":1164},{},[1165],{"type":21,"value":1166},"Design token used to set the border color for all four sides of an element at once. This value is composed automatically based on the four individual side values documented above.",{"type":15,"tag":69,"props":1168,"children":1170},{"id":1169},"border-radius",[1171],{"type":21,"value":1172},"Border Radius",{"type":15,"tag":30,"props":1174,"children":1175},{},[1176],{"type":21,"value":1177},"Border radiuses define the curvature of the corners of an element's border. Inkline includes several predefined border radius values that can be used to create a variety of different styles.",{"type":15,"tag":30,"props":1179,"children":1180},{},[1181],{"type":15,"tag":53,"props":1182,"children":1184},{"href":1183},"/docs/configuration/file#borderradius",[1185],{"type":21,"value":1186},"Read about border radius configuration",{"type":15,"tag":102,"props":1188,"children":1189},{},[],{"type":15,"tag":106,"props":1191,"children":1194},{"title":1192,"token":1193},"Border Top Left Radius","--border-top-left-radius",[1195,1200],{"type":15,"tag":30,"props":1196,"children":1197},{},[1198],{"type":21,"value":1199},"Design token used to set the border radius value for the top-left corner of an element's border.",{"type":15,"tag":117,"props":1201,"children":1202},{"v-slot:variants":7},[1203,1208,1213,1218,1223],{"type":15,"tag":106,"props":1204,"children":1207},{"title":1205,"token":1206,"size":124},"Extra-small Border Top Left Radius","--border-top-left-radius-xs",[],{"type":15,"tag":106,"props":1209,"children":1212},{"title":1210,"token":1211,"size":124},"Small Border Top Left Radius","--border-top-left-radius-sm",[],{"type":15,"tag":106,"props":1214,"children":1217},{"title":1215,"token":1216,"size":124},"Medium Border Top Left Radius","--border-top-left-radius-md",[],{"type":15,"tag":106,"props":1219,"children":1222},{"title":1220,"token":1221,"size":124},"Large Border Top Left Radius","--border-top-left-radius-lg",[],{"type":15,"tag":106,"props":1224,"children":1227},{"title":1225,"token":1226,"size":124},"Extra-large Border Top Left Radius","--border-top-left-radius-xl",[],{"type":15,"tag":106,"props":1229,"children":1232},{"title":1230,"token":1231},"Border Top Right Radius","--border-top-right-radius",[1233,1238],{"type":15,"tag":30,"props":1234,"children":1235},{},[1236],{"type":21,"value":1237},"Design token used to set the border radius value for the top-right corner of an element's border.",{"type":15,"tag":117,"props":1239,"children":1240},{"v-slot:variants":7},[1241,1246,1251,1256,1261],{"type":15,"tag":106,"props":1242,"children":1245},{"title":1243,"token":1244,"size":124},"Extra-small Border Top Right Radius","--border-top-right-radius-xs",[],{"type":15,"tag":106,"props":1247,"children":1250},{"title":1248,"token":1249,"size":124},"Small Border Top Right Radius","--border-top-right-radius-sm",[],{"type":15,"tag":106,"props":1252,"children":1255},{"title":1253,"token":1254,"size":124},"Medium Border Top Right Radius","--border-top-right-radius-md",[],{"type":15,"tag":106,"props":1257,"children":1260},{"title":1258,"token":1259,"size":124},"Large Border Top Right Radius","--border-top-right-radius-lg",[],{"type":15,"tag":106,"props":1262,"children":1265},{"title":1263,"token":1264,"size":124},"Extra-large Border Top Right Radius","--border-top-right-radius-xl",[],{"type":15,"tag":106,"props":1267,"children":1270},{"title":1268,"token":1269},"Border Bottom Left Radius","--border-bottom-left-radius",[1271,1276],{"type":15,"tag":30,"props":1272,"children":1273},{},[1274],{"type":21,"value":1275},"Design token used to set the border radius value for the bottom-left corner of an element's border.",{"type":15,"tag":117,"props":1277,"children":1278},{"v-slot:variants":7},[1279,1284,1289,1294,1299],{"type":15,"tag":106,"props":1280,"children":1283},{"title":1281,"token":1282,"size":124},"Extra-small Border Bottom Left Radius","--border-bottom-left-radius-xs",[],{"type":15,"tag":106,"props":1285,"children":1288},{"title":1286,"token":1287,"size":124},"Small Border Bottom Left Radius","--border-bottom-left-radius-sm",[],{"type":15,"tag":106,"props":1290,"children":1293},{"title":1291,"token":1292,"size":124},"Medium Border Bottom Left Radius","--border-bottom-left-radius-md",[],{"type":15,"tag":106,"props":1295,"children":1298},{"title":1296,"token":1297,"size":124},"Large Border Bottom Left Radius","--border-bottom-left-radius-lg",[],{"type":15,"tag":106,"props":1300,"children":1303},{"title":1301,"token":1302,"size":124},"Extra-large Border Bottom Left Radius","--border-bottom-left-radius-xl",[],{"type":15,"tag":106,"props":1305,"children":1308},{"title":1306,"token":1307},"Border Bottom Right Radius","--border-bottom-right-radius",[1309,1314],{"type":15,"tag":30,"props":1310,"children":1311},{},[1312],{"type":21,"value":1313},"Design token used to set the border radius value for the bottom-right corner of an element's border.",{"type":15,"tag":117,"props":1315,"children":1316},{"v-slot:variants":7},[1317,1322,1327,1332,1337],{"type":15,"tag":106,"props":1318,"children":1321},{"title":1319,"token":1320,"size":124},"Extra-small Border Bottom Right Radius","--border-bottom-right-radius-xs",[],{"type":15,"tag":106,"props":1323,"children":1326},{"title":1324,"token":1325,"size":124},"Small Border Bottom Right Radius","--border-bottom-right-radius-sm",[],{"type":15,"tag":106,"props":1328,"children":1331},{"title":1329,"token":1330,"size":124},"Medium Border Bottom Right Radius","--border-bottom-right-radius-md",[],{"type":15,"tag":106,"props":1333,"children":1336},{"title":1334,"token":1335,"size":124},"Large Border Bottom Right Radius","--border-bottom-right-radius-lg",[],{"type":15,"tag":106,"props":1338,"children":1341},{"title":1339,"token":1340,"size":124},"Extra-large Border Bottom Right Radius","--border-bottom-right-radius-xl",[],{"type":15,"tag":106,"props":1343,"children":1345},{"title":1172,"token":1344},"--border-radius",[1346,1351],{"type":15,"tag":30,"props":1347,"children":1348},{},[1349],{"type":21,"value":1350},"Inkline includes a composed border-radius design token used to set all four corners of an element's border at once. This value is composed automatically based on the four individual corner values documented above.",{"type":15,"tag":117,"props":1352,"children":1353},{"v-slot:variants":7},[1354,1359,1364,1369,1374],{"type":15,"tag":106,"props":1355,"children":1358},{"title":1356,"token":1357,"size":124},"Extra-small Border Radius","--border-radius-xs",[],{"type":15,"tag":106,"props":1360,"children":1363},{"title":1361,"token":1362,"size":124},"Small Border Radius","--border-radius-sm",[],{"type":15,"tag":106,"props":1365,"children":1368},{"title":1366,"token":1367,"size":124},"Medium Border Radius","--border-radius-md",[],{"type":15,"tag":106,"props":1370,"children":1373},{"title":1371,"token":1372,"size":124},"Large Border Radius","--border-radius-lg",[],{"type":15,"tag":106,"props":1375,"children":1378},{"title":1376,"token":1377,"size":124},"Extra-large Border Radius","--border-radius-xl",[],{"type":15,"tag":69,"props":1380,"children":1382},{"id":1381},"box-shadow",[1383],{"type":21,"value":1384},"Box Shadow",{"type":15,"tag":30,"props":1386,"children":1387},{},[1388],{"type":21,"value":1389},"Box shadow can be used to create a variety of effects, such as adding depth to buttons, highlighting elements on hover, or creating a sense of elevation.",{"type":15,"tag":30,"props":1391,"children":1392},{},[1393],{"type":21,"value":1394},"The box shadow property takes several values, including the horizontal and vertical offset of the shadow, its blur radius, its spread radius, and its color. By adjusting these values, you can create custom shadow effects that complement your design system.",{"type":15,"tag":30,"props":1396,"children":1397},{},[1398],{"type":15,"tag":53,"props":1399,"children":1401},{"href":1400},"/docs/configuration/file#boxshadow",[1402],{"type":21,"value":1403},"Read about box shadow configuration",{"type":15,"tag":102,"props":1405,"children":1406},{},[],{"type":15,"tag":106,"props":1408,"children":1411},{"title":1409,"token":1410},"Box Shadow Offset X","--box-shadow-offset-x",[1412],{"type":15,"tag":30,"props":1413,"children":1414},{},[1415],{"type":21,"value":1416},"This value is used to set the horizontal offset of the box shadow. A positive value moves the shadow to the right of the box, while a negative value moves it to the left.",{"type":15,"tag":106,"props":1418,"children":1421},{"title":1419,"token":1420},"Box Shadow Offset Y","--box-shadow-offset-y",[1422],{"type":15,"tag":30,"props":1423,"children":1424},{},[1425],{"type":21,"value":1426},"This value is used to set the vertical offset of the box shadow. A positive value moves the shadow down from the box, while a negative value moves it up.",{"type":15,"tag":106,"props":1428,"children":1431},{"title":1429,"token":1430},"Box Shadow Blur Radius","--box-shadow-blur-radius",[1432],{"type":15,"tag":30,"props":1433,"children":1434},{},[1435],{"type":21,"value":1436},"The blur radius value in the box shadow property sets the amount of blurring applied to the shadow. A larger value will create a more diffuse, spread-out shadow, while a smaller value will create a sharper, more defined shadow.",{"type":15,"tag":106,"props":1438,"children":1441},{"title":1439,"token":1440},"Box Shadow Spread Radius","--box-shadow-spread-radius",[1442],{"type":15,"tag":30,"props":1443,"children":1444},{},[1445],{"type":21,"value":1446},"The spread radius value in the box shadow property sets the amount that the shadow should be spread outward from the element's box. A positive value will cause the shadow to expand, while a negative value will cause the shadow to contract.",{"type":15,"tag":106,"props":1448,"children":1451},{"title":1449,"token":1450},"Box Shadow Color","--box-shadow-color",[1452],{"type":15,"tag":30,"props":1453,"children":1454},{},[1455],{"type":21,"value":1456},"The color value in the box-shadow property sets the color of the shadow, typically a slightly transparent color. You can use a darker color to create a more dramatic, prominent shadow, or a lighter color to create a more subtle, subdued effect.",{"type":15,"tag":106,"props":1458,"children":1460},{"title":1384,"token":1459},"--box-shadow",[1461],{"type":15,"tag":30,"props":1462,"children":1463},{},[1464],{"type":21,"value":1465},"Inkline includes a composed box shadow design token, composed automatically based on the four individual box shadow values documented above.",{"type":15,"tag":69,"props":1467,"children":1469},{"id":1468},"breakpoints",[1470],{"type":21,"value":1471},"Breakpoints",{"type":15,"tag":30,"props":1473,"children":1474},{},[1475],{"type":21,"value":1476},"Breakpoints refer to specific screen sizes where the layout of a website or application changes to accommodate the different screen sizes and resolutions.",{"type":15,"tag":30,"props":1478,"children":1479},{},[1480],{"type":21,"value":1481},"In Inkline, breakpoints are defined using CSS media queries that are based on the device's width. There are six pre-defined breakpoints that can be used to create responsive designs:",{"type":15,"tag":1483,"props":1484,"children":1485},"ul",{},[1486,1497,1506,1516,1526,1536],{"type":15,"tag":1487,"props":1488,"children":1489},"li",{},[1490,1495],{"type":15,"tag":45,"props":1491,"children":1492},{},[1493],{"type":21,"value":1494},"xs",{"type":21,"value":1496},": Extra-small screens (less than 576px)",{"type":15,"tag":1487,"props":1498,"children":1499},{},[1500,1504],{"type":15,"tag":45,"props":1501,"children":1502},{},[1503],{"type":21,"value":124},{"type":21,"value":1505},": Small screens (576px or more)",{"type":15,"tag":1487,"props":1507,"children":1508},{},[1509,1514],{"type":15,"tag":45,"props":1510,"children":1511},{},[1512],{"type":21,"value":1513},"md",{"type":21,"value":1515},": Medium screens (768px or more)",{"type":15,"tag":1487,"props":1517,"children":1518},{},[1519,1524],{"type":15,"tag":45,"props":1520,"children":1521},{},[1522],{"type":21,"value":1523},"lg",{"type":21,"value":1525},": Large screens (992px or more)",{"type":15,"tag":1487,"props":1527,"children":1528},{},[1529,1534],{"type":15,"tag":45,"props":1530,"children":1531},{},[1532],{"type":21,"value":1533},"xl",{"type":21,"value":1535},": Extra-large screens (1200px or more)",{"type":15,"tag":1487,"props":1537,"children":1538},{},[1539,1544],{"type":15,"tag":45,"props":1540,"children":1541},{},[1542],{"type":21,"value":1543},"2xl",{"type":21,"value":1545},": Extra-extra-large screens (1400px or more)",{"type":15,"tag":30,"props":1547,"children":1548},{},[1549],{"type":15,"tag":53,"props":1550,"children":1552},{"href":1551},"/docs/configuration/file#breakpoints",[1553],{"type":21,"value":1554},"Read about breakpoints configuration",{"type":15,"tag":102,"props":1556,"children":1557},{},[],{"type":15,"tag":106,"props":1559,"children":1563},{"title":1560,"token":1561,"icon":1562},"Extra-small Breakpoint","--breakpoint-xs","material-symbols:resize",[1564],{"type":15,"tag":30,"props":1565,"children":1566},{},[1567],{"type":21,"value":1568},"This value represents the starting point for the extra-small devices screen size range. It is typically used for mobile devices with smaller screens, such as smartphones.",{"type":15,"tag":106,"props":1570,"children":1573},{"title":1571,"token":1572,"icon":1562},"Small Breakpoint","--breakpoint-sm",[1574],{"type":15,"tag":30,"props":1575,"children":1576},{},[1577],{"type":21,"value":1578},"This value represents the starting point for the small devices screen size range. It is designed for small screens such as smartphones in portrait orientation or small tablets.",{"type":15,"tag":106,"props":1580,"children":1583},{"title":1581,"token":1582,"icon":1562},"Medium Breakpoint","--breakpoint-md",[1584],{"type":15,"tag":30,"props":1585,"children":1586},{},[1587],{"type":21,"value":1588},"This value represents the starting point for the medium devices screen size range. It is used to define the styles for medium-sized screens such as tablets or smaller laptops.",{"type":15,"tag":106,"props":1590,"children":1593},{"title":1591,"token":1592,"icon":1562},"Large Breakpoint","--breakpoint-lg",[1594],{"type":15,"tag":30,"props":1595,"children":1596},{},[1597],{"type":21,"value":1598},"This value represents the starting point for the large devices screen size range. It is typically used to target larger screens such as large tablets, laptops and desktops.",{"type":15,"tag":106,"props":1600,"children":1603},{"title":1601,"token":1602,"icon":1562},"Extra-large Breakpoint","--breakpoint-xl",[1604],{"type":15,"tag":30,"props":1605,"children":1606},{},[1607],{"type":21,"value":1608},"This value represents the starting point for the extra-large devices screen size range. It is typically used to target larger screens such as large tablets, laptops and desktops.",{"type":15,"tag":106,"props":1610,"children":1613},{"title":1611,"token":1612,"icon":1562},"Extra-extra-large Breakpoint","--breakpoint-2xl",[1614],{"type":15,"tag":30,"props":1615,"children":1616},{},[1617],{"type":21,"value":1618},"This value represents the starting point for the extra-extra-large devices screen size range. It is typically used to target extra large desktop screens.",{"type":15,"tag":69,"props":1620,"children":1622},{"id":1621},"elements",[1623],{"type":21,"value":1624},"Elements",{"type":15,"tag":30,"props":1626,"children":1627},{},[1628],{"type":21,"value":1629},"Inkline's configuration also provides variables for common elements such as the body background and color.",{"type":15,"tag":30,"props":1631,"children":1632},{},[1633],{"type":15,"tag":53,"props":1634,"children":1636},{"href":1635},"/docs/configuration/file#elements",[1637],{"type":21,"value":1638},"Read about elements configuration",{"type":15,"tag":102,"props":1640,"children":1641},{},[],{"type":15,"tag":106,"props":1643,"children":1646},{"title":1644,"token":1645},"Body Background","--body--background",[1647],{"type":15,"tag":30,"props":1648,"children":1649},{},[1650],{"type":21,"value":1651},"This value sets the background color of the body element.",{"type":15,"tag":106,"props":1653,"children":1657},{"title":1654,"token":1655,"type":1656},"Body Color","--body--color","generic",[1658],{"type":15,"tag":30,"props":1659,"children":1660},{},[1661],{"type":21,"value":1662},"This value sets the text color of the body element.",{"type":15,"tag":69,"props":1664,"children":1666},{"id":1665},"grid",[1667],{"type":21,"value":1668},"Grid",{"type":15,"tag":30,"props":1670,"children":1671},{},[1672],{"type":21,"value":1673},"Inkline's grid system is based on a 12-column layout, which provides flexibility and versatility in designing responsive layouts. The grid system also includes options for gutters and responsive sizes, which can be adjusted to create different spacing and layout options.",{"type":15,"tag":30,"props":1675,"children":1676},{},[1677],{"type":21,"value":1678},"The grid system is designed to be modular and customizable, so you can easily adapt it to your project's specific needs and requirements.",{"type":15,"tag":30,"props":1680,"children":1681},{},[1682],{"type":15,"tag":53,"props":1683,"children":1684},{"href":1635},[1685],{"type":21,"value":1638},{"type":15,"tag":102,"props":1687,"children":1688},{},[],{"type":15,"tag":106,"props":1690,"children":1694},{"title":1691,"token":1692,"icon":1693},"Grid Columns","--grid--columns","radix-icons:columns",[1695],{"type":15,"tag":30,"props":1696,"children":1697},{},[1698],{"type":21,"value":1699},"This value sets the number of columns in the grid system, which is set to 12 columns by default in Inkline. This variable is used to calculate the width of each column in the grid system, based on the total width of the container element.",{"type":15,"tag":106,"props":1701,"children":1705},{"title":1702,"token":1703,"icon":1704},"Grid Gutter","--grid--gutter","icon-park-outline:horizontal-spacing-between-items",[1706,1711],{"type":15,"tag":30,"props":1707,"children":1708},{},[1709],{"type":21,"value":1710},"This value sets the size of the gutter (the space between columns) in the grid system.",{"type":15,"tag":117,"props":1712,"children":1713},{"v-slot:variants":7},[1714,1719,1724,1729,1734],{"type":15,"tag":106,"props":1715,"children":1718},{"title":1716,"token":1717,"size":124,"icon":1704},"Extra-small Grid Gutter","--grid--xs--gutter",[],{"type":15,"tag":106,"props":1720,"children":1723},{"title":1721,"token":1722,"size":124,"icon":1704},"Small Grid Gutter","--grid--sm--gutter",[],{"type":15,"tag":106,"props":1725,"children":1728},{"title":1726,"token":1727,"size":124,"icon":1704},"Medium Grid Gutter","--grid--md--gutter",[],{"type":15,"tag":106,"props":1730,"children":1733},{"title":1731,"token":1732,"size":124,"icon":1704},"Large Grid Gutter","--grid--lg--gutter",[],{"type":15,"tag":106,"props":1735,"children":1738},{"title":1736,"token":1737,"size":124,"icon":1704},"Extra-large Grid Gutter","--grid--xl--gutter",[],{"type":15,"tag":69,"props":1740,"children":1742},{"id":1741},"scale-ratio",[1743],{"type":21,"value":1744},"Scale Ratio",{"type":15,"tag":30,"props":1746,"children":1747},{},[1748],{"type":21,"value":1749},"In design, a scale ratio is a mathematical relationship between different elements or components that ensures visual harmony and balance. In typography, scale ratios are commonly used to determine font sizes and line heights that are in proportion to one another. This creates a harmonious and balanced visual hierarchy within the text.",{"type":15,"tag":30,"props":1751,"children":1752},{},[1753],{"type":15,"tag":53,"props":1754,"children":1756},{"href":1755},"/docs/configuration/file#scaleratio",[1757],{"type":21,"value":1758},"Read about scale ratio configuration",{"type":15,"tag":102,"props":1760,"children":1761},{},[],{"type":15,"tag":106,"props":1763,"children":1766},{"title":1744,"token":1764,"icon":1765},"--scale-ratio","ri:scales-fill",[1767,1772],{"type":15,"tag":30,"props":1768,"children":1769},{},[1770],{"type":21,"value":1771},"This value sets the design system's scale ratio. Inkline uses a modular scale system based on the minor third scale ratio by default. This means that each step in the scale is 1.2 times larger or smaller than the previous step.",{"type":15,"tag":117,"props":1773,"children":1774},{"v-slot:variants":7},[1775,1780,1785,1790,1795,1800],{"type":15,"tag":106,"props":1776,"children":1779},{"title":1777,"token":1778,"size":124,"icon":1765},"Scale Ratio ^ 1","--scale-ratio-pow-1",[],{"type":15,"tag":106,"props":1781,"children":1784},{"title":1782,"token":1783,"size":124,"icon":1765},"Scale Ratio ^ 2","--scale-ratio-pow-2",[],{"type":15,"tag":106,"props":1786,"children":1789},{"title":1787,"token":1788,"size":124,"icon":1765},"Scale Ratio ^ 3","--scale-ratio-pow-3",[],{"type":15,"tag":106,"props":1791,"children":1794},{"title":1792,"token":1793,"size":124,"icon":1765},"Scale Ratio ^ 4","--scale-ratio-pow-4",[],{"type":15,"tag":106,"props":1796,"children":1799},{"title":1797,"token":1798,"size":124,"icon":1765},"Scale Ratio ^ 5","--scale-ratio-pow-5",[],{"type":15,"tag":106,"props":1801,"children":1804},{"title":1802,"token":1803,"size":124,"icon":1765},"Scale Ratio ^ 6","--scale-ratio-pow-6",[],{"type":15,"tag":106,"props":1806,"children":1809},{"title":1807,"token":1808,"icon":1765},"Minor Second Scale Ratio","--scale-ratio-minor-second",[1810],{"type":15,"tag":30,"props":1811,"children":1812},{},[1813],{"type":21,"value":1814},"The minor second scale ratio, also known as the \"diminished second\", is a musical interval that represents a ratio of 16/15.",{"type":15,"tag":106,"props":1816,"children":1819},{"title":1817,"token":1818,"icon":1765},"Major Second Scale Ratio","--scale-ratio-major-second",[1820],{"type":15,"tag":30,"props":1821,"children":1822},{},[1823],{"type":21,"value":1824},"The major second scale ratio is a musical interval that represents a ratio of 9/8.",{"type":15,"tag":106,"props":1826,"children":1829},{"title":1827,"token":1828,"icon":1765},"Minor Third Scale Ratio","--scale-ratio-minor-third",[1830],{"type":15,"tag":30,"props":1831,"children":1832},{},[1833],{"type":21,"value":1834},"The minor third scale ratio is a musical interval representing a ratio of 6/5. In design, this ratio is often used as a modular scale factor to create consistent and harmonious typography and layout.",{"type":15,"tag":106,"props":1836,"children":1839},{"title":1837,"token":1838,"icon":1765},"Major Third Scale Ratio","--scale-ratio-major-third",[1840],{"type":15,"tag":30,"props":1841,"children":1842},{},[1843],{"type":21,"value":1844},"The major third scale ratio is a musical interval representing a ratio of 5/4.",{"type":15,"tag":106,"props":1846,"children":1849},{"title":1847,"token":1848,"icon":1765},"Perfect Fourth Scale Ratio","--scale-ratio-perfect-fourth",[1850],{"type":15,"tag":30,"props":1851,"children":1852},{},[1853],{"type":21,"value":1854},"The perfect fourth scale ratio is a musical interval representing a ratio of 4/3.",{"type":15,"tag":106,"props":1856,"children":1859},{"title":1857,"token":1858,"icon":1765},"Augmented Fourth Scale Ratio","--scale-ratio-augmented-fourth",[1860],{"type":15,"tag":30,"props":1861,"children":1862},{},[1863],{"type":21,"value":1864},"The augmented fourth scale ratio is a musical interval representing a ratio of 45/32.",{"type":15,"tag":106,"props":1866,"children":1869},{"title":1867,"token":1868,"icon":1765},"Perfect Fifth Scale Ratio","--scale-ratio-perfect-fifth",[1870],{"type":15,"tag":30,"props":1871,"children":1872},{},[1873],{"type":21,"value":1874},"The perfect fifth scale ratio is a musical interval representing a ratio of 3/2.",{"type":15,"tag":69,"props":1876,"children":1878},{"id":1877},"sizes",[1879],{"type":21,"value":1880},"Sizes",{"type":15,"tag":30,"props":1882,"children":1883},{},[1884],{"type":21,"value":1885},"Inkline provides a set of predefined sizes and percentage values that can be used to create consistent layout. The size multiplier variable is used to compute any size-based variants of components, such as font sizes, padding, margin, and border radius.",{"type":15,"tag":30,"props":1887,"children":1888},{},[1889],{"type":15,"tag":53,"props":1890,"children":1892},{"href":1891},"/docs/configuration/file#sizes",[1893],{"type":21,"value":1894},"Read about sizes configuration",{"type":15,"tag":102,"props":1896,"children":1897},{},[],{"type":15,"tag":106,"props":1899,"children":1902},{"title":1900,"token":1901,"icon":1562},"Size Multiplier","--size-multiplier",[1903,1908],{"type":15,"tag":30,"props":1904,"children":1905},{},[1906],{"type":21,"value":1907},"The value that is used to compute size-based variants of components, such as font sizes, padding, margin, and border radius.",{"type":15,"tag":117,"props":1909,"children":1910},{"v-slot:variants":7},[1911,1916,1921,1926,1931,1936,1941],{"type":15,"tag":106,"props":1912,"children":1915},{"title":1913,"token":1914,"icon":1562},"Extra-extra-small Size Multiplier","--size-multiplier-2xs",[],{"type":15,"tag":106,"props":1917,"children":1920},{"title":1918,"token":1919,"icon":1562},"Extra-small Size Multiplier","--size-multiplier-xs",[],{"type":15,"tag":106,"props":1922,"children":1925},{"title":1923,"token":1924,"icon":1562},"Small Size Multiplier","--size-multiplier-sm",[],{"type":15,"tag":106,"props":1927,"children":1930},{"title":1928,"token":1929,"icon":1562},"Medium Size Multiplier","--size-multiplier-md",[],{"type":15,"tag":106,"props":1932,"children":1935},{"title":1933,"token":1934,"icon":1562},"Large Size Multiplier","--size-multiplier-lg",[],{"type":15,"tag":106,"props":1937,"children":1940},{"title":1938,"token":1939,"icon":1562},"Extra-large Size Multiplier","--size-multiplier-xl",[],{"type":15,"tag":106,"props":1942,"children":1945},{"title":1943,"token":1944,"icon":1562},"Extra-extra-large Size Multiplier","--size-multiplier-2xl",[],{"type":15,"tag":106,"props":1947,"children":1951},{"title":1948,"token":1949,"icon":1950,"type":1656},"0% Size Percentage","--size-percentages-0","ic:baseline-percentage",[1952],{"type":15,"tag":30,"props":1953,"children":1954},{},[1955],{"type":21,"value":1956},"The predefined value used for 0% size percentages.",{"type":15,"tag":106,"props":1958,"children":1962},{"title":1959,"token":1960,"icon":1950,"type":1656,"value":1961},"25% Size Percentage","--size-percentages-25","25%",[1963],{"type":15,"tag":30,"props":1964,"children":1965},{},[1966],{"type":21,"value":1967},"The predefined value used for 25% size percentages.",{"type":15,"tag":106,"props":1969,"children":1972},{"title":1970,"token":1971,"icon":1950,"type":1656},"50% Size Percentage","--size-percentages-50",[1973],{"type":15,"tag":30,"props":1974,"children":1975},{},[1976],{"type":21,"value":1977},"The predefined value used for 50% size percentages.",{"type":15,"tag":106,"props":1979,"children":1982},{"title":1980,"token":1981,"icon":1950,"type":1656},"75% Size Percentage","--size-percentages-75",[1983],{"type":15,"tag":30,"props":1984,"children":1985},{},[1986],{"type":21,"value":1987},"The predefined value used for 75% size percentages.",{"type":15,"tag":106,"props":1989,"children":1992},{"title":1990,"token":1991,"icon":1950,"type":1656},"100% Size Percentage","--size-percentages-100",[1993],{"type":15,"tag":30,"props":1994,"children":1995},{},[1996],{"type":21,"value":1997},"The predefined value used for 100% size percentages.",{"type":15,"tag":69,"props":1999,"children":2001},{"id":2000},"spacing",[2002],{"type":21,"value":2003},"Spacing",{"type":15,"tag":30,"props":2005,"children":2006},{},[2007],{"type":21,"value":2008},"Inkline uses a modular scale to establish a harmonious relationship between font sizes, spacing, and other typographic elements. This ensures that text is easy to read and visually appealing across a range of screen sizes and resolutions.",{"type":15,"tag":30,"props":2010,"children":2011},{},[2012],{"type":21,"value":2013},"You can use a wide range of font weights, styles, and sizes to provide flexibility and variety in your design. The default values provide guidance on typography best practices, including font choices, line lengths, and spacing. Using these can help you create visually appealing and effective typography for your project.",{"type":15,"tag":30,"props":2015,"children":2016},{},[2017],{"type":15,"tag":53,"props":2018,"children":2020},{"href":2019},"/docs/configuration/file#margin",[2021],{"type":21,"value":2022},"Read about spacing configuration",{"type":15,"tag":102,"props":2024,"children":2025},{},[],{"type":15,"tag":106,"props":2027,"children":2030},{"title":2028,"token":2029},"Margin Top","--margin-top",[2031,2036],{"type":15,"tag":30,"props":2032,"children":2033},{},[2034],{"type":21,"value":2035},"Design token used to set the margin value for the top side of an element. All margin-top variants are computed using this base value.",{"type":15,"tag":117,"props":2037,"children":2038},{"v-slot:variants":7},[2039,2044,2049,2054,2059,2064,2069,2074,2079,2084,2089,2094,2099,2104,2109],{"type":15,"tag":106,"props":2040,"children":2043},{"title":2041,"token":2042,"size":124},"Extra-small Margin Top","--margin-top-xs",[],{"type":15,"tag":106,"props":2045,"children":2048},{"title":2046,"token":2047,"size":124},"Small Margin Top","--margin-top-sm",[],{"type":15,"tag":106,"props":2050,"children":2053},{"title":2051,"token":2052,"size":124},"Medium Margin Top","--margin-top-md",[],{"type":15,"tag":106,"props":2055,"children":2058},{"title":2056,"token":2057,"size":124},"Large Margin Top","--margin-top-lg",[],{"type":15,"tag":106,"props":2060,"children":2063},{"title":2061,"token":2062,"size":124},"Extra-large Margin Top","--margin-top-xl",[],{"type":15,"tag":106,"props":2065,"children":2068},{"title":2066,"token":2067,"size":124},"Margin Top * 2","--margin-top-2",[],{"type":15,"tag":106,"props":2070,"children":2073},{"title":2071,"token":2072,"size":124},"Margin Top * 3","--margin-top-3",[],{"type":15,"tag":106,"props":2075,"children":2078},{"title":2076,"token":2077,"size":124},"Margin Top * 4","--margin-top-4",[],{"type":15,"tag":106,"props":2080,"children":2083},{"title":2081,"token":2082,"size":124},"Margin Top * 5","--margin-top-5",[],{"type":15,"tag":106,"props":2085,"children":2088},{"title":2086,"token":2087,"size":124},"Margin Top * 1 / 5","--margin-top-1-5",[],{"type":15,"tag":106,"props":2090,"children":2093},{"title":2091,"token":2092,"size":124},"Margin Top * 1 / 4","--margin-top-1-4",[],{"type":15,"tag":106,"props":2095,"children":2098},{"title":2096,"token":2097,"size":124},"Margin Top * 1 / 3","--margin-top-1-3",[],{"type":15,"tag":106,"props":2100,"children":2103},{"title":2101,"token":2102,"size":124},"Margin Top * 1 / 2","--margin-top-1-2",[],{"type":15,"tag":106,"props":2105,"children":2108},{"title":2106,"token":2107,"size":124},"Margin Top * 2 / 3","--margin-top-2-3",[],{"type":15,"tag":106,"props":2110,"children":2113},{"title":2111,"token":2112,"size":124},"Margin Top * 3 / 4","--margin-top-3-4",[],{"type":15,"tag":106,"props":2115,"children":2118},{"title":2116,"token":2117},"Margin Right","--margin-right",[2119,2124],{"type":15,"tag":30,"props":2120,"children":2121},{},[2122],{"type":21,"value":2123},"Design token used to set the margin value for the right side of an element. All margin-right variants are computed using this base value.",{"type":15,"tag":117,"props":2125,"children":2126},{"v-slot:variants":7},[2127,2132,2137,2142,2147,2152,2157,2162,2167,2172,2177,2182,2187,2192,2197],{"type":15,"tag":106,"props":2128,"children":2131},{"title":2129,"token":2130,"size":124},"Extra-small Margin Right","--margin-right-xs",[],{"type":15,"tag":106,"props":2133,"children":2136},{"title":2134,"token":2135,"size":124},"Small Margin Right","--margin-right-sm",[],{"type":15,"tag":106,"props":2138,"children":2141},{"title":2139,"token":2140,"size":124},"Medium Margin Right","--margin-right-md",[],{"type":15,"tag":106,"props":2143,"children":2146},{"title":2144,"token":2145,"size":124},"Large Margin Right","--margin-right-lg",[],{"type":15,"tag":106,"props":2148,"children":2151},{"title":2149,"token":2150,"size":124},"Extra-large Margin Right","--margin-right-xl",[],{"type":15,"tag":106,"props":2153,"children":2156},{"title":2154,"token":2155,"size":124},"Margin Right * 2","--margin-right-2",[],{"type":15,"tag":106,"props":2158,"children":2161},{"title":2159,"token":2160,"size":124},"Margin Right * 3","--margin-right-3",[],{"type":15,"tag":106,"props":2163,"children":2166},{"title":2164,"token":2165,"size":124},"Margin Right * 4","--margin-right-4",[],{"type":15,"tag":106,"props":2168,"children":2171},{"title":2169,"token":2170,"size":124},"Margin Right * 5","--margin-right-5",[],{"type":15,"tag":106,"props":2173,"children":2176},{"title":2174,"token":2175,"size":124},"Margin Right * 1 / 5","--margin-right-1-5",[],{"type":15,"tag":106,"props":2178,"children":2181},{"title":2179,"token":2180,"size":124},"Margin Right * 1 / 4","--margin-right-1-4",[],{"type":15,"tag":106,"props":2183,"children":2186},{"title":2184,"token":2185,"size":124},"Margin Right * 1 / 3","--margin-right-1-3",[],{"type":15,"tag":106,"props":2188,"children":2191},{"title":2189,"token":2190,"size":124},"Margin Right * 1 / 2","--margin-right-1-2",[],{"type":15,"tag":106,"props":2193,"children":2196},{"title":2194,"token":2195,"size":124},"Margin Right * 2 / 3","--margin-right-2-3",[],{"type":15,"tag":106,"props":2198,"children":2201},{"title":2199,"token":2200,"size":124},"Margin Right * 3 / 4","--margin-right-3-4",[],{"type":15,"tag":106,"props":2203,"children":2206},{"title":2204,"token":2205},"Margin Bottom","--margin-bottom",[2207,2212],{"type":15,"tag":30,"props":2208,"children":2209},{},[2210],{"type":21,"value":2211},"Design token used to set the margin value for the bottom side of an element. All margin-bottom variants are computed using this base value.",{"type":15,"tag":117,"props":2213,"children":2214},{"v-slot:variants":7},[2215,2220,2225,2230,2235,2240,2245,2250,2255,2260,2265,2270,2275,2280,2285],{"type":15,"tag":106,"props":2216,"children":2219},{"title":2217,"token":2218,"size":124},"Extra-small Margin Bottom","--margin-bottom-xs",[],{"type":15,"tag":106,"props":2221,"children":2224},{"title":2222,"token":2223,"size":124},"Small Margin Bottom","--margin-bottom-sm",[],{"type":15,"tag":106,"props":2226,"children":2229},{"title":2227,"token":2228,"size":124},"Medium Margin Bottom","--margin-bottom-md",[],{"type":15,"tag":106,"props":2231,"children":2234},{"title":2232,"token":2233,"size":124},"Large Margin Bottom","--margin-bottom-lg",[],{"type":15,"tag":106,"props":2236,"children":2239},{"title":2237,"token":2238,"size":124},"Extra-large Margin Bottom","--margin-bottom-xl",[],{"type":15,"tag":106,"props":2241,"children":2244},{"title":2242,"token":2243,"size":124},"Margin Bottom * 2","--margin-bottom-2",[],{"type":15,"tag":106,"props":2246,"children":2249},{"title":2247,"token":2248,"size":124},"Margin Bottom * 3","--margin-bottom-3",[],{"type":15,"tag":106,"props":2251,"children":2254},{"title":2252,"token":2253,"size":124},"Margin Bottom * 4","--margin-bottom-4",[],{"type":15,"tag":106,"props":2256,"children":2259},{"title":2257,"token":2258,"size":124},"Margin Bottom * 5","--margin-bottom-5",[],{"type":15,"tag":106,"props":2261,"children":2264},{"title":2262,"token":2263,"size":124},"Margin Bottom * 1 / 5","--margin-bottom-1-5",[],{"type":15,"tag":106,"props":2266,"children":2269},{"title":2267,"token":2268,"size":124},"Margin Bottom * 1 / 4","--margin-bottom-1-4",[],{"type":15,"tag":106,"props":2271,"children":2274},{"title":2272,"token":2273,"size":124},"Margin Bottom * 1 / 3","--margin-bottom-1-3",[],{"type":15,"tag":106,"props":2276,"children":2279},{"title":2277,"token":2278,"size":124},"Margin Bottom * 1 / 2","--margin-bottom-1-2",[],{"type":15,"tag":106,"props":2281,"children":2284},{"title":2282,"token":2283,"size":124},"Margin Bottom * 2 / 3","--margin-bottom-2-3",[],{"type":15,"tag":106,"props":2286,"children":2289},{"title":2287,"token":2288,"size":124},"Margin Bottom * 3 / 4","--margin-bottom-3-4",[],{"type":15,"tag":106,"props":2291,"children":2294},{"title":2292,"token":2293},"Margin Left","--margin-left",[2295,2300],{"type":15,"tag":30,"props":2296,"children":2297},{},[2298],{"type":21,"value":2299},"Design token used to set the margin value for the left side of an element. All margin-left variants are computed using this base value.",{"type":15,"tag":117,"props":2301,"children":2302},{"v-slot:variants":7},[2303,2308,2313,2318,2323,2328,2333,2338,2343,2348,2353,2358,2363,2368,2373],{"type":15,"tag":106,"props":2304,"children":2307},{"title":2305,"token":2306,"size":124},"Extra-small Margin Left","--margin-left-xs",[],{"type":15,"tag":106,"props":2309,"children":2312},{"title":2310,"token":2311,"size":124},"Small Margin Left","--margin-left-sm",[],{"type":15,"tag":106,"props":2314,"children":2317},{"title":2315,"token":2316,"size":124},"Medium Margin Left","--margin-left-md",[],{"type":15,"tag":106,"props":2319,"children":2322},{"title":2320,"token":2321,"size":124},"Large Margin Left","--margin-left-lg",[],{"type":15,"tag":106,"props":2324,"children":2327},{"title":2325,"token":2326,"size":124},"Extra-large Margin Left","--margin-left-xl",[],{"type":15,"tag":106,"props":2329,"children":2332},{"title":2330,"token":2331,"size":124},"Margin Left * 2","--margin-left-2",[],{"type":15,"tag":106,"props":2334,"children":2337},{"title":2335,"token":2336,"size":124},"Margin Left * 3","--margin-left-3",[],{"type":15,"tag":106,"props":2339,"children":2342},{"title":2340,"token":2341,"size":124},"Margin Left * 4","--margin-left-4",[],{"type":15,"tag":106,"props":2344,"children":2347},{"title":2345,"token":2346,"size":124},"Margin Left * 5","--margin-left-5",[],{"type":15,"tag":106,"props":2349,"children":2352},{"title":2350,"token":2351,"size":124},"Margin Left * 1 / 5","--margin-left-1-5",[],{"type":15,"tag":106,"props":2354,"children":2357},{"title":2355,"token":2356,"size":124},"Margin Left * 1 / 4","--margin-left-1-4",[],{"type":15,"tag":106,"props":2359,"children":2362},{"title":2360,"token":2361,"size":124},"Margin Left * 1 / 3","--margin-left-1-3",[],{"type":15,"tag":106,"props":2364,"children":2367},{"title":2365,"token":2366,"size":124},"Margin Left * 1 / 2","--margin-left-1-2",[],{"type":15,"tag":106,"props":2369,"children":2372},{"title":2370,"token":2371,"size":124},"Margin Left * 2 / 3","--margin-left-2-3",[],{"type":15,"tag":106,"props":2374,"children":2377},{"title":2375,"token":2376,"size":124},"Margin Left * 3 / 4","--margin-left-3-4",[],{"type":15,"tag":106,"props":2379,"children":2382},{"title":2380,"token":2381},"Margin","--margin",[2383,2388],{"type":15,"tag":30,"props":2384,"children":2385},{},[2386],{"type":21,"value":2387},"Design token used to set the margin value for all four sides of an element. This value is composed automatically based on the four individual side values documented above.",{"type":15,"tag":117,"props":2389,"children":2390},{"v-slot:variants":7},[2391,2396,2401,2406,2411,2416,2421,2426,2431,2436,2441,2446,2451,2456,2461],{"type":15,"tag":106,"props":2392,"children":2395},{"title":2393,"token":2394,"size":124},"Extra-small Margin","--margin-xs",[],{"type":15,"tag":106,"props":2397,"children":2400},{"title":2398,"token":2399,"size":124},"Small Margin","--margin-sm",[],{"type":15,"tag":106,"props":2402,"children":2405},{"title":2403,"token":2404,"size":124},"Medium Margin","--margin-md",[],{"type":15,"tag":106,"props":2407,"children":2410},{"title":2408,"token":2409,"size":124},"Large Margin","--margin-lg",[],{"type":15,"tag":106,"props":2412,"children":2415},{"title":2413,"token":2414,"size":124},"Extra-large Margin","--margin-xl",[],{"type":15,"tag":106,"props":2417,"children":2420},{"title":2418,"token":2419,"size":124},"Margin * 2","--margin-2",[],{"type":15,"tag":106,"props":2422,"children":2425},{"title":2423,"token":2424,"size":124},"Margin * 3","--margin-3",[],{"type":15,"tag":106,"props":2427,"children":2430},{"title":2428,"token":2429,"size":124},"Margin * 4","--margin-4",[],{"type":15,"tag":106,"props":2432,"children":2435},{"title":2433,"token":2434,"size":124},"Margin * 5","--margin-5",[],{"type":15,"tag":106,"props":2437,"children":2440},{"title":2438,"token":2439,"size":124},"Margin * 1 / 5","--margin-1-5",[],{"type":15,"tag":106,"props":2442,"children":2445},{"title":2443,"token":2444,"size":124},"Margin * 1 / 4","--margin-1-4",[],{"type":15,"tag":106,"props":2447,"children":2450},{"title":2448,"token":2449,"size":124},"Margin * 1 / 3","--margin-1-3",[],{"type":15,"tag":106,"props":2452,"children":2455},{"title":2453,"token":2454,"size":124},"Margin * 1 / 2","--margin-1-2",[],{"type":15,"tag":106,"props":2457,"children":2460},{"title":2458,"token":2459,"size":124},"Margin * 2 / 3","--margin-2-3",[],{"type":15,"tag":106,"props":2462,"children":2465},{"title":2463,"token":2464,"size":124},"Margin * 3 / 4","--margin-3-4",[],{"type":15,"tag":106,"props":2467,"children":2470},{"title":2468,"token":2469},"Padding Top","--padding-top",[2471,2476],{"type":15,"tag":30,"props":2472,"children":2473},{},[2474],{"type":21,"value":2475},"Design token used to set the padding value for the top side of an element. All padding-top variants are computed using this base value.",{"type":15,"tag":117,"props":2477,"children":2478},{"v-slot:variants":7},[2479,2484,2489,2494,2499,2504,2509,2514,2519,2524,2529,2534,2539,2544,2549],{"type":15,"tag":106,"props":2480,"children":2483},{"title":2481,"token":2482,"size":124},"Extra-small Padding Top","--padding-top-xs",[],{"type":15,"tag":106,"props":2485,"children":2488},{"title":2486,"token":2487,"size":124},"Small Padding Top","--padding-top-sm",[],{"type":15,"tag":106,"props":2490,"children":2493},{"title":2491,"token":2492,"size":124},"Medium Padding Top","--padding-top-md",[],{"type":15,"tag":106,"props":2495,"children":2498},{"title":2496,"token":2497,"size":124},"Large Padding Top","--padding-top-lg",[],{"type":15,"tag":106,"props":2500,"children":2503},{"title":2501,"token":2502,"size":124},"Extra-large Padding Top","--padding-top-xl",[],{"type":15,"tag":106,"props":2505,"children":2508},{"title":2506,"token":2507,"size":124},"Padding Top * 2","--padding-top-2",[],{"type":15,"tag":106,"props":2510,"children":2513},{"title":2511,"token":2512,"size":124},"Padding Top * 3","--padding-top-3",[],{"type":15,"tag":106,"props":2515,"children":2518},{"title":2516,"token":2517,"size":124},"Padding Top * 4","--padding-top-4",[],{"type":15,"tag":106,"props":2520,"children":2523},{"title":2521,"token":2522,"size":124},"Padding Top * 5","--padding-top-5",[],{"type":15,"tag":106,"props":2525,"children":2528},{"title":2526,"token":2527,"size":124},"Padding Top * 1 / 5","--padding-top-1-5",[],{"type":15,"tag":106,"props":2530,"children":2533},{"title":2531,"token":2532,"size":124},"Padding Top * 1 / 4","--padding-top-1-4",[],{"type":15,"tag":106,"props":2535,"children":2538},{"title":2536,"token":2537,"size":124},"Padding Top * 1 / 3","--padding-top-1-3",[],{"type":15,"tag":106,"props":2540,"children":2543},{"title":2541,"token":2542,"size":124},"Padding Top * 1 / 2","--padding-top-1-2",[],{"type":15,"tag":106,"props":2545,"children":2548},{"title":2546,"token":2547,"size":124},"Padding Top * 2 / 3","--padding-top-2-3",[],{"type":15,"tag":106,"props":2550,"children":2553},{"title":2551,"token":2552,"size":124},"Padding Top * 3 / 4","--padding-top-3-4",[],{"type":15,"tag":106,"props":2555,"children":2558},{"title":2556,"token":2557},"Padding Right","--padding-right",[2559,2564],{"type":15,"tag":30,"props":2560,"children":2561},{},[2562],{"type":21,"value":2563},"Design token used to set the padding value for the right side of an element. All padding-right variants are computed using this base value.",{"type":15,"tag":117,"props":2565,"children":2566},{"v-slot:variants":7},[2567,2572,2577,2582,2587,2592,2597,2602,2607,2612,2617,2622,2627,2632,2637],{"type":15,"tag":106,"props":2568,"children":2571},{"title":2569,"token":2570,"size":124},"Extra-small Padding Right","--padding-right-xs",[],{"type":15,"tag":106,"props":2573,"children":2576},{"title":2574,"token":2575,"size":124},"Small Padding Right","--padding-right-sm",[],{"type":15,"tag":106,"props":2578,"children":2581},{"title":2579,"token":2580,"size":124},"Medium Padding Right","--padding-right-md",[],{"type":15,"tag":106,"props":2583,"children":2586},{"title":2584,"token":2585,"size":124},"Large Padding Right","--padding-right-lg",[],{"type":15,"tag":106,"props":2588,"children":2591},{"title":2589,"token":2590,"size":124},"Extra-large Padding Right","--padding-right-xl",[],{"type":15,"tag":106,"props":2593,"children":2596},{"title":2594,"token":2595,"size":124},"Padding Right * 2","--padding-right-2",[],{"type":15,"tag":106,"props":2598,"children":2601},{"title":2599,"token":2600,"size":124},"Padding Right * 3","--padding-right-3",[],{"type":15,"tag":106,"props":2603,"children":2606},{"title":2604,"token":2605,"size":124},"Padding Right * 4","--padding-right-4",[],{"type":15,"tag":106,"props":2608,"children":2611},{"title":2609,"token":2610,"size":124},"Padding Right * 5","--padding-right-5",[],{"type":15,"tag":106,"props":2613,"children":2616},{"title":2614,"token":2615,"size":124},"Padding Right * 1 / 5","--padding-right-1-5",[],{"type":15,"tag":106,"props":2618,"children":2621},{"title":2619,"token":2620,"size":124},"Padding Right * 1 / 4","--padding-right-1-4",[],{"type":15,"tag":106,"props":2623,"children":2626},{"title":2624,"token":2625,"size":124},"Padding Right * 1 / 3","--padding-right-1-3",[],{"type":15,"tag":106,"props":2628,"children":2631},{"title":2629,"token":2630,"size":124},"Padding Right * 1 / 2","--padding-right-1-2",[],{"type":15,"tag":106,"props":2633,"children":2636},{"title":2634,"token":2635,"size":124},"Padding Right * 2 / 3","--padding-right-2-3",[],{"type":15,"tag":106,"props":2638,"children":2641},{"title":2639,"token":2640,"size":124},"Padding Right * 3 / 4","--padding-right-3-4",[],{"type":15,"tag":106,"props":2643,"children":2646},{"title":2644,"token":2645},"Padding Bottom","--padding-bottom",[2647,2652],{"type":15,"tag":30,"props":2648,"children":2649},{},[2650],{"type":21,"value":2651},"Design token used to set the padding value for the bottom side of an element. All padding-bottom variants are computed using this base value.",{"type":15,"tag":117,"props":2653,"children":2654},{"v-slot:variants":7},[2655,2660,2665,2670,2675,2680,2685,2690,2695,2700,2705,2710,2715,2720,2725],{"type":15,"tag":106,"props":2656,"children":2659},{"title":2657,"token":2658,"size":124},"Extra-small Padding Bottom","--padding-bottom-xs",[],{"type":15,"tag":106,"props":2661,"children":2664},{"title":2662,"token":2663,"size":124},"Small Padding Bottom","--padding-bottom-sm",[],{"type":15,"tag":106,"props":2666,"children":2669},{"title":2667,"token":2668,"size":124},"Medium Padding Bottom","--padding-bottom-md",[],{"type":15,"tag":106,"props":2671,"children":2674},{"title":2672,"token":2673,"size":124},"Large Padding Bottom","--padding-bottom-lg",[],{"type":15,"tag":106,"props":2676,"children":2679},{"title":2677,"token":2678,"size":124},"Extra-large Padding Bottom","--padding-bottom-xl",[],{"type":15,"tag":106,"props":2681,"children":2684},{"title":2682,"token":2683,"size":124},"Padding Bottom * 2","--padding-bottom-2",[],{"type":15,"tag":106,"props":2686,"children":2689},{"title":2687,"token":2688,"size":124},"Padding Bottom * 3","--padding-bottom-3",[],{"type":15,"tag":106,"props":2691,"children":2694},{"title":2692,"token":2693,"size":124},"Padding Bottom * 4","--padding-bottom-4",[],{"type":15,"tag":106,"props":2696,"children":2699},{"title":2697,"token":2698,"size":124},"Padding Bottom * 5","--padding-bottom-5",[],{"type":15,"tag":106,"props":2701,"children":2704},{"title":2702,"token":2703,"size":124},"Padding Bottom * 1 / 5","--padding-bottom-1-5",[],{"type":15,"tag":106,"props":2706,"children":2709},{"title":2707,"token":2708,"size":124},"Padding Bottom * 1 / 4","--padding-bottom-1-4",[],{"type":15,"tag":106,"props":2711,"children":2714},{"title":2712,"token":2713,"size":124},"Padding Bottom * 1 / 3","--padding-bottom-1-3",[],{"type":15,"tag":106,"props":2716,"children":2719},{"title":2717,"token":2718,"size":124},"Padding Bottom * 1 / 2","--padding-bottom-1-2",[],{"type":15,"tag":106,"props":2721,"children":2724},{"title":2722,"token":2723,"size":124},"Padding Bottom * 2 / 3","--padding-bottom-2-3",[],{"type":15,"tag":106,"props":2726,"children":2729},{"title":2727,"token":2728,"size":124},"Padding Bottom * 3 / 4","--padding-bottom-3-4",[],{"type":15,"tag":106,"props":2731,"children":2734},{"title":2732,"token":2733},"Padding Left","--padding-left",[2735,2740],{"type":15,"tag":30,"props":2736,"children":2737},{},[2738],{"type":21,"value":2739},"Design token used to set the padding value for the left side of an element. All padding-left variants are computed using this base value.",{"type":15,"tag":117,"props":2741,"children":2742},{"v-slot:variants":7},[2743,2748,2753,2758,2763,2768,2773,2778,2783,2788,2793,2798,2803,2808,2813],{"type":15,"tag":106,"props":2744,"children":2747},{"title":2745,"token":2746,"size":124},"Extra-small Padding Left","--padding-left-xs",[],{"type":15,"tag":106,"props":2749,"children":2752},{"title":2750,"token":2751,"size":124},"Small Padding Left","--padding-left-sm",[],{"type":15,"tag":106,"props":2754,"children":2757},{"title":2755,"token":2756,"size":124},"Medium Padding Left","--padding-left-md",[],{"type":15,"tag":106,"props":2759,"children":2762},{"title":2760,"token":2761,"size":124},"Large Padding Left","--padding-left-lg",[],{"type":15,"tag":106,"props":2764,"children":2767},{"title":2765,"token":2766,"size":124},"Extra-large Padding Left","--padding-left-xl",[],{"type":15,"tag":106,"props":2769,"children":2772},{"title":2770,"token":2771,"size":124},"Padding Left * 2","--padding-left-2",[],{"type":15,"tag":106,"props":2774,"children":2777},{"title":2775,"token":2776,"size":124},"Padding Left * 3","--padding-left-3",[],{"type":15,"tag":106,"props":2779,"children":2782},{"title":2780,"token":2781,"size":124},"Padding Left * 4","--padding-left-4",[],{"type":15,"tag":106,"props":2784,"children":2787},{"title":2785,"token":2786,"size":124},"Padding Left * 5","--padding-left-5",[],{"type":15,"tag":106,"props":2789,"children":2792},{"title":2790,"token":2791,"size":124},"Padding Left * 1 / 5","--padding-left-1-5",[],{"type":15,"tag":106,"props":2794,"children":2797},{"title":2795,"token":2796,"size":124},"Padding Left * 1 / 4","--padding-left-1-4",[],{"type":15,"tag":106,"props":2799,"children":2802},{"title":2800,"token":2801,"size":124},"Padding Left * 1 / 3","--padding-left-1-3",[],{"type":15,"tag":106,"props":2804,"children":2807},{"title":2805,"token":2806,"size":124},"Padding Left * 1 / 2","--padding-left-1-2",[],{"type":15,"tag":106,"props":2809,"children":2812},{"title":2810,"token":2811,"size":124},"Padding Left * 2 / 3","--padding-left-2-3",[],{"type":15,"tag":106,"props":2814,"children":2817},{"title":2815,"token":2816,"size":124},"Padding Left * 3 / 4","--padding-left-3-4",[],{"type":15,"tag":106,"props":2819,"children":2822},{"title":2820,"token":2821},"Padding","--padding",[2823,2828],{"type":15,"tag":30,"props":2824,"children":2825},{},[2826],{"type":21,"value":2827},"Design token used to set the padding value for all four sides of an element. This value is composed automatically based on the four individual side values documented above.",{"type":15,"tag":117,"props":2829,"children":2830},{"v-slot:variants":7},[2831,2836,2841,2846,2851,2856,2861,2866,2871,2876,2881,2886,2891,2896,2901],{"type":15,"tag":106,"props":2832,"children":2835},{"title":2833,"token":2834,"size":124},"Extra-small Padding","--padding-xs",[],{"type":15,"tag":106,"props":2837,"children":2840},{"title":2838,"token":2839,"size":124},"Small Padding","--padding-sm",[],{"type":15,"tag":106,"props":2842,"children":2845},{"title":2843,"token":2844,"size":124},"Medium Padding","--padding-md",[],{"type":15,"tag":106,"props":2847,"children":2850},{"title":2848,"token":2849,"size":124},"Large Padding","--padding-lg",[],{"type":15,"tag":106,"props":2852,"children":2855},{"title":2853,"token":2854,"size":124},"Extra-large Padding","--padding-xl",[],{"type":15,"tag":106,"props":2857,"children":2860},{"title":2858,"token":2859,"size":124},"Padding * 2","--padding-2",[],{"type":15,"tag":106,"props":2862,"children":2865},{"title":2863,"token":2864,"size":124},"Padding * 3","--padding-3",[],{"type":15,"tag":106,"props":2867,"children":2870},{"title":2868,"token":2869,"size":124},"Padding * 4","--padding-4",[],{"type":15,"tag":106,"props":2872,"children":2875},{"title":2873,"token":2874,"size":124},"Padding * 5","--padding-5",[],{"type":15,"tag":106,"props":2877,"children":2880},{"title":2878,"token":2879,"size":124},"Padding * 1 / 5","--padding-1-5",[],{"type":15,"tag":106,"props":2882,"children":2885},{"title":2883,"token":2884,"size":124},"Padding * 1 / 4","--padding-1-4",[],{"type":15,"tag":106,"props":2887,"children":2890},{"title":2888,"token":2889,"size":124},"Padding * 1 / 3","--padding-1-3",[],{"type":15,"tag":106,"props":2892,"children":2895},{"title":2893,"token":2894,"size":124},"Padding * 1 / 2","--padding-1-2",[],{"type":15,"tag":106,"props":2897,"children":2900},{"title":2898,"token":2899,"size":124},"Padding * 2 / 3","--padding-2-3",[],{"type":15,"tag":106,"props":2902,"children":2905},{"title":2903,"token":2904,"size":124},"Padding * 3 / 4","--padding-3-4",[],{"type":15,"tag":69,"props":2907,"children":2909},{"id":2908},"typography",[2910],{"type":21,"value":2911},"Typography",{"type":15,"tag":30,"props":2913,"children":2914},{},[2915],{"type":21,"value":2008},{"type":15,"tag":30,"props":2917,"children":2918},{},[2919],{"type":21,"value":2013},{"type":15,"tag":30,"props":2921,"children":2922},{},[2923],{"type":15,"tag":53,"props":2924,"children":2926},{"href":2925},"/docs/configuration/file#typography",[2927],{"type":21,"value":2928},"Read about typography configuration",{"type":15,"tag":102,"props":2930,"children":2931},{},[],{"type":15,"tag":106,"props":2933,"children":2936},{"title":2934,"token":2935},"Primary Font Family Base","--font-family-primary-base",[2937],{"type":15,"tag":30,"props":2938,"children":2939},{},[2940],{"type":21,"value":2941},"This value is used to define the primary font family for the body text. This variable can be set to any valid font family value, such as a specific font name, a generic font family like sans-serif, or a custom font stack.",{"type":15,"tag":106,"props":2943,"children":2946},{"title":2944,"token":2945},"Primary Font Family Monospace","--font-family-primary-monospace",[2947],{"type":15,"tag":30,"props":2948,"children":2949},{},[2950],{"type":21,"value":2951},"This value is used to define the primary monospace font family. Monospace fonts are useful for displaying code, as each character takes up the same amount of space, making it easier to align code and read it.",{"type":15,"tag":106,"props":2953,"children":2956},{"title":2954,"token":2955},"Primary Font Family Print","--font-family-primary-print",[2957],{"type":15,"tag":30,"props":2958,"children":2959},{},[2960],{"type":21,"value":2961},"This value represents the primary font family, when used for print media. This font family is typically different from the font family used for screen media and is optimized for legibility and clarity when printed on paper.",{"type":15,"tag":106,"props":2963,"children":2966},{"title":2964,"token":2965},"Secondary Font Family Base","--font-family-secondary-base",[2967],{"type":15,"tag":30,"props":2968,"children":2969},{},[2970],{"type":21,"value":2971},"This value is used to define the secondary font family used for headings and display texts. This variable can be set to any valid font family value, such as a specific font name, a generic font family like sans-serif, or a custom font stack.",{"type":15,"tag":106,"props":2973,"children":2976},{"title":2974,"token":2975},"Secondary Font Family Monospace","--font-family-secondary-monospace",[2977],{"type":15,"tag":30,"props":2978,"children":2979},{},[2980],{"type":21,"value":2981},"This value is used to define the secondary monospace font family. Monospace fonts are useful for displaying code, as each character takes up the same amount of space, making it easier to align code and read it.",{"type":15,"tag":106,"props":2983,"children":2986},{"title":2984,"token":2985},"Secondary Font Family Print","--font-family-secondary-print",[2987],{"type":15,"tag":30,"props":2988,"children":2989},{},[2990],{"type":21,"value":2991},"This value represents the secondary font family used for headings and display texts, when used for print media. This font family is typically different from the font family used for screen media and is optimized for legibility and clarity when printed on paper.",{"type":15,"tag":106,"props":2993,"children":2996},{"title":2994,"token":2995},"Extra-light Font Weight","--font-weight-extralight",[2997],{"type":15,"tag":30,"props":2998,"children":2999},{},[3000],{"type":21,"value":3001},"The extra-light font weight has a relatively low stroke contrast and is often used in display typography, particularly for headings and titles, to create a delicate and elegant appearance.",{"type":15,"tag":106,"props":3003,"children":3006},{"title":3004,"token":3005},"Light Font Weight","--font-weight-light",[3007],{"type":15,"tag":30,"props":3008,"children":3009},{},[3010],{"type":21,"value":3011},"The light font weight is often used for headings and subheadings, as it provides a subtle emphasis without overwhelming the text. It can also be used for body text in certain cases, particularly for large blocks of text where a lighter weight is easier on the eyes.",{"type":15,"tag":106,"props":3013,"children":3016},{"title":3014,"token":3015},"Normal Font Weight","--font-weight-normal",[3017],{"type":15,"tag":30,"props":3018,"children":3019},{},[3020],{"type":21,"value":3021},"The normal font weight is the default weight for most fonts and is typically equivalent to a font-weight of 400. It is considered neither too heavy nor too light and is suitable for most body text.",{"type":15,"tag":106,"props":3023,"children":3026},{"title":3024,"token":3025},"Semi-bold Font Weight","--font-weight-semibold",[3027],{"type":15,"tag":30,"props":3028,"children":3029},{},[3030],{"type":21,"value":3031},"The semi-bold font weight is slightly thicker than the normal font weight, but not as bold as a bold weight. It is typically used to add emphasis and hierarchy to headings, subheadings, and other important elements on a web page.",{"type":15,"tag":106,"props":3033,"children":3036},{"title":3034,"token":3035},"Bold Font Weight","--font-weight-bold",[3037],{"type":15,"tag":30,"props":3038,"children":3039},{},[3040],{"type":21,"value":3041},"The bold weight is a commonly used font weight in typography. It is often used for headings, subheadings, and other important text elements to make them stand out and grab the reader's attention.",{"type":15,"tag":106,"props":3043,"children":3046},{"title":3044,"token":3045},"Black Font Weight","--font-weight-black",[3047],{"type":15,"tag":30,"props":3048,"children":3049},{},[3050],{"type":21,"value":3051},"The black font weight is one of the boldest font weights available and is typically used for headings or other important text that needs to be emphasized. It is thicker than the bold font weight and can create a dramatic effect when used in the right context.",{"type":15,"tag":106,"props":3053,"children":3056},{"title":3054,"token":3055},"Lighter Font Weight","--font-weight-lighter",[3057],{"type":15,"tag":30,"props":3058,"children":3059},{},[3060],{"type":21,"value":3061},"The lighter font weight is a relative font weight value that makes the text appear lighter than the parent element's font weight.",{"type":15,"tag":106,"props":3063,"children":3066},{"title":3064,"token":3065},"Bolder Font Weight","--font-weight-bolder",[3067],{"type":15,"tag":30,"props":3068,"children":3069},{},[3070],{"type":21,"value":3071},"The bolder font weight is a relative font weight value that makes the text appear bolder than the parent element's font weight.",{"type":15,"tag":106,"props":3073,"children":3076},{"title":3074,"token":3075},"Font Size","--font-size",[3077,3082],{"type":15,"tag":30,"props":3078,"children":3079},{},[3080],{"type":21,"value":3081},"This value allows you to define the base font size for all elements of the UI.",{"type":15,"tag":117,"props":3083,"children":3084},{"v-slot:variants":7},[3085,3090,3095,3099,3103],{"type":15,"tag":106,"props":3086,"children":3089},{"title":3087,"token":3088},"Extra-small Font Size","--font-size-xs",[],{"type":15,"tag":106,"props":3091,"children":3094},{"title":3092,"token":3093},"Small Font Size","--font-size-sm",[],{"type":15,"tag":106,"props":3096,"children":3098},{"title":3092,"token":3097},"--font-size-md",[],{"type":15,"tag":106,"props":3100,"children":3102},{"title":3092,"token":3101},"--font-size-lg",[],{"type":15,"tag":106,"props":3104,"children":3106},{"title":3092,"token":3105},"--font-size-xl",[],{"type":15,"tag":106,"props":3108,"children":3111},{"title":3109,"token":3110},"Line Height","--line-height",[3112],{"type":15,"tag":30,"props":3113,"children":3114},{},[3115],{"type":21,"value":3116},"Line height refers to the amount of vertical space between lines of text. It can affect the readability, legibility, and overall aesthetic of your text.",{"type":15,"tag":106,"props":3118,"children":3121},{"title":3119,"token":3120},"Letter Spacing","--letter-spacing",[3122],{"type":15,"tag":30,"props":3123,"children":3124},{},[3125],{"type":21,"value":3126},"Letter spacing (also known as tracking) refers to the amount of horizontal space between letters in a word or block of text.  It can affect the legibility, readability, and overall aesthetic of your text.",{"title":7,"searchDepth":3128,"depth":3128,"links":3129},2,[3130],{"id":26,"depth":3128,"text":9,"children":3131},[3132,3134,3135,3136,3137,3138,3139,3140,3141,3142,3143,3144],{"id":71,"depth":3133,"text":74},3,{"id":951,"depth":3133,"text":954},{"id":996,"depth":3133,"text":999},{"id":1169,"depth":3133,"text":1172},{"id":1381,"depth":3133,"text":1384},{"id":1468,"depth":3133,"text":1471},{"id":1621,"depth":3133,"text":1624},{"id":1665,"depth":3133,"text":1668},{"id":1741,"depth":3133,"text":1744},{"id":1877,"depth":3133,"text":1880},{"id":2000,"depth":3133,"text":2003},{"id":2908,"depth":3133,"text":2911},"markdown","content:docs:ui:design-tokens.md","content","docs/ui/design-tokens.md",1794582257128]