# Scale The Scale system provides utility classes to scale the entire interface by adjusting the UI scale factor. This is useful for adapting content density for different viewing distances or user preferences. ### Basic Usage Apply scale modifiers to the `screen` element to scale all interface elements proportionally. The scale affects fonts, spacing, dimensions, and other UI elements that use the `--ui-scale` CSS variable. Scale is available on 4bit devices. #### Available Scale Levels The framework provides six predefined scale levels: | Class | Scale Factor | Use Case | | --- | --- | --- | | `screen--scale-xsmall` | 0.75 (75%) | Maximum content density | | `screen--scale-small` | 0.875 (87.5%) | Increased content density | | `screen--scale-regular` | 1.0 (100%) | Default scale, no scaling applied | | `screen--scale-large` | 1.125 (112.5%) | Increased size for better readability | | `screen--scale-xlarge` | 1.25 (125%) | Large scale for increased readability | | `screen--scale-xxlarge` | 1.5 (150%) | Maximum scale for accessibility needs | ### Scale Examples The following examples demonstrate how scale levels affect the same content layout. Notice how all elements scale proportionally. #### Extra Small Scale (75%) Maximum content density - useful when viewing up close or when you need to fit more information on screen. Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelExtra Small (75%)
#### Small Scale (87.5%) Reduced scale for fitting more content while maintaining good readability. Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelSmall (87.5%)
#### Regular Scale (100%) Default scale - this is the baseline that all other scale levels are relative to. Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelRegular (100%)
#### Large Scale (112.5%) Increased size for better readability Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelLarge (112.5%)
#### Extra Large Scale (125%) Large scale for increased readability Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelExtra Large (125%)
#### Extra Extra Large Scale (150%) Maximum scale for accessibility needs Today 1 Morning Meeting: Threat Level Check-inTeam sync and updates 9:00 AM - 9:30 AMDaily 2 Identity Theft WatchReview suspicious 'Jim' behaviours 10:30 AM - 11:30 AMReview 3 Lunch Break: Pretzel Day PrepTeam lunch at downtown 12:30 PM - 1:30 PMBreak 4 Client Call with JanWeekly check-in with stakeholders 2:00 PM - 3:00 PMClient 5 Complaint Sorting: Product RecallPrioritize reported issues 3:30 PM - 4:30 PMComplaints 6 Bulletin Board Update: DundiesUpdate nominations and categories 4:30 PM - 5:30 PMDocs 7 End of Day Sync: Café DiscoReview progress and blockers 5:30 PM - 6:00 PMSync Tomorrow 1 Beach Games Roll-CallConfirm capacity without hot coals 10:00 AM - 12:00 PMPlanning 2 Stakeholder Presentation: Threat Level MidnightTasteful metrics, minimal fireworks 2:00 PM - 3:30 PMPresentation 3 Oscar’s Index Intervention (Of Spreadsheets)Deep dive into the budget tabs 9:00 AM - 11:00 AMNumbers 4 Parkour QA Gauntlet (Very Gentle)Functionality verified: walking 1:00 PM - 3:00 PMQA-ish 5 Campaign Analysis: WUPHF Without The WUPHFLess shouting, more smiling 4:00 PM - 5:30 PMMarketing This Week 1 Warehouse to Cloud (No Forklifts)Move boxes, label feelings WednesdayInfrastructure-ish 2 Customer Satisfaction Review: 'Did I Stutter?'Improve smiles per hour ThursdayCustomer Success 3 Benihana to Back Office CoordinationWe will know who is who FridayIntegration-ish 4 Data Deep Dive: Boom, Roasted (With Charts)Roasts limited to pie charts MondayAnalytics 5 Accessibility: Conference Room B UpgradesLess squinting, more seeing TuesdayAccessibility 6 Respect the Dashboard (Of Feelings)Set baselines for vibes WednesdayMonitoring 7 The Dundies of GrowthSkills, mentoring, zero karaoke tears FridayDevelopment Scale LevelExtra Extra Large (150%)
### How It Works The scale system works by modifying the `--ui-scale` CSS variable, which is used throughout the framework to calculate sizes. #### Affected Properties When you apply a scale modifier, it scales the following properties: - Font sizes (all text elements) - Line heights - Component dimensions (title bar height, progress bar sizes, etc.) - Spacing that uses the ui-scale multiplier - Any custom properties that reference `var(--ui-scale)` **Note:** The scale utility only affects elements that use the `--ui-scale` variable in their calculations. Fixed pixel values and screen dimensions remain unchanged. ### Combining with Device Configurations Scale modifiers can be combined with device-specific classes to override the default UI scale for particular devices. | Class Combination | Description | | --- | --- | | `screen screen--v2` | Uses device default scale | | `screen screen--v2 screen--scale-small` | Overrides to 87.5% scale | | `screen screen--amazon_kindle_2024 screen--scale-large` | Overrides to 112.5% scale |
### Related Tokens These tokens are automatically mapped to this page by token prefix. | Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit | | --- | --- | --- | --- | --- | | `--gap-large` | 20px | — | — | — | | `--gap-medium` | 16px | — | — | — | | `--gap-small` | 7px | — | — | — | | `--gap-xlarge` | 30px | — | — | — | | `--gap-xsmall` | 5px | — | — | — | | `--gap-xxlarge` | 40px | — | — | — | | `--list-gap-large` | 16px | — | — | — | | `--list-gap-small` | 8px | — | — | — | | `--ui-scale` | 1 | — | — | — | Previous [Image Stroke Legible images when displayed on shaded backgrounds](/framework/docs/3.1/image_stroke) Next [Colors Complete palette definition: grayscale, chromatic hues, and blend pairs](/framework/docs/3.1/colors)