Foundations
Components
- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Colors
Sugarcoat Color System
Greys
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Stone Greys
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Cool Greys
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Slate Greys
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Reds
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Oranges
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Mangos
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Yellows
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Limes
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Greens
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Emeralds
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Cyans
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Sky Blues
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Blues
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Lavenders
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Purples
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Magentas
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900
Roses
000
100
200
300
400
500
600
700
800
900
000
100
200
300
400
500
600
700
800
900