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.

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 MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Extra Small (75%) 
<div class="screen screen--scale-xsmall">
  <!-- Your content here -->
</div>

Small Scale (87.5%)

Reduced scale for fitting more content while maintaining good readability.

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Small (87.5%) 
<div class="screen screen--scale-small">
  <!-- Your content here -->
</div>

Regular Scale (100%)

Default scale - this is the baseline that all other scale levels are relative to.

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Regular (100%) 
<div class="screen screen--scale-regular">
  <!-- Your content here -->
</div>

Large Scale (112.5%)

Increased size for better readability

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Large (112.5%) 
<div class="screen screen--scale-large">
  <!-- Your content here -->
</div>

Extra Large Scale (125%)

Large scale for increased readability

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Extra Large (125%) 
<div class="screen screen--scale-xlarge">
  <!-- Your content here -->
</div>

Extra Extra Large Scale (150%)

Maximum scale for accessibility needs

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Scale Level Extra Extra Large (150%) 
<div class="screen screen--scale-xxlarge">
  <!-- Your content here -->
</div>

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 
<!-- Use device default UI scale -->
<div class="screen screen--v2">
  <!-- Content -->
</div>

<!-- Override device scale with scale modifier -->
<div class="screen screen--v2 screen--scale-small">
  <!-- Content at 87.5% scale -->
</div>

<!-- Combine with any device configuration -->
<div class="screen screen--amazon_kindle_2024 screen--scale-large">
  <!-- Kindle device with 112.5% scale -->
</div>

Clamp

Manage text overflow with single and multi-line truncation

Previous

Aspect Ratio

Maintain consistent proportions for elements regardless of their content

Next
Framework Index