Github

Scale System

Apply spacing, sizing, border, and radius tokens to maintain consistent UI rhythm and brand-aligned component sizing.

Overview

The VD scale system provides a comprehensive set of predefined tokens for spacing, borders, radius, and icons. All sizing must be applied via these tokens — never choose size based on visual preference. Choose based on semantic intent and layout rhythm.

Spacing Scale

Consistent spacing values for margins, padding, and gaps. Always select tokens based on layout intent.

Scale
Token
Notes
0
--vd-scale-spacing-0
No spacing
50
--vd-scale-spacing-50
Extra-tight spacing
100
--vd-scale-spacing-100
Very tight spacing
200
--vd-scale-spacing-200
Tight spacing
300
--vd-scale-spacing-300
Small spacing
400
--vd-scale-spacing-400
Medium spacing
600
--vd-scale-spacing-600
Large spacing
800
--vd-scale-spacing-800
Extra-large spacing
1000
--vd-scale-spacing-1000
Massive spacing
1200
--vd-scale-spacing-1200
Layout padding

Negative Spacing

Use negative spacing tokens for offsetting or margins in layout adjustments.

Scale
Token
Notes
Negative 50
--vd-scale-spacing-negative50
Off-setting/margins
Negative 100
--vd-scale-spacing-negative100
Off-setting/margins
Negative 200
--vd-scale-spacing-negative200
Off-setting/margins
Negative 300
--vd-scale-spacing-negative300
Off-setting/margins
Negative 400
--vd-scale-spacing-negative400
Off-setting/margins
Negative 600
--vd-scale-spacing-negative600
Off-setting/margins

Border Width

Standardized border widths for UI elements and dividers. Use the narrowest width that preserves clarity.

None

--vd-scale-border-width-none

Small

--vd-scale-border-width-sm

Medium

--vd-scale-border-width-md

Large

--vd-scale-border-width-lg

Extra Large

--vd-scale-border-width-xl

Border Radius

Corner radius values for various UI components. Selection must follow component intent.

None

--vd-scale-border-radius-none

XS

--vd-scale-border-radius-xs

SM

--vd-scale-border-radius-sm

MD

--vd-scale-border-radius-md

LG

--vd-scale-border-radius-lg

XL

--vd-scale-border-radius-xl

XXL

--vd-scale-border-radius-xxl

XXXL

--vd-scale-border-radius-xxxl

Full

--vd-scale-border-radius-full

Icon Sizes

Standard sizes for icon elements. Icon size must correspond to component context.

XS

--vd-scale-icon-size-xs

SM

--vd-scale-icon-size-sm

MD

--vd-scale-icon-size-md

LG

--vd-scale-icon-size-lg

XL

--vd-scale-icon-size-xl

Usage Guidelines

Spacing Implementation

Apply spacing tokens for padding, margins, and gaps:

spacing.css

Copy code

Border Implementation

Apply border width tokens to maintain consistent visual hierarchy:

borders.css

Copy code

Border Radius Implementation

Use radius tokens to define the shape and feel of components:

radius.css

Copy code

Icon Size Implementation

Icon sizes should match their surrounding UI context:

icons.html

Copy code

Best Practices

Core Principles

  • All sizing must be applied via VD scale tokens.
  • Do not hardcode spacing, border width, border radius, or icon size.
  • Apply scale semantically, reflecting layout, separation, and emphasis.
  • Always use tokens for consistent UI rhythm and visual hierarchy.

Priority Order

  1. Component-defined scale (VD Angular component default)
  2. Token-driven scale (spacing, border, radius, icon)
  3. Project-specific overrides (only when VD token cannot achieve the layout)

Do's and Don'ts

do.css

Copy code

dont.css

Copy code