Styles
Delish has 4 styles for a badge: filled, tint, outline and subtle.
Visual representation of styles
Color application by style
Danger
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
DangerBackground3.Rest |
#AD0000 |
|
(2) Icon |
DangerForeground3.Rest |
#FFFFFF |
|
(3) Label |
DangerForeground3.Rest |
#FFFFFF |
Severe warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
SevereBackground3.Rest |
#DA3B01 |
|
(2) Icon |
SevereForeground3.Rest |
#FFFFFF |
|
(3) Label |
SevereForeground3.Rest |
#FFFFFF |
Warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
WarningBackground3.Rest |
#C9601C |
|
(2) Icon |
WarningForeground3.Rest |
#FFFFFF |
|
(3) Label |
WarningForeground3.Rest |
#FFFFFF |
Status: Success
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
SuccessBackground3.Rest |
#0A7F00 |
|
(2) Icon |
SuccessForeground3.Rest |
#FFFFFF |
|
(3) Label |
SuccessForeground3.Rest |
#FFFFFF |
Important
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
BrandBackground2.Rest |
#0F1A38 |
|
(2) Icon |
NeutralForegroundOnBrand.Rest |
#FFFFFF |
|
(3) Label |
NeutralForegroundOnBrand.Rest |
#FFFFFF |
Subtle
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
NeutralBackground5.Rest |
#F2F3F3 |
|
(2) Icon |
NeutralForeground2.Rest |
#595959 |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Danger
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: DangerBackground1.Rest Stroke: DangerBorder1.Rest |
#FCDFDF #AD0000 |
|
(2) Icon |
DangerForeground1.Rest |
#AD0000 |
|
(3) Label |
DangerForeground1.Rest |
#AD0000 |
Severe warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: SevereBackground1.Rest Stroke: SevereBorder1.Rest |
#F8E8E1 #DA3B01 |
|
(2) Icon |
SevereForeground1.Rest |
#DA3B01 |
|
(3) Label |
SevereForeground1.Rest |
#DA3B01 |
Warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: WarningBackground1.Rest Stroke: WarningBorder1.Rest |
#FBEEE6 #C9601C |
|
(2) Icon |
WarningForeground1.Rest |
#C9601C |
|
(3) Label |
WarningForeground1.Rest |
#C9601C |
Status: Success
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: SuccessBackground1.Rest Stroke: SuccessBorder1.Rest |
#E2F5E0 #0A7F00 |
|
(2) Icon |
SuccessForeground1.Rest |
#0A7F00 |
|
(3) Label |
SuccessForeground1.Rest |
#0A7F00 |
Important
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: BrandBackground3.Rest Stroke: BrandStroke2.Rest |
#EEF5FF #0F1A38 |
|
(2) Icon |
NeutralForeground1.Rest |
#0F1A38 |
|
(3) Label |
NeutralForeground1.Rest |
#0F1A38 |
Subtle
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Fill: NeutralBackground2.Rest Stroke: NeutralStroke3.Rest |
#F5F4F2 #AFB6B6 |
|
(2) Icon |
NeutralForeground2.Rest |
#595959 |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Danger
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: DangerBorder1.Rest |
#AD0000 |
|
(2) Icon |
DangerForeground1.Rest |
#AD0000 |
|
(3) Label |
DangerForeground1.Rest |
#AD0000 |
Severe warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: SevereBorder1.Rest |
#DA3B01 |
|
(2) Icon |
SevereForeground1.Rest |
#DA3B01 |
|
(3) Label |
SevereForeground1.Rest |
#DA3B01 |
Warning
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: WarningBorder1.Rest |
#C9601C |
|
(2) Icon |
WarningForeground1.Rest |
#C9601C |
|
(3) Label |
WarningForeground1.Rest |
#C9601C |
Status: Success
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: SuccessBorder1.Rest |
#0A7F00 |
|
(2) Icon |
SuccessForeground1.Rest |
#0A7F00 |
|
(3) Label |
SuccessForeground1.Rest |
#0A7F00 |
Important
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: BrandStroke2.Rest |
#0F1A38 |
|
(2) Icon |
NeutralForeground1.Rest |
#0F1A38 |
|
(3) Label |
NeutralForeground1.Rest |
#0F1A38 |
Subtle
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
Stroke: NeutralStroke3.Rest |
#AFB6B6 |
|
(2) Icon |
NeutralForeground2.Rest |
#595959 |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Danger
|
|
Design token |
Value |
|---|---|---|
|
Icon |
DangerForeground1.Rest |
#AD0000 |
|
Label |
DangerForeground1.Rest |
#AD0000 |
Severe warning
|
|
Design token |
Value |
|---|---|---|
|
Icon |
SevereForeground1.Rest |
#DA3B01 |
|
Label |
SevereForeground1.Rest |
#DA3B01 |
Warning
|
|
Design token |
Value |
|---|---|---|
|
Icon |
WarningForeground1.Rest |
#C9601C |
|
Label |
WarningForeground1.Rest |
#C9601C |
Status: Success
|
|
Design token |
Value |
|---|---|---|
|
Icon |
SuccessForeground1.Rest |
#0A7F00 |
|
Label |
SuccessForeground1.Rest |
#0A7F00 |
Important
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground1.Rest |
#0F1A38 |
|
Label |
NeutralForeground1.Rest |
#0F1A38 |
Subtle
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.Rest |
#595959 |
|
Label |
NeutralForeground2.Rest |
#595959 |
Size options
Delish has 4 sizes for a badge: small, medium, large and extra large.
Specs by size
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
N/A |
Width: variable Height: 16px |
|
(1) Container radius |
borderRadiusCircular |
9999px |
|
(2) Icon |
N/A |
12px |
|
(3) Text size |
caption2Strong |
10px / 7.5pt Semibold |
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
N/A |
Width: variable Height: 20px |
|
(1) Container radius |
borderRadiusCircular |
9999px |
|
(2) Icon |
N/A |
12px |
|
(3) Text size |
caption2Strong |
10px / 7.5pt Semibold |
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
N/A |
Width: variable Height: 24px |
|
(1) Container radius |
borderRadiusCircular |
9999px |
|
(2) Icon |
N/A |
16px |
|
(3) Text size |
caption1Strong |
12px / 9pt Semibold |
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
N/A |
Width: variable Height: 32px |
|
(1) Container radius |
borderRadiusCircular |
9999px |
|
(2) Icon |
N/A |
20px |
|
(3) Text size |
caption1Strong |
12px / 9pt Semibold |
Spacing by size
|
|
Design token |
Value |
|---|---|---|
|
Container: |
spacingHorizontalXXS |
2px |
|
Padding between |
spacingHorizontalNone |
0px |
|
Text: |
spacingHorizontalXXS |
2px |
|
Text: padding bottom |
N/A |
0.5px |
|
|
Design token |
Value |
|---|---|---|
|
Container: |
spacingHorizontalXS |
4px |
|
Padding between |
spacingHorizontalNone |
0px |
|
Text: |
spacingHorizontalXXS |
2px |
|
Text: padding bottom |
N/A |
0.5px |
|
|
Design token |
Value |
|---|---|---|
|
Container: |
spacingHorizontalXS |
4px |
|
Padding between |
spacingHorizontalXXS |
2px |
|
Text: |
spacingHorizontalXXS |
2px |
|
Text: padding bottom |
N/A |
1px |
|
|
Design token |
Value |
|---|---|---|
|
Container: |
spacingHorizontalSNudge |
6px |
|
Padding between |
spacingHorizontalXXS |
2px |
|
Text: |
spacingHorizontalXXS |
2px |
|
Text: padding bottom |
N/A |
1px |