Frive DS

Semantic / Text

Text

Text / Body

Variable:

Hex:

Text / Header

Variable:

Hex:

Text / Muted

Variable:

Hex:

Text / Body Inverted

Variable:

Hex:

Text / Header Inverted

Variable:

Hex:

Text / Muted Inverted

Variable:

Hex:

Text / Highlight

Variable:

Hex:

Text / Accent

Variable:

Hex:

Semantic / Interactive

Interactive

Interactive / Primary

Variable:

Hex:

Interactive / Primary Hover

Variable:

Hex:

Interactive / Primary Pressed

Variable:

Hex:

Interactive / Secondary

Variable:

Hex:

Interactive / Secondary Hover

Variable:

Hex:

Interactive / Secondary Pressed

Variable:

Hex:

Interactive / Secondary Border

Variable:

Hex:

Interactive / Selected

Variable:

Hex:

Interactive / Links

Variable:

Hex:

Interactive / Primary Inverted

Variable:

Hex:

Interactive / Primary Hover Inverted

Variable:

Hex:

Interactive / Primary Pressed Inverted

Variable:

Hex:

Interactive / Tertiary Background

Variable:

Hex:

Interactive / Tertiary Border

Variable:

Hex:

Interactive / Secondary Disabled

Variable:

Hex:

Interactive / Links Disabled

Variable:

Hex:

Interactive / Links Inverted

Variable:

Hex:

Interactive / Secondary Inverted Border

Variable:

Hex:

Interactive / Secondary Hover Inverted

Variable:

Hex:

Interactive / Secondary Selected Inverted

Variable:

Hex:

Interactive / Selected Inverted

Variable:

Hex:

Interactive / Price Hover

Variable:

Hex:

Interactive / Price Pressed

Variable:

Hex:

Interactive / Convert Foreground

Variable:

Hex:

Interactive / Convert Foreground Hover

Variable:

Hex:

Interactive / Convert Foreground Pressed

Variable:

Hex:

Semantic / Surfaces

Surfaces

Surface / Background White

Allowed as a section background

Variable:

Hex:

Surface / Background Light Grey

Allowed as a section background

Variable:

Hex:

Surface / Background Grey

Variable:

Hex:

Surface / Background Field

Variable:

Hex:

Surface / Background Field Grey

Variable:

Hex:

Surface / Background Brand

Allowed as a section background

Variable:

Hex:

Surface / Background Brand Rice

Allowed as a section background

Variable:

Hex:

Surface / Background Dark

Allowed as a section background

Variable:

Hex:

Surface / Border

Variable:

Hex:

Surface / Background Focus

Variable:

Hex:

Surface / Border Focus

Variable:

Hex:

Surface / Border Disabled

Variable:

Hex:

Surface / Border Inverted

Variable:

Hex:

Surface / Divider

Variable:

Hex:

Surface / Divider Inverted

Variable:

Hex:

Surface / Background Highlight

Allowed as a section background

Variable:

Hex:

Surface / Background Convert

Variable:

Hex:

Surface / Background Highlight Price

Variable:

Hex:

Surface / Background Emphasis

Allowed as a section background

Variable:

Hex:

Surface / Shadow Card

Variable:

Hex:

Surface / Background Disabled

Variable:

Hex:

Surface / Background Tag Vegan

Variable:

Hex:

Surface / Background Tag Seafood

Variable:

Hex:

Surface / Background Tag Meat

Variable:

Hex:

Surface / Background Tag Spice

Variable:

Hex:

Surface / Background Stars

Variable:

Hex:

Surface / Background App Chat

Variable:

Hex:

Semantic / Utility

Utility

Utility / Error

Variable:

Hex:

Utility / Success

Variable:

Hex:

Raw

Greyscale

Greyscale / Black

Variable:

Hex:

Greyscale / 100

Variable:

Hex:

Greyscale / 80

Variable:

Hex:

Greyscale / 60

Variable:

Hex:

Greyscale / 40

Variable:

Hex:

Greyscale / 20

Variable:

Hex:

Greyscale / 10

Variable:

Hex:

Greyscale / 5

Variable:

Hex:

Greyscale / 1

Variable:

Hex:

Greyscale / White

Variable:

Hex:

Kale

Kale / 100

Variable:

Hex:

Kale / 120

Variable:

Hex:

Kale / 140

Variable:

Hex:

Kale / 80

Variable:

Hex:

Kale / 60

Variable:

Hex:

Kale / 40

Variable:

Hex:

Kale / 20

Variable:

Hex:

Rice

Rice / 100

Variable:

Hex:

Rice / 80

Variable:

Hex:

Rice / 60

Variable:

Hex:

Rice / 40

Variable:

Hex:

Rice / 33

Variable:

Hex:

Rice / 20

Variable:

Hex:

Lime

Lime / 100

Variable:

Hex:

Lime / 80

Variable:

Hex:

Lime / 60

Variable:

Hex:

Lime / 40

Variable:

Hex:

Lime / 20

Variable:

Hex:

Salmon

Salmon / 100

Variable:

Hex:

Salmon / 120

Variable:

Hex:

Salmon / 140

Variable:

Hex:

Salmon / 80

Variable:

Hex:

Salmon / 60

Variable:

Hex:

Salmon / 40

Variable:

Hex:

Salmon / 20

Variable:

Hex:

Date

Date / 100

Variable:

Hex:

Sage

Sage / 100

Variable:

Hex:

Squash

Squash / 100

Variable:

Hex:

Squash / 120

Variable:

Hex:

Squash / 80

Variable:

Hex:

Squash / 60

Variable:

Hex:

Squash / 40

Variable:

Hex:

Squash / 20

Variable:

Hex:

Earth

Earth / 100

Variable:

Hex:

Earth / 80

Variable:

Hex:

Earth / 60

Variable:

Hex:

Earth / 40

Variable:

Hex:

Earth / 20

Variable:

Hex:

Aqua

Aqua / 100

Variable:

Hex:

Aqua / 80

Variable:

Hex:

Aqua / 60

Variable:

Hex:

Aqua / 40

Variable:

Hex:

Aqua / 20

Variable:

Hex:

Mint

Mint / 100

Variable:

Hex:

Mint / 160

Variable:

Hex:

Mint / 80

Variable:

Hex:

Mint / 60

Variable:

Hex:

Mint / 40

Variable:

Hex:

Mint / 20

Variable:

Hex:

Utility

Utility / Red

Variable:

Hex:

Utility / Amber

Variable:

Hex:

Utility / Green

Variable:

Hex: