Styles
Delish has 2 styles for the icon and initials variants: brand and neutral.
- Brand styling: when on a white or light background
- Neutral styling: when on a darker background
Visual representation of styles
Color application
|
|
Alias design token |
Value |
|---|---|---|
|
(1) Activity ring |
CompoundBrandStroke.Rest |
#295CAD |
|
(2) Brand icon / initials |
NeutralForegroundOnBrand.Rest |
#FFFFFF |
|
(3) Brand background |
BrandBackgroundStatic.Rest |
#295CAD |
|
(4) Neutral icon / initials |
NeutralForeground2.Rest |
#595959 |
|
(5) Neutral background |
NeutralBackground2.Rest |
#F5F4F2 |
Size options
Delish has 13 sizes for an avatar ranging from 16px to 120px.
Visual reference for sizing
Specs by size
The icon for all sizes of the avatar is ‘person-regular’ from Fluent’s library.
|
Avatar size |
Icon size |
Design token |
Value |
|---|---|---|---|
|
120 |
48px |
title3Strong |
24px / 18pt |
|
96 |
48px |
title3Strong |
24px / 18pt |
|
72 |
32px |
title4Strong |
20px / 15pt |
|
64 |
32px |
title4Strong |
20px / 15pt |
|
56 |
28px |
body2Strong |
16px / 12pt |
|
48 |
24px |
body1Strong |
14.66px / 11pt |
|
40 |
20px |
body1Strong |
14.66px / 11pt |
|
36 |
20px |
body1Strong |
14.66px / 11pt |
|
32 |
20px |
body1Strong |
14.66px / 11pt |
|
28 |
20px |
caption1Strong |
12px / 9pt |
|
24 |
16px |
caption2Strong |
10px / 7.5pt |
|
20 |
16px |
caption2Strong |
10px / 7.5pt |
|
16 |
12px |
caption2Strong |
10px / 7.5pt |
Spacing
Icons and initials are centered vertically and horizontally within the circle.