[{"data":1,"prerenderedAt":7220},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-guides-create-design-system-in-under-15-minutes":407,"-docs-getting-started-guides-create-design-system-in-under-15-minutes-surround":7219},{"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":7210,"extension":7211,"links":7212,"meta":7213,"navigation":7,"path":7214,"seo":7215,"sitemap":7216,"stem":7217,"__hash__":7218},"docs_gettingStarted/docs/getting-started/03.guides/01.create-design-system-in-under-15-minutes.md","Create a Design System in Under 15 Minutes",{"type":411,"value":412,"toc":7193},"minimark",[413,421,427,434,439,442,461,465,468,473,481,1263,1269,1280,1283,1286,1300,1313,1317,1320,1323,1609,1612,1651,1655,1658,1662,1665,1711,1714,1719,1723,1726,2226,2236,2241,2245,2248,2431,2435,2438,2573,2578,2582,2585,2956,2969,2973,2976,2979,3209,3214,3217,3220,3533,3538,3541,3544,3642,3647,3651,3654,3762,3767,3771,3774,6090,6094,6097,6101,6104,6124,6127,6131,6134,6151,6156,6160,6163,6166,6192,6197,6201,6206,6209,6213,6911,6915,6918,6941,6944,6989,6993,7038,7042,7147,7151,7177,7180,7189],[414,415,416,420],"p",{},[417,418,419],"strong",{},"Building a design system from scratch can be daunting."," Between defining color palettes, typography scales, spacing systems, and component styles, it often takes weeks to get everything right.",[414,422,423,426],{},[417,424,425],{},"Introducing styleframe."," In this guide, you'll build a complete, production-ready design system in under 15 minutes using styleframe's composable design tokens with fluid responsive typography.",[428,429,430,433],"note",{},[417,431,432],{},"What you'll build:"," A cohesive design system with a full color palette (including automatic variants, tints, and shades), fluid typography that scales smoothly across viewports, consistent spacing, border tokens, shadows, and responsive breakpoints—all type-safe and theme-ready.",[435,436,438],"h2",{"id":437},"prerequisites","Prerequisites",[414,440,441],{},"Before starting, make sure you have:",[443,444,445,449,458],"ul",{},[446,447,448],"li",{},"Node.js 18+ installed",[446,450,451,452,457],{},"A project with Styleframe and Styleframe Pro installed (",[453,454,456],"a",{"href":455},"/docs/getting-started/installation/vite","Installation Guide",")",[446,459,460],{},"Basic understanding of CSS and TypeScript",[435,462,464],{"id":463},"step-1-foundation-colors-2-minutes","Step 1: Foundation – Colors (2 minutes)",[414,466,467],{},"Every great design system starts with colors. Let's create a comprehensive color system with automatic variants using the OKLCH color space.",[469,470,472],"h4",{"id":471},"define-your-base-colors","Define Your Base Colors",[414,474,475,476,480],{},"Open your ",[477,478,479],"code",{},"styleframe.config.ts"," and define your brand colors:",[482,483,488],"pre",{"className":484,"code":485,"language":486,"meta":487,"style":487},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useColorLevelDesignTokens, useColorShadeDesignTokens, useColorTintDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Define your brand colors\nconst { colorPrimary, colorSecondary, colorGray } = useColorDesignTokens(s, {\n    primary: '#0066ff',\n    secondary: '#7c3aed',\n    gray: '#64748b',\n} as const);\n\n// Define semantic colors\nconst { colorSuccess, colorWarning, colorError, colorInfo } = useColorDesignTokens(s, {\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n    info: '#06b6d4',\n} as const);\n\n// Generate colors - Primary level variants\nconst {\n    colorPrimary50,\n    colorPrimary100,\n    colorPrimary200,\n    colorPrimary300,\n    colorPrimary400,\n    colorPrimary500,\n    colorPrimary600,\n    colorPrimary700,\n    colorPrimary800,\n    colorPrimary900,\n    colorPrimary950,\n} = useColorLevelDesignTokens(s, colorPrimary);\n\n// Generate colors - Gray level variants\nconst {\n    colorGray50,\n    colorGray100,\n    colorGray200,\n    colorGray300,\n    colorGray400,\n    colorGray500,\n    colorGray600,\n    colorGray700,\n    colorGray800,\n    colorGray900,\n    colorGray950,\n} = useColorLevelDesignTokens(s, colorGray);\n\n// Generate shades (darker variants) for hover/active states\nconst {\n    colorPrimaryShade50,    // 5% darker\n    colorPrimaryShade100,   // 10% darker\n    colorPrimaryShade150,   // 15% darker\n    colorPrimaryShade200,   // 20% darker\n} = useColorShadeDesignTokens(s, colorPrimary);\n\n// Generate tints (lighter variants) for subtle backgrounds\nconst {\n    colorPrimaryTint50,     // 5% lighter\n    colorPrimaryTint100,    // 10% lighter\n    colorPrimaryTint150,    // 15% lighter\n    colorPrimaryTint200,    // 20% lighter\n} = useColorTintDesignTokens(s, colorPrimary);\n\nexport default s;\n","ts","",[477,489,490,526,565,571,592,597,604,640,660,677,694,709,714,720,757,774,791,808,825,838,843,849,856,864,872,880,888,896,904,912,920,928,936,944,962,967,973,980,988,996,1004,1012,1020,1028,1036,1044,1052,1060,1068,1086,1091,1097,1104,1115,1126,1137,1148,1165,1170,1176,1183,1194,1205,1216,1227,1244,1249],{"__ignoreMap":487},[491,492,495,499,503,507,510,513,516,520,523],"span",{"class":493,"line":494},"line",1,[491,496,498],{"class":497},"s7zQu","import",[491,500,502],{"class":501},"sMK4o"," {",[491,504,506],{"class":505},"sTEyZ"," styleframe",[491,508,509],{"class":501}," }",[491,511,512],{"class":497}," from",[491,514,515],{"class":501}," '",[491,517,519],{"class":518},"sfazB","styleframe",[491,521,522],{"class":501},"'",[491,524,525],{"class":501},";\n",[491,527,529,531,533,536,539,542,544,547,549,552,554,556,558,561,563],{"class":493,"line":528},2,[491,530,498],{"class":497},[491,532,502],{"class":501},[491,534,535],{"class":505}," useColorDesignTokens",[491,537,538],{"class":501},",",[491,540,541],{"class":505}," useColorLevelDesignTokens",[491,543,538],{"class":501},[491,545,546],{"class":505}," useColorShadeDesignTokens",[491,548,538],{"class":501},[491,550,551],{"class":505}," useColorTintDesignTokens",[491,553,509],{"class":501},[491,555,512],{"class":497},[491,557,515],{"class":501},[491,559,560],{"class":518},"@styleframe/theme",[491,562,522],{"class":501},[491,564,525],{"class":501},[491,566,568],{"class":493,"line":567},3,[491,569,570],{"emptyLinePlaceholder":206},"\n",[491,572,574,578,581,584,587,590],{"class":493,"line":573},4,[491,575,577],{"class":576},"spNyl","const",[491,579,580],{"class":505}," s ",[491,582,583],{"class":501},"=",[491,585,506],{"class":586},"s2Zo4",[491,588,589],{"class":505},"()",[491,591,525],{"class":501},[491,593,595],{"class":493,"line":594},5,[491,596,570],{"emptyLinePlaceholder":206},[491,598,600],{"class":493,"line":599},6,[491,601,603],{"class":602},"sHwdD","// Define your brand colors\n",[491,605,607,609,611,614,616,619,621,624,627,630,632,635,637],{"class":493,"line":606},7,[491,608,577],{"class":576},[491,610,502],{"class":501},[491,612,613],{"class":505}," colorPrimary",[491,615,538],{"class":501},[491,617,618],{"class":505}," colorSecondary",[491,620,538],{"class":501},[491,622,623],{"class":505}," colorGray ",[491,625,626],{"class":501},"}",[491,628,629],{"class":501}," =",[491,631,535],{"class":586},[491,633,634],{"class":505},"(s",[491,636,538],{"class":501},[491,638,639],{"class":501}," {\n",[491,641,643,647,650,652,655,657],{"class":493,"line":642},8,[491,644,646],{"class":645},"swJcz","    primary",[491,648,649],{"class":501},":",[491,651,515],{"class":501},[491,653,654],{"class":518},"#0066ff",[491,656,522],{"class":501},[491,658,659],{"class":501},",\n",[491,661,663,666,668,670,673,675],{"class":493,"line":662},9,[491,664,665],{"class":645},"    secondary",[491,667,649],{"class":501},[491,669,515],{"class":501},[491,671,672],{"class":518},"#7c3aed",[491,674,522],{"class":501},[491,676,659],{"class":501},[491,678,680,683,685,687,690,692],{"class":493,"line":679},10,[491,681,682],{"class":645},"    gray",[491,684,649],{"class":501},[491,686,515],{"class":501},[491,688,689],{"class":518},"#64748b",[491,691,522],{"class":501},[491,693,659],{"class":501},[491,695,697,699,702,705,707],{"class":493,"line":696},11,[491,698,626],{"class":501},[491,700,701],{"class":497}," as",[491,703,704],{"class":576}," const",[491,706,457],{"class":505},[491,708,525],{"class":501},[491,710,712],{"class":493,"line":711},12,[491,713,570],{"emptyLinePlaceholder":206},[491,715,717],{"class":493,"line":716},13,[491,718,719],{"class":602},"// Define semantic colors\n",[491,721,723,725,727,730,732,735,737,740,742,745,747,749,751,753,755],{"class":493,"line":722},14,[491,724,577],{"class":576},[491,726,502],{"class":501},[491,728,729],{"class":505}," colorSuccess",[491,731,538],{"class":501},[491,733,734],{"class":505}," colorWarning",[491,736,538],{"class":501},[491,738,739],{"class":505}," colorError",[491,741,538],{"class":501},[491,743,744],{"class":505}," colorInfo ",[491,746,626],{"class":501},[491,748,629],{"class":501},[491,750,535],{"class":586},[491,752,634],{"class":505},[491,754,538],{"class":501},[491,756,639],{"class":501},[491,758,760,763,765,767,770,772],{"class":493,"line":759},15,[491,761,762],{"class":645},"    success",[491,764,649],{"class":501},[491,766,515],{"class":501},[491,768,769],{"class":518},"#10b981",[491,771,522],{"class":501},[491,773,659],{"class":501},[491,775,777,780,782,784,787,789],{"class":493,"line":776},16,[491,778,779],{"class":645},"    warning",[491,781,649],{"class":501},[491,783,515],{"class":501},[491,785,786],{"class":518},"#f59e0b",[491,788,522],{"class":501},[491,790,659],{"class":501},[491,792,794,797,799,801,804,806],{"class":493,"line":793},17,[491,795,796],{"class":645},"    error",[491,798,649],{"class":501},[491,800,515],{"class":501},[491,802,803],{"class":518},"#ef4444",[491,805,522],{"class":501},[491,807,659],{"class":501},[491,809,811,814,816,818,821,823],{"class":493,"line":810},18,[491,812,813],{"class":645},"    info",[491,815,649],{"class":501},[491,817,515],{"class":501},[491,819,820],{"class":518},"#06b6d4",[491,822,522],{"class":501},[491,824,659],{"class":501},[491,826,828,830,832,834,836],{"class":493,"line":827},19,[491,829,626],{"class":501},[491,831,701],{"class":497},[491,833,704],{"class":576},[491,835,457],{"class":505},[491,837,525],{"class":501},[491,839,841],{"class":493,"line":840},20,[491,842,570],{"emptyLinePlaceholder":206},[491,844,846],{"class":493,"line":845},21,[491,847,848],{"class":602},"// Generate colors - Primary level variants\n",[491,850,852,854],{"class":493,"line":851},22,[491,853,577],{"class":576},[491,855,639],{"class":501},[491,857,859,862],{"class":493,"line":858},23,[491,860,861],{"class":505},"    colorPrimary50",[491,863,659],{"class":501},[491,865,867,870],{"class":493,"line":866},24,[491,868,869],{"class":505},"    colorPrimary100",[491,871,659],{"class":501},[491,873,875,878],{"class":493,"line":874},25,[491,876,877],{"class":505},"    colorPrimary200",[491,879,659],{"class":501},[491,881,883,886],{"class":493,"line":882},26,[491,884,885],{"class":505},"    colorPrimary300",[491,887,659],{"class":501},[491,889,891,894],{"class":493,"line":890},27,[491,892,893],{"class":505},"    colorPrimary400",[491,895,659],{"class":501},[491,897,899,902],{"class":493,"line":898},28,[491,900,901],{"class":505},"    colorPrimary500",[491,903,659],{"class":501},[491,905,907,910],{"class":493,"line":906},29,[491,908,909],{"class":505},"    colorPrimary600",[491,911,659],{"class":501},[491,913,915,918],{"class":493,"line":914},30,[491,916,917],{"class":505},"    colorPrimary700",[491,919,659],{"class":501},[491,921,923,926],{"class":493,"line":922},31,[491,924,925],{"class":505},"    colorPrimary800",[491,927,659],{"class":501},[491,929,931,934],{"class":493,"line":930},32,[491,932,933],{"class":505},"    colorPrimary900",[491,935,659],{"class":501},[491,937,939,942],{"class":493,"line":938},33,[491,940,941],{"class":505},"    colorPrimary950",[491,943,659],{"class":501},[491,945,947,949,951,953,955,957,960],{"class":493,"line":946},34,[491,948,626],{"class":501},[491,950,629],{"class":501},[491,952,541],{"class":586},[491,954,634],{"class":505},[491,956,538],{"class":501},[491,958,959],{"class":505}," colorPrimary)",[491,961,525],{"class":501},[491,963,965],{"class":493,"line":964},35,[491,966,570],{"emptyLinePlaceholder":206},[491,968,970],{"class":493,"line":969},36,[491,971,972],{"class":602},"// Generate colors - Gray level variants\n",[491,974,976,978],{"class":493,"line":975},37,[491,977,577],{"class":576},[491,979,639],{"class":501},[491,981,983,986],{"class":493,"line":982},38,[491,984,985],{"class":505},"    colorGray50",[491,987,659],{"class":501},[491,989,991,994],{"class":493,"line":990},39,[491,992,993],{"class":505},"    colorGray100",[491,995,659],{"class":501},[491,997,999,1002],{"class":493,"line":998},40,[491,1000,1001],{"class":505},"    colorGray200",[491,1003,659],{"class":501},[491,1005,1007,1010],{"class":493,"line":1006},41,[491,1008,1009],{"class":505},"    colorGray300",[491,1011,659],{"class":501},[491,1013,1015,1018],{"class":493,"line":1014},42,[491,1016,1017],{"class":505},"    colorGray400",[491,1019,659],{"class":501},[491,1021,1023,1026],{"class":493,"line":1022},43,[491,1024,1025],{"class":505},"    colorGray500",[491,1027,659],{"class":501},[491,1029,1031,1034],{"class":493,"line":1030},44,[491,1032,1033],{"class":505},"    colorGray600",[491,1035,659],{"class":501},[491,1037,1039,1042],{"class":493,"line":1038},45,[491,1040,1041],{"class":505},"    colorGray700",[491,1043,659],{"class":501},[491,1045,1047,1050],{"class":493,"line":1046},46,[491,1048,1049],{"class":505},"    colorGray800",[491,1051,659],{"class":501},[491,1053,1055,1058],{"class":493,"line":1054},47,[491,1056,1057],{"class":505},"    colorGray900",[491,1059,659],{"class":501},[491,1061,1063,1066],{"class":493,"line":1062},48,[491,1064,1065],{"class":505},"    colorGray950",[491,1067,659],{"class":501},[491,1069,1071,1073,1075,1077,1079,1081,1084],{"class":493,"line":1070},49,[491,1072,626],{"class":501},[491,1074,629],{"class":501},[491,1076,541],{"class":586},[491,1078,634],{"class":505},[491,1080,538],{"class":501},[491,1082,1083],{"class":505}," colorGray)",[491,1085,525],{"class":501},[491,1087,1089],{"class":493,"line":1088},50,[491,1090,570],{"emptyLinePlaceholder":206},[491,1092,1094],{"class":493,"line":1093},51,[491,1095,1096],{"class":602},"// Generate shades (darker variants) for hover/active states\n",[491,1098,1100,1102],{"class":493,"line":1099},52,[491,1101,577],{"class":576},[491,1103,639],{"class":501},[491,1105,1107,1110,1112],{"class":493,"line":1106},53,[491,1108,1109],{"class":505},"    colorPrimaryShade50",[491,1111,538],{"class":501},[491,1113,1114],{"class":602},"    // 5% darker\n",[491,1116,1118,1121,1123],{"class":493,"line":1117},54,[491,1119,1120],{"class":505},"    colorPrimaryShade100",[491,1122,538],{"class":501},[491,1124,1125],{"class":602},"   // 10% darker\n",[491,1127,1129,1132,1134],{"class":493,"line":1128},55,[491,1130,1131],{"class":505},"    colorPrimaryShade150",[491,1133,538],{"class":501},[491,1135,1136],{"class":602},"   // 15% darker\n",[491,1138,1140,1143,1145],{"class":493,"line":1139},56,[491,1141,1142],{"class":505},"    colorPrimaryShade200",[491,1144,538],{"class":501},[491,1146,1147],{"class":602},"   // 20% darker\n",[491,1149,1151,1153,1155,1157,1159,1161,1163],{"class":493,"line":1150},57,[491,1152,626],{"class":501},[491,1154,629],{"class":501},[491,1156,546],{"class":586},[491,1158,634],{"class":505},[491,1160,538],{"class":501},[491,1162,959],{"class":505},[491,1164,525],{"class":501},[491,1166,1168],{"class":493,"line":1167},58,[491,1169,570],{"emptyLinePlaceholder":206},[491,1171,1173],{"class":493,"line":1172},59,[491,1174,1175],{"class":602},"// Generate tints (lighter variants) for subtle backgrounds\n",[491,1177,1179,1181],{"class":493,"line":1178},60,[491,1180,577],{"class":576},[491,1182,639],{"class":501},[491,1184,1186,1189,1191],{"class":493,"line":1185},61,[491,1187,1188],{"class":505},"    colorPrimaryTint50",[491,1190,538],{"class":501},[491,1192,1193],{"class":602},"     // 5% lighter\n",[491,1195,1197,1200,1202],{"class":493,"line":1196},62,[491,1198,1199],{"class":505},"    colorPrimaryTint100",[491,1201,538],{"class":501},[491,1203,1204],{"class":602},"    // 10% lighter\n",[491,1206,1208,1211,1213],{"class":493,"line":1207},63,[491,1209,1210],{"class":505},"    colorPrimaryTint150",[491,1212,538],{"class":501},[491,1214,1215],{"class":602},"    // 15% lighter\n",[491,1217,1219,1222,1224],{"class":493,"line":1218},64,[491,1220,1221],{"class":505},"    colorPrimaryTint200",[491,1223,538],{"class":501},[491,1225,1226],{"class":602},"    // 20% lighter\n",[491,1228,1230,1232,1234,1236,1238,1240,1242],{"class":493,"line":1229},65,[491,1231,626],{"class":501},[491,1233,629],{"class":501},[491,1235,551],{"class":586},[491,1237,634],{"class":505},[491,1239,538],{"class":501},[491,1241,959],{"class":505},[491,1243,525],{"class":501},[491,1245,1247],{"class":493,"line":1246},66,[491,1248,570],{"emptyLinePlaceholder":206},[491,1250,1252,1255,1258,1261],{"class":493,"line":1251},67,[491,1253,1254],{"class":497},"export",[491,1256,1257],{"class":497}," default",[491,1259,1260],{"class":505}," s",[491,1262,525],{"class":501},[414,1264,1265,1268],{},[417,1266,1267],{},"That's it!"," You now have a complete color system with:",[443,1270,1271,1274,1277],{},[446,1272,1273],{},"11 level variants per color (50-950)",[446,1275,1276],{},"4 shade variants (darker) for hover/active states",[446,1278,1279],{},"4 tint variants (lighter) for subtle backgrounds",[414,1281,1282],{},"All perceptually uniform thanks to OKLCH. No manual color picking required!",[414,1284,1285],{},"Use these for:",[443,1287,1288,1294],{},[446,1289,1290,1293],{},[417,1291,1292],{},"Shades",": Hover/active states on buttons and interactive elements",[446,1295,1296,1299],{},[417,1297,1298],{},"Tints",": Subtle backgrounds, badges, alerts, and highlighted areas",[428,1301,1302,1308],{},[414,1303,1304,1307],{},[417,1305,1306],{},"Why OKLCH?"," Unlike HSL, OKLCH maintains perceptual uniformity — meaning lightness 50% actually looks halfway between black and white across all hues. This ensures your color scales look consistent.",[414,1309,1310],{},[453,1311,1312],{"href":182},"Learn more about colors →",[435,1314,1316],{"id":1315},"step-2-scales-the-secret-sauce-1-minute","Step 2: Scales – The Secret Sauce (1 minute)",[414,1318,1319],{},"Modular scales are the foundation of harmonious design systems. They use mathematical ratios to create proportional relationships between sizes.",[414,1321,1322],{},"For fluid typography, we'll define separate scales for mobile and desktop to optimize readability at different viewport sizes:",[482,1324,1326],{"className":484,"code":1325,"language":486,"meta":487,"style":487},"import { useScaleDesignTokens, useScalePowersDesignTokens, defaultScaleValues } from '@styleframe/theme';\n\n// Use Minor Third (1.2) for mobile, Major Third (1.25) for desktop\nconst { scaleMin, scaleMax } = useScaleDesignTokens(s, {\n    ...defaultScaleValues,\n    min: '@minor-third',   // 1.2 - subtle scaling for small screens\n    max: '@major-third',   // 1.25 - stronger hierarchy for large screens\n});\n\n// Generate scale powers from -3 to 5\n// These will be multipliers for creating proportional sizes\nconst scaleMinPowers = useScalePowersDesignTokens(s, scaleMin, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);\nconst scaleMaxPowers = useScalePowersDesignTokens(s, scaleMax, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);\n",[477,1327,1328,1359,1363,1368,1394,1404,1423,1442,1450,1454,1459,1464,1543],{"__ignoreMap":487},[491,1329,1330,1332,1334,1337,1339,1342,1344,1347,1349,1351,1353,1355,1357],{"class":493,"line":494},[491,1331,498],{"class":497},[491,1333,502],{"class":501},[491,1335,1336],{"class":505}," useScaleDesignTokens",[491,1338,538],{"class":501},[491,1340,1341],{"class":505}," useScalePowersDesignTokens",[491,1343,538],{"class":501},[491,1345,1346],{"class":505}," defaultScaleValues",[491,1348,509],{"class":501},[491,1350,512],{"class":497},[491,1352,515],{"class":501},[491,1354,560],{"class":518},[491,1356,522],{"class":501},[491,1358,525],{"class":501},[491,1360,1361],{"class":493,"line":528},[491,1362,570],{"emptyLinePlaceholder":206},[491,1364,1365],{"class":493,"line":567},[491,1366,1367],{"class":602},"// Use Minor Third (1.2) for mobile, Major Third (1.25) for desktop\n",[491,1369,1370,1372,1374,1377,1379,1382,1384,1386,1388,1390,1392],{"class":493,"line":573},[491,1371,577],{"class":576},[491,1373,502],{"class":501},[491,1375,1376],{"class":505}," scaleMin",[491,1378,538],{"class":501},[491,1380,1381],{"class":505}," scaleMax ",[491,1383,626],{"class":501},[491,1385,629],{"class":501},[491,1387,1336],{"class":586},[491,1389,634],{"class":505},[491,1391,538],{"class":501},[491,1393,639],{"class":501},[491,1395,1396,1399,1402],{"class":493,"line":594},[491,1397,1398],{"class":501},"    ...",[491,1400,1401],{"class":505},"defaultScaleValues",[491,1403,659],{"class":501},[491,1405,1406,1409,1411,1413,1416,1418,1420],{"class":493,"line":599},[491,1407,1408],{"class":645},"    min",[491,1410,649],{"class":501},[491,1412,515],{"class":501},[491,1414,1415],{"class":518},"@minor-third",[491,1417,522],{"class":501},[491,1419,538],{"class":501},[491,1421,1422],{"class":602},"   // 1.2 - subtle scaling for small screens\n",[491,1424,1425,1428,1430,1432,1435,1437,1439],{"class":493,"line":606},[491,1426,1427],{"class":645},"    max",[491,1429,649],{"class":501},[491,1431,515],{"class":501},[491,1433,1434],{"class":518},"@major-third",[491,1436,522],{"class":501},[491,1438,538],{"class":501},[491,1440,1441],{"class":602},"   // 1.25 - stronger hierarchy for large screens\n",[491,1443,1444,1446,1448],{"class":493,"line":642},[491,1445,626],{"class":501},[491,1447,457],{"class":505},[491,1449,525],{"class":501},[491,1451,1452],{"class":493,"line":662},[491,1453,570],{"emptyLinePlaceholder":206},[491,1455,1456],{"class":493,"line":679},[491,1457,1458],{"class":602},"// Generate scale powers from -3 to 5\n",[491,1460,1461],{"class":493,"line":696},[491,1462,1463],{"class":602},"// These will be multipliers for creating proportional sizes\n",[491,1465,1466,1468,1471,1473,1475,1477,1479,1481,1483,1486,1489,1493,1495,1498,1501,1503,1505,1508,1510,1513,1515,1518,1520,1523,1525,1528,1530,1533,1535,1538,1541],{"class":493,"line":711},[491,1467,577],{"class":576},[491,1469,1470],{"class":505}," scaleMinPowers ",[491,1472,583],{"class":501},[491,1474,1341],{"class":586},[491,1476,634],{"class":505},[491,1478,538],{"class":501},[491,1480,1376],{"class":505},[491,1482,538],{"class":501},[491,1484,1485],{"class":505}," [",[491,1487,1488],{"class":501},"-",[491,1490,1492],{"class":1491},"sbssI","3",[491,1494,538],{"class":501},[491,1496,1497],{"class":501}," -",[491,1499,1500],{"class":1491},"2",[491,1502,538],{"class":501},[491,1504,1497],{"class":501},[491,1506,1507],{"class":1491},"1",[491,1509,538],{"class":501},[491,1511,1512],{"class":1491}," 0",[491,1514,538],{"class":501},[491,1516,1517],{"class":1491}," 1",[491,1519,538],{"class":501},[491,1521,1522],{"class":1491}," 2",[491,1524,538],{"class":501},[491,1526,1527],{"class":1491}," 3",[491,1529,538],{"class":501},[491,1531,1532],{"class":1491}," 4",[491,1534,538],{"class":501},[491,1536,1537],{"class":1491}," 5",[491,1539,1540],{"class":505},"])",[491,1542,525],{"class":501},[491,1544,1545,1547,1550,1552,1554,1556,1558,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607],{"class":493,"line":716},[491,1546,577],{"class":576},[491,1548,1549],{"class":505}," scaleMaxPowers ",[491,1551,583],{"class":501},[491,1553,1341],{"class":586},[491,1555,634],{"class":505},[491,1557,538],{"class":501},[491,1559,1560],{"class":505}," scaleMax",[491,1562,538],{"class":501},[491,1564,1485],{"class":505},[491,1566,1488],{"class":501},[491,1568,1492],{"class":1491},[491,1570,538],{"class":501},[491,1572,1497],{"class":501},[491,1574,1500],{"class":1491},[491,1576,538],{"class":501},[491,1578,1497],{"class":501},[491,1580,1507],{"class":1491},[491,1582,538],{"class":501},[491,1584,1512],{"class":1491},[491,1586,538],{"class":501},[491,1588,1517],{"class":1491},[491,1590,538],{"class":501},[491,1592,1522],{"class":1491},[491,1594,538],{"class":501},[491,1596,1527],{"class":1491},[491,1598,538],{"class":501},[491,1600,1532],{"class":1491},[491,1602,538],{"class":501},[491,1604,1537],{"class":1491},[491,1606,1540],{"class":505},[491,1608,525],{"class":501},[414,1610,1611],{},"These scale powers will be used to create mathematically harmonious typography and spacing systems that adapt to viewport size.",[1613,1614,1615,1620,1646],"tip",{},[414,1616,1617],{},[417,1618,1619],{},"Scale Selection for Fluid Typography:",[443,1621,1622,1628,1634,1640],{},[446,1623,1624,1627],{},[417,1625,1626],{},"Minor Third → Major Third (1.2 → 1.25)",": Balanced, works for most sites",[446,1629,1630,1633],{},[417,1631,1632],{},"Minor Third → Perfect Fourth (1.2 → 1.333)",": More dramatic hierarchy for desktop",[446,1635,1636,1639],{},[417,1637,1638],{},"Major Second → Minor Third (1.125 → 1.2)",": Subtle, great for dense content",[446,1641,1642,1645],{},[417,1643,1644],{},"Major Third → Perfect Fourth (1.25 → 1.333)",": Bold, ideal for marketing sites",[414,1647,1648],{},[453,1649,1650],{"href":209},"Learn more about scales →",[435,1652,1654],{"id":1653},"step-3-fluid-typography-system-3-minutes","Step 3: Fluid Typography System (3 minutes)",[414,1656,1657],{},"With your scales defined, let's create a fluid typography system that scales smoothly across all viewport sizes — no breakpoints needed!",[469,1659,1661],{"id":1660},"setup-fluid-viewport","Setup Fluid Viewport",[414,1663,1664],{},"First, establish the viewport range for fluid calculations:",[482,1666,1668],{"className":484,"code":1667,"language":486,"meta":487,"style":487},"import { useFluidViewport } from '@styleframe/pro';\n\n// Set up fluid viewport (320px mobile → 1440px desktop)\nuseFluidViewport(s);\n",[477,1669,1670,1692,1696,1701],{"__ignoreMap":487},[491,1671,1672,1674,1676,1679,1681,1683,1685,1688,1690],{"class":493,"line":494},[491,1673,498],{"class":497},[491,1675,502],{"class":501},[491,1677,1678],{"class":505}," useFluidViewport",[491,1680,509],{"class":501},[491,1682,512],{"class":497},[491,1684,515],{"class":501},[491,1686,1687],{"class":518},"@styleframe/pro",[491,1689,522],{"class":501},[491,1691,525],{"class":501},[491,1693,1694],{"class":493,"line":528},[491,1695,570],{"emptyLinePlaceholder":206},[491,1697,1698],{"class":493,"line":567},[491,1699,1700],{"class":602},"// Set up fluid viewport (320px mobile → 1440px desktop)\n",[491,1702,1703,1706,1709],{"class":493,"line":573},[491,1704,1705],{"class":586},"useFluidViewport",[491,1707,1708],{"class":505},"(s)",[491,1710,525],{"class":501},[414,1712,1713],{},"This creates the foundation for all fluid design tokens. The composable automatically calculates a fluid breakpoint variable that represents the viewport's position between min and max widths.",[414,1715,1716],{},[453,1717,1718],{"href":200},"Learn more about fluid viewports →",[469,1720,1722],{"id":1721},"fluid-font-sizes-with-modular-scales","Fluid Font Sizes with Modular Scales",[414,1724,1725],{},"Create font sizes that scale smoothly from mobile to desktop using your modular scales:",[482,1727,1729],{"className":484,"code":1728,"language":486,"meta":487,"style":487},"import { useFluidFontSize } from '@styleframe/pro';\n\n// Generate fluid font sizes that scale from 16px→18px at the base\nconst {\n    fontSize,\n    fontSizeXs,    // Scale power -2: scales smoothly between mobile and desktop\n    fontSizeSm,    // Scale power -1\n    fontSizeMd,    // Scale power 0 (base size)\n    fontSizeLg,    // Scale power 1\n    fontSizeXl,    // Scale power 2\n    fontSize2xl,   // Scale power 3\n    fontSize3xl,   // Scale power 4\n    fontSize4xl,   // Scale power 5\n} = useFluidFontSize(\n    s,\n    { min: 16, max: 18 },  // Base font size: 16px mobile → 18px desktop\n    {\n        xs: { min: scaleMinPowers[-2], max: scaleMaxPowers[-2] },\n        sm: { min: scaleMinPowers[-1], max: scaleMaxPowers[-1] },\n        md: { min: scaleMinPowers[0], max: scaleMaxPowers[0] },\n        lg: { min: scaleMinPowers[1], max: scaleMaxPowers[1] },\n        xl: { min: scaleMinPowers[2], max: scaleMaxPowers[2] },\n        '2xl': { min: scaleMinPowers[3], max: scaleMaxPowers[3] },\n        '3xl': { min: scaleMinPowers[4], max: scaleMaxPowers[4] },\n        '4xl': { min: scaleMinPowers[5], max: scaleMaxPowers[5] },\n        default: '@md',\n    }\n);\n",[477,1730,1731,1752,1756,1761,1767,1774,1784,1794,1804,1814,1824,1834,1844,1854,1865,1872,1901,1906,1948,1985,2019,2052,2085,2123,2161,2199,2215,2220],{"__ignoreMap":487},[491,1732,1733,1735,1737,1740,1742,1744,1746,1748,1750],{"class":493,"line":494},[491,1734,498],{"class":497},[491,1736,502],{"class":501},[491,1738,1739],{"class":505}," useFluidFontSize",[491,1741,509],{"class":501},[491,1743,512],{"class":497},[491,1745,515],{"class":501},[491,1747,1687],{"class":518},[491,1749,522],{"class":501},[491,1751,525],{"class":501},[491,1753,1754],{"class":493,"line":528},[491,1755,570],{"emptyLinePlaceholder":206},[491,1757,1758],{"class":493,"line":567},[491,1759,1760],{"class":602},"// Generate fluid font sizes that scale from 16px→18px at the base\n",[491,1762,1763,1765],{"class":493,"line":573},[491,1764,577],{"class":576},[491,1766,639],{"class":501},[491,1768,1769,1772],{"class":493,"line":594},[491,1770,1771],{"class":505},"    fontSize",[491,1773,659],{"class":501},[491,1775,1776,1779,1781],{"class":493,"line":599},[491,1777,1778],{"class":505},"    fontSizeXs",[491,1780,538],{"class":501},[491,1782,1783],{"class":602},"    // Scale power -2: scales smoothly between mobile and desktop\n",[491,1785,1786,1789,1791],{"class":493,"line":606},[491,1787,1788],{"class":505},"    fontSizeSm",[491,1790,538],{"class":501},[491,1792,1793],{"class":602},"    // Scale power -1\n",[491,1795,1796,1799,1801],{"class":493,"line":642},[491,1797,1798],{"class":505},"    fontSizeMd",[491,1800,538],{"class":501},[491,1802,1803],{"class":602},"    // Scale power 0 (base size)\n",[491,1805,1806,1809,1811],{"class":493,"line":662},[491,1807,1808],{"class":505},"    fontSizeLg",[491,1810,538],{"class":501},[491,1812,1813],{"class":602},"    // Scale power 1\n",[491,1815,1816,1819,1821],{"class":493,"line":679},[491,1817,1818],{"class":505},"    fontSizeXl",[491,1820,538],{"class":501},[491,1822,1823],{"class":602},"    // Scale power 2\n",[491,1825,1826,1829,1831],{"class":493,"line":696},[491,1827,1828],{"class":505},"    fontSize2xl",[491,1830,538],{"class":501},[491,1832,1833],{"class":602},"   // Scale power 3\n",[491,1835,1836,1839,1841],{"class":493,"line":711},[491,1837,1838],{"class":505},"    fontSize3xl",[491,1840,538],{"class":501},[491,1842,1843],{"class":602},"   // Scale power 4\n",[491,1845,1846,1849,1851],{"class":493,"line":716},[491,1847,1848],{"class":505},"    fontSize4xl",[491,1850,538],{"class":501},[491,1852,1853],{"class":602},"   // Scale power 5\n",[491,1855,1856,1858,1860,1862],{"class":493,"line":722},[491,1857,626],{"class":501},[491,1859,629],{"class":501},[491,1861,1739],{"class":586},[491,1863,1864],{"class":505},"(\n",[491,1866,1867,1870],{"class":493,"line":759},[491,1868,1869],{"class":505},"    s",[491,1871,659],{"class":501},[491,1873,1874,1877,1880,1882,1885,1887,1890,1892,1895,1898],{"class":493,"line":776},[491,1875,1876],{"class":501},"    {",[491,1878,1879],{"class":645}," min",[491,1881,649],{"class":501},[491,1883,1884],{"class":1491}," 16",[491,1886,538],{"class":501},[491,1888,1889],{"class":645}," max",[491,1891,649],{"class":501},[491,1893,1894],{"class":1491}," 18",[491,1896,1897],{"class":501}," },",[491,1899,1900],{"class":602},"  // Base font size: 16px mobile → 18px desktop\n",[491,1902,1903],{"class":493,"line":793},[491,1904,1905],{"class":501},"    {\n",[491,1907,1908,1911,1913,1915,1917,1919,1922,1924,1926,1929,1931,1933,1935,1938,1940,1942,1945],{"class":493,"line":810},[491,1909,1910],{"class":645},"        xs",[491,1912,649],{"class":501},[491,1914,502],{"class":501},[491,1916,1879],{"class":645},[491,1918,649],{"class":501},[491,1920,1921],{"class":505}," scaleMinPowers[",[491,1923,1488],{"class":501},[491,1925,1500],{"class":1491},[491,1927,1928],{"class":505},"]",[491,1930,538],{"class":501},[491,1932,1889],{"class":645},[491,1934,649],{"class":501},[491,1936,1937],{"class":505}," scaleMaxPowers[",[491,1939,1488],{"class":501},[491,1941,1500],{"class":1491},[491,1943,1944],{"class":505},"] ",[491,1946,1947],{"class":501},"},\n",[491,1949,1950,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983],{"class":493,"line":827},[491,1951,1952],{"class":645},"        sm",[491,1954,649],{"class":501},[491,1956,502],{"class":501},[491,1958,1879],{"class":645},[491,1960,649],{"class":501},[491,1962,1921],{"class":505},[491,1964,1488],{"class":501},[491,1966,1507],{"class":1491},[491,1968,1928],{"class":505},[491,1970,538],{"class":501},[491,1972,1889],{"class":645},[491,1974,649],{"class":501},[491,1976,1937],{"class":505},[491,1978,1488],{"class":501},[491,1980,1507],{"class":1491},[491,1982,1944],{"class":505},[491,1984,1947],{"class":501},[491,1986,1987,1990,1992,1994,1996,1998,2000,2003,2005,2007,2009,2011,2013,2015,2017],{"class":493,"line":840},[491,1988,1989],{"class":645},"        md",[491,1991,649],{"class":501},[491,1993,502],{"class":501},[491,1995,1879],{"class":645},[491,1997,649],{"class":501},[491,1999,1921],{"class":505},[491,2001,2002],{"class":1491},"0",[491,2004,1928],{"class":505},[491,2006,538],{"class":501},[491,2008,1889],{"class":645},[491,2010,649],{"class":501},[491,2012,1937],{"class":505},[491,2014,2002],{"class":1491},[491,2016,1944],{"class":505},[491,2018,1947],{"class":501},[491,2020,2021,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046,2048,2050],{"class":493,"line":845},[491,2022,2023],{"class":645},"        lg",[491,2025,649],{"class":501},[491,2027,502],{"class":501},[491,2029,1879],{"class":645},[491,2031,649],{"class":501},[491,2033,1921],{"class":505},[491,2035,1507],{"class":1491},[491,2037,1928],{"class":505},[491,2039,538],{"class":501},[491,2041,1889],{"class":645},[491,2043,649],{"class":501},[491,2045,1937],{"class":505},[491,2047,1507],{"class":1491},[491,2049,1944],{"class":505},[491,2051,1947],{"class":501},[491,2053,2054,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083],{"class":493,"line":851},[491,2055,2056],{"class":645},"        xl",[491,2058,649],{"class":501},[491,2060,502],{"class":501},[491,2062,1879],{"class":645},[491,2064,649],{"class":501},[491,2066,1921],{"class":505},[491,2068,1500],{"class":1491},[491,2070,1928],{"class":505},[491,2072,538],{"class":501},[491,2074,1889],{"class":645},[491,2076,649],{"class":501},[491,2078,1937],{"class":505},[491,2080,1500],{"class":1491},[491,2082,1944],{"class":505},[491,2084,1947],{"class":501},[491,2086,2087,2090,2093,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119,2121],{"class":493,"line":858},[491,2088,2089],{"class":501},"        '",[491,2091,2092],{"class":645},"2xl",[491,2094,522],{"class":501},[491,2096,649],{"class":501},[491,2098,502],{"class":501},[491,2100,1879],{"class":645},[491,2102,649],{"class":501},[491,2104,1921],{"class":505},[491,2106,1492],{"class":1491},[491,2108,1928],{"class":505},[491,2110,538],{"class":501},[491,2112,1889],{"class":645},[491,2114,649],{"class":501},[491,2116,1937],{"class":505},[491,2118,1492],{"class":1491},[491,2120,1944],{"class":505},[491,2122,1947],{"class":501},[491,2124,2125,2127,2130,2132,2134,2136,2138,2140,2142,2145,2147,2149,2151,2153,2155,2157,2159],{"class":493,"line":866},[491,2126,2089],{"class":501},[491,2128,2129],{"class":645},"3xl",[491,2131,522],{"class":501},[491,2133,649],{"class":501},[491,2135,502],{"class":501},[491,2137,1879],{"class":645},[491,2139,649],{"class":501},[491,2141,1921],{"class":505},[491,2143,2144],{"class":1491},"4",[491,2146,1928],{"class":505},[491,2148,538],{"class":501},[491,2150,1889],{"class":645},[491,2152,649],{"class":501},[491,2154,1937],{"class":505},[491,2156,2144],{"class":1491},[491,2158,1944],{"class":505},[491,2160,1947],{"class":501},[491,2162,2163,2165,2168,2170,2172,2174,2176,2178,2180,2183,2185,2187,2189,2191,2193,2195,2197],{"class":493,"line":874},[491,2164,2089],{"class":501},[491,2166,2167],{"class":645},"4xl",[491,2169,522],{"class":501},[491,2171,649],{"class":501},[491,2173,502],{"class":501},[491,2175,1879],{"class":645},[491,2177,649],{"class":501},[491,2179,1921],{"class":505},[491,2181,2182],{"class":1491},"5",[491,2184,1928],{"class":505},[491,2186,538],{"class":501},[491,2188,1889],{"class":645},[491,2190,649],{"class":501},[491,2192,1937],{"class":505},[491,2194,2182],{"class":1491},[491,2196,1944],{"class":505},[491,2198,1947],{"class":501},[491,2200,2201,2204,2206,2208,2211,2213],{"class":493,"line":882},[491,2202,2203],{"class":645},"        default",[491,2205,649],{"class":501},[491,2207,515],{"class":501},[491,2209,2210],{"class":518},"@md",[491,2212,522],{"class":501},[491,2214,659],{"class":501},[491,2216,2217],{"class":493,"line":890},[491,2218,2219],{"class":501},"    }\n",[491,2221,2222,2224],{"class":493,"line":898},[491,2223,457],{"class":505},[491,2225,525],{"class":501},[414,2227,2228,2231,2232,2235],{},[417,2229,2230],{},"The magic:"," Each font size automatically scales between mobile and desktop using complex CSS ",[477,2233,2234],{},"calc()"," functions. Your h1 might go from 38px on mobile to 90px on desktop—smoothly scaling at every viewport width in between!",[414,2237,2238],{},[453,2239,2240],{"href":204},"Learn more about fluid typography →",[469,2242,2244],{"id":2243},"font-families","Font Families",[414,2246,2247],{},"Define your font stacks:",[482,2249,2251],{"className":484,"code":2250,"language":486,"meta":487,"style":487},"import { useFontFamilyDesignTokens, useFontWeightDesignTokens } from '@styleframe/theme';\n\nconst { fontFamily, fontFamilyMono, fontFamilyDisplay } = useFontFamilyDesignTokens(s, {\n    default: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    mono: '\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", monospace',\n    display: '\"Inter Display\", -apple-system, sans-serif',\n} as const);\n\nconst { \n    fontWeightNormal, \n    fontWeightMedium, \n    fontWeightSemibold, \n    fontWeightBold \n} = useFontWeightDesignTokens(s);\n",[477,2252,2253,2279,2283,2314,2330,2346,2362,2374,2378,2387,2396,2405,2414,2419],{"__ignoreMap":487},[491,2254,2255,2257,2259,2262,2264,2267,2269,2271,2273,2275,2277],{"class":493,"line":494},[491,2256,498],{"class":497},[491,2258,502],{"class":501},[491,2260,2261],{"class":505}," useFontFamilyDesignTokens",[491,2263,538],{"class":501},[491,2265,2266],{"class":505}," useFontWeightDesignTokens",[491,2268,509],{"class":501},[491,2270,512],{"class":497},[491,2272,515],{"class":501},[491,2274,560],{"class":518},[491,2276,522],{"class":501},[491,2278,525],{"class":501},[491,2280,2281],{"class":493,"line":528},[491,2282,570],{"emptyLinePlaceholder":206},[491,2284,2285,2287,2289,2292,2294,2297,2299,2302,2304,2306,2308,2310,2312],{"class":493,"line":567},[491,2286,577],{"class":576},[491,2288,502],{"class":501},[491,2290,2291],{"class":505}," fontFamily",[491,2293,538],{"class":501},[491,2295,2296],{"class":505}," fontFamilyMono",[491,2298,538],{"class":501},[491,2300,2301],{"class":505}," fontFamilyDisplay ",[491,2303,626],{"class":501},[491,2305,629],{"class":501},[491,2307,2261],{"class":586},[491,2309,634],{"class":505},[491,2311,538],{"class":501},[491,2313,639],{"class":501},[491,2315,2316,2319,2321,2323,2326,2328],{"class":493,"line":573},[491,2317,2318],{"class":645},"    default",[491,2320,649],{"class":501},[491,2322,515],{"class":501},[491,2324,2325],{"class":518},"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",[491,2327,522],{"class":501},[491,2329,659],{"class":501},[491,2331,2332,2335,2337,2339,2342,2344],{"class":493,"line":594},[491,2333,2334],{"class":645},"    mono",[491,2336,649],{"class":501},[491,2338,515],{"class":501},[491,2340,2341],{"class":518},"\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", monospace",[491,2343,522],{"class":501},[491,2345,659],{"class":501},[491,2347,2348,2351,2353,2355,2358,2360],{"class":493,"line":599},[491,2349,2350],{"class":645},"    display",[491,2352,649],{"class":501},[491,2354,515],{"class":501},[491,2356,2357],{"class":518},"\"Inter Display\", -apple-system, sans-serif",[491,2359,522],{"class":501},[491,2361,659],{"class":501},[491,2363,2364,2366,2368,2370,2372],{"class":493,"line":606},[491,2365,626],{"class":501},[491,2367,701],{"class":497},[491,2369,704],{"class":576},[491,2371,457],{"class":505},[491,2373,525],{"class":501},[491,2375,2376],{"class":493,"line":642},[491,2377,570],{"emptyLinePlaceholder":206},[491,2379,2380,2382,2384],{"class":493,"line":662},[491,2381,577],{"class":576},[491,2383,502],{"class":501},[491,2385,2386],{"class":505}," \n",[491,2388,2389,2392,2394],{"class":493,"line":679},[491,2390,2391],{"class":505},"    fontWeightNormal",[491,2393,538],{"class":501},[491,2395,2386],{"class":505},[491,2397,2398,2401,2403],{"class":493,"line":696},[491,2399,2400],{"class":505},"    fontWeightMedium",[491,2402,538],{"class":501},[491,2404,2386],{"class":505},[491,2406,2407,2410,2412],{"class":493,"line":711},[491,2408,2409],{"class":505},"    fontWeightSemibold",[491,2411,538],{"class":501},[491,2413,2386],{"class":505},[491,2415,2416],{"class":493,"line":716},[491,2417,2418],{"class":505},"    fontWeightBold \n",[491,2420,2421,2423,2425,2427,2429],{"class":493,"line":722},[491,2422,626],{"class":501},[491,2424,629],{"class":501},[491,2426,2266],{"class":586},[491,2428,1708],{"class":505},[491,2430,525],{"class":501},[469,2432,2434],{"id":2433},"line-heights-and-letter-spacing","Line Heights and Letter Spacing",[414,2436,2437],{},"Complete your typography system with optimal readability:",[482,2439,2441],{"className":484,"code":2440,"language":486,"meta":487,"style":487},"import { useLineHeightDesignTokens, useLetterSpacingDesignTokens } from '@styleframe/theme';\n\nconst {\n    lineHeightTight,    // 1.25 - for headlines\n    lineHeightNormal,   // 1.5 - for body text\n    lineHeightRelaxed,  // 1.75 - for long-form content\n} = useLineHeightDesignTokens(s);\n\nconst {\n    letterSpacingTight,   // -0.025em - for large text\n    letterSpacingNormal,  // 0 - standard\n    letterSpacingWide,    // 0.025em - for small text/labels\n} = useLetterSpacingDesignTokens(s);\n",[477,2442,2443,2469,2473,2479,2489,2499,2509,2521,2525,2531,2541,2551,2561],{"__ignoreMap":487},[491,2444,2445,2447,2449,2452,2454,2457,2459,2461,2463,2465,2467],{"class":493,"line":494},[491,2446,498],{"class":497},[491,2448,502],{"class":501},[491,2450,2451],{"class":505}," useLineHeightDesignTokens",[491,2453,538],{"class":501},[491,2455,2456],{"class":505}," useLetterSpacingDesignTokens",[491,2458,509],{"class":501},[491,2460,512],{"class":497},[491,2462,515],{"class":501},[491,2464,560],{"class":518},[491,2466,522],{"class":501},[491,2468,525],{"class":501},[491,2470,2471],{"class":493,"line":528},[491,2472,570],{"emptyLinePlaceholder":206},[491,2474,2475,2477],{"class":493,"line":567},[491,2476,577],{"class":576},[491,2478,639],{"class":501},[491,2480,2481,2484,2486],{"class":493,"line":573},[491,2482,2483],{"class":505},"    lineHeightTight",[491,2485,538],{"class":501},[491,2487,2488],{"class":602},"    // 1.25 - for headlines\n",[491,2490,2491,2494,2496],{"class":493,"line":594},[491,2492,2493],{"class":505},"    lineHeightNormal",[491,2495,538],{"class":501},[491,2497,2498],{"class":602},"   // 1.5 - for body text\n",[491,2500,2501,2504,2506],{"class":493,"line":599},[491,2502,2503],{"class":505},"    lineHeightRelaxed",[491,2505,538],{"class":501},[491,2507,2508],{"class":602},"  // 1.75 - for long-form content\n",[491,2510,2511,2513,2515,2517,2519],{"class":493,"line":606},[491,2512,626],{"class":501},[491,2514,629],{"class":501},[491,2516,2451],{"class":586},[491,2518,1708],{"class":505},[491,2520,525],{"class":501},[491,2522,2523],{"class":493,"line":642},[491,2524,570],{"emptyLinePlaceholder":206},[491,2526,2527,2529],{"class":493,"line":662},[491,2528,577],{"class":576},[491,2530,639],{"class":501},[491,2532,2533,2536,2538],{"class":493,"line":679},[491,2534,2535],{"class":505},"    letterSpacingTight",[491,2537,538],{"class":501},[491,2539,2540],{"class":602},"   // -0.025em - for large text\n",[491,2542,2543,2546,2548],{"class":493,"line":696},[491,2544,2545],{"class":505},"    letterSpacingNormal",[491,2547,538],{"class":501},[491,2549,2550],{"class":602},"  // 0 - standard\n",[491,2552,2553,2556,2558],{"class":493,"line":711},[491,2554,2555],{"class":505},"    letterSpacingWide",[491,2557,538],{"class":501},[491,2559,2560],{"class":602},"    // 0.025em - for small text/labels\n",[491,2562,2563,2565,2567,2569,2571],{"class":493,"line":716},[491,2564,626],{"class":501},[491,2566,629],{"class":501},[491,2568,2456],{"class":586},[491,2570,1708],{"class":505},[491,2572,525],{"class":501},[414,2574,2575],{},[453,2576,2577],{"href":217},"Learn more about typography →",[435,2579,2581],{"id":2580},"step-4-spacing-system-1-minute","Step 4: Spacing System (1 minute)",[414,2583,2584],{},"Create consistent spacing using the same scale for visual harmony:",[482,2586,2588],{"className":484,"code":2587,"language":486,"meta":487,"style":487},"import { useSpacingDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\n// Define base spacing\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' } as const);\n\n// Generate spacing scale using the mobile scale for consistency\nconst {\n    spacing3xs,  // ~0.579rem\n    spacing2xs,  // ~0.694rem\n    spacingXs,   // ~0.833rem\n    spacingSm,   // ~0.833rem\n    spacingMd,   // 1rem (base)\n    spacingLg,   // ~1.2rem\n    spacingXl,   // ~1.44rem\n    spacing2xl,  // ~1.728rem\n    spacing3xl,  // ~2.074rem\n} = useMultiplierDesignTokens(s, spacing, {\n    '3xs': scaleMinPowers[-3],\n    '2xs': scaleMinPowers[-2],\n    xs: scaleMinPowers[-1],\n    sm: scaleMinPowers[-1],\n    md: scaleMinPowers[0],\n    lg: scaleMinPowers[1],\n    xl: scaleMinPowers[2],\n    '2xl': scaleMinPowers[3],\n    '3xl': scaleMinPowers[4],\n});\n",[477,2589,2590,2616,2620,2625,2667,2671,2676,2682,2692,2702,2712,2721,2731,2741,2751,2761,2771,2790,2812,2833,2850,2867,2882,2897,2912,2930,2948],{"__ignoreMap":487},[491,2591,2592,2594,2596,2599,2601,2604,2606,2608,2610,2612,2614],{"class":493,"line":494},[491,2593,498],{"class":497},[491,2595,502],{"class":501},[491,2597,2598],{"class":505}," useSpacingDesignTokens",[491,2600,538],{"class":501},[491,2602,2603],{"class":505}," useMultiplierDesignTokens",[491,2605,509],{"class":501},[491,2607,512],{"class":497},[491,2609,515],{"class":501},[491,2611,560],{"class":518},[491,2613,522],{"class":501},[491,2615,525],{"class":501},[491,2617,2618],{"class":493,"line":528},[491,2619,570],{"emptyLinePlaceholder":206},[491,2621,2622],{"class":493,"line":567},[491,2623,2624],{"class":602},"// Define base spacing\n",[491,2626,2627,2629,2631,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2655,2657,2659,2661,2663,2665],{"class":493,"line":573},[491,2628,577],{"class":576},[491,2630,502],{"class":501},[491,2632,2633],{"class":505}," spacing ",[491,2635,626],{"class":501},[491,2637,629],{"class":501},[491,2639,2598],{"class":586},[491,2641,634],{"class":505},[491,2643,538],{"class":501},[491,2645,502],{"class":501},[491,2647,1257],{"class":645},[491,2649,649],{"class":501},[491,2651,515],{"class":501},[491,2653,2654],{"class":518},"1rem",[491,2656,522],{"class":501},[491,2658,509],{"class":501},[491,2660,701],{"class":497},[491,2662,704],{"class":576},[491,2664,457],{"class":505},[491,2666,525],{"class":501},[491,2668,2669],{"class":493,"line":594},[491,2670,570],{"emptyLinePlaceholder":206},[491,2672,2673],{"class":493,"line":599},[491,2674,2675],{"class":602},"// Generate spacing scale using the mobile scale for consistency\n",[491,2677,2678,2680],{"class":493,"line":606},[491,2679,577],{"class":576},[491,2681,639],{"class":501},[491,2683,2684,2687,2689],{"class":493,"line":642},[491,2685,2686],{"class":505},"    spacing3xs",[491,2688,538],{"class":501},[491,2690,2691],{"class":602},"  // ~0.579rem\n",[491,2693,2694,2697,2699],{"class":493,"line":662},[491,2695,2696],{"class":505},"    spacing2xs",[491,2698,538],{"class":501},[491,2700,2701],{"class":602},"  // ~0.694rem\n",[491,2703,2704,2707,2709],{"class":493,"line":679},[491,2705,2706],{"class":505},"    spacingXs",[491,2708,538],{"class":501},[491,2710,2711],{"class":602},"   // ~0.833rem\n",[491,2713,2714,2717,2719],{"class":493,"line":696},[491,2715,2716],{"class":505},"    spacingSm",[491,2718,538],{"class":501},[491,2720,2711],{"class":602},[491,2722,2723,2726,2728],{"class":493,"line":711},[491,2724,2725],{"class":505},"    spacingMd",[491,2727,538],{"class":501},[491,2729,2730],{"class":602},"   // 1rem (base)\n",[491,2732,2733,2736,2738],{"class":493,"line":716},[491,2734,2735],{"class":505},"    spacingLg",[491,2737,538],{"class":501},[491,2739,2740],{"class":602},"   // ~1.2rem\n",[491,2742,2743,2746,2748],{"class":493,"line":722},[491,2744,2745],{"class":505},"    spacingXl",[491,2747,538],{"class":501},[491,2749,2750],{"class":602},"   // ~1.44rem\n",[491,2752,2753,2756,2758],{"class":493,"line":759},[491,2754,2755],{"class":505},"    spacing2xl",[491,2757,538],{"class":501},[491,2759,2760],{"class":602},"  // ~1.728rem\n",[491,2762,2763,2766,2768],{"class":493,"line":776},[491,2764,2765],{"class":505},"    spacing3xl",[491,2767,538],{"class":501},[491,2769,2770],{"class":602},"  // ~2.074rem\n",[491,2772,2773,2775,2777,2779,2781,2783,2786,2788],{"class":493,"line":793},[491,2774,626],{"class":501},[491,2776,629],{"class":501},[491,2778,2603],{"class":586},[491,2780,634],{"class":505},[491,2782,538],{"class":501},[491,2784,2785],{"class":505}," spacing",[491,2787,538],{"class":501},[491,2789,639],{"class":501},[491,2791,2792,2795,2798,2800,2802,2804,2806,2808,2810],{"class":493,"line":810},[491,2793,2794],{"class":501},"    '",[491,2796,2797],{"class":645},"3xs",[491,2799,522],{"class":501},[491,2801,649],{"class":501},[491,2803,1921],{"class":505},[491,2805,1488],{"class":501},[491,2807,1492],{"class":1491},[491,2809,1928],{"class":505},[491,2811,659],{"class":501},[491,2813,2814,2816,2819,2821,2823,2825,2827,2829,2831],{"class":493,"line":827},[491,2815,2794],{"class":501},[491,2817,2818],{"class":645},"2xs",[491,2820,522],{"class":501},[491,2822,649],{"class":501},[491,2824,1921],{"class":505},[491,2826,1488],{"class":501},[491,2828,1500],{"class":1491},[491,2830,1928],{"class":505},[491,2832,659],{"class":501},[491,2834,2835,2838,2840,2842,2844,2846,2848],{"class":493,"line":840},[491,2836,2837],{"class":645},"    xs",[491,2839,649],{"class":501},[491,2841,1921],{"class":505},[491,2843,1488],{"class":501},[491,2845,1507],{"class":1491},[491,2847,1928],{"class":505},[491,2849,659],{"class":501},[491,2851,2852,2855,2857,2859,2861,2863,2865],{"class":493,"line":845},[491,2853,2854],{"class":645},"    sm",[491,2856,649],{"class":501},[491,2858,1921],{"class":505},[491,2860,1488],{"class":501},[491,2862,1507],{"class":1491},[491,2864,1928],{"class":505},[491,2866,659],{"class":501},[491,2868,2869,2872,2874,2876,2878,2880],{"class":493,"line":851},[491,2870,2871],{"class":645},"    md",[491,2873,649],{"class":501},[491,2875,1921],{"class":505},[491,2877,2002],{"class":1491},[491,2879,1928],{"class":505},[491,2881,659],{"class":501},[491,2883,2884,2887,2889,2891,2893,2895],{"class":493,"line":858},[491,2885,2886],{"class":645},"    lg",[491,2888,649],{"class":501},[491,2890,1921],{"class":505},[491,2892,1507],{"class":1491},[491,2894,1928],{"class":505},[491,2896,659],{"class":501},[491,2898,2899,2902,2904,2906,2908,2910],{"class":493,"line":866},[491,2900,2901],{"class":645},"    xl",[491,2903,649],{"class":501},[491,2905,1921],{"class":505},[491,2907,1500],{"class":1491},[491,2909,1928],{"class":505},[491,2911,659],{"class":501},[491,2913,2914,2916,2918,2920,2922,2924,2926,2928],{"class":493,"line":874},[491,2915,2794],{"class":501},[491,2917,2092],{"class":645},[491,2919,522],{"class":501},[491,2921,649],{"class":501},[491,2923,1921],{"class":505},[491,2925,1492],{"class":1491},[491,2927,1928],{"class":505},[491,2929,659],{"class":501},[491,2931,2932,2934,2936,2938,2940,2942,2944,2946],{"class":493,"line":882},[491,2933,2794],{"class":501},[491,2935,2129],{"class":645},[491,2937,522],{"class":501},[491,2939,649],{"class":501},[491,2941,1921],{"class":505},[491,2943,2144],{"class":1491},[491,2945,1928],{"class":505},[491,2947,659],{"class":501},[491,2949,2950,2952,2954],{"class":493,"line":890},[491,2951,626],{"class":501},[491,2953,457],{"class":505},[491,2955,525],{"class":501},[1613,2957,2958,2964],{},[414,2959,2960,2963],{},[417,2961,2962],{},"Pro tip:"," Using the same modular scale for spacing creates mathematical harmony with your typography. Everything feels proportionally connected!",[414,2965,2966],{},[453,2967,2968],{"href":213},"Learn more about spacing →",[435,2970,2972],{"id":2971},"step-5-visual-depth-2-minutes","Step 5: Visual Depth (2 minutes)",[414,2974,2975],{},"Add borders, shadows, and breakpoints to complete your system.",[469,2977,169],{"id":2978},"borders",[482,2980,2982],{"className":484,"code":2981,"language":486,"meta":487,"style":487},"import { useBorderWidthDesignTokens, useBorderStyleDesignTokens, useBorderColorDesignTokens } from '@styleframe/theme';\n\nconst { \n    borderWidth,\n    borderWidthThin,\n    borderWidthMedium,\n    borderWidthThick,\n} = useBorderWidthDesignTokens(s);\n\nconst { borderStyle } = useBorderStyleDesignTokens(s);\n\n// Use your gray scale for border colors\nconst { \n    borderColor,\n    borderColorLight,\n    borderColorDark,\n} = useBorderColorDesignTokens(s, {\n    default: s.ref(colorGray300),\n    light: s.ref(colorGray200),\n    dark: s.ref(colorGray400),\n} as const);\n",[477,2983,2984,3015,3019,3027,3034,3041,3048,3055,3067,3071,3090,3094,3099,3107,3114,3121,3128,3142,3161,3179,3197],{"__ignoreMap":487},[491,2985,2986,2988,2990,2993,2995,2998,3000,3003,3005,3007,3009,3011,3013],{"class":493,"line":494},[491,2987,498],{"class":497},[491,2989,502],{"class":501},[491,2991,2992],{"class":505}," useBorderWidthDesignTokens",[491,2994,538],{"class":501},[491,2996,2997],{"class":505}," useBorderStyleDesignTokens",[491,2999,538],{"class":501},[491,3001,3002],{"class":505}," useBorderColorDesignTokens",[491,3004,509],{"class":501},[491,3006,512],{"class":497},[491,3008,515],{"class":501},[491,3010,560],{"class":518},[491,3012,522],{"class":501},[491,3014,525],{"class":501},[491,3016,3017],{"class":493,"line":528},[491,3018,570],{"emptyLinePlaceholder":206},[491,3020,3021,3023,3025],{"class":493,"line":567},[491,3022,577],{"class":576},[491,3024,502],{"class":501},[491,3026,2386],{"class":505},[491,3028,3029,3032],{"class":493,"line":573},[491,3030,3031],{"class":505},"    borderWidth",[491,3033,659],{"class":501},[491,3035,3036,3039],{"class":493,"line":594},[491,3037,3038],{"class":505},"    borderWidthThin",[491,3040,659],{"class":501},[491,3042,3043,3046],{"class":493,"line":599},[491,3044,3045],{"class":505},"    borderWidthMedium",[491,3047,659],{"class":501},[491,3049,3050,3053],{"class":493,"line":606},[491,3051,3052],{"class":505},"    borderWidthThick",[491,3054,659],{"class":501},[491,3056,3057,3059,3061,3063,3065],{"class":493,"line":642},[491,3058,626],{"class":501},[491,3060,629],{"class":501},[491,3062,2992],{"class":586},[491,3064,1708],{"class":505},[491,3066,525],{"class":501},[491,3068,3069],{"class":493,"line":662},[491,3070,570],{"emptyLinePlaceholder":206},[491,3072,3073,3075,3077,3080,3082,3084,3086,3088],{"class":493,"line":679},[491,3074,577],{"class":576},[491,3076,502],{"class":501},[491,3078,3079],{"class":505}," borderStyle ",[491,3081,626],{"class":501},[491,3083,629],{"class":501},[491,3085,2997],{"class":586},[491,3087,1708],{"class":505},[491,3089,525],{"class":501},[491,3091,3092],{"class":493,"line":696},[491,3093,570],{"emptyLinePlaceholder":206},[491,3095,3096],{"class":493,"line":711},[491,3097,3098],{"class":602},"// Use your gray scale for border colors\n",[491,3100,3101,3103,3105],{"class":493,"line":716},[491,3102,577],{"class":576},[491,3104,502],{"class":501},[491,3106,2386],{"class":505},[491,3108,3109,3112],{"class":493,"line":722},[491,3110,3111],{"class":505},"    borderColor",[491,3113,659],{"class":501},[491,3115,3116,3119],{"class":493,"line":759},[491,3117,3118],{"class":505},"    borderColorLight",[491,3120,659],{"class":501},[491,3122,3123,3126],{"class":493,"line":776},[491,3124,3125],{"class":505},"    borderColorDark",[491,3127,659],{"class":501},[491,3129,3130,3132,3134,3136,3138,3140],{"class":493,"line":793},[491,3131,626],{"class":501},[491,3133,629],{"class":501},[491,3135,3002],{"class":586},[491,3137,634],{"class":505},[491,3139,538],{"class":501},[491,3141,639],{"class":501},[491,3143,3144,3146,3148,3150,3153,3156,3159],{"class":493,"line":810},[491,3145,2318],{"class":645},[491,3147,649],{"class":501},[491,3149,1260],{"class":505},[491,3151,3152],{"class":501},".",[491,3154,3155],{"class":586},"ref",[491,3157,3158],{"class":505},"(colorGray300)",[491,3160,659],{"class":501},[491,3162,3163,3166,3168,3170,3172,3174,3177],{"class":493,"line":827},[491,3164,3165],{"class":645},"    light",[491,3167,649],{"class":501},[491,3169,1260],{"class":505},[491,3171,3152],{"class":501},[491,3173,3155],{"class":586},[491,3175,3176],{"class":505},"(colorGray200)",[491,3178,659],{"class":501},[491,3180,3181,3184,3186,3188,3190,3192,3195],{"class":493,"line":840},[491,3182,3183],{"class":645},"    dark",[491,3185,649],{"class":501},[491,3187,1260],{"class":505},[491,3189,3152],{"class":501},[491,3191,3155],{"class":586},[491,3193,3194],{"class":505},"(colorGray400)",[491,3196,659],{"class":501},[491,3198,3199,3201,3203,3205,3207],{"class":493,"line":845},[491,3200,626],{"class":501},[491,3202,701],{"class":497},[491,3204,704],{"class":576},[491,3206,457],{"class":505},[491,3208,525],{"class":501},[414,3210,3211],{},[453,3212,3213],{"href":170},"Learn more about borders →",[469,3215,165],{"id":3216},"border-radiuses",[414,3218,3219],{},"Create consistent rounded corners using scale-based values:",[482,3221,3223],{"className":484,"code":3222,"language":486,"meta":487,"style":487},"import { useBorderRadiusDesignTokens, useMultiplierDesignTokens } from '@styleframe/theme';\n\n// Define base border radius\nconst { \n    borderRadius,\n    borderRadiusFull,\n} = useBorderRadiusDesignTokens(s, { \n    default: '0.25rem',\n    full: '9999px', // For pills/circles\n});\n\n// Generate border radius scale using your modular scale\nconst {\n    borderRadiusXs,\n    borderRadiusSm,\n    borderRadiusMd,\n    borderRadiusLg,\n    borderRadiusXl,\n    borderRadius2xl,\n} = useMultiplierDesignTokens(s, borderRadius, {\n    xs: scaleMinPowers[-2],   // Subtle rounding\n    sm: scaleMinPowers[-1],   // Small rounding\n    md: scaleMinPowers[0],    // Base rounding\n    lg: scaleMinPowers[1],    // Large rounding\n    xl: scaleMinPowers[2],    // Extra large rounding\n    '2xl': scaleMinPowers[3], // Maximum rounding\n});\n\n",[477,3224,3225,3250,3254,3259,3267,3274,3281,3297,3312,3331,3339,3343,3348,3354,3361,3368,3375,3382,3389,3396,3415,3434,3453,3470,3487,3504,3525],{"__ignoreMap":487},[491,3226,3227,3229,3231,3234,3236,3238,3240,3242,3244,3246,3248],{"class":493,"line":494},[491,3228,498],{"class":497},[491,3230,502],{"class":501},[491,3232,3233],{"class":505}," useBorderRadiusDesignTokens",[491,3235,538],{"class":501},[491,3237,2603],{"class":505},[491,3239,509],{"class":501},[491,3241,512],{"class":497},[491,3243,515],{"class":501},[491,3245,560],{"class":518},[491,3247,522],{"class":501},[491,3249,525],{"class":501},[491,3251,3252],{"class":493,"line":528},[491,3253,570],{"emptyLinePlaceholder":206},[491,3255,3256],{"class":493,"line":567},[491,3257,3258],{"class":602},"// Define base border radius\n",[491,3260,3261,3263,3265],{"class":493,"line":573},[491,3262,577],{"class":576},[491,3264,502],{"class":501},[491,3266,2386],{"class":505},[491,3268,3269,3272],{"class":493,"line":594},[491,3270,3271],{"class":505},"    borderRadius",[491,3273,659],{"class":501},[491,3275,3276,3279],{"class":493,"line":599},[491,3277,3278],{"class":505},"    borderRadiusFull",[491,3280,659],{"class":501},[491,3282,3283,3285,3287,3289,3291,3293,3295],{"class":493,"line":606},[491,3284,626],{"class":501},[491,3286,629],{"class":501},[491,3288,3233],{"class":586},[491,3290,634],{"class":505},[491,3292,538],{"class":501},[491,3294,502],{"class":501},[491,3296,2386],{"class":505},[491,3298,3299,3301,3303,3305,3308,3310],{"class":493,"line":642},[491,3300,2318],{"class":645},[491,3302,649],{"class":501},[491,3304,515],{"class":501},[491,3306,3307],{"class":518},"0.25rem",[491,3309,522],{"class":501},[491,3311,659],{"class":501},[491,3313,3314,3317,3319,3321,3324,3326,3328],{"class":493,"line":662},[491,3315,3316],{"class":645},"    full",[491,3318,649],{"class":501},[491,3320,515],{"class":501},[491,3322,3323],{"class":518},"9999px",[491,3325,522],{"class":501},[491,3327,538],{"class":501},[491,3329,3330],{"class":602}," // For pills/circles\n",[491,3332,3333,3335,3337],{"class":493,"line":679},[491,3334,626],{"class":501},[491,3336,457],{"class":505},[491,3338,525],{"class":501},[491,3340,3341],{"class":493,"line":696},[491,3342,570],{"emptyLinePlaceholder":206},[491,3344,3345],{"class":493,"line":711},[491,3346,3347],{"class":602},"// Generate border radius scale using your modular scale\n",[491,3349,3350,3352],{"class":493,"line":716},[491,3351,577],{"class":576},[491,3353,639],{"class":501},[491,3355,3356,3359],{"class":493,"line":722},[491,3357,3358],{"class":505},"    borderRadiusXs",[491,3360,659],{"class":501},[491,3362,3363,3366],{"class":493,"line":759},[491,3364,3365],{"class":505},"    borderRadiusSm",[491,3367,659],{"class":501},[491,3369,3370,3373],{"class":493,"line":776},[491,3371,3372],{"class":505},"    borderRadiusMd",[491,3374,659],{"class":501},[491,3376,3377,3380],{"class":493,"line":793},[491,3378,3379],{"class":505},"    borderRadiusLg",[491,3381,659],{"class":501},[491,3383,3384,3387],{"class":493,"line":810},[491,3385,3386],{"class":505},"    borderRadiusXl",[491,3388,659],{"class":501},[491,3390,3391,3394],{"class":493,"line":827},[491,3392,3393],{"class":505},"    borderRadius2xl",[491,3395,659],{"class":501},[491,3397,3398,3400,3402,3404,3406,3408,3411,3413],{"class":493,"line":840},[491,3399,626],{"class":501},[491,3401,629],{"class":501},[491,3403,2603],{"class":586},[491,3405,634],{"class":505},[491,3407,538],{"class":501},[491,3409,3410],{"class":505}," borderRadius",[491,3412,538],{"class":501},[491,3414,639],{"class":501},[491,3416,3417,3419,3421,3423,3425,3427,3429,3431],{"class":493,"line":845},[491,3418,2837],{"class":645},[491,3420,649],{"class":501},[491,3422,1921],{"class":505},[491,3424,1488],{"class":501},[491,3426,1500],{"class":1491},[491,3428,1928],{"class":505},[491,3430,538],{"class":501},[491,3432,3433],{"class":602},"   // Subtle rounding\n",[491,3435,3436,3438,3440,3442,3444,3446,3448,3450],{"class":493,"line":851},[491,3437,2854],{"class":645},[491,3439,649],{"class":501},[491,3441,1921],{"class":505},[491,3443,1488],{"class":501},[491,3445,1507],{"class":1491},[491,3447,1928],{"class":505},[491,3449,538],{"class":501},[491,3451,3452],{"class":602},"   // Small rounding\n",[491,3454,3455,3457,3459,3461,3463,3465,3467],{"class":493,"line":858},[491,3456,2871],{"class":645},[491,3458,649],{"class":501},[491,3460,1921],{"class":505},[491,3462,2002],{"class":1491},[491,3464,1928],{"class":505},[491,3466,538],{"class":501},[491,3468,3469],{"class":602},"    // Base rounding\n",[491,3471,3472,3474,3476,3478,3480,3482,3484],{"class":493,"line":866},[491,3473,2886],{"class":645},[491,3475,649],{"class":501},[491,3477,1921],{"class":505},[491,3479,1507],{"class":1491},[491,3481,1928],{"class":505},[491,3483,538],{"class":501},[491,3485,3486],{"class":602},"    // Large rounding\n",[491,3488,3489,3491,3493,3495,3497,3499,3501],{"class":493,"line":874},[491,3490,2901],{"class":645},[491,3492,649],{"class":501},[491,3494,1921],{"class":505},[491,3496,1500],{"class":1491},[491,3498,1928],{"class":505},[491,3500,538],{"class":501},[491,3502,3503],{"class":602},"    // Extra large rounding\n",[491,3505,3506,3508,3510,3512,3514,3516,3518,3520,3522],{"class":493,"line":882},[491,3507,2794],{"class":501},[491,3509,2092],{"class":645},[491,3511,522],{"class":501},[491,3513,649],{"class":501},[491,3515,1921],{"class":505},[491,3517,1492],{"class":1491},[491,3519,1928],{"class":505},[491,3521,538],{"class":501},[491,3523,3524],{"class":602}," // Maximum rounding\n",[491,3526,3527,3529,3531],{"class":493,"line":890},[491,3528,626],{"class":501},[491,3530,457],{"class":505},[491,3532,525],{"class":501},[414,3534,3535],{},[453,3536,3537],{"href":166},"Learn more about border radiuses →",[469,3539,173],{"id":3540},"box-shadows",[414,3542,3543],{},"Create an elevation system:",[482,3545,3547],{"className":484,"code":3546,"language":486,"meta":487,"style":487},"import { useBoxShadowDesignTokens } from '@styleframe/theme';\n\nconst {\n    boxShadowSm,      // Subtle elevation\n    boxShadow,        // Standard elevation\n    boxShadowMd,      // Medium elevation\n    boxShadowLg,      // High elevation\n    boxShadowXl,      // Maximum elevation\n} = useBoxShadowDesignTokens(s);\n",[477,3548,3549,3570,3574,3580,3590,3600,3610,3620,3630],{"__ignoreMap":487},[491,3550,3551,3553,3555,3558,3560,3562,3564,3566,3568],{"class":493,"line":494},[491,3552,498],{"class":497},[491,3554,502],{"class":501},[491,3556,3557],{"class":505}," useBoxShadowDesignTokens",[491,3559,509],{"class":501},[491,3561,512],{"class":497},[491,3563,515],{"class":501},[491,3565,560],{"class":518},[491,3567,522],{"class":501},[491,3569,525],{"class":501},[491,3571,3572],{"class":493,"line":528},[491,3573,570],{"emptyLinePlaceholder":206},[491,3575,3576,3578],{"class":493,"line":567},[491,3577,577],{"class":576},[491,3579,639],{"class":501},[491,3581,3582,3585,3587],{"class":493,"line":573},[491,3583,3584],{"class":505},"    boxShadowSm",[491,3586,538],{"class":501},[491,3588,3589],{"class":602},"      // Subtle elevation\n",[491,3591,3592,3595,3597],{"class":493,"line":594},[491,3593,3594],{"class":505},"    boxShadow",[491,3596,538],{"class":501},[491,3598,3599],{"class":602},"        // Standard elevation\n",[491,3601,3602,3605,3607],{"class":493,"line":599},[491,3603,3604],{"class":505},"    boxShadowMd",[491,3606,538],{"class":501},[491,3608,3609],{"class":602},"      // Medium elevation\n",[491,3611,3612,3615,3617],{"class":493,"line":606},[491,3613,3614],{"class":505},"    boxShadowLg",[491,3616,538],{"class":501},[491,3618,3619],{"class":602},"      // High elevation\n",[491,3621,3622,3625,3627],{"class":493,"line":642},[491,3623,3624],{"class":505},"    boxShadowXl",[491,3626,538],{"class":501},[491,3628,3629],{"class":602},"      // Maximum elevation\n",[491,3631,3632,3634,3636,3638,3640],{"class":493,"line":662},[491,3633,626],{"class":501},[491,3635,629],{"class":501},[491,3637,3557],{"class":586},[491,3639,1708],{"class":505},[491,3641,525],{"class":501},[414,3643,3644],{},[453,3645,3646],{"href":174},"Learn more about box shadows →",[469,3648,3650],{"id":3649},"responsive-breakpoints","Responsive Breakpoints",[414,3652,3653],{},"Even with fluid typography, breakpoints are useful for layout changes:",[482,3655,3657],{"className":484,"code":3656,"language":486,"meta":487,"style":487},"import { useBreakpointDesignTokens } from '@styleframe/theme';\n\nconst {\n    breakpointXs,   // 0px - mobile\n    breakpointSm,   // 576px - small\n    breakpointMd,   // 768px - tablets\n    breakpointLg,   // 992px - laptops\n    breakpointXl,   // 1200px - desktops\n    breakpoint2xl,  // 1440px - large screens\n} = useBreakpointDesignTokens(s);\n",[477,3658,3659,3680,3684,3690,3700,3710,3720,3730,3740,3750],{"__ignoreMap":487},[491,3660,3661,3663,3665,3668,3670,3672,3674,3676,3678],{"class":493,"line":494},[491,3662,498],{"class":497},[491,3664,502],{"class":501},[491,3666,3667],{"class":505}," useBreakpointDesignTokens",[491,3669,509],{"class":501},[491,3671,512],{"class":497},[491,3673,515],{"class":501},[491,3675,560],{"class":518},[491,3677,522],{"class":501},[491,3679,525],{"class":501},[491,3681,3682],{"class":493,"line":528},[491,3683,570],{"emptyLinePlaceholder":206},[491,3685,3686,3688],{"class":493,"line":567},[491,3687,577],{"class":576},[491,3689,639],{"class":501},[491,3691,3692,3695,3697],{"class":493,"line":573},[491,3693,3694],{"class":505},"    breakpointXs",[491,3696,538],{"class":501},[491,3698,3699],{"class":602},"   // 0px - mobile\n",[491,3701,3702,3705,3707],{"class":493,"line":594},[491,3703,3704],{"class":505},"    breakpointSm",[491,3706,538],{"class":501},[491,3708,3709],{"class":602},"   // 576px - small\n",[491,3711,3712,3715,3717],{"class":493,"line":599},[491,3713,3714],{"class":505},"    breakpointMd",[491,3716,538],{"class":501},[491,3718,3719],{"class":602},"   // 768px - tablets\n",[491,3721,3722,3725,3727],{"class":493,"line":606},[491,3723,3724],{"class":505},"    breakpointLg",[491,3726,538],{"class":501},[491,3728,3729],{"class":602},"   // 992px - laptops\n",[491,3731,3732,3735,3737],{"class":493,"line":642},[491,3733,3734],{"class":505},"    breakpointXl",[491,3736,538],{"class":501},[491,3738,3739],{"class":602},"   // 1200px - desktops\n",[491,3741,3742,3745,3747],{"class":493,"line":662},[491,3743,3744],{"class":505},"    breakpoint2xl",[491,3746,538],{"class":501},[491,3748,3749],{"class":602},"  // 1440px - large screens\n",[491,3751,3752,3754,3756,3758,3760],{"class":493,"line":679},[491,3753,626],{"class":501},[491,3755,629],{"class":501},[491,3757,3667],{"class":586},[491,3759,1708],{"class":505},[491,3761,525],{"class":501},[414,3763,3764],{},[453,3765,3766],{"href":178},"Learn more about breakpoints →",[435,3768,3770],{"id":3769},"step-6-put-it-all-together","Step 6: Put It All Together",[414,3772,3773],{},"Here's your complete fluid design system in one place:",[482,3775,3777],{"className":484,"code":3776,"language":486,"meta":487,"style":487},"import { styleframe } from 'styleframe';\nimport {\n    useColorDesignTokens,\n    useColorLevelDesignTokens,\n    useColorShadeDesignTokens,\n    useColorTintDesignTokens,\n    useScaleDesignTokens,\n    useScalePowersDesignTokens,\n    useFontFamilyDesignTokens,\n    useFontWeightDesignTokens,\n    useLineHeightDesignTokens,\n    useLetterSpacingDesignTokens,\n    useSpacingDesignTokens,\n    useBorderWidthDesignTokens,\n    useBorderStyleDesignTokens,\n    useBorderColorDesignTokens,\n    useBorderRadiusDesignTokens,\n    useBoxShadowDesignTokens,\n    useBreakpointDesignTokens,\n    useMultiplierDesignTokens,\n    defaultScaleValues,\n} from '@styleframe/theme';\nimport { useFluidViewport, useFluidFontSize } from '@styleframe/pro';\n\nconst s = styleframe();\n\n// 1. Colors\nconst { colorPrimary, colorSecondary, colorGray } = useColorDesignTokens(s, {\n    primary: '#0066ff',\n    secondary: '#7c3aed',\n    gray: '#64748b',\n} as const);\n\nconst { colorSuccess, colorWarning, colorError, colorInfo } = useColorDesignTokens(s, {\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n    info: '#06b6d4',\n} as const);\n\n// Generate color variants\n// Generate level variants for primary color\nconst {\n    colorPrimary50,\n    colorPrimary100,\n    colorPrimary200,\n    colorPrimary300,\n    colorPrimary400,\n    colorPrimary500,\n    colorPrimary600,\n    colorPrimary700,\n    colorPrimary800,\n    colorPrimary900,\n    colorPrimary950,\n} = useColorLevelDesignTokens(s, colorPrimary);\n\n// Generate level variants for gray (for UI backgrounds, borders, text)\nconst {\n    colorGray50,\n    colorGray100,\n    colorGray200,\n    colorGray300,\n    colorGray400,\n    colorGray500,\n    colorGray600,\n    colorGray700,\n    colorGray800,\n    colorGray900,\n    colorGray950,\n} = useColorLevelDesignTokens(s, colorGray);\n\n// Generate shades and tints for interactive states\nconst {\n    colorPrimaryShade50,\n    colorPrimaryShade100,\n    colorPrimaryShade150,\n    colorPrimaryShade200,\n} = useColorShadeDesignTokens(s, colorPrimary);\n\nconst {\n    colorPrimaryTint50,\n    colorPrimaryTint100,\n    colorPrimaryTint150,\n    colorPrimaryTint200,\n} = useColorTintDesignTokens(s, colorPrimary);\n\n// 2. Scales for Fluid Typography\nconst { scaleMin, scaleMax } = useScaleDesignTokens(s, {\n    ...defaultScaleValues,\n    min: '@minor-third',   // 1.2 for mobile\n    max: '@major-third',   // 1.25 for desktop\n});\n\nconst scaleMinPowers = useScalePowersDesignTokens(s, scaleMin, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);\nconst scaleMaxPowers = useScalePowersDesignTokens(s, scaleMax, [-3, -2, -1, 0, 1, 2, 3, 4, 5]);\n\n// 3. Fluid Typography\nuseFluidViewport(s);\n\nconst { fontFamily, fontFamilyMono, fontFamilyDisplay } = useFontFamilyDesignTokens(s, {\n    default: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    mono: '\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", monospace',\n    display: '\"Inter Display\", -apple-system, sans-serif',\n} as const);\n\nconst fontSizes = useFluidFontSize(\n    s,\n    { min: 16, max: 18 },\n    {\n        xs: { min: scaleMinPowers[-2], max: scaleMaxPowers[-2] },\n        sm: { min: scaleMinPowers[-1], max: scaleMaxPowers[-1] },\n        md: { min: scaleMinPowers[0], max: scaleMaxPowers[0] },\n        lg: { min: scaleMinPowers[1], max: scaleMaxPowers[1] },\n        xl: { min: scaleMinPowers[2], max: scaleMaxPowers[2] },\n        '2xl': { min: scaleMinPowers[3], max: scaleMaxPowers[3] },\n        '3xl': { min: scaleMinPowers[4], max: scaleMaxPowers[4] },\n        '4xl': { min: scaleMinPowers[5], max: scaleMaxPowers[5] },\n        default: '@md',\n    }\n);\n\nconst { fontWeight, fontWeightNormal, fontWeightMedium, fontWeightSemibold, fontWeightBold } = useFontWeightDesignTokens(s);\nconst { lineHeight, lineHeightTight, lineHeightNormal, lineHeightRelaxed } = useLineHeightDesignTokens(s);\nconst { letterSpacing, letterSpacingTight, letterSpacingNormal, letterSpacingWide } = useLetterSpacingDesignTokens(s);\n\n// 4. Spacing\nconst { spacing } = useSpacingDesignTokens(s, { default: '1rem' } as const);\nconst spacings = useMultiplierDesignTokens(s, spacing, {\n    '3xs': scaleMinPowers[-3],\n    '2xs': scaleMinPowers[-2],\n    xs: scaleMinPowers[-1],\n    sm: scaleMinPowers[-1],\n    md: scaleMinPowers[0],\n    lg: scaleMinPowers[1],\n    xl: scaleMinPowers[2],\n    '2xl': scaleMinPowers[3],\n    '3xl': scaleMinPowers[4],\n});\n\n// 5. Visual Depth\n\nconst { borderStyle } = useBorderStyleDesignTokens(s);\n\nconst { borderWidth, borderWidthThin, borderWidthMedium, borderWidthThick } = useBorderWidthDesignTokens(s);\n\nconst { borderColor, borderColorLight, borderColorDark } = useBorderColorDesignTokens(s, {\n    default: s.ref(colorGray300),\n    light: s.ref(colorGray200),\n    dark: s.ref(colorGray400),\n} as const);\n\nconst { \n    borderRadius,\n    borderRadiusFull, \n} = useBorderRadiusDesignTokens(s, { \n    default: '0.25rem',\n    full: '9999px',\n});\nconst { borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadius2xl } = useMultiplierDesignTokens(s, borderRadius, {\n    xs: scaleMinPowers[-2],\n    sm: scaleMinPowers[-1],\n    md: scaleMinPowers[0],\n    lg: scaleMinPowers[1],\n    xl: scaleMinPowers[2],\n    '2xl': scaleMinPowers[3],\n});\n\nconst {  boxShadow, boxShadowSm, boxShadowMd, boxShadowLg, boxShadowXl } = useBoxShadowDesignTokens(s);\n\nconst { breakpointSm, breakpointMd, breakpointLg, breakpointXl } = useBreakpointDesignTokens(s);\n\nexport default s;\n",[477,3778,3779,3799,3805,3812,3819,3826,3833,3840,3847,3854,3861,3868,3875,3882,3889,3896,3903,3910,3917,3924,3931,3938,3952,3976,3980,3994,3998,4003,4031,4045,4059,4073,4085,4089,4121,4135,4149,4163,4177,4189,4193,4198,4203,4209,4215,4221,4227,4233,4239,4245,4251,4257,4263,4269,4275,4291,4295,4300,4306,4312,4318,4324,4330,4336,4342,4348,4354,4360,4367,4374,4391,4396,4402,4409,4416,4423,4430,4437,4454,4459,4466,4473,4480,4487,4494,4511,4516,4522,4547,4556,4574,4592,4601,4606,4671,4736,4741,4747,4756,4761,4790,4805,4820,4835,4848,4853,4867,4874,4896,4901,4938,4975,5008,5041,5074,5111,5148,5185,5200,5205,5212,5217,5257,5292,5327,5332,5338,5379,5401,5422,5443,5460,5477,5492,5507,5522,5541,5560,5569,5574,5580,5585,5604,5609,5644,5649,5681,5698,5715,5732,5745,5750,5759,5766,5775,5792,5807,5822,5831,5882,5899,5916,5931,5946,5961,5980,5989,5994,6034,6039,6074,6079],{"__ignoreMap":487},[491,3780,3781,3783,3785,3787,3789,3791,3793,3795,3797],{"class":493,"line":494},[491,3782,498],{"class":497},[491,3784,502],{"class":501},[491,3786,506],{"class":505},[491,3788,509],{"class":501},[491,3790,512],{"class":497},[491,3792,515],{"class":501},[491,3794,519],{"class":518},[491,3796,522],{"class":501},[491,3798,525],{"class":501},[491,3800,3801,3803],{"class":493,"line":528},[491,3802,498],{"class":497},[491,3804,639],{"class":501},[491,3806,3807,3810],{"class":493,"line":567},[491,3808,3809],{"class":505},"    useColorDesignTokens",[491,3811,659],{"class":501},[491,3813,3814,3817],{"class":493,"line":573},[491,3815,3816],{"class":505},"    useColorLevelDesignTokens",[491,3818,659],{"class":501},[491,3820,3821,3824],{"class":493,"line":594},[491,3822,3823],{"class":505},"    useColorShadeDesignTokens",[491,3825,659],{"class":501},[491,3827,3828,3831],{"class":493,"line":599},[491,3829,3830],{"class":505},"    useColorTintDesignTokens",[491,3832,659],{"class":501},[491,3834,3835,3838],{"class":493,"line":606},[491,3836,3837],{"class":505},"    useScaleDesignTokens",[491,3839,659],{"class":501},[491,3841,3842,3845],{"class":493,"line":642},[491,3843,3844],{"class":505},"    useScalePowersDesignTokens",[491,3846,659],{"class":501},[491,3848,3849,3852],{"class":493,"line":662},[491,3850,3851],{"class":505},"    useFontFamilyDesignTokens",[491,3853,659],{"class":501},[491,3855,3856,3859],{"class":493,"line":679},[491,3857,3858],{"class":505},"    useFontWeightDesignTokens",[491,3860,659],{"class":501},[491,3862,3863,3866],{"class":493,"line":696},[491,3864,3865],{"class":505},"    useLineHeightDesignTokens",[491,3867,659],{"class":501},[491,3869,3870,3873],{"class":493,"line":711},[491,3871,3872],{"class":505},"    useLetterSpacingDesignTokens",[491,3874,659],{"class":501},[491,3876,3877,3880],{"class":493,"line":716},[491,3878,3879],{"class":505},"    useSpacingDesignTokens",[491,3881,659],{"class":501},[491,3883,3884,3887],{"class":493,"line":722},[491,3885,3886],{"class":505},"    useBorderWidthDesignTokens",[491,3888,659],{"class":501},[491,3890,3891,3894],{"class":493,"line":759},[491,3892,3893],{"class":505},"    useBorderStyleDesignTokens",[491,3895,659],{"class":501},[491,3897,3898,3901],{"class":493,"line":776},[491,3899,3900],{"class":505},"    useBorderColorDesignTokens",[491,3902,659],{"class":501},[491,3904,3905,3908],{"class":493,"line":793},[491,3906,3907],{"class":505},"    useBorderRadiusDesignTokens",[491,3909,659],{"class":501},[491,3911,3912,3915],{"class":493,"line":810},[491,3913,3914],{"class":505},"    useBoxShadowDesignTokens",[491,3916,659],{"class":501},[491,3918,3919,3922],{"class":493,"line":827},[491,3920,3921],{"class":505},"    useBreakpointDesignTokens",[491,3923,659],{"class":501},[491,3925,3926,3929],{"class":493,"line":840},[491,3927,3928],{"class":505},"    useMultiplierDesignTokens",[491,3930,659],{"class":501},[491,3932,3933,3936],{"class":493,"line":845},[491,3934,3935],{"class":505},"    defaultScaleValues",[491,3937,659],{"class":501},[491,3939,3940,3942,3944,3946,3948,3950],{"class":493,"line":851},[491,3941,626],{"class":501},[491,3943,512],{"class":497},[491,3945,515],{"class":501},[491,3947,560],{"class":518},[491,3949,522],{"class":501},[491,3951,525],{"class":501},[491,3953,3954,3956,3958,3960,3962,3964,3966,3968,3970,3972,3974],{"class":493,"line":858},[491,3955,498],{"class":497},[491,3957,502],{"class":501},[491,3959,1678],{"class":505},[491,3961,538],{"class":501},[491,3963,1739],{"class":505},[491,3965,509],{"class":501},[491,3967,512],{"class":497},[491,3969,515],{"class":501},[491,3971,1687],{"class":518},[491,3973,522],{"class":501},[491,3975,525],{"class":501},[491,3977,3978],{"class":493,"line":866},[491,3979,570],{"emptyLinePlaceholder":206},[491,3981,3982,3984,3986,3988,3990,3992],{"class":493,"line":874},[491,3983,577],{"class":576},[491,3985,580],{"class":505},[491,3987,583],{"class":501},[491,3989,506],{"class":586},[491,3991,589],{"class":505},[491,3993,525],{"class":501},[491,3995,3996],{"class":493,"line":882},[491,3997,570],{"emptyLinePlaceholder":206},[491,3999,4000],{"class":493,"line":890},[491,4001,4002],{"class":602},"// 1. Colors\n",[491,4004,4005,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027,4029],{"class":493,"line":898},[491,4006,577],{"class":576},[491,4008,502],{"class":501},[491,4010,613],{"class":505},[491,4012,538],{"class":501},[491,4014,618],{"class":505},[491,4016,538],{"class":501},[491,4018,623],{"class":505},[491,4020,626],{"class":501},[491,4022,629],{"class":501},[491,4024,535],{"class":586},[491,4026,634],{"class":505},[491,4028,538],{"class":501},[491,4030,639],{"class":501},[491,4032,4033,4035,4037,4039,4041,4043],{"class":493,"line":906},[491,4034,646],{"class":645},[491,4036,649],{"class":501},[491,4038,515],{"class":501},[491,4040,654],{"class":518},[491,4042,522],{"class":501},[491,4044,659],{"class":501},[491,4046,4047,4049,4051,4053,4055,4057],{"class":493,"line":914},[491,4048,665],{"class":645},[491,4050,649],{"class":501},[491,4052,515],{"class":501},[491,4054,672],{"class":518},[491,4056,522],{"class":501},[491,4058,659],{"class":501},[491,4060,4061,4063,4065,4067,4069,4071],{"class":493,"line":922},[491,4062,682],{"class":645},[491,4064,649],{"class":501},[491,4066,515],{"class":501},[491,4068,689],{"class":518},[491,4070,522],{"class":501},[491,4072,659],{"class":501},[491,4074,4075,4077,4079,4081,4083],{"class":493,"line":930},[491,4076,626],{"class":501},[491,4078,701],{"class":497},[491,4080,704],{"class":576},[491,4082,457],{"class":505},[491,4084,525],{"class":501},[491,4086,4087],{"class":493,"line":938},[491,4088,570],{"emptyLinePlaceholder":206},[491,4090,4091,4093,4095,4097,4099,4101,4103,4105,4107,4109,4111,4113,4115,4117,4119],{"class":493,"line":946},[491,4092,577],{"class":576},[491,4094,502],{"class":501},[491,4096,729],{"class":505},[491,4098,538],{"class":501},[491,4100,734],{"class":505},[491,4102,538],{"class":501},[491,4104,739],{"class":505},[491,4106,538],{"class":501},[491,4108,744],{"class":505},[491,4110,626],{"class":501},[491,4112,629],{"class":501},[491,4114,535],{"class":586},[491,4116,634],{"class":505},[491,4118,538],{"class":501},[491,4120,639],{"class":501},[491,4122,4123,4125,4127,4129,4131,4133],{"class":493,"line":964},[491,4124,762],{"class":645},[491,4126,649],{"class":501},[491,4128,515],{"class":501},[491,4130,769],{"class":518},[491,4132,522],{"class":501},[491,4134,659],{"class":501},[491,4136,4137,4139,4141,4143,4145,4147],{"class":493,"line":969},[491,4138,779],{"class":645},[491,4140,649],{"class":501},[491,4142,515],{"class":501},[491,4144,786],{"class":518},[491,4146,522],{"class":501},[491,4148,659],{"class":501},[491,4150,4151,4153,4155,4157,4159,4161],{"class":493,"line":975},[491,4152,796],{"class":645},[491,4154,649],{"class":501},[491,4156,515],{"class":501},[491,4158,803],{"class":518},[491,4160,522],{"class":501},[491,4162,659],{"class":501},[491,4164,4165,4167,4169,4171,4173,4175],{"class":493,"line":982},[491,4166,813],{"class":645},[491,4168,649],{"class":501},[491,4170,515],{"class":501},[491,4172,820],{"class":518},[491,4174,522],{"class":501},[491,4176,659],{"class":501},[491,4178,4179,4181,4183,4185,4187],{"class":493,"line":990},[491,4180,626],{"class":501},[491,4182,701],{"class":497},[491,4184,704],{"class":576},[491,4186,457],{"class":505},[491,4188,525],{"class":501},[491,4190,4191],{"class":493,"line":998},[491,4192,570],{"emptyLinePlaceholder":206},[491,4194,4195],{"class":493,"line":1006},[491,4196,4197],{"class":602},"// Generate color variants\n",[491,4199,4200],{"class":493,"line":1014},[491,4201,4202],{"class":602},"// Generate level variants for primary color\n",[491,4204,4205,4207],{"class":493,"line":1022},[491,4206,577],{"class":576},[491,4208,639],{"class":501},[491,4210,4211,4213],{"class":493,"line":1030},[491,4212,861],{"class":505},[491,4214,659],{"class":501},[491,4216,4217,4219],{"class":493,"line":1038},[491,4218,869],{"class":505},[491,4220,659],{"class":501},[491,4222,4223,4225],{"class":493,"line":1046},[491,4224,877],{"class":505},[491,4226,659],{"class":501},[491,4228,4229,4231],{"class":493,"line":1054},[491,4230,885],{"class":505},[491,4232,659],{"class":501},[491,4234,4235,4237],{"class":493,"line":1062},[491,4236,893],{"class":505},[491,4238,659],{"class":501},[491,4240,4241,4243],{"class":493,"line":1070},[491,4242,901],{"class":505},[491,4244,659],{"class":501},[491,4246,4247,4249],{"class":493,"line":1088},[491,4248,909],{"class":505},[491,4250,659],{"class":501},[491,4252,4253,4255],{"class":493,"line":1093},[491,4254,917],{"class":505},[491,4256,659],{"class":501},[491,4258,4259,4261],{"class":493,"line":1099},[491,4260,925],{"class":505},[491,4262,659],{"class":501},[491,4264,4265,4267],{"class":493,"line":1106},[491,4266,933],{"class":505},[491,4268,659],{"class":501},[491,4270,4271,4273],{"class":493,"line":1117},[491,4272,941],{"class":505},[491,4274,659],{"class":501},[491,4276,4277,4279,4281,4283,4285,4287,4289],{"class":493,"line":1128},[491,4278,626],{"class":501},[491,4280,629],{"class":501},[491,4282,541],{"class":586},[491,4284,634],{"class":505},[491,4286,538],{"class":501},[491,4288,959],{"class":505},[491,4290,525],{"class":501},[491,4292,4293],{"class":493,"line":1139},[491,4294,570],{"emptyLinePlaceholder":206},[491,4296,4297],{"class":493,"line":1150},[491,4298,4299],{"class":602},"// Generate level variants for gray (for UI backgrounds, borders, text)\n",[491,4301,4302,4304],{"class":493,"line":1167},[491,4303,577],{"class":576},[491,4305,639],{"class":501},[491,4307,4308,4310],{"class":493,"line":1172},[491,4309,985],{"class":505},[491,4311,659],{"class":501},[491,4313,4314,4316],{"class":493,"line":1178},[491,4315,993],{"class":505},[491,4317,659],{"class":501},[491,4319,4320,4322],{"class":493,"line":1185},[491,4321,1001],{"class":505},[491,4323,659],{"class":501},[491,4325,4326,4328],{"class":493,"line":1196},[491,4327,1009],{"class":505},[491,4329,659],{"class":501},[491,4331,4332,4334],{"class":493,"line":1207},[491,4333,1017],{"class":505},[491,4335,659],{"class":501},[491,4337,4338,4340],{"class":493,"line":1218},[491,4339,1025],{"class":505},[491,4341,659],{"class":501},[491,4343,4344,4346],{"class":493,"line":1229},[491,4345,1033],{"class":505},[491,4347,659],{"class":501},[491,4349,4350,4352],{"class":493,"line":1246},[491,4351,1041],{"class":505},[491,4353,659],{"class":501},[491,4355,4356,4358],{"class":493,"line":1251},[491,4357,1049],{"class":505},[491,4359,659],{"class":501},[491,4361,4363,4365],{"class":493,"line":4362},68,[491,4364,1057],{"class":505},[491,4366,659],{"class":501},[491,4368,4370,4372],{"class":493,"line":4369},69,[491,4371,1065],{"class":505},[491,4373,659],{"class":501},[491,4375,4377,4379,4381,4383,4385,4387,4389],{"class":493,"line":4376},70,[491,4378,626],{"class":501},[491,4380,629],{"class":501},[491,4382,541],{"class":586},[491,4384,634],{"class":505},[491,4386,538],{"class":501},[491,4388,1083],{"class":505},[491,4390,525],{"class":501},[491,4392,4394],{"class":493,"line":4393},71,[491,4395,570],{"emptyLinePlaceholder":206},[491,4397,4399],{"class":493,"line":4398},72,[491,4400,4401],{"class":602},"// Generate shades and tints for interactive states\n",[491,4403,4405,4407],{"class":493,"line":4404},73,[491,4406,577],{"class":576},[491,4408,639],{"class":501},[491,4410,4412,4414],{"class":493,"line":4411},74,[491,4413,1109],{"class":505},[491,4415,659],{"class":501},[491,4417,4419,4421],{"class":493,"line":4418},75,[491,4420,1120],{"class":505},[491,4422,659],{"class":501},[491,4424,4426,4428],{"class":493,"line":4425},76,[491,4427,1131],{"class":505},[491,4429,659],{"class":501},[491,4431,4433,4435],{"class":493,"line":4432},77,[491,4434,1142],{"class":505},[491,4436,659],{"class":501},[491,4438,4440,4442,4444,4446,4448,4450,4452],{"class":493,"line":4439},78,[491,4441,626],{"class":501},[491,4443,629],{"class":501},[491,4445,546],{"class":586},[491,4447,634],{"class":505},[491,4449,538],{"class":501},[491,4451,959],{"class":505},[491,4453,525],{"class":501},[491,4455,4457],{"class":493,"line":4456},79,[491,4458,570],{"emptyLinePlaceholder":206},[491,4460,4462,4464],{"class":493,"line":4461},80,[491,4463,577],{"class":576},[491,4465,639],{"class":501},[491,4467,4469,4471],{"class":493,"line":4468},81,[491,4470,1188],{"class":505},[491,4472,659],{"class":501},[491,4474,4476,4478],{"class":493,"line":4475},82,[491,4477,1199],{"class":505},[491,4479,659],{"class":501},[491,4481,4483,4485],{"class":493,"line":4482},83,[491,4484,1210],{"class":505},[491,4486,659],{"class":501},[491,4488,4490,4492],{"class":493,"line":4489},84,[491,4491,1221],{"class":505},[491,4493,659],{"class":501},[491,4495,4497,4499,4501,4503,4505,4507,4509],{"class":493,"line":4496},85,[491,4498,626],{"class":501},[491,4500,629],{"class":501},[491,4502,551],{"class":586},[491,4504,634],{"class":505},[491,4506,538],{"class":501},[491,4508,959],{"class":505},[491,4510,525],{"class":501},[491,4512,4514],{"class":493,"line":4513},86,[491,4515,570],{"emptyLinePlaceholder":206},[491,4517,4519],{"class":493,"line":4518},87,[491,4520,4521],{"class":602},"// 2. Scales for Fluid Typography\n",[491,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545],{"class":493,"line":4524},88,[491,4526,577],{"class":576},[491,4528,502],{"class":501},[491,4530,1376],{"class":505},[491,4532,538],{"class":501},[491,4534,1381],{"class":505},[491,4536,626],{"class":501},[491,4538,629],{"class":501},[491,4540,1336],{"class":586},[491,4542,634],{"class":505},[491,4544,538],{"class":501},[491,4546,639],{"class":501},[491,4548,4550,4552,4554],{"class":493,"line":4549},89,[491,4551,1398],{"class":501},[491,4553,1401],{"class":505},[491,4555,659],{"class":501},[491,4557,4559,4561,4563,4565,4567,4569,4571],{"class":493,"line":4558},90,[491,4560,1408],{"class":645},[491,4562,649],{"class":501},[491,4564,515],{"class":501},[491,4566,1415],{"class":518},[491,4568,522],{"class":501},[491,4570,538],{"class":501},[491,4572,4573],{"class":602},"   // 1.2 for mobile\n",[491,4575,4577,4579,4581,4583,4585,4587,4589],{"class":493,"line":4576},91,[491,4578,1427],{"class":645},[491,4580,649],{"class":501},[491,4582,515],{"class":501},[491,4584,1434],{"class":518},[491,4586,522],{"class":501},[491,4588,538],{"class":501},[491,4590,4591],{"class":602},"   // 1.25 for desktop\n",[491,4593,4595,4597,4599],{"class":493,"line":4594},92,[491,4596,626],{"class":501},[491,4598,457],{"class":505},[491,4600,525],{"class":501},[491,4602,4604],{"class":493,"line":4603},93,[491,4605,570],{"emptyLinePlaceholder":206},[491,4607,4609,4611,4613,4615,4617,4619,4621,4623,4625,4627,4629,4631,4633,4635,4637,4639,4641,4643,4645,4647,4649,4651,4653,4655,4657,4659,4661,4663,4665,4667,4669],{"class":493,"line":4608},94,[491,4610,577],{"class":576},[491,4612,1470],{"class":505},[491,4614,583],{"class":501},[491,4616,1341],{"class":586},[491,4618,634],{"class":505},[491,4620,538],{"class":501},[491,4622,1376],{"class":505},[491,4624,538],{"class":501},[491,4626,1485],{"class":505},[491,4628,1488],{"class":501},[491,4630,1492],{"class":1491},[491,4632,538],{"class":501},[491,4634,1497],{"class":501},[491,4636,1500],{"class":1491},[491,4638,538],{"class":501},[491,4640,1497],{"class":501},[491,4642,1507],{"class":1491},[491,4644,538],{"class":501},[491,4646,1512],{"class":1491},[491,4648,538],{"class":501},[491,4650,1517],{"class":1491},[491,4652,538],{"class":501},[491,4654,1522],{"class":1491},[491,4656,538],{"class":501},[491,4658,1527],{"class":1491},[491,4660,538],{"class":501},[491,4662,1532],{"class":1491},[491,4664,538],{"class":501},[491,4666,1537],{"class":1491},[491,4668,1540],{"class":505},[491,4670,525],{"class":501},[491,4672,4674,4676,4678,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698,4700,4702,4704,4706,4708,4710,4712,4714,4716,4718,4720,4722,4724,4726,4728,4730,4732,4734],{"class":493,"line":4673},95,[491,4675,577],{"class":576},[491,4677,1549],{"class":505},[491,4679,583],{"class":501},[491,4681,1341],{"class":586},[491,4683,634],{"class":505},[491,4685,538],{"class":501},[491,4687,1560],{"class":505},[491,4689,538],{"class":501},[491,4691,1485],{"class":505},[491,4693,1488],{"class":501},[491,4695,1492],{"class":1491},[491,4697,538],{"class":501},[491,4699,1497],{"class":501},[491,4701,1500],{"class":1491},[491,4703,538],{"class":501},[491,4705,1497],{"class":501},[491,4707,1507],{"class":1491},[491,4709,538],{"class":501},[491,4711,1512],{"class":1491},[491,4713,538],{"class":501},[491,4715,1517],{"class":1491},[491,4717,538],{"class":501},[491,4719,1522],{"class":1491},[491,4721,538],{"class":501},[491,4723,1527],{"class":1491},[491,4725,538],{"class":501},[491,4727,1532],{"class":1491},[491,4729,538],{"class":501},[491,4731,1537],{"class":1491},[491,4733,1540],{"class":505},[491,4735,525],{"class":501},[491,4737,4739],{"class":493,"line":4738},96,[491,4740,570],{"emptyLinePlaceholder":206},[491,4742,4744],{"class":493,"line":4743},97,[491,4745,4746],{"class":602},"// 3. Fluid Typography\n",[491,4748,4750,4752,4754],{"class":493,"line":4749},98,[491,4751,1705],{"class":586},[491,4753,1708],{"class":505},[491,4755,525],{"class":501},[491,4757,4759],{"class":493,"line":4758},99,[491,4760,570],{"emptyLinePlaceholder":206},[491,4762,4764,4766,4768,4770,4772,4774,4776,4778,4780,4782,4784,4786,4788],{"class":493,"line":4763},100,[491,4765,577],{"class":576},[491,4767,502],{"class":501},[491,4769,2291],{"class":505},[491,4771,538],{"class":501},[491,4773,2296],{"class":505},[491,4775,538],{"class":501},[491,4777,2301],{"class":505},[491,4779,626],{"class":501},[491,4781,629],{"class":501},[491,4783,2261],{"class":586},[491,4785,634],{"class":505},[491,4787,538],{"class":501},[491,4789,639],{"class":501},[491,4791,4793,4795,4797,4799,4801,4803],{"class":493,"line":4792},101,[491,4794,2318],{"class":645},[491,4796,649],{"class":501},[491,4798,515],{"class":501},[491,4800,2325],{"class":518},[491,4802,522],{"class":501},[491,4804,659],{"class":501},[491,4806,4808,4810,4812,4814,4816,4818],{"class":493,"line":4807},102,[491,4809,2334],{"class":645},[491,4811,649],{"class":501},[491,4813,515],{"class":501},[491,4815,2341],{"class":518},[491,4817,522],{"class":501},[491,4819,659],{"class":501},[491,4821,4823,4825,4827,4829,4831,4833],{"class":493,"line":4822},103,[491,4824,2350],{"class":645},[491,4826,649],{"class":501},[491,4828,515],{"class":501},[491,4830,2357],{"class":518},[491,4832,522],{"class":501},[491,4834,659],{"class":501},[491,4836,4838,4840,4842,4844,4846],{"class":493,"line":4837},104,[491,4839,626],{"class":501},[491,4841,701],{"class":497},[491,4843,704],{"class":576},[491,4845,457],{"class":505},[491,4847,525],{"class":501},[491,4849,4851],{"class":493,"line":4850},105,[491,4852,570],{"emptyLinePlaceholder":206},[491,4854,4856,4858,4861,4863,4865],{"class":493,"line":4855},106,[491,4857,577],{"class":576},[491,4859,4860],{"class":505}," fontSizes ",[491,4862,583],{"class":501},[491,4864,1739],{"class":586},[491,4866,1864],{"class":505},[491,4868,4870,4872],{"class":493,"line":4869},107,[491,4871,1869],{"class":505},[491,4873,659],{"class":501},[491,4875,4877,4879,4881,4883,4885,4887,4889,4891,4893],{"class":493,"line":4876},108,[491,4878,1876],{"class":501},[491,4880,1879],{"class":645},[491,4882,649],{"class":501},[491,4884,1884],{"class":1491},[491,4886,538],{"class":501},[491,4888,1889],{"class":645},[491,4890,649],{"class":501},[491,4892,1894],{"class":1491},[491,4894,4895],{"class":501}," },\n",[491,4897,4899],{"class":493,"line":4898},109,[491,4900,1905],{"class":501},[491,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920,4922,4924,4926,4928,4930,4932,4934,4936],{"class":493,"line":4903},110,[491,4905,1910],{"class":645},[491,4907,649],{"class":501},[491,4909,502],{"class":501},[491,4911,1879],{"class":645},[491,4913,649],{"class":501},[491,4915,1921],{"class":505},[491,4917,1488],{"class":501},[491,4919,1500],{"class":1491},[491,4921,1928],{"class":505},[491,4923,538],{"class":501},[491,4925,1889],{"class":645},[491,4927,649],{"class":501},[491,4929,1937],{"class":505},[491,4931,1488],{"class":501},[491,4933,1500],{"class":1491},[491,4935,1944],{"class":505},[491,4937,1947],{"class":501},[491,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973],{"class":493,"line":4940},111,[491,4942,1952],{"class":645},[491,4944,649],{"class":501},[491,4946,502],{"class":501},[491,4948,1879],{"class":645},[491,4950,649],{"class":501},[491,4952,1921],{"class":505},[491,4954,1488],{"class":501},[491,4956,1507],{"class":1491},[491,4958,1928],{"class":505},[491,4960,538],{"class":501},[491,4962,1889],{"class":645},[491,4964,649],{"class":501},[491,4966,1937],{"class":505},[491,4968,1488],{"class":501},[491,4970,1507],{"class":1491},[491,4972,1944],{"class":505},[491,4974,1947],{"class":501},[491,4976,4978,4980,4982,4984,4986,4988,4990,4992,4994,4996,4998,5000,5002,5004,5006],{"class":493,"line":4977},112,[491,4979,1989],{"class":645},[491,4981,649],{"class":501},[491,4983,502],{"class":501},[491,4985,1879],{"class":645},[491,4987,649],{"class":501},[491,4989,1921],{"class":505},[491,4991,2002],{"class":1491},[491,4993,1928],{"class":505},[491,4995,538],{"class":501},[491,4997,1889],{"class":645},[491,4999,649],{"class":501},[491,5001,1937],{"class":505},[491,5003,2002],{"class":1491},[491,5005,1944],{"class":505},[491,5007,1947],{"class":501},[491,5009,5011,5013,5015,5017,5019,5021,5023,5025,5027,5029,5031,5033,5035,5037,5039],{"class":493,"line":5010},113,[491,5012,2023],{"class":645},[491,5014,649],{"class":501},[491,5016,502],{"class":501},[491,5018,1879],{"class":645},[491,5020,649],{"class":501},[491,5022,1921],{"class":505},[491,5024,1507],{"class":1491},[491,5026,1928],{"class":505},[491,5028,538],{"class":501},[491,5030,1889],{"class":645},[491,5032,649],{"class":501},[491,5034,1937],{"class":505},[491,5036,1507],{"class":1491},[491,5038,1944],{"class":505},[491,5040,1947],{"class":501},[491,5042,5044,5046,5048,5050,5052,5054,5056,5058,5060,5062,5064,5066,5068,5070,5072],{"class":493,"line":5043},114,[491,5045,2056],{"class":645},[491,5047,649],{"class":501},[491,5049,502],{"class":501},[491,5051,1879],{"class":645},[491,5053,649],{"class":501},[491,5055,1921],{"class":505},[491,5057,1500],{"class":1491},[491,5059,1928],{"class":505},[491,5061,538],{"class":501},[491,5063,1889],{"class":645},[491,5065,649],{"class":501},[491,5067,1937],{"class":505},[491,5069,1500],{"class":1491},[491,5071,1944],{"class":505},[491,5073,1947],{"class":501},[491,5075,5077,5079,5081,5083,5085,5087,5089,5091,5093,5095,5097,5099,5101,5103,5105,5107,5109],{"class":493,"line":5076},115,[491,5078,2089],{"class":501},[491,5080,2092],{"class":645},[491,5082,522],{"class":501},[491,5084,649],{"class":501},[491,5086,502],{"class":501},[491,5088,1879],{"class":645},[491,5090,649],{"class":501},[491,5092,1921],{"class":505},[491,5094,1492],{"class":1491},[491,5096,1928],{"class":505},[491,5098,538],{"class":501},[491,5100,1889],{"class":645},[491,5102,649],{"class":501},[491,5104,1937],{"class":505},[491,5106,1492],{"class":1491},[491,5108,1944],{"class":505},[491,5110,1947],{"class":501},[491,5112,5114,5116,5118,5120,5122,5124,5126,5128,5130,5132,5134,5136,5138,5140,5142,5144,5146],{"class":493,"line":5113},116,[491,5115,2089],{"class":501},[491,5117,2129],{"class":645},[491,5119,522],{"class":501},[491,5121,649],{"class":501},[491,5123,502],{"class":501},[491,5125,1879],{"class":645},[491,5127,649],{"class":501},[491,5129,1921],{"class":505},[491,5131,2144],{"class":1491},[491,5133,1928],{"class":505},[491,5135,538],{"class":501},[491,5137,1889],{"class":645},[491,5139,649],{"class":501},[491,5141,1937],{"class":505},[491,5143,2144],{"class":1491},[491,5145,1944],{"class":505},[491,5147,1947],{"class":501},[491,5149,5151,5153,5155,5157,5159,5161,5163,5165,5167,5169,5171,5173,5175,5177,5179,5181,5183],{"class":493,"line":5150},117,[491,5152,2089],{"class":501},[491,5154,2167],{"class":645},[491,5156,522],{"class":501},[491,5158,649],{"class":501},[491,5160,502],{"class":501},[491,5162,1879],{"class":645},[491,5164,649],{"class":501},[491,5166,1921],{"class":505},[491,5168,2182],{"class":1491},[491,5170,1928],{"class":505},[491,5172,538],{"class":501},[491,5174,1889],{"class":645},[491,5176,649],{"class":501},[491,5178,1937],{"class":505},[491,5180,2182],{"class":1491},[491,5182,1944],{"class":505},[491,5184,1947],{"class":501},[491,5186,5188,5190,5192,5194,5196,5198],{"class":493,"line":5187},118,[491,5189,2203],{"class":645},[491,5191,649],{"class":501},[491,5193,515],{"class":501},[491,5195,2210],{"class":518},[491,5197,522],{"class":501},[491,5199,659],{"class":501},[491,5201,5203],{"class":493,"line":5202},119,[491,5204,2219],{"class":501},[491,5206,5208,5210],{"class":493,"line":5207},120,[491,5209,457],{"class":505},[491,5211,525],{"class":501},[491,5213,5215],{"class":493,"line":5214},121,[491,5216,570],{"emptyLinePlaceholder":206},[491,5218,5220,5222,5224,5227,5229,5232,5234,5237,5239,5242,5244,5247,5249,5251,5253,5255],{"class":493,"line":5219},122,[491,5221,577],{"class":576},[491,5223,502],{"class":501},[491,5225,5226],{"class":505}," fontWeight",[491,5228,538],{"class":501},[491,5230,5231],{"class":505}," fontWeightNormal",[491,5233,538],{"class":501},[491,5235,5236],{"class":505}," fontWeightMedium",[491,5238,538],{"class":501},[491,5240,5241],{"class":505}," fontWeightSemibold",[491,5243,538],{"class":501},[491,5245,5246],{"class":505}," fontWeightBold ",[491,5248,626],{"class":501},[491,5250,629],{"class":501},[491,5252,2266],{"class":586},[491,5254,1708],{"class":505},[491,5256,525],{"class":501},[491,5258,5260,5262,5264,5267,5269,5272,5274,5277,5279,5282,5284,5286,5288,5290],{"class":493,"line":5259},123,[491,5261,577],{"class":576},[491,5263,502],{"class":501},[491,5265,5266],{"class":505}," lineHeight",[491,5268,538],{"class":501},[491,5270,5271],{"class":505}," lineHeightTight",[491,5273,538],{"class":501},[491,5275,5276],{"class":505}," lineHeightNormal",[491,5278,538],{"class":501},[491,5280,5281],{"class":505}," lineHeightRelaxed ",[491,5283,626],{"class":501},[491,5285,629],{"class":501},[491,5287,2451],{"class":586},[491,5289,1708],{"class":505},[491,5291,525],{"class":501},[491,5293,5295,5297,5299,5302,5304,5307,5309,5312,5314,5317,5319,5321,5323,5325],{"class":493,"line":5294},124,[491,5296,577],{"class":576},[491,5298,502],{"class":501},[491,5300,5301],{"class":505}," letterSpacing",[491,5303,538],{"class":501},[491,5305,5306],{"class":505}," letterSpacingTight",[491,5308,538],{"class":501},[491,5310,5311],{"class":505}," letterSpacingNormal",[491,5313,538],{"class":501},[491,5315,5316],{"class":505}," letterSpacingWide ",[491,5318,626],{"class":501},[491,5320,629],{"class":501},[491,5322,2456],{"class":586},[491,5324,1708],{"class":505},[491,5326,525],{"class":501},[491,5328,5330],{"class":493,"line":5329},125,[491,5331,570],{"emptyLinePlaceholder":206},[491,5333,5335],{"class":493,"line":5334},126,[491,5336,5337],{"class":602},"// 4. Spacing\n",[491,5339,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369,5371,5373,5375,5377],{"class":493,"line":5340},127,[491,5342,577],{"class":576},[491,5344,502],{"class":501},[491,5346,2633],{"class":505},[491,5348,626],{"class":501},[491,5350,629],{"class":501},[491,5352,2598],{"class":586},[491,5354,634],{"class":505},[491,5356,538],{"class":501},[491,5358,502],{"class":501},[491,5360,1257],{"class":645},[491,5362,649],{"class":501},[491,5364,515],{"class":501},[491,5366,2654],{"class":518},[491,5368,522],{"class":501},[491,5370,509],{"class":501},[491,5372,701],{"class":497},[491,5374,704],{"class":576},[491,5376,457],{"class":505},[491,5378,525],{"class":501},[491,5380,5382,5384,5387,5389,5391,5393,5395,5397,5399],{"class":493,"line":5381},128,[491,5383,577],{"class":576},[491,5385,5386],{"class":505}," spacings ",[491,5388,583],{"class":501},[491,5390,2603],{"class":586},[491,5392,634],{"class":505},[491,5394,538],{"class":501},[491,5396,2785],{"class":505},[491,5398,538],{"class":501},[491,5400,639],{"class":501},[491,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420],{"class":493,"line":5403},129,[491,5405,2794],{"class":501},[491,5407,2797],{"class":645},[491,5409,522],{"class":501},[491,5411,649],{"class":501},[491,5413,1921],{"class":505},[491,5415,1488],{"class":501},[491,5417,1492],{"class":1491},[491,5419,1928],{"class":505},[491,5421,659],{"class":501},[491,5423,5425,5427,5429,5431,5433,5435,5437,5439,5441],{"class":493,"line":5424},130,[491,5426,2794],{"class":501},[491,5428,2818],{"class":645},[491,5430,522],{"class":501},[491,5432,649],{"class":501},[491,5434,1921],{"class":505},[491,5436,1488],{"class":501},[491,5438,1500],{"class":1491},[491,5440,1928],{"class":505},[491,5442,659],{"class":501},[491,5444,5446,5448,5450,5452,5454,5456,5458],{"class":493,"line":5445},131,[491,5447,2837],{"class":645},[491,5449,649],{"class":501},[491,5451,1921],{"class":505},[491,5453,1488],{"class":501},[491,5455,1507],{"class":1491},[491,5457,1928],{"class":505},[491,5459,659],{"class":501},[491,5461,5463,5465,5467,5469,5471,5473,5475],{"class":493,"line":5462},132,[491,5464,2854],{"class":645},[491,5466,649],{"class":501},[491,5468,1921],{"class":505},[491,5470,1488],{"class":501},[491,5472,1507],{"class":1491},[491,5474,1928],{"class":505},[491,5476,659],{"class":501},[491,5478,5480,5482,5484,5486,5488,5490],{"class":493,"line":5479},133,[491,5481,2871],{"class":645},[491,5483,649],{"class":501},[491,5485,1921],{"class":505},[491,5487,2002],{"class":1491},[491,5489,1928],{"class":505},[491,5491,659],{"class":501},[491,5493,5495,5497,5499,5501,5503,5505],{"class":493,"line":5494},134,[491,5496,2886],{"class":645},[491,5498,649],{"class":501},[491,5500,1921],{"class":505},[491,5502,1507],{"class":1491},[491,5504,1928],{"class":505},[491,5506,659],{"class":501},[491,5508,5510,5512,5514,5516,5518,5520],{"class":493,"line":5509},135,[491,5511,2901],{"class":645},[491,5513,649],{"class":501},[491,5515,1921],{"class":505},[491,5517,1500],{"class":1491},[491,5519,1928],{"class":505},[491,5521,659],{"class":501},[491,5523,5525,5527,5529,5531,5533,5535,5537,5539],{"class":493,"line":5524},136,[491,5526,2794],{"class":501},[491,5528,2092],{"class":645},[491,5530,522],{"class":501},[491,5532,649],{"class":501},[491,5534,1921],{"class":505},[491,5536,1492],{"class":1491},[491,5538,1928],{"class":505},[491,5540,659],{"class":501},[491,5542,5544,5546,5548,5550,5552,5554,5556,5558],{"class":493,"line":5543},137,[491,5545,2794],{"class":501},[491,5547,2129],{"class":645},[491,5549,522],{"class":501},[491,5551,649],{"class":501},[491,5553,1921],{"class":505},[491,5555,2144],{"class":1491},[491,5557,1928],{"class":505},[491,5559,659],{"class":501},[491,5561,5563,5565,5567],{"class":493,"line":5562},138,[491,5564,626],{"class":501},[491,5566,457],{"class":505},[491,5568,525],{"class":501},[491,5570,5572],{"class":493,"line":5571},139,[491,5573,570],{"emptyLinePlaceholder":206},[491,5575,5577],{"class":493,"line":5576},140,[491,5578,5579],{"class":602},"// 5. Visual Depth\n",[491,5581,5583],{"class":493,"line":5582},141,[491,5584,570],{"emptyLinePlaceholder":206},[491,5586,5588,5590,5592,5594,5596,5598,5600,5602],{"class":493,"line":5587},142,[491,5589,577],{"class":576},[491,5591,502],{"class":501},[491,5593,3079],{"class":505},[491,5595,626],{"class":501},[491,5597,629],{"class":501},[491,5599,2997],{"class":586},[491,5601,1708],{"class":505},[491,5603,525],{"class":501},[491,5605,5607],{"class":493,"line":5606},143,[491,5608,570],{"emptyLinePlaceholder":206},[491,5610,5612,5614,5616,5619,5621,5624,5626,5629,5631,5634,5636,5638,5640,5642],{"class":493,"line":5611},144,[491,5613,577],{"class":576},[491,5615,502],{"class":501},[491,5617,5618],{"class":505}," borderWidth",[491,5620,538],{"class":501},[491,5622,5623],{"class":505}," borderWidthThin",[491,5625,538],{"class":501},[491,5627,5628],{"class":505}," borderWidthMedium",[491,5630,538],{"class":501},[491,5632,5633],{"class":505}," borderWidthThick ",[491,5635,626],{"class":501},[491,5637,629],{"class":501},[491,5639,2992],{"class":586},[491,5641,1708],{"class":505},[491,5643,525],{"class":501},[491,5645,5647],{"class":493,"line":5646},145,[491,5648,570],{"emptyLinePlaceholder":206},[491,5650,5652,5654,5656,5659,5661,5664,5666,5669,5671,5673,5675,5677,5679],{"class":493,"line":5651},146,[491,5653,577],{"class":576},[491,5655,502],{"class":501},[491,5657,5658],{"class":505}," borderColor",[491,5660,538],{"class":501},[491,5662,5663],{"class":505}," borderColorLight",[491,5665,538],{"class":501},[491,5667,5668],{"class":505}," borderColorDark ",[491,5670,626],{"class":501},[491,5672,629],{"class":501},[491,5674,3002],{"class":586},[491,5676,634],{"class":505},[491,5678,538],{"class":501},[491,5680,639],{"class":501},[491,5682,5684,5686,5688,5690,5692,5694,5696],{"class":493,"line":5683},147,[491,5685,2318],{"class":645},[491,5687,649],{"class":501},[491,5689,1260],{"class":505},[491,5691,3152],{"class":501},[491,5693,3155],{"class":586},[491,5695,3158],{"class":505},[491,5697,659],{"class":501},[491,5699,5701,5703,5705,5707,5709,5711,5713],{"class":493,"line":5700},148,[491,5702,3165],{"class":645},[491,5704,649],{"class":501},[491,5706,1260],{"class":505},[491,5708,3152],{"class":501},[491,5710,3155],{"class":586},[491,5712,3176],{"class":505},[491,5714,659],{"class":501},[491,5716,5718,5720,5722,5724,5726,5728,5730],{"class":493,"line":5717},149,[491,5719,3183],{"class":645},[491,5721,649],{"class":501},[491,5723,1260],{"class":505},[491,5725,3152],{"class":501},[491,5727,3155],{"class":586},[491,5729,3194],{"class":505},[491,5731,659],{"class":501},[491,5733,5735,5737,5739,5741,5743],{"class":493,"line":5734},150,[491,5736,626],{"class":501},[491,5738,701],{"class":497},[491,5740,704],{"class":576},[491,5742,457],{"class":505},[491,5744,525],{"class":501},[491,5746,5748],{"class":493,"line":5747},151,[491,5749,570],{"emptyLinePlaceholder":206},[491,5751,5753,5755,5757],{"class":493,"line":5752},152,[491,5754,577],{"class":576},[491,5756,502],{"class":501},[491,5758,2386],{"class":505},[491,5760,5762,5764],{"class":493,"line":5761},153,[491,5763,3271],{"class":505},[491,5765,659],{"class":501},[491,5767,5769,5771,5773],{"class":493,"line":5768},154,[491,5770,3278],{"class":505},[491,5772,538],{"class":501},[491,5774,2386],{"class":505},[491,5776,5778,5780,5782,5784,5786,5788,5790],{"class":493,"line":5777},155,[491,5779,626],{"class":501},[491,5781,629],{"class":501},[491,5783,3233],{"class":586},[491,5785,634],{"class":505},[491,5787,538],{"class":501},[491,5789,502],{"class":501},[491,5791,2386],{"class":505},[491,5793,5795,5797,5799,5801,5803,5805],{"class":493,"line":5794},156,[491,5796,2318],{"class":645},[491,5798,649],{"class":501},[491,5800,515],{"class":501},[491,5802,3307],{"class":518},[491,5804,522],{"class":501},[491,5806,659],{"class":501},[491,5808,5810,5812,5814,5816,5818,5820],{"class":493,"line":5809},157,[491,5811,3316],{"class":645},[491,5813,649],{"class":501},[491,5815,515],{"class":501},[491,5817,3323],{"class":518},[491,5819,522],{"class":501},[491,5821,659],{"class":501},[491,5823,5825,5827,5829],{"class":493,"line":5824},158,[491,5826,626],{"class":501},[491,5828,457],{"class":505},[491,5830,525],{"class":501},[491,5832,5834,5836,5838,5841,5843,5846,5848,5851,5853,5856,5858,5861,5863,5866,5868,5870,5872,5874,5876,5878,5880],{"class":493,"line":5833},159,[491,5835,577],{"class":576},[491,5837,502],{"class":501},[491,5839,5840],{"class":505}," borderRadiusXs",[491,5842,538],{"class":501},[491,5844,5845],{"class":505}," borderRadiusSm",[491,5847,538],{"class":501},[491,5849,5850],{"class":505}," borderRadiusMd",[491,5852,538],{"class":501},[491,5854,5855],{"class":505}," borderRadiusLg",[491,5857,538],{"class":501},[491,5859,5860],{"class":505}," borderRadiusXl",[491,5862,538],{"class":501},[491,5864,5865],{"class":505}," borderRadius2xl ",[491,5867,626],{"class":501},[491,5869,629],{"class":501},[491,5871,2603],{"class":586},[491,5873,634],{"class":505},[491,5875,538],{"class":501},[491,5877,3410],{"class":505},[491,5879,538],{"class":501},[491,5881,639],{"class":501},[491,5883,5885,5887,5889,5891,5893,5895,5897],{"class":493,"line":5884},160,[491,5886,2837],{"class":645},[491,5888,649],{"class":501},[491,5890,1921],{"class":505},[491,5892,1488],{"class":501},[491,5894,1500],{"class":1491},[491,5896,1928],{"class":505},[491,5898,659],{"class":501},[491,5900,5902,5904,5906,5908,5910,5912,5914],{"class":493,"line":5901},161,[491,5903,2854],{"class":645},[491,5905,649],{"class":501},[491,5907,1921],{"class":505},[491,5909,1488],{"class":501},[491,5911,1507],{"class":1491},[491,5913,1928],{"class":505},[491,5915,659],{"class":501},[491,5917,5919,5921,5923,5925,5927,5929],{"class":493,"line":5918},162,[491,5920,2871],{"class":645},[491,5922,649],{"class":501},[491,5924,1921],{"class":505},[491,5926,2002],{"class":1491},[491,5928,1928],{"class":505},[491,5930,659],{"class":501},[491,5932,5934,5936,5938,5940,5942,5944],{"class":493,"line":5933},163,[491,5935,2886],{"class":645},[491,5937,649],{"class":501},[491,5939,1921],{"class":505},[491,5941,1507],{"class":1491},[491,5943,1928],{"class":505},[491,5945,659],{"class":501},[491,5947,5949,5951,5953,5955,5957,5959],{"class":493,"line":5948},164,[491,5950,2901],{"class":645},[491,5952,649],{"class":501},[491,5954,1921],{"class":505},[491,5956,1500],{"class":1491},[491,5958,1928],{"class":505},[491,5960,659],{"class":501},[491,5962,5964,5966,5968,5970,5972,5974,5976,5978],{"class":493,"line":5963},165,[491,5965,2794],{"class":501},[491,5967,2092],{"class":645},[491,5969,522],{"class":501},[491,5971,649],{"class":501},[491,5973,1921],{"class":505},[491,5975,1492],{"class":1491},[491,5977,1928],{"class":505},[491,5979,659],{"class":501},[491,5981,5983,5985,5987],{"class":493,"line":5982},166,[491,5984,626],{"class":501},[491,5986,457],{"class":505},[491,5988,525],{"class":501},[491,5990,5992],{"class":493,"line":5991},167,[491,5993,570],{"emptyLinePlaceholder":206},[491,5995,5997,5999,6001,6004,6006,6009,6011,6014,6016,6019,6021,6024,6026,6028,6030,6032],{"class":493,"line":5996},168,[491,5998,577],{"class":576},[491,6000,502],{"class":501},[491,6002,6003],{"class":505},"  boxShadow",[491,6005,538],{"class":501},[491,6007,6008],{"class":505}," boxShadowSm",[491,6010,538],{"class":501},[491,6012,6013],{"class":505}," boxShadowMd",[491,6015,538],{"class":501},[491,6017,6018],{"class":505}," boxShadowLg",[491,6020,538],{"class":501},[491,6022,6023],{"class":505}," boxShadowXl ",[491,6025,626],{"class":501},[491,6027,629],{"class":501},[491,6029,3557],{"class":586},[491,6031,1708],{"class":505},[491,6033,525],{"class":501},[491,6035,6037],{"class":493,"line":6036},169,[491,6038,570],{"emptyLinePlaceholder":206},[491,6040,6042,6044,6046,6049,6051,6054,6056,6059,6061,6064,6066,6068,6070,6072],{"class":493,"line":6041},170,[491,6043,577],{"class":576},[491,6045,502],{"class":501},[491,6047,6048],{"class":505}," breakpointSm",[491,6050,538],{"class":501},[491,6052,6053],{"class":505}," breakpointMd",[491,6055,538],{"class":501},[491,6057,6058],{"class":505}," breakpointLg",[491,6060,538],{"class":501},[491,6062,6063],{"class":505}," breakpointXl ",[491,6065,626],{"class":501},[491,6067,629],{"class":501},[491,6069,3667],{"class":586},[491,6071,1708],{"class":505},[491,6073,525],{"class":501},[491,6075,6077],{"class":493,"line":6076},171,[491,6078,570],{"emptyLinePlaceholder":206},[491,6080,6082,6084,6086,6088],{"class":493,"line":6081},172,[491,6083,1254],{"class":497},[491,6085,1257],{"class":497},[491,6087,1260],{"class":505},[491,6089,525],{"class":501},[435,6091,6093],{"id":6092},"next-steps-components-recipes","Next Steps: Components & Recipes",[414,6095,6096],{},"Your design system tokens are now complete! With these tokens in place, you're ready to build:",[469,6098,6100],{"id":6099},"components-coming-soon","Components (Coming Soon)",[414,6102,6103],{},"Pre-built, customizable UI components that use your design tokens:",[443,6105,6106,6109,6112,6115,6118,6121],{},[446,6107,6108],{},"Buttons (primary, secondary, outline, ghost variants)",[446,6110,6111],{},"Forms (inputs, textareas, selects, checkboxes)",[446,6113,6114],{},"Cards (with headers, footers, images)",[446,6116,6117],{},"Modals & Dialogs",[446,6119,6120],{},"Navigation (navbar, sidebar, breadcrumbs)",[446,6122,6123],{},"Alerts & Notifications",[414,6125,6126],{},"Stay tuned for component documentation!",[469,6128,6130],{"id":6129},"utilities-coming-soon","Utilities (Coming Soon)",[414,6132,6133],{},"Helper classes and functions to speed up development:",[443,6135,6136,6139,6142,6145,6148],{},[446,6137,6138],{},"Flexbox & Grid utilities",[446,6140,6141],{},"Text alignment & decoration",[446,6143,6144],{},"Margin & padding shortcuts",[446,6146,6147],{},"Display & visibility helpers",[446,6149,6150],{},"Positioning utilities (absolute, relative, fixed)",[414,6152,6153],{},[453,6154,6155],{"href":103},"Learn more about utilities →",[469,6157,6159],{"id":6158},"recipes-coming-soon","Recipes (Coming Soon)",[414,6161,6162],{},"Recipes are advanced component styling systems that combine utility declarations with configurable variants. They provide a powerful way to create flexible, reusable UI components with type-safe variant selection.",[414,6164,6165],{},"Recipes support:",[443,6167,6168,6174,6180,6186],{},[446,6169,6170,6173],{},[417,6171,6172],{},"Default variants",": Specify which variant applies when none is chosen",[446,6175,6176,6179],{},[417,6177,6178],{},"Compound variants",": Define special styling for specific variant combinations",[446,6181,6182,6185],{},[417,6183,6184],{},"Full type safety",": TypeScript support for variant names and values",[446,6187,6188,6191],{},[417,6189,6190],{},"Runtime flexibility",": Generate utility class strings on the fly",[414,6193,6194],{},[453,6195,6196],{"href":118},"Learn more about recipes →",[435,6198,6200],{"id":6199},"examples","Examples",[6202,6203,6205],"h3",{"id":6204},"using-your-design-tokens","Using Your Design Tokens",[414,6207,6208],{},"Now that you've created your design system, let's use it to build some components!",[469,6210,6212],{"id":6211},"example-button-component","Example: Button Component",[482,6214,6216],{"className":484,"code":6215,"language":486,"meta":487,"style":487},"const { ref, selector, css } = s;\n\nselector('.btn', {\n    fontFamily: ref(fontFamily),\n    fontSize: ref(fontSize),\n    fontWeight: ref(fontWeight),\n    lineHeight: ref(lineHeight),\n    \n    paddingTop: ref(spacingSm),\n    paddingBottom: ref(spacingSm),\n    paddingLeft: ref(spacingMd),\n    paddingRight: ref(spacingMd),\n    \n    borderRadius: ref(borderRadius),\n    borderWidth: ref(borderWidth),\n    borderStyle: ref(borderStyle),\n    borderColor: ref(borderColor),\n    backgroundColor: ref(colorPrimary),\n    color: 'white',\n    \n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n});\n\nselector('.btn:hover', {\n    backgroundColor: ref(colorPrimaryShade50),\n    boxShadow: ref(boxShadow),\n});\n\nselector('.btn:active', {\n    backgroundColor: ref(colorPrimaryShade100),\n    boxShadow: 'none',\n});\n\n// Subtle variant using tints\nselector('.btn-subtle', {\n    fontFamily: ref(fontFamily),\n    fontSize: ref(fontSize),\n    fontWeight: ref(fontWeight),\n    lineHeight: ref(lineHeight),\n    \n    paddingTop: ref(spacingSm),\n    paddingBottom: ref(spacingSm),\n    paddingLeft: ref(spacingMd),\n    paddingRight: ref(spacingMd),\n    \n    borderRadius: ref(borderRadiusMd),\n    borderWidth: ref(borderWidth),\n    borderStyle: ref(borderStyle),\n    borderColor: ref(colorPrimary),\n    backgroundColor: ref(colorPrimaryTint150),\n    color: ref(colorPrimary),\n    \n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n});\n\nselector('.btn-subtle:hover', {\n    backgroundColor: ref(colorPrimaryTint100),\n});\n",[477,6217,6218,6245,6249,6268,6282,6295,6309,6323,6328,6342,6355,6369,6382,6386,6399,6412,6426,6439,6453,6469,6473,6489,6505,6513,6517,6534,6547,6560,6568,6572,6589,6602,6617,6625,6629,6634,6651,6663,6675,6687,6699,6703,6715,6727,6739,6751,6755,6768,6780,6792,6804,6817,6829,6833,6847,6861,6869,6873,6890,6903],{"__ignoreMap":487},[491,6219,6220,6222,6224,6227,6229,6232,6234,6237,6239,6241,6243],{"class":493,"line":494},[491,6221,577],{"class":576},[491,6223,502],{"class":501},[491,6225,6226],{"class":505}," ref",[491,6228,538],{"class":501},[491,6230,6231],{"class":505}," selector",[491,6233,538],{"class":501},[491,6235,6236],{"class":505}," css ",[491,6238,626],{"class":501},[491,6240,629],{"class":501},[491,6242,1260],{"class":505},[491,6244,525],{"class":501},[491,6246,6247],{"class":493,"line":528},[491,6248,570],{"emptyLinePlaceholder":206},[491,6250,6251,6254,6257,6259,6262,6264,6266],{"class":493,"line":567},[491,6252,6253],{"class":586},"selector",[491,6255,6256],{"class":505},"(",[491,6258,522],{"class":501},[491,6260,6261],{"class":518},".btn",[491,6263,522],{"class":501},[491,6265,538],{"class":501},[491,6267,639],{"class":501},[491,6269,6270,6273,6275,6277,6280],{"class":493,"line":573},[491,6271,6272],{"class":645},"    fontFamily",[491,6274,649],{"class":501},[491,6276,6226],{"class":586},[491,6278,6279],{"class":505},"(fontFamily)",[491,6281,659],{"class":501},[491,6283,6284,6286,6288,6290,6293],{"class":493,"line":594},[491,6285,1771],{"class":645},[491,6287,649],{"class":501},[491,6289,6226],{"class":586},[491,6291,6292],{"class":505},"(fontSize)",[491,6294,659],{"class":501},[491,6296,6297,6300,6302,6304,6307],{"class":493,"line":599},[491,6298,6299],{"class":645},"    fontWeight",[491,6301,649],{"class":501},[491,6303,6226],{"class":586},[491,6305,6306],{"class":505},"(fontWeight)",[491,6308,659],{"class":501},[491,6310,6311,6314,6316,6318,6321],{"class":493,"line":606},[491,6312,6313],{"class":645},"    lineHeight",[491,6315,649],{"class":501},[491,6317,6226],{"class":586},[491,6319,6320],{"class":505},"(lineHeight)",[491,6322,659],{"class":501},[491,6324,6325],{"class":493,"line":642},[491,6326,6327],{"class":505},"    \n",[491,6329,6330,6333,6335,6337,6340],{"class":493,"line":662},[491,6331,6332],{"class":645},"    paddingTop",[491,6334,649],{"class":501},[491,6336,6226],{"class":586},[491,6338,6339],{"class":505},"(spacingSm)",[491,6341,659],{"class":501},[491,6343,6344,6347,6349,6351,6353],{"class":493,"line":679},[491,6345,6346],{"class":645},"    paddingBottom",[491,6348,649],{"class":501},[491,6350,6226],{"class":586},[491,6352,6339],{"class":505},[491,6354,659],{"class":501},[491,6356,6357,6360,6362,6364,6367],{"class":493,"line":696},[491,6358,6359],{"class":645},"    paddingLeft",[491,6361,649],{"class":501},[491,6363,6226],{"class":586},[491,6365,6366],{"class":505},"(spacingMd)",[491,6368,659],{"class":501},[491,6370,6371,6374,6376,6378,6380],{"class":493,"line":711},[491,6372,6373],{"class":645},"    paddingRight",[491,6375,649],{"class":501},[491,6377,6226],{"class":586},[491,6379,6366],{"class":505},[491,6381,659],{"class":501},[491,6383,6384],{"class":493,"line":716},[491,6385,6327],{"class":505},[491,6387,6388,6390,6392,6394,6397],{"class":493,"line":722},[491,6389,3271],{"class":645},[491,6391,649],{"class":501},[491,6393,6226],{"class":586},[491,6395,6396],{"class":505},"(borderRadius)",[491,6398,659],{"class":501},[491,6400,6401,6403,6405,6407,6410],{"class":493,"line":759},[491,6402,3031],{"class":645},[491,6404,649],{"class":501},[491,6406,6226],{"class":586},[491,6408,6409],{"class":505},"(borderWidth)",[491,6411,659],{"class":501},[491,6413,6414,6417,6419,6421,6424],{"class":493,"line":776},[491,6415,6416],{"class":645},"    borderStyle",[491,6418,649],{"class":501},[491,6420,6226],{"class":586},[491,6422,6423],{"class":505},"(borderStyle)",[491,6425,659],{"class":501},[491,6427,6428,6430,6432,6434,6437],{"class":493,"line":793},[491,6429,3111],{"class":645},[491,6431,649],{"class":501},[491,6433,6226],{"class":586},[491,6435,6436],{"class":505},"(borderColor)",[491,6438,659],{"class":501},[491,6440,6441,6444,6446,6448,6451],{"class":493,"line":810},[491,6442,6443],{"class":645},"    backgroundColor",[491,6445,649],{"class":501},[491,6447,6226],{"class":586},[491,6449,6450],{"class":505},"(colorPrimary)",[491,6452,659],{"class":501},[491,6454,6455,6458,6460,6462,6465,6467],{"class":493,"line":827},[491,6456,6457],{"class":645},"    color",[491,6459,649],{"class":501},[491,6461,515],{"class":501},[491,6463,6464],{"class":518},"white",[491,6466,522],{"class":501},[491,6468,659],{"class":501},[491,6470,6471],{"class":493,"line":840},[491,6472,6327],{"class":505},[491,6474,6475,6478,6480,6482,6485,6487],{"class":493,"line":845},[491,6476,6477],{"class":645},"    cursor",[491,6479,649],{"class":501},[491,6481,515],{"class":501},[491,6483,6484],{"class":518},"pointer",[491,6486,522],{"class":501},[491,6488,659],{"class":501},[491,6490,6491,6494,6496,6498,6501,6503],{"class":493,"line":851},[491,6492,6493],{"class":645},"    transition",[491,6495,649],{"class":501},[491,6497,515],{"class":501},[491,6499,6500],{"class":518},"all 0.2s ease",[491,6502,522],{"class":501},[491,6504,659],{"class":501},[491,6506,6507,6509,6511],{"class":493,"line":858},[491,6508,626],{"class":501},[491,6510,457],{"class":505},[491,6512,525],{"class":501},[491,6514,6515],{"class":493,"line":866},[491,6516,570],{"emptyLinePlaceholder":206},[491,6518,6519,6521,6523,6525,6528,6530,6532],{"class":493,"line":874},[491,6520,6253],{"class":586},[491,6522,6256],{"class":505},[491,6524,522],{"class":501},[491,6526,6527],{"class":518},".btn:hover",[491,6529,522],{"class":501},[491,6531,538],{"class":501},[491,6533,639],{"class":501},[491,6535,6536,6538,6540,6542,6545],{"class":493,"line":882},[491,6537,6443],{"class":645},[491,6539,649],{"class":501},[491,6541,6226],{"class":586},[491,6543,6544],{"class":505},"(colorPrimaryShade50)",[491,6546,659],{"class":501},[491,6548,6549,6551,6553,6555,6558],{"class":493,"line":890},[491,6550,3594],{"class":645},[491,6552,649],{"class":501},[491,6554,6226],{"class":586},[491,6556,6557],{"class":505},"(boxShadow)",[491,6559,659],{"class":501},[491,6561,6562,6564,6566],{"class":493,"line":898},[491,6563,626],{"class":501},[491,6565,457],{"class":505},[491,6567,525],{"class":501},[491,6569,6570],{"class":493,"line":906},[491,6571,570],{"emptyLinePlaceholder":206},[491,6573,6574,6576,6578,6580,6583,6585,6587],{"class":493,"line":914},[491,6575,6253],{"class":586},[491,6577,6256],{"class":505},[491,6579,522],{"class":501},[491,6581,6582],{"class":518},".btn:active",[491,6584,522],{"class":501},[491,6586,538],{"class":501},[491,6588,639],{"class":501},[491,6590,6591,6593,6595,6597,6600],{"class":493,"line":922},[491,6592,6443],{"class":645},[491,6594,649],{"class":501},[491,6596,6226],{"class":586},[491,6598,6599],{"class":505},"(colorPrimaryShade100)",[491,6601,659],{"class":501},[491,6603,6604,6606,6608,6610,6613,6615],{"class":493,"line":930},[491,6605,3594],{"class":645},[491,6607,649],{"class":501},[491,6609,515],{"class":501},[491,6611,6612],{"class":518},"none",[491,6614,522],{"class":501},[491,6616,659],{"class":501},[491,6618,6619,6621,6623],{"class":493,"line":938},[491,6620,626],{"class":501},[491,6622,457],{"class":505},[491,6624,525],{"class":501},[491,6626,6627],{"class":493,"line":946},[491,6628,570],{"emptyLinePlaceholder":206},[491,6630,6631],{"class":493,"line":964},[491,6632,6633],{"class":602},"// Subtle variant using tints\n",[491,6635,6636,6638,6640,6642,6645,6647,6649],{"class":493,"line":969},[491,6637,6253],{"class":586},[491,6639,6256],{"class":505},[491,6641,522],{"class":501},[491,6643,6644],{"class":518},".btn-subtle",[491,6646,522],{"class":501},[491,6648,538],{"class":501},[491,6650,639],{"class":501},[491,6652,6653,6655,6657,6659,6661],{"class":493,"line":975},[491,6654,6272],{"class":645},[491,6656,649],{"class":501},[491,6658,6226],{"class":586},[491,6660,6279],{"class":505},[491,6662,659],{"class":501},[491,6664,6665,6667,6669,6671,6673],{"class":493,"line":982},[491,6666,1771],{"class":645},[491,6668,649],{"class":501},[491,6670,6226],{"class":586},[491,6672,6292],{"class":505},[491,6674,659],{"class":501},[491,6676,6677,6679,6681,6683,6685],{"class":493,"line":990},[491,6678,6299],{"class":645},[491,6680,649],{"class":501},[491,6682,6226],{"class":586},[491,6684,6306],{"class":505},[491,6686,659],{"class":501},[491,6688,6689,6691,6693,6695,6697],{"class":493,"line":998},[491,6690,6313],{"class":645},[491,6692,649],{"class":501},[491,6694,6226],{"class":586},[491,6696,6320],{"class":505},[491,6698,659],{"class":501},[491,6700,6701],{"class":493,"line":1006},[491,6702,6327],{"class":505},[491,6704,6705,6707,6709,6711,6713],{"class":493,"line":1014},[491,6706,6332],{"class":645},[491,6708,649],{"class":501},[491,6710,6226],{"class":586},[491,6712,6339],{"class":505},[491,6714,659],{"class":501},[491,6716,6717,6719,6721,6723,6725],{"class":493,"line":1022},[491,6718,6346],{"class":645},[491,6720,649],{"class":501},[491,6722,6226],{"class":586},[491,6724,6339],{"class":505},[491,6726,659],{"class":501},[491,6728,6729,6731,6733,6735,6737],{"class":493,"line":1030},[491,6730,6359],{"class":645},[491,6732,649],{"class":501},[491,6734,6226],{"class":586},[491,6736,6366],{"class":505},[491,6738,659],{"class":501},[491,6740,6741,6743,6745,6747,6749],{"class":493,"line":1038},[491,6742,6373],{"class":645},[491,6744,649],{"class":501},[491,6746,6226],{"class":586},[491,6748,6366],{"class":505},[491,6750,659],{"class":501},[491,6752,6753],{"class":493,"line":1046},[491,6754,6327],{"class":505},[491,6756,6757,6759,6761,6763,6766],{"class":493,"line":1054},[491,6758,3271],{"class":645},[491,6760,649],{"class":501},[491,6762,6226],{"class":586},[491,6764,6765],{"class":505},"(borderRadiusMd)",[491,6767,659],{"class":501},[491,6769,6770,6772,6774,6776,6778],{"class":493,"line":1062},[491,6771,3031],{"class":645},[491,6773,649],{"class":501},[491,6775,6226],{"class":586},[491,6777,6409],{"class":505},[491,6779,659],{"class":501},[491,6781,6782,6784,6786,6788,6790],{"class":493,"line":1070},[491,6783,6416],{"class":645},[491,6785,649],{"class":501},[491,6787,6226],{"class":586},[491,6789,6423],{"class":505},[491,6791,659],{"class":501},[491,6793,6794,6796,6798,6800,6802],{"class":493,"line":1088},[491,6795,3111],{"class":645},[491,6797,649],{"class":501},[491,6799,6226],{"class":586},[491,6801,6450],{"class":505},[491,6803,659],{"class":501},[491,6805,6806,6808,6810,6812,6815],{"class":493,"line":1093},[491,6807,6443],{"class":645},[491,6809,649],{"class":501},[491,6811,6226],{"class":586},[491,6813,6814],{"class":505},"(colorPrimaryTint150)",[491,6816,659],{"class":501},[491,6818,6819,6821,6823,6825,6827],{"class":493,"line":1099},[491,6820,6457],{"class":645},[491,6822,649],{"class":501},[491,6824,6226],{"class":586},[491,6826,6450],{"class":505},[491,6828,659],{"class":501},[491,6830,6831],{"class":493,"line":1106},[491,6832,6327],{"class":505},[491,6834,6835,6837,6839,6841,6843,6845],{"class":493,"line":1117},[491,6836,6477],{"class":645},[491,6838,649],{"class":501},[491,6840,515],{"class":501},[491,6842,6484],{"class":518},[491,6844,522],{"class":501},[491,6846,659],{"class":501},[491,6848,6849,6851,6853,6855,6857,6859],{"class":493,"line":1128},[491,6850,6493],{"class":645},[491,6852,649],{"class":501},[491,6854,515],{"class":501},[491,6856,6500],{"class":518},[491,6858,522],{"class":501},[491,6860,659],{"class":501},[491,6862,6863,6865,6867],{"class":493,"line":1139},[491,6864,626],{"class":501},[491,6866,457],{"class":505},[491,6868,525],{"class":501},[491,6870,6871],{"class":493,"line":1150},[491,6872,570],{"emptyLinePlaceholder":206},[491,6874,6875,6877,6879,6881,6884,6886,6888],{"class":493,"line":1167},[491,6876,6253],{"class":586},[491,6878,6256],{"class":505},[491,6880,522],{"class":501},[491,6882,6883],{"class":518},".btn-subtle:hover",[491,6885,522],{"class":501},[491,6887,538],{"class":501},[491,6889,639],{"class":501},[491,6891,6892,6894,6896,6898,6901],{"class":493,"line":1172},[491,6893,6443],{"class":645},[491,6895,649],{"class":501},[491,6897,6226],{"class":586},[491,6899,6900],{"class":505},"(colorPrimaryTint100)",[491,6902,659],{"class":501},[491,6904,6905,6907,6909],{"class":493,"line":1178},[491,6906,626],{"class":501},[491,6908,457],{"class":505},[491,6910,525],{"class":501},[435,6912,6914],{"id":6913},"what-makes-this-different","What Makes This Different?",[414,6916,6917],{},"Traditional design systems require:",[443,6919,6920,6923,6926,6929,6932,6935,6938],{},[446,6921,6922],{},"❌ Manually defining dozens of color shades",[446,6924,6925],{},"❌ Creating hover and active state colors by hand",[446,6927,6928],{},"❌ Creating multiple media queries for responsive typography",[446,6930,6931],{},"❌ Picking arbitrary font sizes at each breakpoint",[446,6933,6934],{},"❌ Inconsistent spacing values across your app",[446,6936,6937],{},"❌ Brittle, hard-coded CSS values",[446,6939,6940],{},"❌ Weeks of refinement to get proportions right",[414,6942,6943],{},"With Styleframe's fluid design system, you get:",[443,6945,6946,6953,6959,6965,6971,6977,6983],{},[446,6947,6948,6949,6952],{},"✅ ",[417,6950,6951],{},"Automatic color variants"," using perceptually uniform OKLCH",[446,6954,6948,6955,6958],{},[417,6956,6957],{},"Automatic tints and shades"," for interactive states",[446,6960,6948,6961,6964],{},[417,6962,6963],{},"Smooth responsive scaling"," without breakpoints",[446,6966,6948,6967,6970],{},[417,6968,6969],{},"Mathematical harmony"," through modular scales",[446,6972,6948,6973,6976],{},[417,6974,6975],{},"Type-safe tokens"," with full autocomplete",[446,6978,6948,6979,6982],{},[417,6980,6981],{},"Theme-ready"," from day one",[446,6984,6948,6985,6988],{},[417,6986,6987],{},"Production-ready"," in under 15 minutes",[435,6990,6992],{"id":6991},"key-takeaways","Key Takeaways",[6994,6995,6996,7002,7008,7014,7020,7026,7032],"ol",{},[446,6997,6998,7001],{},[417,6999,7000],{},"Start with colors",": Define your brand colors and generate variants, tints, and shades automatically",[446,7003,7004,7007],{},[417,7005,7006],{},"Choose mobile and desktop scales",": Select modular scale ratios for each viewport size",[446,7009,7010,7013],{},[417,7011,7012],{},"Enable fluid viewport",": Set up the foundation for fluid design tokens",[446,7015,7016,7019],{},[417,7017,7018],{},"Create fluid typography",": Font sizes scale smoothly across all screen sizes",[446,7021,7022,7025],{},[417,7023,7024],{},"Build systematic spacing",": Use the same scale for visual harmony",[446,7027,7028,7031],{},[417,7029,7030],{},"Add depth",": Borders, shadows, and breakpoints complete the system",[446,7033,7034,7037],{},[417,7035,7036],{},"Stay flexible",": All tokens can be overridden for themes or special cases",[435,7039,7041],{"id":7040},"troubleshooting","Troubleshooting",[7043,7044,7045,7067,7087,7098,7110,7129,7133],"accordion",{},[7046,7047,7050,7051,7054,7055,7058,7059,7062,7063,7066],"accordion-item",{"icon":7048,"label":7049},"i-lucide-circle-help","My fluid font sizes are too large/small","Adjust the base font size range in ",[477,7052,7053],{},"useFluidFontSize()",". The ",[477,7056,7057],{},"{ min: 16, max: 18 }"," means your base text goes from 16px (mobile) to 18px (desktop). Try ",[477,7060,7061],{},"{ min: 14, max: 16 }"," for smaller text, or ",[477,7064,7065],{},"{ min: 16, max: 20 }"," for larger. All other sizes scale proportionally from this base!",[7046,7068,7070,7071,7074,7075,7078,7079,7082,7083,7086],{"icon":7048,"label":7069},"Typography doesn't scale enough between mobile and desktop","Use more dramatic scale ratios! Try ",[477,7072,7073],{},"min: '@major-second'"," (1.125) and ",[477,7076,7077],{},"max: '@perfect-fourth'"," (1.333) for stronger differences. Or go bold with ",[477,7080,7081],{},"min: '@minor-third'"," (1.2) and ",[477,7084,7085],{},"max: '@perfect-fifth'"," (1.5). Each step up the scale makes the size differences more pronounced.",[7046,7088,7090,7091,7093,7094,7097],{"icon":7048,"label":7089},"Can I use fixed sizes for some elements?","Absolutely! Mix ",[477,7092,7053],{}," with regular ",[477,7095,7096],{},"useFontSizeDesignTokens()",". Use fluid sizes for headings and display text where scaling matters, and fixed sizes for UI elements like buttons and labels where consistency is more important.",[7046,7099,7101,7102,7105,7106,7109],{"icon":7048,"label":7100},"Colors don't match my brand guidelines exactly","That's fine! Use ",[477,7103,7104],{},"useColorDesignTokens()"," to define your exact brand colors, then let ",[477,7107,7108],{},"useColorLevelDesignTokens()"," generate the variants. The base color (500) will match your guidelines exactly, while variants provide flexibility for different UI states.",[7046,7111,7113,7114,7117,7118,7121,7122,7125,7126,7128],{"icon":7048,"label":7112},"How do I add more/fewer font sizes?","Adjust the range in ",[477,7115,7116],{},"useScalePowersDesignTokens()",". For more sizes, use a wider range like ",[477,7119,7120],{},"[-4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6]",". For fewer, use ",[477,7123,7124],{},"[-1, 0, 1, 2, 3]",". Then add or remove entries in the ",[477,7127,7053],{}," size definitions. Remember: fewer choices often lead to better consistency.",[7046,7130,7132],{"icon":7048,"label":7131},"Can I use this with an existing design system?","Absolutely! Styleframe design tokens can complement an existing system. Start by migrating one area (like colors or typography) and gradually expand. The fluid tokens work alongside traditional CSS and can even wrap existing design token values.",[7046,7134,7136,7137,7139,7140,7143,7144,7146],{"icon":7048,"label":7135},"What if I don't have Styleframe Pro?","You can still build an amazing design system! Follow Steps 1, 2, 4, and 5 exactly as written. For Step 3 (Typography), use the fixed typography approach with ",[477,7138,7096],{}," and ",[477,7141,7142],{},"useMultiplierDesignTokens()"," instead of ",[477,7145,7053],{},". You'll have a great design system—just with traditional responsive typography instead of fluid scaling.",[435,7148,7150],{"id":7149},"additional-resources","Additional Resources",[443,7152,7153,7159,7165,7171],{},[446,7154,7155,7158],{},[453,7156,7157],{"href":151},"Design Tokens Overview"," - Complete design tokens reference",[446,7160,7161,7164],{},[453,7162,7163],{"href":194},"Fluid Design Overview"," - Deep dive into fluid responsive design",[446,7166,7167,7170],{},[453,7168,7169],{"href":133},"Composables API"," - All available composable functions",[446,7172,7173,7176],{},[453,7174,7175],{"href":113},"Themes API"," - Creating and managing themes",[7178,7179],"hr",{},[414,7181,7182,7185,7186],{},[417,7183,7184],{},"Congratulations!"," 🎉 You've built a production-ready fluid design system in under 15 minutes. Your design tokens are type-safe, theme-ready, mathematically harmonious, and scale beautifully across all viewport sizes. ",[417,7187,7188],{},"Now go build something beautiful!",[7190,7191,7192],"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 pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}",{"title":487,"searchDepth":528,"depth":528,"links":7194},[7195,7196,7197,7198,7199,7200,7201,7202,7203,7206,7207,7208,7209],{"id":437,"depth":528,"text":438},{"id":463,"depth":528,"text":464},{"id":1315,"depth":528,"text":1316},{"id":1653,"depth":528,"text":1654},{"id":2580,"depth":528,"text":2581},{"id":2971,"depth":528,"text":2972},{"id":3769,"depth":528,"text":3770},{"id":6092,"depth":528,"text":6093},{"id":6199,"depth":528,"text":6200,"children":7204},[7205],{"id":6204,"depth":567,"text":6205},{"id":6913,"depth":528,"text":6914},{"id":6991,"depth":528,"text":6992},{"id":7040,"depth":528,"text":7041},{"id":7149,"depth":528,"text":7150},"Build a complete, production-ready design system with Styleframe using composable design tokens. Follow this step-by-step guide to create colors, fluid typography, spacing, and more in just 15 minutes.","md",null,{},"/docs/getting-started/guides/create-design-system-in-under-15-minutes",{"title":409,"description":7210},{"loc":7214},"docs/getting-started/03.guides/01.create-design-system-in-under-15-minutes","B4mlzlnUEA0-BKfoJIi-fYbdavLP1r0t2m0q6oXBOso",[7212,7212],1776621137874]