Color application
|
|
Alias design token |
Value |
|---|---|---|
|
(1) Container |
NeutralBackground1.Rest |
#FFFFFF |
|
(2) Title text |
NeutralForeground1.Rest |
#0F1A38 |
|
(3) Body text |
NeutralForeground2.Rest |
#595959 |
|
(4) Dismiss button |
BrandForeground1.Rest |
#295CAD |
|
(5) Primary button |
|
|
|
(6) Secondary button |
|
Size options
Delish has 2 sizes for a dialog: 320px and 600px.
Visual of size options
Specs by size
|
|
Design token |
Value |
Extra info |
|---|---|---|---|
|
(1) Container width |
N/A |
320px |
|
|
(1) Container height |
N/A |
Variable |
|
|
(1) Container radius |
borderRadiusSmall |
2px |
|
|
(2) Title text |
title4 |
20px / 15pt, Regular |
|
|
(3) Text size |
body1 |
14px / 11pt, Regular |
|
|
(4) Dismiss button |
N/A |
20px |
Icon: dismiss, filled |
|
(5) Checkbox |
N/A |
|
|
|
Design token |
Value |
Extra info |
|---|---|---|---|
|
(1) Container width |
N/A |
600px |
|
|
(1) Container height |
N/A |
Variable |
|
|
(1) Container radius |
borderRadiusSmall |
2px |
|
|
(2) Title text |
title4 |
20px / 15pt, Regular |
|
|
(3) Text size |
body1 |
14px / 11pt, Regular |
|
|
(4) Dismiss button |
N/A |
20px |
Icon: dismiss, filled |
|
(5) Checkbox |
N/A |
|
Spacing by size
|
|
Design token |
Value |
|---|---|---|
|
Container padding left/right |
spacingHorizontalLNudge |
24px |
|
Container padding top/bottom |
spacingVerticalLNudge |
24px |
|
Padding between Title text / dismiss button and body content |
spacingVerticalS |
8px |
|
Padding between body text and action buttons |
spacingVerticalS |
8px |
|
Padding between Title text and dismiss button |
spacingHorizontalS |
8px |
|
Padding between body text and checkbox |
spacingVerticalSNudge |
6px |
|
Padding between action buttons |
spacingVerticalS |
8px |
|
|
Design token |
Value |
|---|---|---|
|
Container padding left/right |
spacingHorizontalLNudge |
24px |
|
Container padding top/bottom |
spacingVerticalLNudge |
24px |
|
Padding between Title text / dismiss button and body content |
spacingVerticalS |
8px |
|
Padding between body text and action buttons |
spacingVerticalS |
8px |
|
Padding between Title text and dismiss button |
spacingHorizontalS |
8px |
|
Padding between body text and checkbox |
spacingVerticalSNudge |
6px |
|
Padding between action buttons |
spacingVerticalS |
8px |
