[{"data":1,"prerenderedAt":1110},["ShallowReactive",2],{"guide-border-radius-design-systems":3},{"id":4,"title":5,"body":6,"date":1100,"description":1101,"extension":1102,"meta":1103,"navigation":347,"path":1106,"readingTime":228,"seo":1107,"stem":1108,"__hash__":1109},"guides\u002Fguides\u002Fborder-radius-design-systems.md","Border Radius in Design Systems: Tokens, Consistency, and Scale",{"type":7,"value":8,"toc":1084},"minimark",[9,14,31,34,38,41,141,262,277,281,288,391,394,419,422,426,431,434,442,445,449,452,458,461,465,482,486,489,624,627,631,634,734,738,741,903,910,1017,1021,1047,1051,1060,1064,1080],[10,11,13],"h2",{"id":12},"why-radius-tokens-matter","Why Radius Tokens Matter",[15,16,17,18,22,23,26,27,30],"p",{},"A design system without radius tokens inevitably suffers from inconsistent rounding. One developer uses ",[19,20,21],"code",{},"8px",", another uses ",[19,24,25],{},"10px",", and somewhere a designer specified ",[19,28,29],{},"0.5rem",". The result is a UI where buttons, cards, inputs, and modals each feel slightly different — a subtle but persistent sense that something is off.",[15,32,33],{},"Radius tokens solve this by constraining choice to a curated set of values, enforced through CSS custom properties and design tool configurations.",[10,35,37],{"id":36},"defining-a-radius-scale","Defining a Radius Scale",[15,39,40],{},"Most design systems need 4–6 radius levels. Here is a proven scale:",[42,43,44,60],"table",{},[45,46,47],"thead",{},[48,49,50,54,57],"tr",{},[51,52,53],"th",{},"Token",[51,55,56],{},"Value",[51,58,59],{},"Use Case",[61,62,63,77,90,102,115,128],"tbody",{},[48,64,65,71,74],{},[66,67,68],"td",{},[19,69,70],{},"--radius-none",[66,72,73],{},"0",[66,75,76],{},"Tooltips, tight-fitting overlays",[48,78,79,84,87],{},[66,80,81],{},[19,82,83],{},"--radius-sm",[66,85,86],{},"4px",[66,88,89],{},"Small elements: badges, tags, checkboxes",[48,91,92,97,99],{},[66,93,94],{},[19,95,96],{},"--radius-md",[66,98,21],{},[66,100,101],{},"Inputs, buttons, chips",[48,103,104,109,112],{},[66,105,106],{},[19,107,108],{},"--radius-lg",[66,110,111],{},"12px",[66,113,114],{},"Cards, modals, dropdowns",[48,116,117,122,125],{},[66,118,119],{},[19,120,121],{},"--radius-xl",[66,123,124],{},"16px",[66,126,127],{},"Feature cards, image containers",[48,129,130,135,138],{},[66,131,132],{},[19,133,134],{},"--radius-full",[66,136,137],{},"9999px",[66,139,140],{},"Avatars, pills, circular buttons",[142,143,148],"pre",{"className":144,"code":145,"language":146,"meta":147,"style":147},"language-css shiki shiki-themes github-light github-dark",":root {\n  --radius-none: 0;\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 12px;\n  --radius-xl: 16px;\n  --radius-full: 9999px;\n}\n","css","",[19,149,150,163,179,196,211,226,241,256],{"__ignoreMap":147},[151,152,155,159],"span",{"class":153,"line":154},"line",1,[151,156,158],{"class":157},"sScJk",":root",[151,160,162],{"class":161},"sVt8B"," {\n",[151,164,166,170,173,176],{"class":153,"line":165},2,[151,167,169],{"class":168},"s4XuR","  --radius-none",[151,171,172],{"class":161},": ",[151,174,73],{"class":175},"sj4cs",[151,177,178],{"class":161},";\n",[151,180,182,185,187,190,194],{"class":153,"line":181},3,[151,183,184],{"class":168},"  --radius-sm",[151,186,172],{"class":161},[151,188,189],{"class":175},"4",[151,191,193],{"class":192},"szBVR","px",[151,195,178],{"class":161},[151,197,199,202,204,207,209],{"class":153,"line":198},4,[151,200,201],{"class":168},"  --radius-md",[151,203,172],{"class":161},[151,205,206],{"class":175},"8",[151,208,193],{"class":192},[151,210,178],{"class":161},[151,212,214,217,219,222,224],{"class":153,"line":213},5,[151,215,216],{"class":168},"  --radius-lg",[151,218,172],{"class":161},[151,220,221],{"class":175},"12",[151,223,193],{"class":192},[151,225,178],{"class":161},[151,227,229,232,234,237,239],{"class":153,"line":228},6,[151,230,231],{"class":168},"  --radius-xl",[151,233,172],{"class":161},[151,235,236],{"class":175},"16",[151,238,193],{"class":192},[151,240,178],{"class":161},[151,242,244,247,249,252,254],{"class":153,"line":243},7,[151,245,246],{"class":168},"  --radius-full",[151,248,172],{"class":161},[151,250,251],{"class":175},"9999",[151,253,193],{"class":192},[151,255,178],{"class":161},[151,257,259],{"class":153,"line":258},8,[151,260,261],{"class":161},"}\n",[15,263,264,265,267,268,271,272,267,274,276],{},"The jump between levels should be noticeable. If ",[19,266,83],{}," is ",[19,269,270],{},"6px"," and ",[19,273,96],{},[19,275,21],{},", the visual difference is too small to justify separate tokens.",[10,278,280],{"id":279},"semantic-naming","Semantic Naming",[15,282,283,284,287],{},"Avoid naming tokens after their values (",[19,285,286],{},"--radius-8px",") — rename every token when the scale changes. Instead, use semantic names that describe the element size or context:",[142,289,291],{"className":144,"code":290,"language":146,"meta":147,"style":147},"\u002F* ✅ Semantic — survives value changes *\u002F\n.button { border-radius: var(--radius-md); }\n.card   { border-radius: var(--radius-lg); }\n\n\u002F* ❌ Literal — tightly coupled to current values *\u002F\n.button { border-radius: var(--radius-8px); }\n.card   { border-radius: var(--radius-12px); }\n",[19,292,293,299,323,343,349,354,372],{"__ignoreMap":147},[151,294,295],{"class":153,"line":154},[151,296,298],{"class":297},"sJ8bj","\u002F* ✅ Semantic — survives value changes *\u002F\n",[151,300,301,304,307,310,312,315,318,320],{"class":153,"line":165},[151,302,303],{"class":157},".button",[151,305,306],{"class":161}," { ",[151,308,309],{"class":175},"border-radius",[151,311,172],{"class":161},[151,313,314],{"class":175},"var",[151,316,317],{"class":161},"(",[151,319,96],{"class":168},[151,321,322],{"class":161},"); }\n",[151,324,325,328,331,333,335,337,339,341],{"class":153,"line":181},[151,326,327],{"class":157},".card",[151,329,330],{"class":161},"   { ",[151,332,309],{"class":175},[151,334,172],{"class":161},[151,336,314],{"class":175},[151,338,317],{"class":161},[151,340,108],{"class":168},[151,342,322],{"class":161},[151,344,345],{"class":153,"line":198},[151,346,348],{"emptyLinePlaceholder":347},true,"\n",[151,350,351],{"class":153,"line":213},[151,352,353],{"class":297},"\u002F* ❌ Literal — tightly coupled to current values *\u002F\n",[151,355,356,358,360,362,364,366,368,370],{"class":153,"line":228},[151,357,303],{"class":157},[151,359,306],{"class":161},[151,361,309],{"class":175},[151,363,172],{"class":161},[151,365,314],{"class":175},[151,367,317],{"class":161},[151,369,286],{"class":168},[151,371,322],{"class":161},[151,373,374,376,378,380,382,384,386,389],{"class":153,"line":243},[151,375,327],{"class":157},[151,377,330],{"class":161},[151,379,309],{"class":175},[151,381,172],{"class":161},[151,383,314],{"class":175},[151,385,317],{"class":161},[151,387,388],{"class":168},"--radius-12px",[151,390,322],{"class":161},[15,392,393],{},"For teams that prefer contextual naming over size-based naming:",[142,395,397],{"className":144,"code":396,"language":146,"meta":147,"style":147},"--radius-button: var(--radius-md);\n--radius-card: var(--radius-lg);\n--radius-input: var(--radius-md);\n--radius-avatar: var(--radius-full);\n",[19,398,399,404,409,414],{"__ignoreMap":147},[151,400,401],{"class":153,"line":154},[151,402,403],{"class":161},"--radius-button: var(--radius-md);\n",[151,405,406],{"class":153,"line":165},[151,407,408],{"class":161},"--radius-card: var(--radius-lg);\n",[151,410,411],{"class":153,"line":181},[151,412,413],{"class":161},"--radius-input: var(--radius-md);\n",[151,415,416],{"class":153,"line":198},[151,417,418],{"class":161},"--radius-avatar: var(--radius-full);\n",[15,420,421],{},"This adds a layer of indirection but makes intent clearer and allows per-component overrides.",[10,423,425],{"id":424},"scaling-strategy","Scaling Strategy",[427,428,430],"h3",{"id":429},"linear-scale","Linear Scale",[15,432,433],{},"Each step increases by the same amount:",[142,435,440],{"className":436,"code":438,"language":439},[437],"language-text","0, 4px, 8px, 12px, 16px, 20px\n","text",[19,441,438],{"__ignoreMap":147},[15,443,444],{},"Simple and predictable. Works well for utilitarian interfaces where subtlety is not needed.",[427,446,448],{"id":447},"non-linear-scale","Non-Linear Scale",[15,450,451],{},"Larger steps at higher levels create visual emphasis:",[142,453,456],{"className":454,"code":455,"language":439},[437],"0, 2px, 4px, 8px, 16px, 9999px\n",[19,457,455],{"__ignoreMap":147},[15,459,460],{},"This mirrors how people perceive size differences — a 2px change matters more at small sizes than at large ones.",[427,462,464],{"id":463},"which-to-choose","Which to Choose",[466,467,468,476],"ul",{},[469,470,471,475],"li",{},[472,473,474],"strong",{},"Linear"," for enterprise\u002Finternal tools where consistency matters more than personality",[469,477,478,481],{},[472,479,480],{},"Non-linear"," for consumer-facing products where visual hierarchy drives engagement",[10,483,485],{"id":484},"responsive-radius","Responsive Radius",[15,487,488],{},"On small screens, large radii eat into content area. Scale down radii on mobile:",[142,490,492],{"className":144,"code":491,"language":146,"meta":147,"style":147},":root {\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 12px;\n  --radius-xl: 16px;\n}\n\n@media (max-width: 640px) {\n  :root {\n    --radius-lg: 8px;\n    --radius-xl: 12px;\n  }\n}\n",[19,493,494,500,512,524,536,548,552,556,577,585,599,613,619],{"__ignoreMap":147},[151,495,496,498],{"class":153,"line":154},[151,497,158],{"class":157},[151,499,162],{"class":161},[151,501,502,504,506,508,510],{"class":153,"line":165},[151,503,184],{"class":168},[151,505,172],{"class":161},[151,507,189],{"class":175},[151,509,193],{"class":192},[151,511,178],{"class":161},[151,513,514,516,518,520,522],{"class":153,"line":181},[151,515,201],{"class":168},[151,517,172],{"class":161},[151,519,206],{"class":175},[151,521,193],{"class":192},[151,523,178],{"class":161},[151,525,526,528,530,532,534],{"class":153,"line":198},[151,527,216],{"class":168},[151,529,172],{"class":161},[151,531,221],{"class":175},[151,533,193],{"class":192},[151,535,178],{"class":161},[151,537,538,540,542,544,546],{"class":153,"line":213},[151,539,231],{"class":168},[151,541,172],{"class":161},[151,543,236],{"class":175},[151,545,193],{"class":192},[151,547,178],{"class":161},[151,549,550],{"class":153,"line":228},[151,551,261],{"class":161},[151,553,554],{"class":153,"line":243},[151,555,348],{"emptyLinePlaceholder":347},[151,557,558,561,564,567,569,572,574],{"class":153,"line":258},[151,559,560],{"class":192},"@media",[151,562,563],{"class":161}," (",[151,565,566],{"class":175},"max-width",[151,568,172],{"class":161},[151,570,571],{"class":175},"640",[151,573,193],{"class":192},[151,575,576],{"class":161},") {\n",[151,578,580,583],{"class":153,"line":579},9,[151,581,582],{"class":157},"  :root",[151,584,162],{"class":161},[151,586,588,591,593,595,597],{"class":153,"line":587},10,[151,589,590],{"class":168},"    --radius-lg",[151,592,172],{"class":161},[151,594,206],{"class":175},[151,596,193],{"class":192},[151,598,178],{"class":161},[151,600,602,605,607,609,611],{"class":153,"line":601},11,[151,603,604],{"class":168},"    --radius-xl",[151,606,172],{"class":161},[151,608,221],{"class":175},[151,610,193],{"class":192},[151,612,178],{"class":161},[151,614,616],{"class":153,"line":615},12,[151,617,618],{"class":161},"  }\n",[151,620,622],{"class":153,"line":621},13,[151,623,261],{"class":161},[15,625,626],{},"This preserves the token hierarchy while reducing the visual weight of rounded corners on constrained viewports.",[10,628,630],{"id":629},"dark-mode-considerations","Dark Mode Considerations",[15,632,633],{},"Rounded corners can create visual ambiguity in dark mode when two dark elements overlap without visible borders. Ensure sufficient contrast between nested rounded elements:",[142,635,637],{"className":144,"code":636,"language":146,"meta":147,"style":147},"\u002F* Light mode: subtle border provides separation *\u002F\n.card {\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n}\n\n\u002F* Dark mode: increase border visibility *\u002F\n:root.dark .card {\n  border-color: var(--color-border-strong);\n}\n",[19,638,639,644,650,676,691,695,699,704,714,730],{"__ignoreMap":147},[151,640,641],{"class":153,"line":154},[151,642,643],{"class":297},"\u002F* Light mode: subtle border provides separation *\u002F\n",[151,645,646,648],{"class":153,"line":165},[151,647,327],{"class":157},[151,649,162],{"class":161},[151,651,652,655,657,660,662,665,668,670,673],{"class":153,"line":181},[151,653,654],{"class":175},"  border",[151,656,172],{"class":161},[151,658,659],{"class":175},"1",[151,661,193],{"class":192},[151,663,664],{"class":175}," solid",[151,666,667],{"class":175}," var",[151,669,317],{"class":161},[151,671,672],{"class":168},"--color-border",[151,674,675],{"class":161},");\n",[151,677,678,681,683,685,687,689],{"class":153,"line":198},[151,679,680],{"class":175},"  border-radius",[151,682,172],{"class":161},[151,684,314],{"class":175},[151,686,317],{"class":161},[151,688,108],{"class":168},[151,690,675],{"class":161},[151,692,693],{"class":153,"line":213},[151,694,261],{"class":161},[151,696,697],{"class":153,"line":228},[151,698,348],{"emptyLinePlaceholder":347},[151,700,701],{"class":153,"line":243},[151,702,703],{"class":297},"\u002F* Dark mode: increase border visibility *\u002F\n",[151,705,706,709,712],{"class":153,"line":258},[151,707,708],{"class":157},":root.dark",[151,710,711],{"class":157}," .card",[151,713,162],{"class":161},[151,715,716,719,721,723,725,728],{"class":153,"line":579},[151,717,718],{"class":175},"  border-color",[151,720,172],{"class":161},[151,722,314],{"class":175},[151,724,317],{"class":161},[151,726,727],{"class":168},"--color-border-strong",[151,729,675],{"class":161},[151,731,732],{"class":153,"line":587},[151,733,261],{"class":161},[10,735,737],{"id":736},"integration-with-component-libraries","Integration with Component Libraries",[15,739,740],{},"When building components that accept a radius prop, map to tokens rather than accepting arbitrary values:",[142,742,746],{"className":743,"code":744,"language":745,"meta":147,"style":147},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`rounded-${props.radius ?? 'md'}`\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[19,747,748,773,790,827,832,841,845,854,872,886,895],{"__ignoreMap":147},[151,749,750,753,757,760,763,766,770],{"class":153,"line":154},[151,751,752],{"class":161},"\u003C",[151,754,756],{"class":755},"s9eBZ","script",[151,758,759],{"class":157}," setup",[151,761,762],{"class":157}," lang",[151,764,765],{"class":161},"=",[151,767,769],{"class":768},"sZZnC","\"ts\"",[151,771,772],{"class":161},">\n",[151,774,775,778,781,784,787],{"class":153,"line":165},[151,776,777],{"class":192},"const",[151,779,780],{"class":175}," props",[151,782,783],{"class":192}," =",[151,785,786],{"class":157}," defineProps",[151,788,789],{"class":161},"\u003C{\n",[151,791,792,795,798,801,804,807,809,812,814,817,819,822,824],{"class":153,"line":181},[151,793,794],{"class":168},"  radius",[151,796,797],{"class":192},"?:",[151,799,800],{"class":768}," 'none'",[151,802,803],{"class":192}," |",[151,805,806],{"class":768}," 'sm'",[151,808,803],{"class":192},[151,810,811],{"class":768}," 'md'",[151,813,803],{"class":192},[151,815,816],{"class":768}," 'lg'",[151,818,803],{"class":192},[151,820,821],{"class":768}," 'xl'",[151,823,803],{"class":192},[151,825,826],{"class":768}," 'full'\n",[151,828,829],{"class":153,"line":198},[151,830,831],{"class":161},"}>()\n",[151,833,834,837,839],{"class":153,"line":213},[151,835,836],{"class":161},"\u003C\u002F",[151,838,756],{"class":755},[151,840,772],{"class":161},[151,842,843],{"class":153,"line":228},[151,844,348],{"emptyLinePlaceholder":347},[151,846,847,849,852],{"class":153,"line":243},[151,848,752],{"class":161},[151,850,851],{"class":755},"template",[151,853,772],{"class":161},[151,855,856,859,862,865,867,870],{"class":153,"line":258},[151,857,858],{"class":161},"  \u003C",[151,860,861],{"class":755},"div",[151,863,864],{"class":157}," :class",[151,866,765],{"class":161},[151,868,869],{"class":768},"\"`rounded-${props.radius ?? 'md'}`\"",[151,871,772],{"class":161},[151,873,874,877,880,884],{"class":153,"line":579},[151,875,876],{"class":161},"    \u003C",[151,878,879],{"class":755},"slot",[151,881,883],{"class":882},"s7hpK"," \u002F",[151,885,772],{"class":161},[151,887,888,891,893],{"class":153,"line":587},[151,889,890],{"class":161},"  \u003C\u002F",[151,892,861],{"class":755},[151,894,772],{"class":161},[151,896,897,899,901],{"class":153,"line":601},[151,898,836],{"class":161},[151,900,851],{"class":755},[151,902,772],{"class":161},[15,904,905,906,909],{},"With Tailwind CSS, use the configured radius tokens in ",[19,907,908],{},"tailwind.config.ts",":",[142,911,915],{"className":912,"code":913,"language":914,"meta":147,"style":147},"language-typescript shiki shiki-themes github-light github-dark","export default defineConfig({\n  theme: {\n    borderRadius: {\n      none: '0',\n      sm: 'var(--radius-sm)',\n      md: 'var(--radius-md)',\n      lg: 'var(--radius-lg)',\n      xl: 'var(--radius-xl)',\n      full: '9999px',\n    },\n  },\n})\n","typescript",[19,916,917,931,936,941,952,962,972,982,992,1002,1007,1012],{"__ignoreMap":147},[151,918,919,922,925,928],{"class":153,"line":154},[151,920,921],{"class":192},"export",[151,923,924],{"class":192}," default",[151,926,927],{"class":157}," defineConfig",[151,929,930],{"class":161},"({\n",[151,932,933],{"class":153,"line":165},[151,934,935],{"class":161},"  theme: {\n",[151,937,938],{"class":153,"line":181},[151,939,940],{"class":161},"    borderRadius: {\n",[151,942,943,946,949],{"class":153,"line":198},[151,944,945],{"class":161},"      none: ",[151,947,948],{"class":768},"'0'",[151,950,951],{"class":161},",\n",[151,953,954,957,960],{"class":153,"line":213},[151,955,956],{"class":161},"      sm: ",[151,958,959],{"class":768},"'var(--radius-sm)'",[151,961,951],{"class":161},[151,963,964,967,970],{"class":153,"line":228},[151,965,966],{"class":161},"      md: ",[151,968,969],{"class":768},"'var(--radius-md)'",[151,971,951],{"class":161},[151,973,974,977,980],{"class":153,"line":243},[151,975,976],{"class":161},"      lg: ",[151,978,979],{"class":768},"'var(--radius-lg)'",[151,981,951],{"class":161},[151,983,984,987,990],{"class":153,"line":258},[151,985,986],{"class":161},"      xl: ",[151,988,989],{"class":768},"'var(--radius-xl)'",[151,991,951],{"class":161},[151,993,994,997,1000],{"class":153,"line":579},[151,995,996],{"class":161},"      full: ",[151,998,999],{"class":768},"'9999px'",[151,1001,951],{"class":161},[151,1003,1004],{"class":153,"line":587},[151,1005,1006],{"class":161},"    },\n",[151,1008,1009],{"class":153,"line":601},[151,1010,1011],{"class":161},"  },\n",[151,1013,1014],{"class":153,"line":615},[151,1015,1016],{"class":161},"})\n",[10,1018,1020],{"id":1019},"key-takeaways","Key Takeaways",[466,1022,1023,1026,1035,1038,1041,1044],{},[469,1024,1025],{},"Define 4–6 radius tokens to constrain choice and enforce consistency",[469,1027,1028,1029,1031,1032,1034],{},"Use semantic naming (",[19,1030,83],{},") over literal naming (",[19,1033,286],{},")",[469,1036,1037],{},"Linear scales suit utilitarian UIs; non-linear scales add visual personality",[469,1039,1040],{},"Reduce radii on mobile to preserve content area",[469,1042,1043],{},"Dark mode may need stronger borders at rounded intersections",[469,1045,1046],{},"Components should accept token names, not arbitrary pixel values",[10,1048,1050],{"id":1049},"try-it-yourself","Try It Yourself",[15,1052,1053,1054,1059],{},"Preview border-radius values across different element sizes with our ",[1055,1056,1058],"a",{"href":1057},"\u002Ftools\u002Fborder-radius","Border Radius Generator",". Test individual corners, copy CSS custom property definitions, and experiment with responsive adjustments.",[10,1061,1063],{"id":1062},"related-guides","Related Guides",[466,1065,1066,1073],{},[469,1067,1068,1072],{},[1055,1069,1071],{"href":1070},"\u002Fguides\u002Fborder-radius-guide","Border Radius Guide"," — complete syntax and individual corner control",[469,1074,1075,1079],{},[1055,1076,1078],{"href":1077},"\u002Fguides\u002Fcomplex-css-shapes","Complex CSS Shapes"," — pushing border-radius into organic and geometric forms",[1081,1082,1083],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":147,"searchDepth":165,"depth":165,"links":1085},[1086,1087,1088,1089,1094,1095,1096,1097,1098,1099],{"id":12,"depth":165,"text":13},{"id":36,"depth":165,"text":37},{"id":279,"depth":165,"text":280},{"id":424,"depth":165,"text":425,"children":1090},[1091,1092,1093],{"id":429,"depth":181,"text":430},{"id":447,"depth":181,"text":448},{"id":463,"depth":181,"text":464},{"id":484,"depth":165,"text":485},{"id":629,"depth":165,"text":630},{"id":736,"depth":165,"text":737},{"id":1019,"depth":165,"text":1020},{"id":1049,"depth":165,"text":1050},{"id":1062,"depth":165,"text":1063},"2026-05-28","Learn how to define and manage border-radius tokens in a design system. Covers scaling strategies, semantic naming, and responsive adaptations.","md",{"keywords":1104,"immutable":347},[309,1105],"border-radius-design-systems","\u002Fguides\u002Fborder-radius-design-systems",{"title":5,"description":1101},"guides\u002Fborder-radius-design-systems","81KbtIveQyNzHLyjeBXMadxN6CJYAhUjQJ9GCP-7WSU",1780401331865]