[{"data":1,"prerenderedAt":4008},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-scales":407,"-docs-theme-design-tokens-composables-scales-surround":4003},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3995,"extension":3996,"links":3997,"meta":3998,"navigation":3999,"path":209,"seo":4000,"sitemap":4001,"stem":210,"__hash__":4002},"docs_theme/docs/theme/design-tokens/02.composables/08.scales.md","Scales Design Tokens",{"type":411,"value":412,"toc":3979},"minimark",[413,417,421,425,428,457,464,475,870,873,884,903,908,911,1179,1208,1216,1222,1228,1518,1536,1539,1544,1550,1558,2242,2247,2262,2277,2281,2285,2288,2883,2889,2893,2896,3619,3623,3626,3753,3757,3795,3801,3805,3975],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"The scale composables help you create harmonious, proportional design systems using modular scales. They generate scale variables based on mathematical ratios and powers, enabling consistent sizing relationships across typography, spacing, and other design elements.",[414,422,424],{"id":423},"why-use-scale-composables","Why use scale composables?",[418,426,427],{},"Scale composables help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Create harmonious proportions",": Use time-tested ratios from music theory and mathematics for visually pleasing designs.",[432,440,441,444],{},[435,442,443],{},"Maintain consistency",": Apply the same scale ratio across all sizing decisions for a cohesive design system.",[432,446,447,450],{},[435,448,449],{},"Scale systematically",": Generate size variations using powers of your base scale for predictable growth.",[432,452,453,456],{},[435,454,455],{},"Simplify sizing decisions",": Replace arbitrary values with a systematic approach to sizing.",[414,458,460],{"id":459},"usescaledesigntokens",[461,462,463],"code",{},"useScaleDesignTokens",[418,465,466,467,470,471,474],{},"The ",[461,468,469],{},"useScaleDesignTokens()"," function creates a set of predefined scale ratio variables based on musical intervals and the golden ratio. It also creates a default ",[461,472,473],{},"scale"," variable that references one of the predefined scales.",[476,477,478,728],"tabs",{},[479,480,483],"tabs-item",{"icon":481,"label":482},"i-lucide-code","Code",[484,485,491],"pre",{"className":486,"code":487,"filename":488,"language":489,"meta":490,"style":490},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    scaleMinorSecond,      // 1.067\n    scaleMajorSecond,      // 1.125\n    scaleMinorThird,       // 1.2\n    scaleMajorThird,       // 1.25\n    scalePerfectFourth,    // 1.333\n    scaleAugmentedFourth,  // 1.414\n    scalePerfectFifth,     // 1.5\n    scaleGolden,           // 1.618\n    scale,                 // References minor-third by default\n} = useScaleDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[461,492,493,529,552,558,579,584,592,605,616,627,638,649,660,671,682,693,709,714],{"__ignoreMap":490},[494,495,498,502,506,510,513,516,519,523,526],"span",{"class":496,"line":497},"line",1,[494,499,501],{"class":500},"s7zQu","import",[494,503,505],{"class":504},"sMK4o"," {",[494,507,509],{"class":508},"sTEyZ"," styleframe",[494,511,512],{"class":504}," }",[494,514,515],{"class":500}," from",[494,517,518],{"class":504}," '",[494,520,522],{"class":521},"sfazB","styleframe",[494,524,525],{"class":504},"'",[494,527,528],{"class":504},";\n",[494,530,532,534,536,539,541,543,545,548,550],{"class":496,"line":531},2,[494,533,501],{"class":500},[494,535,505],{"class":504},[494,537,538],{"class":508}," useScaleDesignTokens",[494,540,512],{"class":504},[494,542,515],{"class":500},[494,544,518],{"class":504},[494,546,547],{"class":521},"@styleframe/theme",[494,549,525],{"class":504},[494,551,528],{"class":504},[494,553,555],{"class":496,"line":554},3,[494,556,557],{"emptyLinePlaceholder":206},"\n",[494,559,561,565,568,571,574,577],{"class":496,"line":560},4,[494,562,564],{"class":563},"spNyl","const",[494,566,567],{"class":508}," s ",[494,569,570],{"class":504},"=",[494,572,509],{"class":573},"s2Zo4",[494,575,576],{"class":508},"()",[494,578,528],{"class":504},[494,580,582],{"class":496,"line":581},5,[494,583,557],{"emptyLinePlaceholder":206},[494,585,587,589],{"class":496,"line":586},6,[494,588,564],{"class":563},[494,590,591],{"class":504}," {\n",[494,593,595,598,601],{"class":496,"line":594},7,[494,596,597],{"class":508},"    scaleMinorSecond",[494,599,600],{"class":504},",",[494,602,604],{"class":603},"sHwdD","      // 1.067\n",[494,606,608,611,613],{"class":496,"line":607},8,[494,609,610],{"class":508},"    scaleMajorSecond",[494,612,600],{"class":504},[494,614,615],{"class":603},"      // 1.125\n",[494,617,619,622,624],{"class":496,"line":618},9,[494,620,621],{"class":508},"    scaleMinorThird",[494,623,600],{"class":504},[494,625,626],{"class":603},"       // 1.2\n",[494,628,630,633,635],{"class":496,"line":629},10,[494,631,632],{"class":508},"    scaleMajorThird",[494,634,600],{"class":504},[494,636,637],{"class":603},"       // 1.25\n",[494,639,641,644,646],{"class":496,"line":640},11,[494,642,643],{"class":508},"    scalePerfectFourth",[494,645,600],{"class":504},[494,647,648],{"class":603},"    // 1.333\n",[494,650,652,655,657],{"class":496,"line":651},12,[494,653,654],{"class":508},"    scaleAugmentedFourth",[494,656,600],{"class":504},[494,658,659],{"class":603},"  // 1.414\n",[494,661,663,666,668],{"class":496,"line":662},13,[494,664,665],{"class":508},"    scalePerfectFifth",[494,667,600],{"class":504},[494,669,670],{"class":603},"     // 1.5\n",[494,672,674,677,679],{"class":496,"line":673},14,[494,675,676],{"class":508},"    scaleGolden",[494,678,600],{"class":504},[494,680,681],{"class":603},"           // 1.618\n",[494,683,685,688,690],{"class":496,"line":684},15,[494,686,687],{"class":508},"    scale",[494,689,600],{"class":504},[494,691,692],{"class":603},"                 // References minor-third by default\n",[494,694,696,699,702,704,707],{"class":496,"line":695},16,[494,697,698],{"class":504},"}",[494,700,701],{"class":504}," =",[494,703,538],{"class":573},[494,705,706],{"class":508},"(s)",[494,708,528],{"class":504},[494,710,712],{"class":496,"line":711},17,[494,713,557],{"emptyLinePlaceholder":206},[494,715,717,720,723,726],{"class":496,"line":716},18,[494,718,719],{"class":500},"export",[494,721,722],{"class":500}," default",[494,724,725],{"class":508}," s",[494,727,528],{"class":504},[479,729,731],{"icon":140,"label":730},"Output",[484,732,737],{"className":733,"code":734,"filename":735,"language":736,"meta":490,"style":490},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --scale--minor-second: 1.067;\n    --scale--major-second: 1.125;\n    --scale--minor-third: 1.2;\n    --scale--major-third: 1.25;\n    --scale--perfect-fourth: 1.333;\n    --scale--augmented-fourth: 1.414;\n    --scale--perfect-fifth: 1.5;\n    --scale--golden: 1.618;\n    --scale: var(--scale--minor-third);\n}\n","styleframe/index.css","css",[461,738,739,749,762,774,786,798,810,822,834,846,865],{"__ignoreMap":490},[494,740,741,744,747],{"class":496,"line":497},[494,742,743],{"class":504},":",[494,745,746],{"class":563},"root",[494,748,591],{"class":504},[494,750,751,754,756,760],{"class":496,"line":531},[494,752,753],{"class":508},"    --scale--minor-second",[494,755,743],{"class":504},[494,757,759],{"class":758},"sbssI"," 1.067",[494,761,528],{"class":504},[494,763,764,767,769,772],{"class":496,"line":554},[494,765,766],{"class":508},"    --scale--major-second",[494,768,743],{"class":504},[494,770,771],{"class":758}," 1.125",[494,773,528],{"class":504},[494,775,776,779,781,784],{"class":496,"line":560},[494,777,778],{"class":508},"    --scale--minor-third",[494,780,743],{"class":504},[494,782,783],{"class":758}," 1.2",[494,785,528],{"class":504},[494,787,788,791,793,796],{"class":496,"line":581},[494,789,790],{"class":508},"    --scale--major-third",[494,792,743],{"class":504},[494,794,795],{"class":758}," 1.25",[494,797,528],{"class":504},[494,799,800,803,805,808],{"class":496,"line":586},[494,801,802],{"class":508},"    --scale--perfect-fourth",[494,804,743],{"class":504},[494,806,807],{"class":758}," 1.333",[494,809,528],{"class":504},[494,811,812,815,817,820],{"class":496,"line":594},[494,813,814],{"class":508},"    --scale--augmented-fourth",[494,816,743],{"class":504},[494,818,819],{"class":758}," 1.414",[494,821,528],{"class":504},[494,823,824,827,829,832],{"class":496,"line":607},[494,825,826],{"class":508},"    --scale--perfect-fifth",[494,828,743],{"class":504},[494,830,831],{"class":758}," 1.5",[494,833,528],{"class":504},[494,835,836,839,841,844],{"class":496,"line":618},[494,837,838],{"class":508},"    --scale--golden",[494,840,743],{"class":504},[494,842,843],{"class":758}," 1.618",[494,845,528],{"class":504},[494,847,848,851,853,856,859,862],{"class":496,"line":629},[494,849,850],{"class":508},"    --scale",[494,852,743],{"class":504},[494,854,855],{"class":573}," var",[494,857,858],{"class":504},"(",[494,860,861],{"class":508},"--scale--minor-third",[494,863,864],{"class":504},");\n",[494,866,867],{"class":496,"line":640},[494,868,869],{"class":504},"}\n",[418,871,872],{},"Each scale ratio is named after its musical interval or mathematical origin. These ratios have been used in design and architecture for centuries to create harmonious proportions.",[418,874,466,875,877,878,880,881,883],{},[461,876,473],{}," variable is a convenient reference to your chosen default scale. By default, it references ",[461,879,861],{},", but you can customize this by passing a second argument to ",[461,882,469],{},".",[885,886,887,890,891,894,895,898,899,902],"tip",{},[435,888,889],{},"Pro tip:"," The ",[435,892,893],{},"Perfect Fourth (1.333)"," and ",[435,896,897],{},"Major Third (1.25)"," are popular choices for web typography, offering a good balance between subtle and pronounced size differences. The ",[435,900,901],{},"Golden Ratio (1.618)"," creates more dramatic scaling, ideal for establishing clear visual hierarchy.",[904,905,907],"h3",{"id":906},"customizing-the-default-scale","Customizing the Default Scale",[418,909,910],{},"You can specify which scale should be the default by passing a second argument:",[476,912,913,1065],{},[479,914,915],{"icon":481,"label":482},[484,916,918],{"className":486,"code":917,"filename":488,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Set Perfect Fourth as the default scale\nconst { scale } = useScaleDesignTokens(s, {\n    ...defaultScaleValues,\n    default: '@scale.perfect-fourth',\n});\n\nexport default s;\n",[461,919,920,940,965,969,983,987,992,1014,1025,1042,1051,1055],{"__ignoreMap":490},[494,921,922,924,926,928,930,932,934,936,938],{"class":496,"line":497},[494,923,501],{"class":500},[494,925,505],{"class":504},[494,927,509],{"class":508},[494,929,512],{"class":504},[494,931,515],{"class":500},[494,933,518],{"class":504},[494,935,522],{"class":521},[494,937,525],{"class":504},[494,939,528],{"class":504},[494,941,942,944,946,948,950,953,955,957,959,961,963],{"class":496,"line":531},[494,943,501],{"class":500},[494,945,505],{"class":504},[494,947,538],{"class":508},[494,949,600],{"class":504},[494,951,952],{"class":508}," useScalePowersDesignTokens",[494,954,512],{"class":504},[494,956,515],{"class":500},[494,958,518],{"class":504},[494,960,547],{"class":521},[494,962,525],{"class":504},[494,964,528],{"class":504},[494,966,967],{"class":496,"line":554},[494,968,557],{"emptyLinePlaceholder":206},[494,970,971,973,975,977,979,981],{"class":496,"line":560},[494,972,564],{"class":563},[494,974,567],{"class":508},[494,976,570],{"class":504},[494,978,509],{"class":573},[494,980,576],{"class":508},[494,982,528],{"class":504},[494,984,985],{"class":496,"line":581},[494,986,557],{"emptyLinePlaceholder":206},[494,988,989],{"class":496,"line":586},[494,990,991],{"class":603},"// Set Perfect Fourth as the default scale\n",[494,993,994,996,998,1001,1003,1005,1007,1010,1012],{"class":496,"line":594},[494,995,564],{"class":563},[494,997,505],{"class":504},[494,999,1000],{"class":508}," scale ",[494,1002,698],{"class":504},[494,1004,701],{"class":504},[494,1006,538],{"class":573},[494,1008,1009],{"class":508},"(s",[494,1011,600],{"class":504},[494,1013,591],{"class":504},[494,1015,1016,1019,1022],{"class":496,"line":607},[494,1017,1018],{"class":504},"    ...",[494,1020,1021],{"class":508},"defaultScaleValues",[494,1023,1024],{"class":504},",\n",[494,1026,1027,1031,1033,1035,1038,1040],{"class":496,"line":618},[494,1028,1030],{"class":1029},"swJcz","    default",[494,1032,743],{"class":504},[494,1034,518],{"class":504},[494,1036,1037],{"class":521},"@scale.perfect-fourth",[494,1039,525],{"class":504},[494,1041,1024],{"class":504},[494,1043,1044,1046,1049],{"class":496,"line":629},[494,1045,698],{"class":504},[494,1047,1048],{"class":508},")",[494,1050,528],{"class":504},[494,1052,1053],{"class":496,"line":640},[494,1054,557],{"emptyLinePlaceholder":206},[494,1056,1057,1059,1061,1063],{"class":496,"line":651},[494,1058,719],{"class":500},[494,1060,722],{"class":500},[494,1062,725],{"class":508},[494,1064,528],{"class":504},[479,1066,1067],{"icon":140,"label":730},[484,1068,1070],{"className":733,"code":1069,"filename":735,"language":736,"meta":490,"style":490},":root {\n    --scale--minor-second: 1.067;\n    --scale--major-second: 1.125;\n    --scale--minor-third: 1.2;\n    --scale--major-third: 1.25;\n    --scale--perfect-fourth: 1.333;\n    --scale--augmented-fourth: 1.414;\n    --scale--perfect-fifth: 1.5;\n    --scale--golden: 1.618;\n    --scale: var(--scale--perfect-fourth);\n}\n",[461,1071,1072,1080,1090,1100,1110,1120,1130,1140,1150,1160,1175],{"__ignoreMap":490},[494,1073,1074,1076,1078],{"class":496,"line":497},[494,1075,743],{"class":504},[494,1077,746],{"class":563},[494,1079,591],{"class":504},[494,1081,1082,1084,1086,1088],{"class":496,"line":531},[494,1083,753],{"class":508},[494,1085,743],{"class":504},[494,1087,759],{"class":758},[494,1089,528],{"class":504},[494,1091,1092,1094,1096,1098],{"class":496,"line":554},[494,1093,766],{"class":508},[494,1095,743],{"class":504},[494,1097,771],{"class":758},[494,1099,528],{"class":504},[494,1101,1102,1104,1106,1108],{"class":496,"line":560},[494,1103,778],{"class":508},[494,1105,743],{"class":504},[494,1107,783],{"class":758},[494,1109,528],{"class":504},[494,1111,1112,1114,1116,1118],{"class":496,"line":581},[494,1113,790],{"class":508},[494,1115,743],{"class":504},[494,1117,795],{"class":758},[494,1119,528],{"class":504},[494,1121,1122,1124,1126,1128],{"class":496,"line":586},[494,1123,802],{"class":508},[494,1125,743],{"class":504},[494,1127,807],{"class":758},[494,1129,528],{"class":504},[494,1131,1132,1134,1136,1138],{"class":496,"line":594},[494,1133,814],{"class":508},[494,1135,743],{"class":504},[494,1137,819],{"class":758},[494,1139,528],{"class":504},[494,1141,1142,1144,1146,1148],{"class":496,"line":607},[494,1143,826],{"class":508},[494,1145,743],{"class":504},[494,1147,831],{"class":758},[494,1149,528],{"class":504},[494,1151,1152,1154,1156,1158],{"class":496,"line":618},[494,1153,838],{"class":508},[494,1155,743],{"class":504},[494,1157,843],{"class":758},[494,1159,528],{"class":504},[494,1161,1162,1164,1166,1168,1170,1173],{"class":496,"line":629},[494,1163,850],{"class":508},[494,1165,743],{"class":504},[494,1167,855],{"class":573},[494,1169,858],{"class":504},[494,1171,1172],{"class":508},"--scale--perfect-fourth",[494,1174,864],{"class":504},[494,1176,1177],{"class":496,"line":640},[494,1178,869],{"class":504},[418,1180,1181,1182,1185,1186,1185,1189,1185,1192,1185,1195,1185,1198,1185,1201,1204,1205,883],{},"Valid default scale values are: ",[461,1183,1184],{},"\"minor-second\"",", ",[461,1187,1188],{},"\"major-second\"",[461,1190,1191],{},"\"minor-third\"",[461,1193,1194],{},"\"major-third\"",[461,1196,1197],{},"\"perfect-fourth\"",[461,1199,1200],{},"\"augmented-fourth\"",[461,1202,1203],{},"\"perfect-fifth\"",", and ",[461,1206,1207],{},"\"golden\"",[885,1209,1210,1212,1213,1215],{},[435,1211,889],{}," Using the ",[461,1214,473],{}," variable makes it easy to change your entire design system's scale in one place. You can also override it at different breakpoints or for specific components.",[414,1217,1219],{"id":1218},"usescalepowersdesigntokens",[461,1220,1221],{},"useScalePowersDesignTokens",[418,1223,466,1224,1227],{},[461,1225,1226],{},"useScalePowersDesignTokens()"," function generates size multipliers by raising a scale to different powers, creating a systematic sizing system.",[476,1229,1230,1425],{},[479,1231,1232],{"icon":481,"label":482},[484,1233,1235],{"className":486,"code":1234,"filename":488,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { scalePerfectFourth } = useScaleDesignTokens(s);\n\n// Create a sizing system from -3 to 6\nconst sizes = useScalePowersDesignTokens(s, scalePerfectFourth, [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6]);\n\nexport default s;\n",[461,1236,1237,1257,1277,1281,1295,1299,1318,1322,1327,1411,1415],{"__ignoreMap":490},[494,1238,1239,1241,1243,1245,1247,1249,1251,1253,1255],{"class":496,"line":497},[494,1240,501],{"class":500},[494,1242,505],{"class":504},[494,1244,509],{"class":508},[494,1246,512],{"class":504},[494,1248,515],{"class":500},[494,1250,518],{"class":504},[494,1252,522],{"class":521},[494,1254,525],{"class":504},[494,1256,528],{"class":504},[494,1258,1259,1261,1263,1265,1267,1269,1271,1273,1275],{"class":496,"line":531},[494,1260,501],{"class":500},[494,1262,505],{"class":504},[494,1264,538],{"class":508},[494,1266,512],{"class":504},[494,1268,515],{"class":500},[494,1270,518],{"class":504},[494,1272,547],{"class":521},[494,1274,525],{"class":504},[494,1276,528],{"class":504},[494,1278,1279],{"class":496,"line":554},[494,1280,557],{"emptyLinePlaceholder":206},[494,1282,1283,1285,1287,1289,1291,1293],{"class":496,"line":560},[494,1284,564],{"class":563},[494,1286,567],{"class":508},[494,1288,570],{"class":504},[494,1290,509],{"class":573},[494,1292,576],{"class":508},[494,1294,528],{"class":504},[494,1296,1297],{"class":496,"line":581},[494,1298,557],{"emptyLinePlaceholder":206},[494,1300,1301,1303,1305,1308,1310,1312,1314,1316],{"class":496,"line":586},[494,1302,564],{"class":563},[494,1304,505],{"class":504},[494,1306,1307],{"class":508}," scalePerfectFourth ",[494,1309,698],{"class":504},[494,1311,701],{"class":504},[494,1313,538],{"class":573},[494,1315,706],{"class":508},[494,1317,528],{"class":504},[494,1319,1320],{"class":496,"line":594},[494,1321,557],{"emptyLinePlaceholder":206},[494,1323,1324],{"class":496,"line":607},[494,1325,1326],{"class":603},"// Create a sizing system from -3 to 6\n",[494,1328,1329,1331,1334,1336,1338,1340,1342,1345,1347,1350,1353,1356,1358,1361,1364,1366,1368,1371,1373,1376,1378,1381,1383,1386,1388,1391,1393,1396,1398,1401,1403,1406,1409],{"class":496,"line":618},[494,1330,564],{"class":563},[494,1332,1333],{"class":508}," sizes ",[494,1335,570],{"class":504},[494,1337,952],{"class":573},[494,1339,1009],{"class":508},[494,1341,600],{"class":504},[494,1343,1344],{"class":508}," scalePerfectFourth",[494,1346,600],{"class":504},[494,1348,1349],{"class":508}," [",[494,1351,1352],{"class":504},"-",[494,1354,1355],{"class":758},"3",[494,1357,600],{"class":504},[494,1359,1360],{"class":504}," -",[494,1362,1363],{"class":758},"2",[494,1365,600],{"class":504},[494,1367,1360],{"class":504},[494,1369,1370],{"class":758},"1",[494,1372,600],{"class":504},[494,1374,1375],{"class":758}," 0",[494,1377,600],{"class":504},[494,1379,1380],{"class":758}," 1",[494,1382,600],{"class":504},[494,1384,1385],{"class":758}," 2",[494,1387,600],{"class":504},[494,1389,1390],{"class":758}," 3",[494,1392,600],{"class":504},[494,1394,1395],{"class":758}," 4",[494,1397,600],{"class":504},[494,1399,1400],{"class":758}," 5",[494,1402,600],{"class":504},[494,1404,1405],{"class":758}," 6",[494,1407,1408],{"class":508},"])",[494,1410,528],{"class":504},[494,1412,1413],{"class":496,"line":629},[494,1414,557],{"emptyLinePlaceholder":206},[494,1416,1417,1419,1421,1423],{"class":496,"line":640},[494,1418,719],{"class":500},[494,1420,722],{"class":500},[494,1422,725],{"class":508},[494,1424,528],{"class":504},[479,1426,1427],{"icon":140,"label":730},[484,1428,1430],{"className":733,"code":1429,"filename":735,"language":736,"meta":490,"style":490},":root {\n    --scale--perfect-fourth: 1.333;\n}\n\n/* Generated calculations:\n   Power -3: 1 / 1.333 / 1.333 / 1.333 ≈ 0.422\n   Power -2: 1 / 1.333 / 1.333 ≈ 0.563\n   Power -1: 1 / 1.333 ≈ 0.750\n   Power 0:  1 (base size)\n   Power 1:  1.333\n   Power 2:  1.333 * 1.333 ≈ 1.777\n   Power 3:  1.333 * 1.333 * 1.333 ≈ 2.369\n   Power 4:  1.333 * 1.333 * 1.333 * 1.333 ≈ 3.157\n   Power 5:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 4.209\n   Power 6:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 5.610\n*/\n",[461,1431,1432,1440,1450,1454,1458,1463,1468,1473,1478,1483,1488,1493,1498,1503,1508,1513],{"__ignoreMap":490},[494,1433,1434,1436,1438],{"class":496,"line":497},[494,1435,743],{"class":504},[494,1437,746],{"class":563},[494,1439,591],{"class":504},[494,1441,1442,1444,1446,1448],{"class":496,"line":531},[494,1443,802],{"class":508},[494,1445,743],{"class":504},[494,1447,807],{"class":758},[494,1449,528],{"class":504},[494,1451,1452],{"class":496,"line":554},[494,1453,869],{"class":504},[494,1455,1456],{"class":496,"line":560},[494,1457,557],{"emptyLinePlaceholder":206},[494,1459,1460],{"class":496,"line":581},[494,1461,1462],{"class":603},"/* Generated calculations:\n",[494,1464,1465],{"class":496,"line":586},[494,1466,1467],{"class":603},"   Power -3: 1 / 1.333 / 1.333 / 1.333 ≈ 0.422\n",[494,1469,1470],{"class":496,"line":594},[494,1471,1472],{"class":603},"   Power -2: 1 / 1.333 / 1.333 ≈ 0.563\n",[494,1474,1475],{"class":496,"line":607},[494,1476,1477],{"class":603},"   Power -1: 1 / 1.333 ≈ 0.750\n",[494,1479,1480],{"class":496,"line":618},[494,1481,1482],{"class":603},"   Power 0:  1 (base size)\n",[494,1484,1485],{"class":496,"line":629},[494,1486,1487],{"class":603},"   Power 1:  1.333\n",[494,1489,1490],{"class":496,"line":640},[494,1491,1492],{"class":603},"   Power 2:  1.333 * 1.333 ≈ 1.777\n",[494,1494,1495],{"class":496,"line":651},[494,1496,1497],{"class":603},"   Power 3:  1.333 * 1.333 * 1.333 ≈ 2.369\n",[494,1499,1500],{"class":496,"line":662},[494,1501,1502],{"class":603},"   Power 4:  1.333 * 1.333 * 1.333 * 1.333 ≈ 3.157\n",[494,1504,1505],{"class":496,"line":673},[494,1506,1507],{"class":603},"   Power 5:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 4.209\n",[494,1509,1510],{"class":496,"line":684},[494,1511,1512],{"class":603},"   Power 6:  1.333 * 1.333 * 1.333 * 1.333 * 1.333 * 1.333 ≈ 5.610\n",[494,1514,1515],{"class":496,"line":695},[494,1516,1517],{"class":603},"*/\n",[1519,1520,1521,1524,1525,1527,1528,1535],"note",{},[435,1522,1523],{},"Good to know:"," While ",[461,1526,1226],{}," generates the multipliers, you'll typically want to use them with ",[1529,1530,1532],"a",{"href":1531},"#usemultiplierdesigntokens",[461,1533,1534],{},"useMultiplierDesignTokens()"," to create properly named variables for your design system.",[418,1537,1538],{},"Positive powers multiply the scale (making things larger), while negative powers divide it (making things smaller). This creates a harmonious progression of sizes both above and below your base size.",[885,1540,1541,1543],{},[435,1542,889],{}," Most design systems use a range from -2 to 5 or -3 to 6, providing enough variation for everything from small captions to large headings without excessive options.",[414,1545,1547],{"id":1546},"usemultiplierdesigntokens",[461,1548,1549],{},"useMultiplierDesignTokens",[418,1551,466,1552,1554,1555,1557],{},[461,1553,1534],{}," function creates a set of variables by multiplying a base variable by different multipliers. This is perfect for combining with ",[461,1556,1226],{}," to create complete size scales.",[476,1559,1560,1962],{},[479,1561,1562],{"icon":481,"label":482},[484,1563,1565],{"className":486,"code":1564,"filename":488,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useFontSizeDesignTokens, defaultScalePowerValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { scale } = useScaleDesignTokens(s);\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n// Generate scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale);\n\n// Create font size variables using the base fontSize and scale powers\nconst {\n    fontSizeXs,  // Variable\u003C'font-size--xs'>\n    fontSizeSm,  // Variable\u003C'font-size--sm'>\n    fontSizeMd,  // Variable\u003C'font-size--md'>\n    fontSizeLg,  // Variable\u003C'font-size--lg'>\n    fontSizeXl,  // Variable\u003C'font-size--xl'>\n    fontSize2xl, // Variable\u003C'font-size--2xl'>\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],\n    sm: scalePowers[-1],\n    md: scalePowers[0],\n    lg: scalePowers[1],\n    xl: scalePowers[2],\n    '2xl': scalePowers[3],\n});\n\nexport default s;\n",[461,1566,1567,1587,1626,1630,1644,1648,1666,1704,1708,1713,1733,1737,1742,1748,1758,1768,1778,1788,1798,1809,1829,1849,1867,1884,1900,1916,1937,1946,1951],{"__ignoreMap":490},[494,1568,1569,1571,1573,1575,1577,1579,1581,1583,1585],{"class":496,"line":497},[494,1570,501],{"class":500},[494,1572,505],{"class":504},[494,1574,509],{"class":508},[494,1576,512],{"class":504},[494,1578,515],{"class":500},[494,1580,518],{"class":504},[494,1582,522],{"class":521},[494,1584,525],{"class":504},[494,1586,528],{"class":504},[494,1588,1589,1591,1593,1595,1597,1599,1601,1604,1606,1609,1611,1614,1616,1618,1620,1622,1624],{"class":496,"line":531},[494,1590,501],{"class":500},[494,1592,505],{"class":504},[494,1594,538],{"class":508},[494,1596,600],{"class":504},[494,1598,952],{"class":508},[494,1600,600],{"class":504},[494,1602,1603],{"class":508}," useMultiplierDesignTokens",[494,1605,600],{"class":504},[494,1607,1608],{"class":508}," useFontSizeDesignTokens",[494,1610,600],{"class":504},[494,1612,1613],{"class":508}," defaultScalePowerValues",[494,1615,512],{"class":504},[494,1617,515],{"class":500},[494,1619,518],{"class":504},[494,1621,547],{"class":521},[494,1623,525],{"class":504},[494,1625,528],{"class":504},[494,1627,1628],{"class":496,"line":554},[494,1629,557],{"emptyLinePlaceholder":206},[494,1631,1632,1634,1636,1638,1640,1642],{"class":496,"line":560},[494,1633,564],{"class":563},[494,1635,567],{"class":508},[494,1637,570],{"class":504},[494,1639,509],{"class":573},[494,1641,576],{"class":508},[494,1643,528],{"class":504},[494,1645,1646],{"class":496,"line":581},[494,1647,557],{"emptyLinePlaceholder":206},[494,1649,1650,1652,1654,1656,1658,1660,1662,1664],{"class":496,"line":586},[494,1651,564],{"class":563},[494,1653,505],{"class":504},[494,1655,1000],{"class":508},[494,1657,698],{"class":504},[494,1659,701],{"class":504},[494,1661,538],{"class":573},[494,1663,706],{"class":508},[494,1665,528],{"class":504},[494,1667,1668,1670,1672,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1696,1698,1700,1702],{"class":496,"line":594},[494,1669,564],{"class":563},[494,1671,505],{"class":504},[494,1673,1674],{"class":508}," fontSize ",[494,1676,698],{"class":504},[494,1678,701],{"class":504},[494,1680,1608],{"class":573},[494,1682,1009],{"class":508},[494,1684,600],{"class":504},[494,1686,505],{"class":504},[494,1688,722],{"class":1029},[494,1690,743],{"class":504},[494,1692,518],{"class":504},[494,1694,1695],{"class":521},"1rem",[494,1697,525],{"class":504},[494,1699,512],{"class":504},[494,1701,1048],{"class":508},[494,1703,528],{"class":504},[494,1705,1706],{"class":496,"line":607},[494,1707,557],{"emptyLinePlaceholder":206},[494,1709,1710],{"class":496,"line":618},[494,1711,1712],{"class":603},"// Generate scale powers\n",[494,1714,1715,1717,1720,1722,1724,1726,1728,1731],{"class":496,"line":629},[494,1716,564],{"class":563},[494,1718,1719],{"class":508}," scalePowers ",[494,1721,570],{"class":504},[494,1723,952],{"class":573},[494,1725,1009],{"class":508},[494,1727,600],{"class":504},[494,1729,1730],{"class":508}," scale)",[494,1732,528],{"class":504},[494,1734,1735],{"class":496,"line":640},[494,1736,557],{"emptyLinePlaceholder":206},[494,1738,1739],{"class":496,"line":651},[494,1740,1741],{"class":603},"// Create font size variables using the base fontSize and scale powers\n",[494,1743,1744,1746],{"class":496,"line":662},[494,1745,564],{"class":563},[494,1747,591],{"class":504},[494,1749,1750,1753,1755],{"class":496,"line":673},[494,1751,1752],{"class":508},"    fontSizeXs",[494,1754,600],{"class":504},[494,1756,1757],{"class":603},"  // Variable\u003C'font-size--xs'>\n",[494,1759,1760,1763,1765],{"class":496,"line":684},[494,1761,1762],{"class":508},"    fontSizeSm",[494,1764,600],{"class":504},[494,1766,1767],{"class":603},"  // Variable\u003C'font-size--sm'>\n",[494,1769,1770,1773,1775],{"class":496,"line":695},[494,1771,1772],{"class":508},"    fontSizeMd",[494,1774,600],{"class":504},[494,1776,1777],{"class":603},"  // Variable\u003C'font-size--md'>\n",[494,1779,1780,1783,1785],{"class":496,"line":711},[494,1781,1782],{"class":508},"    fontSizeLg",[494,1784,600],{"class":504},[494,1786,1787],{"class":603},"  // Variable\u003C'font-size--lg'>\n",[494,1789,1790,1793,1795],{"class":496,"line":716},[494,1791,1792],{"class":508},"    fontSizeXl",[494,1794,600],{"class":504},[494,1796,1797],{"class":603},"  // Variable\u003C'font-size--xl'>\n",[494,1799,1801,1804,1806],{"class":496,"line":1800},19,[494,1802,1803],{"class":508},"    fontSize2xl",[494,1805,600],{"class":504},[494,1807,1808],{"class":603}," // Variable\u003C'font-size--2xl'>\n",[494,1810,1812,1814,1816,1818,1820,1822,1825,1827],{"class":496,"line":1811},20,[494,1813,698],{"class":504},[494,1815,701],{"class":504},[494,1817,1603],{"class":573},[494,1819,1009],{"class":508},[494,1821,600],{"class":504},[494,1823,1824],{"class":508}," fontSize",[494,1826,600],{"class":504},[494,1828,591],{"class":504},[494,1830,1832,1835,1837,1840,1842,1844,1847],{"class":496,"line":1831},21,[494,1833,1834],{"class":1029},"    xs",[494,1836,743],{"class":504},[494,1838,1839],{"class":508}," scalePowers[",[494,1841,1352],{"class":504},[494,1843,1363],{"class":758},[494,1845,1846],{"class":508},"]",[494,1848,1024],{"class":504},[494,1850,1852,1855,1857,1859,1861,1863,1865],{"class":496,"line":1851},22,[494,1853,1854],{"class":1029},"    sm",[494,1856,743],{"class":504},[494,1858,1839],{"class":508},[494,1860,1352],{"class":504},[494,1862,1370],{"class":758},[494,1864,1846],{"class":508},[494,1866,1024],{"class":504},[494,1868,1870,1873,1875,1877,1880,1882],{"class":496,"line":1869},23,[494,1871,1872],{"class":1029},"    md",[494,1874,743],{"class":504},[494,1876,1839],{"class":508},[494,1878,1879],{"class":758},"0",[494,1881,1846],{"class":508},[494,1883,1024],{"class":504},[494,1885,1887,1890,1892,1894,1896,1898],{"class":496,"line":1886},24,[494,1888,1889],{"class":1029},"    lg",[494,1891,743],{"class":504},[494,1893,1839],{"class":508},[494,1895,1370],{"class":758},[494,1897,1846],{"class":508},[494,1899,1024],{"class":504},[494,1901,1903,1906,1908,1910,1912,1914],{"class":496,"line":1902},25,[494,1904,1905],{"class":1029},"    xl",[494,1907,743],{"class":504},[494,1909,1839],{"class":508},[494,1911,1363],{"class":758},[494,1913,1846],{"class":508},[494,1915,1024],{"class":504},[494,1917,1919,1922,1925,1927,1929,1931,1933,1935],{"class":496,"line":1918},26,[494,1920,1921],{"class":504},"    '",[494,1923,1924],{"class":1029},"2xl",[494,1926,525],{"class":504},[494,1928,743],{"class":504},[494,1930,1839],{"class":508},[494,1932,1355],{"class":758},[494,1934,1846],{"class":508},[494,1936,1024],{"class":504},[494,1938,1940,1942,1944],{"class":496,"line":1939},27,[494,1941,698],{"class":504},[494,1943,1048],{"class":508},[494,1945,528],{"class":504},[494,1947,1949],{"class":496,"line":1948},28,[494,1950,557],{"emptyLinePlaceholder":206},[494,1952,1954,1956,1958,1960],{"class":496,"line":1953},29,[494,1955,719],{"class":500},[494,1957,722],{"class":500},[494,1959,725],{"class":508},[494,1961,528],{"class":504},[479,1963,1964],{"icon":140,"label":730},[484,1965,1967],{"className":733,"code":1966,"filename":735,"language":736,"meta":490,"style":490},":root {\n    --scale--perfect-fourth: 1.333;\n    --scale: var(--scale--perfect-fourth);\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * 1 / var(--scale) / var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 / var(--scale));\n    --font-size--md: calc(var(--font-size) * 1);\n    --font-size--lg: calc(var(--font-size) * var(--scale));\n    --font-size--xl: calc(var(--font-size) * var(--scale) * var(--scale));\n    --font-size--2xl: calc(var(--font-size) * var(--scale) * var(--scale) * var(--scale));\n}\n",[461,1968,1969,1977,1987,2001,2013,2063,2096,2121,2150,2189,2238],{"__ignoreMap":490},[494,1970,1971,1973,1975],{"class":496,"line":497},[494,1972,743],{"class":504},[494,1974,746],{"class":563},[494,1976,591],{"class":504},[494,1978,1979,1981,1983,1985],{"class":496,"line":531},[494,1980,802],{"class":508},[494,1982,743],{"class":504},[494,1984,807],{"class":758},[494,1986,528],{"class":504},[494,1988,1989,1991,1993,1995,1997,1999],{"class":496,"line":554},[494,1990,850],{"class":508},[494,1992,743],{"class":504},[494,1994,855],{"class":573},[494,1996,858],{"class":504},[494,1998,1172],{"class":508},[494,2000,864],{"class":504},[494,2002,2003,2006,2008,2011],{"class":496,"line":560},[494,2004,2005],{"class":508},"    --font-size",[494,2007,743],{"class":504},[494,2009,2010],{"class":758}," 1rem",[494,2012,528],{"class":504},[494,2014,2015,2018,2020,2023,2025,2028,2030,2033,2035,2038,2040,2043,2045,2047,2050,2052,2054,2056,2058,2060],{"class":496,"line":581},[494,2016,2017],{"class":508},"    --font-size--xs",[494,2019,743],{"class":504},[494,2021,2022],{"class":573}," calc",[494,2024,858],{"class":504},[494,2026,2027],{"class":573},"var",[494,2029,858],{"class":504},[494,2031,2032],{"class":508},"--font-size",[494,2034,1048],{"class":504},[494,2036,2037],{"class":504}," *",[494,2039,1380],{"class":758},[494,2041,2042],{"class":504}," /",[494,2044,855],{"class":573},[494,2046,858],{"class":504},[494,2048,2049],{"class":508},"--scale",[494,2051,1048],{"class":504},[494,2053,2042],{"class":504},[494,2055,855],{"class":573},[494,2057,858],{"class":504},[494,2059,2049],{"class":508},[494,2061,2062],{"class":504},"));\n",[494,2064,2065,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094],{"class":496,"line":586},[494,2066,2067],{"class":508},"    --font-size--sm",[494,2069,743],{"class":504},[494,2071,2022],{"class":573},[494,2073,858],{"class":504},[494,2075,2027],{"class":573},[494,2077,858],{"class":504},[494,2079,2032],{"class":508},[494,2081,1048],{"class":504},[494,2083,2037],{"class":504},[494,2085,1380],{"class":758},[494,2087,2042],{"class":504},[494,2089,855],{"class":573},[494,2091,858],{"class":504},[494,2093,2049],{"class":508},[494,2095,2062],{"class":504},[494,2097,2098,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119],{"class":496,"line":594},[494,2099,2100],{"class":508},"    --font-size--md",[494,2102,743],{"class":504},[494,2104,2022],{"class":573},[494,2106,858],{"class":504},[494,2108,2027],{"class":573},[494,2110,858],{"class":504},[494,2112,2032],{"class":508},[494,2114,1048],{"class":504},[494,2116,2037],{"class":504},[494,2118,1380],{"class":758},[494,2120,864],{"class":504},[494,2122,2123,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148],{"class":496,"line":607},[494,2124,2125],{"class":508},"    --font-size--lg",[494,2127,743],{"class":504},[494,2129,2022],{"class":573},[494,2131,858],{"class":504},[494,2133,2027],{"class":573},[494,2135,858],{"class":504},[494,2137,2032],{"class":508},[494,2139,1048],{"class":504},[494,2141,2037],{"class":504},[494,2143,855],{"class":573},[494,2145,858],{"class":504},[494,2147,2049],{"class":508},[494,2149,2062],{"class":504},[494,2151,2152,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187],{"class":496,"line":618},[494,2153,2154],{"class":508},"    --font-size--xl",[494,2156,743],{"class":504},[494,2158,2022],{"class":573},[494,2160,858],{"class":504},[494,2162,2027],{"class":573},[494,2164,858],{"class":504},[494,2166,2032],{"class":508},[494,2168,1048],{"class":504},[494,2170,2037],{"class":504},[494,2172,855],{"class":573},[494,2174,858],{"class":504},[494,2176,2049],{"class":508},[494,2178,1048],{"class":504},[494,2180,2037],{"class":504},[494,2182,855],{"class":573},[494,2184,858],{"class":504},[494,2186,2049],{"class":508},[494,2188,2062],{"class":504},[494,2190,2191,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236],{"class":496,"line":629},[494,2192,2193],{"class":508},"    --font-size--2xl",[494,2195,743],{"class":504},[494,2197,2022],{"class":573},[494,2199,858],{"class":504},[494,2201,2027],{"class":573},[494,2203,858],{"class":504},[494,2205,2032],{"class":508},[494,2207,1048],{"class":504},[494,2209,2037],{"class":504},[494,2211,855],{"class":573},[494,2213,858],{"class":504},[494,2215,2049],{"class":508},[494,2217,1048],{"class":504},[494,2219,2037],{"class":504},[494,2221,855],{"class":573},[494,2223,858],{"class":504},[494,2225,2049],{"class":508},[494,2227,1048],{"class":504},[494,2229,2037],{"class":504},[494,2231,855],{"class":573},[494,2233,858],{"class":504},[494,2235,2049],{"class":508},[494,2237,2062],{"class":504},[494,2239,2240],{"class":496,"line":640},[494,2241,869],{"class":504},[418,2243,466,2244,2246],{},[461,2245,1534],{}," function automatically:",[429,2248,2249,2252,2259],{},[432,2250,2251],{},"Creates properly named variables following the base variable's naming pattern",[432,2253,2254,2255,2258],{},"Generates ",[461,2256,2257],{},"calc()"," expressions that reference the base variable",[432,2260,2261],{},"Provides type-safe return values with correct variable names",[885,2263,2264,2266,2267,2269,2270,2273,2274,2276],{},[435,2265,889],{}," Using ",[461,2268,1534],{}," with scale powers keeps your design system flexible. Change the base ",[461,2271,2272],{},"fontSize"," or ",[461,2275,473],{}," variable, and all derived sizes update automatically throughout your design system.",[414,2278,2280],{"id":2279},"examples","Examples",[904,2282,2284],{"id":2283},"typography-scale","Typography Scale",[418,2286,2287],{},"Here's how to create a complete typographic scale using a specific scale:",[476,2289,2290,2666],{},[479,2291,2292],{"icon":481,"label":482},[484,2293,2295],{"className":486,"code":2294,"filename":488,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Set your preferred default scale\nconst { scale } = useScaleDesignTokens(s);\n\n// Define base font size\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n// Create typographic scale using the default scale variable\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2]);\n\n// Create font size variables automatically\nconst {\n    fontSizeXs,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n    fontSizeXl,\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],    // ~0.563rem\n    sm: scalePowers[-1],    // ~0.750rem\n    md: scalePowers[0],     // ~1.000rem\n    lg: scalePowers[1],     // ~1.333rem\n    xl: scalePowers[2],     // ~1.777rem\n});\n\nexport default s;\n",[461,2296,2297,2317,2345,2349,2363,2367,2372,2390,2394,2399,2435,2439,2444,2491,2495,2500,2506,2512,2518,2524,2530,2536,2554,2573,2592,2609,2626,2643,2651,2655],{"__ignoreMap":490},[494,2298,2299,2301,2303,2305,2307,2309,2311,2313,2315],{"class":496,"line":497},[494,2300,501],{"class":500},[494,2302,505],{"class":504},[494,2304,509],{"class":508},[494,2306,512],{"class":504},[494,2308,515],{"class":500},[494,2310,518],{"class":504},[494,2312,522],{"class":521},[494,2314,525],{"class":504},[494,2316,528],{"class":504},[494,2318,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343],{"class":496,"line":531},[494,2320,501],{"class":500},[494,2322,505],{"class":504},[494,2324,538],{"class":508},[494,2326,600],{"class":504},[494,2328,952],{"class":508},[494,2330,600],{"class":504},[494,2332,1603],{"class":508},[494,2334,512],{"class":504},[494,2336,515],{"class":500},[494,2338,518],{"class":504},[494,2340,547],{"class":521},[494,2342,525],{"class":504},[494,2344,528],{"class":504},[494,2346,2347],{"class":496,"line":554},[494,2348,557],{"emptyLinePlaceholder":206},[494,2350,2351,2353,2355,2357,2359,2361],{"class":496,"line":560},[494,2352,564],{"class":563},[494,2354,567],{"class":508},[494,2356,570],{"class":504},[494,2358,509],{"class":573},[494,2360,576],{"class":508},[494,2362,528],{"class":504},[494,2364,2365],{"class":496,"line":581},[494,2366,557],{"emptyLinePlaceholder":206},[494,2368,2369],{"class":496,"line":586},[494,2370,2371],{"class":603},"// Set your preferred default scale\n",[494,2373,2374,2376,2378,2380,2382,2384,2386,2388],{"class":496,"line":594},[494,2375,564],{"class":563},[494,2377,505],{"class":504},[494,2379,1000],{"class":508},[494,2381,698],{"class":504},[494,2383,701],{"class":504},[494,2385,538],{"class":573},[494,2387,706],{"class":508},[494,2389,528],{"class":504},[494,2391,2392],{"class":496,"line":607},[494,2393,557],{"emptyLinePlaceholder":206},[494,2395,2396],{"class":496,"line":618},[494,2397,2398],{"class":603},"// Define base font size\n",[494,2400,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433],{"class":496,"line":629},[494,2402,564],{"class":563},[494,2404,505],{"class":504},[494,2406,1674],{"class":508},[494,2408,698],{"class":504},[494,2410,701],{"class":504},[494,2412,1608],{"class":573},[494,2414,1009],{"class":508},[494,2416,600],{"class":504},[494,2418,505],{"class":504},[494,2420,722],{"class":1029},[494,2422,743],{"class":504},[494,2424,518],{"class":504},[494,2426,1695],{"class":521},[494,2428,525],{"class":504},[494,2430,512],{"class":504},[494,2432,1048],{"class":508},[494,2434,528],{"class":504},[494,2436,2437],{"class":496,"line":640},[494,2438,557],{"emptyLinePlaceholder":206},[494,2440,2441],{"class":496,"line":651},[494,2442,2443],{"class":603},"// Create typographic scale using the default scale variable\n",[494,2445,2446,2448,2450,2452,2454,2456,2458,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489],{"class":496,"line":662},[494,2447,564],{"class":563},[494,2449,1719],{"class":508},[494,2451,570],{"class":504},[494,2453,952],{"class":573},[494,2455,1009],{"class":508},[494,2457,600],{"class":504},[494,2459,2460],{"class":508}," scale",[494,2462,600],{"class":504},[494,2464,1349],{"class":508},[494,2466,1352],{"class":504},[494,2468,1363],{"class":758},[494,2470,600],{"class":504},[494,2472,1360],{"class":504},[494,2474,1370],{"class":758},[494,2476,600],{"class":504},[494,2478,1375],{"class":758},[494,2480,600],{"class":504},[494,2482,1380],{"class":758},[494,2484,600],{"class":504},[494,2486,1385],{"class":758},[494,2488,1408],{"class":508},[494,2490,528],{"class":504},[494,2492,2493],{"class":496,"line":673},[494,2494,557],{"emptyLinePlaceholder":206},[494,2496,2497],{"class":496,"line":684},[494,2498,2499],{"class":603},"// Create font size variables automatically\n",[494,2501,2502,2504],{"class":496,"line":695},[494,2503,564],{"class":563},[494,2505,591],{"class":504},[494,2507,2508,2510],{"class":496,"line":711},[494,2509,1752],{"class":508},[494,2511,1024],{"class":504},[494,2513,2514,2516],{"class":496,"line":716},[494,2515,1762],{"class":508},[494,2517,1024],{"class":504},[494,2519,2520,2522],{"class":496,"line":1800},[494,2521,1772],{"class":508},[494,2523,1024],{"class":504},[494,2525,2526,2528],{"class":496,"line":1811},[494,2527,1782],{"class":508},[494,2529,1024],{"class":504},[494,2531,2532,2534],{"class":496,"line":1831},[494,2533,1792],{"class":508},[494,2535,1024],{"class":504},[494,2537,2538,2540,2542,2544,2546,2548,2550,2552],{"class":496,"line":1851},[494,2539,698],{"class":504},[494,2541,701],{"class":504},[494,2543,1603],{"class":573},[494,2545,1009],{"class":508},[494,2547,600],{"class":504},[494,2549,1824],{"class":508},[494,2551,600],{"class":504},[494,2553,591],{"class":504},[494,2555,2556,2558,2560,2562,2564,2566,2568,2570],{"class":496,"line":1869},[494,2557,1834],{"class":1029},[494,2559,743],{"class":504},[494,2561,1839],{"class":508},[494,2563,1352],{"class":504},[494,2565,1363],{"class":758},[494,2567,1846],{"class":508},[494,2569,600],{"class":504},[494,2571,2572],{"class":603},"    // ~0.563rem\n",[494,2574,2575,2577,2579,2581,2583,2585,2587,2589],{"class":496,"line":1886},[494,2576,1854],{"class":1029},[494,2578,743],{"class":504},[494,2580,1839],{"class":508},[494,2582,1352],{"class":504},[494,2584,1370],{"class":758},[494,2586,1846],{"class":508},[494,2588,600],{"class":504},[494,2590,2591],{"class":603},"    // ~0.750rem\n",[494,2593,2594,2596,2598,2600,2602,2604,2606],{"class":496,"line":1902},[494,2595,1872],{"class":1029},[494,2597,743],{"class":504},[494,2599,1839],{"class":508},[494,2601,1879],{"class":758},[494,2603,1846],{"class":508},[494,2605,600],{"class":504},[494,2607,2608],{"class":603},"     // ~1.000rem\n",[494,2610,2611,2613,2615,2617,2619,2621,2623],{"class":496,"line":1918},[494,2612,1889],{"class":1029},[494,2614,743],{"class":504},[494,2616,1839],{"class":508},[494,2618,1370],{"class":758},[494,2620,1846],{"class":508},[494,2622,600],{"class":504},[494,2624,2625],{"class":603},"     // ~1.333rem\n",[494,2627,2628,2630,2632,2634,2636,2638,2640],{"class":496,"line":1939},[494,2629,1905],{"class":1029},[494,2631,743],{"class":504},[494,2633,1839],{"class":508},[494,2635,1363],{"class":758},[494,2637,1846],{"class":508},[494,2639,600],{"class":504},[494,2641,2642],{"class":603},"     // ~1.777rem\n",[494,2644,2645,2647,2649],{"class":496,"line":1948},[494,2646,698],{"class":504},[494,2648,1048],{"class":508},[494,2650,528],{"class":504},[494,2652,2653],{"class":496,"line":1953},[494,2654,557],{"emptyLinePlaceholder":206},[494,2656,2658,2660,2662,2664],{"class":496,"line":2657},30,[494,2659,719],{"class":500},[494,2661,722],{"class":500},[494,2663,725],{"class":508},[494,2665,528],{"class":504},[479,2667,2668],{"icon":140,"label":730},[484,2669,2671],{"className":733,"code":2670,"filename":735,"language":736,"meta":490,"style":490},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * 1 / var(--scale) / var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 / var(--scale));\n    --font-size--md: calc(var(--font-size) * 1);\n    --font-size--lg: calc(var(--font-size) * var(--scale));\n    --font-size--xl: calc(var(--font-size) * var(--scale) * var(--scale));\n}\n",[461,2672,2673,2681,2691,2705,2715,2757,2789,2813,2841,2879],{"__ignoreMap":490},[494,2674,2675,2677,2679],{"class":496,"line":497},[494,2676,743],{"class":504},[494,2678,746],{"class":563},[494,2680,591],{"class":504},[494,2682,2683,2685,2687,2689],{"class":496,"line":531},[494,2684,778],{"class":508},[494,2686,743],{"class":504},[494,2688,783],{"class":758},[494,2690,528],{"class":504},[494,2692,2693,2695,2697,2699,2701,2703],{"class":496,"line":554},[494,2694,850],{"class":508},[494,2696,743],{"class":504},[494,2698,855],{"class":573},[494,2700,858],{"class":504},[494,2702,861],{"class":508},[494,2704,864],{"class":504},[494,2706,2707,2709,2711,2713],{"class":496,"line":560},[494,2708,2005],{"class":508},[494,2710,743],{"class":504},[494,2712,2010],{"class":758},[494,2714,528],{"class":504},[494,2716,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755],{"class":496,"line":581},[494,2718,2017],{"class":508},[494,2720,743],{"class":504},[494,2722,2022],{"class":573},[494,2724,858],{"class":504},[494,2726,2027],{"class":573},[494,2728,858],{"class":504},[494,2730,2032],{"class":508},[494,2732,1048],{"class":504},[494,2734,2037],{"class":504},[494,2736,1380],{"class":758},[494,2738,2042],{"class":504},[494,2740,855],{"class":573},[494,2742,858],{"class":504},[494,2744,2049],{"class":508},[494,2746,1048],{"class":504},[494,2748,2042],{"class":504},[494,2750,855],{"class":573},[494,2752,858],{"class":504},[494,2754,2049],{"class":508},[494,2756,2062],{"class":504},[494,2758,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787],{"class":496,"line":586},[494,2760,2067],{"class":508},[494,2762,743],{"class":504},[494,2764,2022],{"class":573},[494,2766,858],{"class":504},[494,2768,2027],{"class":573},[494,2770,858],{"class":504},[494,2772,2032],{"class":508},[494,2774,1048],{"class":504},[494,2776,2037],{"class":504},[494,2778,1380],{"class":758},[494,2780,2042],{"class":504},[494,2782,855],{"class":573},[494,2784,858],{"class":504},[494,2786,2049],{"class":508},[494,2788,2062],{"class":504},[494,2790,2791,2793,2795,2797,2799,2801,2803,2805,2807,2809,2811],{"class":496,"line":594},[494,2792,2100],{"class":508},[494,2794,743],{"class":504},[494,2796,2022],{"class":573},[494,2798,858],{"class":504},[494,2800,2027],{"class":573},[494,2802,858],{"class":504},[494,2804,2032],{"class":508},[494,2806,1048],{"class":504},[494,2808,2037],{"class":504},[494,2810,1380],{"class":758},[494,2812,864],{"class":504},[494,2814,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839],{"class":496,"line":607},[494,2816,2125],{"class":508},[494,2818,743],{"class":504},[494,2820,2022],{"class":573},[494,2822,858],{"class":504},[494,2824,2027],{"class":573},[494,2826,858],{"class":504},[494,2828,2032],{"class":508},[494,2830,1048],{"class":504},[494,2832,2037],{"class":504},[494,2834,855],{"class":573},[494,2836,858],{"class":504},[494,2838,2049],{"class":508},[494,2840,2062],{"class":504},[494,2842,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877],{"class":496,"line":618},[494,2844,2154],{"class":508},[494,2846,743],{"class":504},[494,2848,2022],{"class":573},[494,2850,858],{"class":504},[494,2852,2027],{"class":573},[494,2854,858],{"class":504},[494,2856,2032],{"class":508},[494,2858,1048],{"class":504},[494,2860,2037],{"class":504},[494,2862,855],{"class":573},[494,2864,858],{"class":504},[494,2866,2049],{"class":508},[494,2868,1048],{"class":504},[494,2870,2037],{"class":504},[494,2872,855],{"class":573},[494,2874,858],{"class":504},[494,2876,2049],{"class":508},[494,2878,2062],{"class":504},[494,2880,2881],{"class":496,"line":629},[494,2882,869],{"class":504},[418,2884,2885,2886,2888],{},"Using the ",[461,2887,473],{}," variable means you can change your entire design system's proportions by overriding just one variable.",[904,2890,2892],{"id":2891},"spacing-scale","Spacing Scale",[418,2894,2895],{},"Create a consistent spacing system using the same modular scale:",[476,2897,2898,3395],{},[479,2899,2900],{"icon":481,"label":482},[484,2901,2903],{"className":486,"code":2902,"filename":488,"language":489,"meta":490,"style":490},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use the Major Second scale (1.125) for subtle spacing differences\nconst { scale } = useScaleDesignTokens(s);\n\n// Define base spacing unit\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' });\n\n// Create spacing scale\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-3, -2, -1, 1, 2, 3, 4, 5]);\n\n// Create spacing variables automatically\nconst {\n    spacing3xs,\n    spacing2xs,\n    spacingXs,\n    spacingMd,\n    spacingLg,\n    spacingXl,\n    spacing2xl,\n    spacing3xl,\n} = useMultiplierDesignTokens(s, spacing, {\n    '3xs': scalePowers[-3],  // ~0.704rem\n    '2xs': scalePowers[-2],  // ~0.790rem\n    xs: scalePowers[-1],     // ~0.889rem\n    md: scalePowers[1],      // ~1.125rem\n    lg: scalePowers[2],      // ~1.266rem\n    xl: scalePowers[3],      // ~1.424rem\n    '2xl': scalePowers[4],   // ~1.602rem\n    '3xl': scalePowers[5],   // ~1.802rem\n});\n\nexport default s;\n",[461,2904,2905,2925,2953,2957,2971,2975,2980,2998,3002,3007,3045,3049,3054,3114,3118,3123,3129,3136,3143,3150,3157,3164,3171,3178,3185,3204,3228,3252,3271,3288,3305,3323,3346,3370,3379,3384],{"__ignoreMap":490},[494,2906,2907,2909,2911,2913,2915,2917,2919,2921,2923],{"class":496,"line":497},[494,2908,501],{"class":500},[494,2910,505],{"class":504},[494,2912,509],{"class":508},[494,2914,512],{"class":504},[494,2916,515],{"class":500},[494,2918,518],{"class":504},[494,2920,522],{"class":521},[494,2922,525],{"class":504},[494,2924,528],{"class":504},[494,2926,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951],{"class":496,"line":531},[494,2928,501],{"class":500},[494,2930,505],{"class":504},[494,2932,538],{"class":508},[494,2934,600],{"class":504},[494,2936,952],{"class":508},[494,2938,600],{"class":504},[494,2940,1603],{"class":508},[494,2942,512],{"class":504},[494,2944,515],{"class":500},[494,2946,518],{"class":504},[494,2948,547],{"class":521},[494,2950,525],{"class":504},[494,2952,528],{"class":504},[494,2954,2955],{"class":496,"line":554},[494,2956,557],{"emptyLinePlaceholder":206},[494,2958,2959,2961,2963,2965,2967,2969],{"class":496,"line":560},[494,2960,564],{"class":563},[494,2962,567],{"class":508},[494,2964,570],{"class":504},[494,2966,509],{"class":573},[494,2968,576],{"class":508},[494,2970,528],{"class":504},[494,2972,2973],{"class":496,"line":581},[494,2974,557],{"emptyLinePlaceholder":206},[494,2976,2977],{"class":496,"line":586},[494,2978,2979],{"class":603},"// Use the Major Second scale (1.125) for subtle spacing differences\n",[494,2981,2982,2984,2986,2988,2990,2992,2994,2996],{"class":496,"line":594},[494,2983,564],{"class":563},[494,2985,505],{"class":504},[494,2987,1000],{"class":508},[494,2989,698],{"class":504},[494,2991,701],{"class":504},[494,2993,538],{"class":573},[494,2995,706],{"class":508},[494,2997,528],{"class":504},[494,2999,3000],{"class":496,"line":607},[494,3001,557],{"emptyLinePlaceholder":206},[494,3003,3004],{"class":496,"line":618},[494,3005,3006],{"class":603},"// Define base spacing unit\n",[494,3008,3009,3011,3013,3016,3018,3020,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043],{"class":496,"line":629},[494,3010,564],{"class":563},[494,3012,505],{"class":504},[494,3014,3015],{"class":508}," spacing ",[494,3017,698],{"class":504},[494,3019,701],{"class":504},[494,3021,3022],{"class":573}," useSpacingDesignTokens",[494,3024,1009],{"class":508},[494,3026,600],{"class":504},[494,3028,505],{"class":504},[494,3030,722],{"class":1029},[494,3032,743],{"class":504},[494,3034,518],{"class":504},[494,3036,1695],{"class":521},[494,3038,525],{"class":504},[494,3040,512],{"class":504},[494,3042,1048],{"class":508},[494,3044,528],{"class":504},[494,3046,3047],{"class":496,"line":640},[494,3048,557],{"emptyLinePlaceholder":206},[494,3050,3051],{"class":496,"line":651},[494,3052,3053],{"class":603},"// Create spacing scale\n",[494,3055,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112],{"class":496,"line":662},[494,3057,564],{"class":563},[494,3059,1719],{"class":508},[494,3061,570],{"class":504},[494,3063,952],{"class":573},[494,3065,1009],{"class":508},[494,3067,600],{"class":504},[494,3069,2460],{"class":508},[494,3071,600],{"class":504},[494,3073,1349],{"class":508},[494,3075,1352],{"class":504},[494,3077,1355],{"class":758},[494,3079,600],{"class":504},[494,3081,1360],{"class":504},[494,3083,1363],{"class":758},[494,3085,600],{"class":504},[494,3087,1360],{"class":504},[494,3089,1370],{"class":758},[494,3091,600],{"class":504},[494,3093,1380],{"class":758},[494,3095,600],{"class":504},[494,3097,1385],{"class":758},[494,3099,600],{"class":504},[494,3101,1390],{"class":758},[494,3103,600],{"class":504},[494,3105,1395],{"class":758},[494,3107,600],{"class":504},[494,3109,1400],{"class":758},[494,3111,1408],{"class":508},[494,3113,528],{"class":504},[494,3115,3116],{"class":496,"line":673},[494,3117,557],{"emptyLinePlaceholder":206},[494,3119,3120],{"class":496,"line":684},[494,3121,3122],{"class":603},"// Create spacing variables automatically\n",[494,3124,3125,3127],{"class":496,"line":695},[494,3126,564],{"class":563},[494,3128,591],{"class":504},[494,3130,3131,3134],{"class":496,"line":711},[494,3132,3133],{"class":508},"    spacing3xs",[494,3135,1024],{"class":504},[494,3137,3138,3141],{"class":496,"line":716},[494,3139,3140],{"class":508},"    spacing2xs",[494,3142,1024],{"class":504},[494,3144,3145,3148],{"class":496,"line":1800},[494,3146,3147],{"class":508},"    spacingXs",[494,3149,1024],{"class":504},[494,3151,3152,3155],{"class":496,"line":1811},[494,3153,3154],{"class":508},"    spacingMd",[494,3156,1024],{"class":504},[494,3158,3159,3162],{"class":496,"line":1831},[494,3160,3161],{"class":508},"    spacingLg",[494,3163,1024],{"class":504},[494,3165,3166,3169],{"class":496,"line":1851},[494,3167,3168],{"class":508},"    spacingXl",[494,3170,1024],{"class":504},[494,3172,3173,3176],{"class":496,"line":1869},[494,3174,3175],{"class":508},"    spacing2xl",[494,3177,1024],{"class":504},[494,3179,3180,3183],{"class":496,"line":1886},[494,3181,3182],{"class":508},"    spacing3xl",[494,3184,1024],{"class":504},[494,3186,3187,3189,3191,3193,3195,3197,3200,3202],{"class":496,"line":1902},[494,3188,698],{"class":504},[494,3190,701],{"class":504},[494,3192,1603],{"class":573},[494,3194,1009],{"class":508},[494,3196,600],{"class":504},[494,3198,3199],{"class":508}," spacing",[494,3201,600],{"class":504},[494,3203,591],{"class":504},[494,3205,3206,3208,3211,3213,3215,3217,3219,3221,3223,3225],{"class":496,"line":1918},[494,3207,1921],{"class":504},[494,3209,3210],{"class":1029},"3xs",[494,3212,525],{"class":504},[494,3214,743],{"class":504},[494,3216,1839],{"class":508},[494,3218,1352],{"class":504},[494,3220,1355],{"class":758},[494,3222,1846],{"class":508},[494,3224,600],{"class":504},[494,3226,3227],{"class":603},"  // ~0.704rem\n",[494,3229,3230,3232,3235,3237,3239,3241,3243,3245,3247,3249],{"class":496,"line":1939},[494,3231,1921],{"class":504},[494,3233,3234],{"class":1029},"2xs",[494,3236,525],{"class":504},[494,3238,743],{"class":504},[494,3240,1839],{"class":508},[494,3242,1352],{"class":504},[494,3244,1363],{"class":758},[494,3246,1846],{"class":508},[494,3248,600],{"class":504},[494,3250,3251],{"class":603},"  // ~0.790rem\n",[494,3253,3254,3256,3258,3260,3262,3264,3266,3268],{"class":496,"line":1948},[494,3255,1834],{"class":1029},[494,3257,743],{"class":504},[494,3259,1839],{"class":508},[494,3261,1352],{"class":504},[494,3263,1370],{"class":758},[494,3265,1846],{"class":508},[494,3267,600],{"class":504},[494,3269,3270],{"class":603},"     // ~0.889rem\n",[494,3272,3273,3275,3277,3279,3281,3283,3285],{"class":496,"line":1953},[494,3274,1872],{"class":1029},[494,3276,743],{"class":504},[494,3278,1839],{"class":508},[494,3280,1370],{"class":758},[494,3282,1846],{"class":508},[494,3284,600],{"class":504},[494,3286,3287],{"class":603},"      // ~1.125rem\n",[494,3289,3290,3292,3294,3296,3298,3300,3302],{"class":496,"line":2657},[494,3291,1889],{"class":1029},[494,3293,743],{"class":504},[494,3295,1839],{"class":508},[494,3297,1363],{"class":758},[494,3299,1846],{"class":508},[494,3301,600],{"class":504},[494,3303,3304],{"class":603},"      // ~1.266rem\n",[494,3306,3308,3310,3312,3314,3316,3318,3320],{"class":496,"line":3307},31,[494,3309,1905],{"class":1029},[494,3311,743],{"class":504},[494,3313,1839],{"class":508},[494,3315,1355],{"class":758},[494,3317,1846],{"class":508},[494,3319,600],{"class":504},[494,3321,3322],{"class":603},"      // ~1.424rem\n",[494,3324,3326,3328,3330,3332,3334,3336,3339,3341,3343],{"class":496,"line":3325},32,[494,3327,1921],{"class":504},[494,3329,1924],{"class":1029},[494,3331,525],{"class":504},[494,3333,743],{"class":504},[494,3335,1839],{"class":508},[494,3337,3338],{"class":758},"4",[494,3340,1846],{"class":508},[494,3342,600],{"class":504},[494,3344,3345],{"class":603},"   // ~1.602rem\n",[494,3347,3349,3351,3354,3356,3358,3360,3363,3365,3367],{"class":496,"line":3348},33,[494,3350,1921],{"class":504},[494,3352,3353],{"class":1029},"3xl",[494,3355,525],{"class":504},[494,3357,743],{"class":504},[494,3359,1839],{"class":508},[494,3361,3362],{"class":758},"5",[494,3364,1846],{"class":508},[494,3366,600],{"class":504},[494,3368,3369],{"class":603},"   // ~1.802rem\n",[494,3371,3373,3375,3377],{"class":496,"line":3372},34,[494,3374,698],{"class":504},[494,3376,1048],{"class":508},[494,3378,528],{"class":504},[494,3380,3382],{"class":496,"line":3381},35,[494,3383,557],{"emptyLinePlaceholder":206},[494,3385,3387,3389,3391,3393],{"class":496,"line":3386},36,[494,3388,719],{"class":500},[494,3390,722],{"class":500},[494,3392,725],{"class":508},[494,3394,528],{"class":504},[479,3396,3397],{"icon":140,"label":730},[484,3398,3400],{"className":733,"code":3399,"filename":735,"language":736,"meta":490,"style":490},":root {\n    --scale--minor-third: 1.2;\n    --scale: var(--scale--minor-third);\n    --spacing: 1rem;\n    --spacing--xs: calc(var(--spacing) * 1 / var(--scale) / var(--scale));\n    --spacing--sm: calc(var(--spacing) * 1 / var(--scale));\n    --spacing--md: calc(var(--spacing) * 1);\n    --spacing--lg: calc(var(--spacing) * var(--scale));\n    --spacing--xl: calc(var(--spacing) * var(--scale) * var(--scale));\n}\n",[461,3401,3402,3410,3420,3434,3445,3489,3522,3547,3576,3615],{"__ignoreMap":490},[494,3403,3404,3406,3408],{"class":496,"line":497},[494,3405,743],{"class":504},[494,3407,746],{"class":563},[494,3409,591],{"class":504},[494,3411,3412,3414,3416,3418],{"class":496,"line":531},[494,3413,778],{"class":508},[494,3415,743],{"class":504},[494,3417,783],{"class":758},[494,3419,528],{"class":504},[494,3421,3422,3424,3426,3428,3430,3432],{"class":496,"line":554},[494,3423,850],{"class":508},[494,3425,743],{"class":504},[494,3427,855],{"class":573},[494,3429,858],{"class":504},[494,3431,861],{"class":508},[494,3433,864],{"class":504},[494,3435,3436,3439,3441,3443],{"class":496,"line":560},[494,3437,3438],{"class":508},"    --spacing",[494,3440,743],{"class":504},[494,3442,2010],{"class":758},[494,3444,528],{"class":504},[494,3446,3447,3450,3452,3454,3456,3458,3460,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487],{"class":496,"line":581},[494,3448,3449],{"class":508},"    --spacing--xs",[494,3451,743],{"class":504},[494,3453,2022],{"class":573},[494,3455,858],{"class":504},[494,3457,2027],{"class":573},[494,3459,858],{"class":504},[494,3461,3462],{"class":508},"--spacing",[494,3464,1048],{"class":504},[494,3466,2037],{"class":504},[494,3468,1380],{"class":758},[494,3470,2042],{"class":504},[494,3472,855],{"class":573},[494,3474,858],{"class":504},[494,3476,2049],{"class":508},[494,3478,1048],{"class":504},[494,3480,2042],{"class":504},[494,3482,855],{"class":573},[494,3484,858],{"class":504},[494,3486,2049],{"class":508},[494,3488,2062],{"class":504},[494,3490,3491,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520],{"class":496,"line":586},[494,3492,3493],{"class":508},"    --spacing--sm",[494,3495,743],{"class":504},[494,3497,2022],{"class":573},[494,3499,858],{"class":504},[494,3501,2027],{"class":573},[494,3503,858],{"class":504},[494,3505,3462],{"class":508},[494,3507,1048],{"class":504},[494,3509,2037],{"class":504},[494,3511,1380],{"class":758},[494,3513,2042],{"class":504},[494,3515,855],{"class":573},[494,3517,858],{"class":504},[494,3519,2049],{"class":508},[494,3521,2062],{"class":504},[494,3523,3524,3527,3529,3531,3533,3535,3537,3539,3541,3543,3545],{"class":496,"line":594},[494,3525,3526],{"class":508},"    --spacing--md",[494,3528,743],{"class":504},[494,3530,2022],{"class":573},[494,3532,858],{"class":504},[494,3534,2027],{"class":573},[494,3536,858],{"class":504},[494,3538,3462],{"class":508},[494,3540,1048],{"class":504},[494,3542,2037],{"class":504},[494,3544,1380],{"class":758},[494,3546,864],{"class":504},[494,3548,3549,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574],{"class":496,"line":607},[494,3550,3551],{"class":508},"    --spacing--lg",[494,3553,743],{"class":504},[494,3555,2022],{"class":573},[494,3557,858],{"class":504},[494,3559,2027],{"class":573},[494,3561,858],{"class":504},[494,3563,3462],{"class":508},[494,3565,1048],{"class":504},[494,3567,2037],{"class":504},[494,3569,855],{"class":573},[494,3571,858],{"class":504},[494,3573,2049],{"class":508},[494,3575,2062],{"class":504},[494,3577,3578,3581,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613],{"class":496,"line":618},[494,3579,3580],{"class":508},"    --spacing--xl",[494,3582,743],{"class":504},[494,3584,2022],{"class":573},[494,3586,858],{"class":504},[494,3588,2027],{"class":573},[494,3590,858],{"class":504},[494,3592,3462],{"class":508},[494,3594,1048],{"class":504},[494,3596,2037],{"class":504},[494,3598,855],{"class":573},[494,3600,858],{"class":504},[494,3602,2049],{"class":508},[494,3604,1048],{"class":504},[494,3606,2037],{"class":504},[494,3608,855],{"class":573},[494,3610,858],{"class":504},[494,3612,2049],{"class":508},[494,3614,2062],{"class":504},[494,3616,3617],{"class":496,"line":629},[494,3618,869],{"class":504},[414,3620,3622],{"id":3621},"scale-reference-guide","Scale Reference Guide",[418,3624,3625],{},"Here's a reference for each scale ratio and its typical use cases:",[3627,3628,3629,3645],"table",{},[3630,3631,3632],"thead",{},[3633,3634,3635,3639,3642],"tr",{},[3636,3637,3638],"th",{},"Scale",[3636,3640,3641],{},"Ratio",[3636,3643,3644],{},"Use Case",[3646,3647,3648,3662,3675,3688,3701,3714,3727,3740],"tbody",{},[3633,3649,3650,3656,3659],{},[3651,3652,3653],"td",{},[435,3654,3655],{},"Minor Second",[3651,3657,3658],{},"1.067",[3651,3660,3661],{},"Very subtle scaling, ideal for fine-tuned adjustments",[3633,3663,3664,3669,3672],{},[3651,3665,3666],{},[435,3667,3668],{},"Major Second",[3651,3670,3671],{},"1.125",[3651,3673,3674],{},"Subtle but noticeable, great for spacing systems",[3633,3676,3677,3682,3685],{},[3651,3678,3679],{},[435,3680,3681],{},"Minor Third",[3651,3683,3684],{},"1.2",[3651,3686,3687],{},"Balanced scaling, versatile for most applications",[3633,3689,3690,3695,3698],{},[3651,3691,3692],{},[435,3693,3694],{},"Major Third",[3651,3696,3697],{},"1.25",[3651,3699,3700],{},"Popular for web typography, clear hierarchy",[3633,3702,3703,3708,3711],{},[3651,3704,3705],{},[435,3706,3707],{},"Perfect Fourth",[3651,3709,3710],{},"1.333",[3651,3712,3713],{},"Classic choice, strong but not overwhelming",[3633,3715,3716,3721,3724],{},[3651,3717,3718],{},[435,3719,3720],{},"Augmented Fourth",[3651,3722,3723],{},"1.414",[3651,3725,3726],{},"Square root of 2, mathematically derived",[3633,3728,3729,3734,3737],{},[3651,3730,3731],{},[435,3732,3733],{},"Perfect Fifth",[3651,3735,3736],{},"1.5",[3651,3738,3739],{},"Pronounced scaling, creates clear distinctions",[3633,3741,3742,3747,3750],{},[3651,3743,3744],{},[435,3745,3746],{},"Golden Ratio",[3651,3748,3749],{},"1.618",[3651,3751,3752],{},"Dramatic scaling, ideal for hero sections",[414,3754,3756],{"id":3755},"best-practices","Best Practices",[429,3758,3759,3765,3771,3777,3783,3789],{},[432,3760,3761,3764],{},[435,3762,3763],{},"Choose one primary scale"," for most of your design system to maintain consistency.",[432,3766,3767,3770],{},[435,3768,3769],{},"Use smaller ratios (1.125-1.25)"," for spacing and line-height where subtle differences work best.",[432,3772,3773,3776],{},[435,3774,3775],{},"Use larger ratios (1.333-1.618)"," for typography and major layout elements where clear hierarchy is important.",[432,3778,3779,3782],{},[435,3780,3781],{},"Limit your power range"," to avoid too many size options (typically -3 to 6 is sufficient).",[432,3784,3785,3788],{},[435,3786,3787],{},"Document your scale decisions"," so team members understand which scale to use for different purposes.",[432,3790,3791,3794],{},[435,3792,3793],{},"Test on real content"," to ensure your scale works well across different contexts and viewport sizes.",[1519,3796,3797,3800],{},[435,3798,3799],{},"Interesting fact:"," Modular scales originated from music theory, where these same ratios define harmonious musical intervals. This mathematical harmony translates beautifully to visual design, creating naturally pleasing proportions.",[414,3802,3804],{"id":3803},"faq","FAQ",[3806,3807,3808,3827,3831,3835,3839,3852,3859,3951,3958,3971],"accordion",{},[3809,3810,3813,3814,2273,3816,3818,3819,3822,3823,3826],"accordion-item",{"icon":3811,"label":3812},"i-lucide-circle-help","How do I choose the right scale for my project?","Start with the ",[435,3815,893],{},[435,3817,897],{}," for typography — they're versatile and work well for most designs. For spacing, try the ",[435,3820,3821],{},"Major Second (1.125)"," for subtle progressions or ",[435,3824,3825],{},"Minor Third (1.2)"," for slightly more contrast. Test with real content and adjust if steps feel too similar or too far apart.",[3809,3828,3830],{"icon":3811,"label":3829},"What does 'power' mean in scale calculations?","Power refers to how many times you multiply by the scale ratio. For example, with a scale of 1.25: power 2 = 1.25², power 3 = 1.25³, and so on. Negative powers work in reverse (dividing instead of multiplying) to create smaller sizes. So power -2 = 1 ÷ 1.25².",[3809,3832,3834],{"icon":3811,"label":3833},"Why use mathematical scales instead of arbitrary multipliers?","Mathematical scales (like 1.25, 1.333, 1.618) are based on harmonious ratios found in music and nature, creating visually balanced proportions. Arbitrary multipliers (like 1.1, 1.3, 1.7) lack this mathematical foundation and often result in sizes that feel random or disconnected from each other.",[3809,3836,3838],{"icon":3811,"label":3837},"Should I use the same scale for typography and spacing?","Not necessarily. It's common to use different scales for different purposes — for example, a larger scale (1.333) for typography to create clear hierarchy, and a subtler scale (1.125) for spacing to avoid awkward gaps. The key is being consistent within each category.",[3809,3840,466,3842,3844,3845,3848,3849,3851],{"icon":3811,"label":3841},"What's the advantage of using the generic 'scale' variable?",[461,3843,473],{}," variable acts as a single control point for your design system. Instead of hardcoding specific scales like ",[461,3846,3847],{},"scalePerfectFourth",", you reference the generic ",[461,3850,473],{}," variable. This lets you switch your entire design's proportions by changing one variable at different breakpoints or in different themes, making your system more flexible and maintainable.",[3809,3853,3855,3856,3858],{"icon":3811,"label":3854},"Can I use different scales at different breakpoints?","Yes! Override the ",[461,3857,473],{}," variable at any breakpoint. For example, use a subtle scale (1.125) on mobile where space is limited, and a more dramatic scale (1.333) on desktop where larger type differences are easier to read. Your power-based sizes will automatically adjust while maintaining their relationships.",[3809,3860,3862,3868],{"icon":3811,"label":3861},"Can I change the scale after calling useScaleDesignTokens()?",[418,3863,3864,3865,3867],{},"Absolutely. Since ",[461,3866,473],{}," is a CSS variable, you can override it anywhere. For example, use the code below to switch to a tighter scale for compact UI areas while keeping the rest of your design unchanged.",[484,3869,3871],{"className":486,"code":3870,"filename":488,"language":489,"meta":490,"style":490},"s.selector('.compact', ({ variable }) => { \n    variable(scale, s.ref(scaleMajorSecond)); \n});\n",[461,3872,3873,3912,3943],{"__ignoreMap":490},[494,3874,3875,3878,3880,3883,3885,3887,3890,3892,3894,3897,3901,3904,3907,3909],{"class":496,"line":497},[494,3876,3877],{"class":508},"s",[494,3879,883],{"class":504},[494,3881,3882],{"class":573},"selector",[494,3884,858],{"class":508},[494,3886,525],{"class":504},[494,3888,3889],{"class":521},".compact",[494,3891,525],{"class":504},[494,3893,600],{"class":504},[494,3895,3896],{"class":504}," ({",[494,3898,3900],{"class":3899},"sHdIc"," variable",[494,3902,3903],{"class":504}," })",[494,3905,3906],{"class":563}," =>",[494,3908,505],{"class":504},[494,3910,3911],{"class":1029}," \n",[494,3913,3914,3917,3919,3921,3923,3925,3927,3930,3932,3935,3938,3941],{"class":496,"line":531},[494,3915,3916],{"class":573},"    variable",[494,3918,858],{"class":1029},[494,3920,473],{"class":508},[494,3922,600],{"class":504},[494,3924,725],{"class":508},[494,3926,883],{"class":504},[494,3928,3929],{"class":573},"ref",[494,3931,858],{"class":1029},[494,3933,3934],{"class":508},"scaleMajorSecond",[494,3936,3937],{"class":1029},"))",[494,3939,3940],{"class":504},";",[494,3942,3911],{"class":1029},[494,3944,3945,3947,3949],{"class":496,"line":554},[494,3946,698],{"class":504},[494,3948,1048],{"class":508},[494,3950,528],{"class":504},[3809,3952,3954,3955,3957],{"icon":3811,"label":3953},"Why use CSS calc() instead of pre-calculating values?","Using ",[461,3956,2257],{}," with CSS variables keeps your scale system dynamic. When you change the base scale ratio or base size, all derived values update automatically without rebuilding your CSS. This is especially powerful for theming, responsive adjustments, and maintaining consistency across your design system.",[3809,3959,3961,3963,3964,3967,3968,3970],{"icon":3811,"label":3960},"What's the benefit of useMultiplierDesignTokens() over manual variables?",[461,3962,1534],{}," automates the creation of size variables based on your scale. Instead of manually writing ",[461,3965,3966],{},"s.variable('font-size.\u003Csize>', ...)"," for each size, it generates all variables automatically with consistent naming, creates proper ",[461,3969,2257],{}," expressions, and returns type-safe values. This reduces boilerplate and makes it easier to maintain a consistent naming convention.",[3809,3972,3974],{"icon":3811,"label":3973},"How do scales work with responsive design?","Scales and responsive design work together beautifully. You can either keep the same power levels while changing the scale ratio at different breakpoints, or keep the same ratio while adjusting base sizes. Both approaches maintain proportional harmony while adapting to different screen sizes and contexts.",[3976,3977,3978],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":490,"searchDepth":531,"depth":531,"links":3980},[3981,3982,3983,3986,3987,3988,3992,3993,3994],{"id":416,"depth":531,"text":64},{"id":423,"depth":531,"text":424},{"id":459,"depth":531,"text":463,"children":3984},[3985],{"id":906,"depth":554,"text":907},{"id":1218,"depth":531,"text":1221},{"id":1546,"depth":531,"text":1549},{"id":2279,"depth":531,"text":2280,"children":3989},[3990,3991],{"id":2283,"depth":554,"text":2284},{"id":2891,"depth":554,"text":2892},{"id":3621,"depth":531,"text":3622},{"id":3755,"depth":531,"text":3756},{"id":3803,"depth":531,"text":3804},"Create modular scale systems for typography and spacing using mathematical ratios based on musical intervals and the golden ratio.","md",null,{},{"title":208,"icon":7},{"title":409,"description":3995},{"loc":209},"9HroUn_EHeN8CCzaCSYZR7-87-WWx_fRw4pCyEc8UIo",[4004,4006],{"title":203,"path":204,"stem":205,"description":4005,"children":-1},"Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.",{"title":212,"path":213,"stem":214,"description":4007,"icon":7,"children":-1},"Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.",1776621133365]