Layout
A persona has 3 different layouts to choose from: text after, text before and text below. The default is text after.
Visual of layout options
For text after and before layouts, you can choose to either horizontally align top or center. The default is align center.
Visual of alignment options
Color application
|
|
Design token |
Value |
|---|---|---|
|
(1) Primary text |
NeutralForeground1.Rest |
#0F1A38 |
|
(2) Additional text |
NeutralForeground2.Rest |
#595959 |
Size options
Delish has 6 sizes for a persona ranging from extra small to huge.
Visual reference for sizing
Specs by size
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
20px |
|
(2) Primary text |
body1Strong |
14px/11pt, Semibold |
|
(3) Additional text |
caption1 |
12px/9pt, Regular |
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
28px |
|
(2) Primary text |
body1Strong |
14px/11pt, Semibold |
|
(3) Additional text |
caption1 |
12px/9pt, Regular |
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
20px |
|
(2) Primary text |
body1Strong |
14px/11pt, Semibold |
|
(3) Additional text |
caption1 |
12px/9pt, Regular |
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
36px |
|
(2) Primary text |
body1Strong |
14px/11pt, Semibold |
|
(3) Additional text |
caption1 |
12px/9pt, Regular |
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
40px |
|
(2) Primary text |
body2Strong |
16px/12pt, Semibold |
|
(3) Additional text |
caption1 |
12px/9pt, Regular |
|
|
Design token |
Value |
|---|---|---|
|
(1) Avatar size |
N/A |
56px |
|
(2) Primary text |
body2Strong |
16px/12pt, Semibold |
|
(3) Additional text |
body1 |
14px/11pt, Regular |
Spacing by size
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalSNudge |
6px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalS |
8px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalS |
8px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalS |
8px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalS |
8px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |
|
|
Design token |
Value |
|---|---|---|
|
Padding between avatar and text |
spacingHorizontalMNudge |
12px |
|
Padding between primary text and rest of text |
spacingVerticalXXS |
2px |
|
Primary text: padding top |
spacingVerticalXXS |
2px |
|
Text: padding bottom |
spacingVerticalXS |
4px |
|
Padding between secondary - quaternary text |
spacingVerticalNone |
0px |