Foundations
Components
- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color Picker
- Container
- Control Group
- Dialog
- Dropdown
- File Uploader
- FlexBox
- FormSOON
- Grid View
- IconSOON
- ImageSOON
- Input
- Link
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Separator
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Colors
Sugarcoat Color SystemGrays
1
2
3
4
5
6
7
8
9
10
11
12
Olive Grays
1
2
3
4
5
6
7
8
9
10
11
12
Sage Grays
1
2
3
4
5
6
7
8
9
10
11
12
Sand Grays
1
2
3
4
5
6
7
8
9
10
11
12
Mauve Grays
1
2
3
4
5
6
7
8
9
10
11
12
Slate Grays
1
2
3
4
5
6
7
8
9
10
11
12
Tomatos
1
2
3
4
5
6
7
8
9
10
11
12
Reds
1
2
3
4
5
6
7
8
9
10
11
12
Rubys
1
2
3
4
5
6
7
8
9
10
11
12
Crimsons
1
2
3
4
5
6
7
8
9
10
11
12
Pinks
1
2
3
4
5
6
7
8
9
10
11
12
Plums
1
2
3
4
5
6
7
8
9
10
11
12
Purples
1
2
3
4
5
6
7
8
9
10
11
12
Violets
1
2
3
4
5
6
7
8
9
10
11
12
Iris
1
2
3
4
5
6
7
8
9
10
11
12
Indigos
1
2
3
4
5
6
7
8
9
10
11
12
Blues
1
2
3
4
5
6
7
8
9
10
11
12
Cyans
1
2
3
4
5
6
7
8
9
10
11
12
Teals
1
2
3
4
5
6
7
8
9
10
11
12
Jades
1
2
3
4
5
6
7
8
9
10
11
12
Greens
1
2
3
4
5
6
7
8
9
10
11
12
Grass
1
2
3
4
5
6
7
8
9
10
11
12
Bronze
1
2
3
4
5
6
7
8
9
10
11
12
Gold
1
2
3
4
5
6
7
8
9
10
11
12
Browns
1
2
3
4
5
6
7
8
9
10
11
12
Oranges
1
2
3
4
5
6
7
8
9
10
11
12
Ambers
1
2
3
4
5
6
7
8
9
10
11
12
Yellows
1
2
3
4
5
6
7
8
9
10
11
12
Limes
1
2
3
4
5
6
7
8
9
10
11
12
Mints
1
2
3
4
5
6
7
8
9
10
11
12
Sky
1
2
3
4
5
6
7
8
9
10
11
12