Size

The Size foundation defines consistent dimensions across our interface: from Icons and Buttons to Cards and Modals. We use a 4px base scale to ensure visual harmony and spatial rhythm throughout the system.

Asset Size

These Size tokens are applied to the smaller elements of our design system, like Icons. These have fixed values between the different Size Themes of Small (left) and Large (left).

4px
4px
4px
4px
aero-asset-size-4xs
Collection
Size
8px
8px
8px
8px
aero-asset-size-3xs
Collection
Size
12px
12px
12px
12px
aero-asset-size-2xs
Collection
Size
16px
16px
16px
16px
aero-asset-size-xs
Collection
Size
20px
20px
20px
20px
aero-asset-size-sm
Collection
Size
24px
24px
24px
24px
aero-asset-size-md
Collection
Size
32px
32px
32px
32px
aero-asset-size-lg
Collection
Size
40px
40px
40px
40px
aero-asset-size-xl
Collection
Size
48px
48px
48px
48px
aero-asset-size-2xl
Collection
Size
64px
64px
64px
64px
aero-asset-size-3xl
Collection
Size
80px
80px
80px
80px
aero-asset-size-4xl
Collection
Size

 

Width Size

The generic (fixed) Size tokens are applied to the larger elements and components.

0px
0px
0px
0px
aero-size-none
Collection
Size
120px
120px
120px
120px
aero-size-3xs
Collection
Size
160px
160px
160px
160px
aero-size-2xs
Collection
Size
240px
240px
240px
240px
aero-size-xs
Collection
Size
320px
320px
320px
320px
aero-size-sm
Collection
Size
400px
400px
400px
400px
aero-size-md
Collection
Size
480px
480px
480px
480px
aero-size-lg
Collection
Size
640px
640px
640px
640px
aero-size-xl
Collection
Size
720px
720px
720px
720px
aero-size-2xl
Collection
Size
1024px
1024px
1024px
1024px
aero-size-3xl
Collection
Size

© 2026 Air France.