Butter Theme Palette

Golden buttery theme with blue accents. Sarina for Display, Outfit for headings and body.

Light Mode

Tonal Palettes

Full HCT tonal ramps: 21 perceptually uniform steps from black (T0) to white (T100). Markers ● show tone steps consumed by theme tokens (open the audit drawer for the full report).

Accent
0
5
10
15
20
25
30
35
40
45
4
50
55
60
65
70
75
80
85
90
95
100
5
H:297 C:96
Gray
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:278 C:8
Red
0
5
10
15
20
25
3
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:41 C:67
Orange
0
5
10
15
20
25
4
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:66 C:66
Yellow
0
5
10
15
20
25
3
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:96 C:69
Green
0
5
10
15
20
25
3
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:140 C:71
Cyan
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:201 C:33
Teal
0
5
10
15
20
25
3
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:161 C:45
Blue
0
5
10
15
20
25
3
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:290 C:72
Purple
0
5
10
15
20
25
4
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:310 C:68
Pink
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:331 C:67
Error= Error
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:36 C:76
Warning= Warning
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:87 C:78
Success= Success
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:125 C:74

● = tone step consumed by a theme token. Number = count when multiple tokens share the same step. Hover any cell for details.

Dark Mode

Tonal Palettes

Full HCT tonal ramps: 21 perceptually uniform steps from black (T0) to white (T100). Dark mode applies the audit's §4 transform (+5 brightness with taper above T80, ×0.85 chroma) so saturated stops don't vibrate against the dark canvas. Markers ● show tone steps consumed by theme tokens (open the audit drawer for the full report).

Accent
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
2
H:99 C:50
Gray
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:278 C:8
Red
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:41 C:67
Orange
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
3
85
90
95
100
H:66 C:66
Yellow
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
4
100
H:96 C:69
Green
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:140 C:71
Cyan
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:201 C:33
Teal
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:161 C:45
Blue
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:290 C:72
Purple
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
3
85
90
95
100
H:310 C:68
Pink
0
5
10
15
20
25
2
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:331 C:67
Error= Error
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:36 C:76
Warning= Warning
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:87 C:78
Success= Success
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:125 C:74

● = tone step consumed by a theme token. Number = count when multiple tokens share the same step. Hover any cell for details.

Light Mode

Core Palette

#225BFF
#5681FF
#FDEE8C
#FDFBE4
#FFFFFF

Display Text (Sarina)

Display 1Display 2Display 3

Text Hierarchy (1.25 scale, 14px base)

Heading 1

34.2px

Heading 2

27.3px

Heading 3

21.9px

Heading 4

17.5px
Body — primary14.0px
Body — secondary14.0px
Supporting12.0px
Disabled14.0px

Semantic Badges

SuccessErrorWarningInfoNeutral

Categorical Badges

BlueCyanGreenOrangePinkPurpleRedTealYellow

Banners

Info banner title
Description text for the info state.
Success banner title
Description text for the success state.

Inputs

Looks good!
This field is required.
This value may cause issues.

Buttons

Default
Disabled

Spinners

Progress

Progress75%
Upload40%
Storage90%
Loading...

Controls

Display mode
Compact
Comfortable
Spacious

Card Variants

default
muted
blue
cyan
gray
green
orange
pink
purple
red
teal
yellow

Borders & Surfaces

border
var(--color-border)
border-emp
var(--color-border-emphasized)
surface
var(--color-background-surface)
body
var(--color-background-body)
card
var(--color-background-card)
popover
var(--color-background-popover)

Elevations

Three shadow levels mapped to the components that use them.

Low — popovers / dropdowns / composer
Consumed by: Popover, TopNav mega menu, SegmentedControl item, ChatComposer (resting)
Medium — hover / floating
Consumed by: HoverCard, Toast, Carousel scroll button, Chat scroll button, Thumbnail (hover), ChatComposer (hover/focus)
High — modal / dialog
Consumed by: Dialog

Dark Mode

Core Palette

#FDEE8C
#EDD64B
#725538
#36261C
#261A13

Display Text (Sarina)

Display 1Display 2Display 3

Text Hierarchy (1.25 scale, 14px base)

Heading 1

34.2px

Heading 2

27.3px

Heading 3

21.9px

Heading 4

17.5px
Body — primary14.0px
Body — secondary14.0px
Supporting12.0px
Disabled14.0px

Semantic Badges

SuccessErrorWarningInfoNeutral

Categorical Badges

BlueCyanGreenOrangePinkPurpleRedTealYellow

Banners

Info banner title
Description text for the info state.
Success banner title
Description text for the success state.

Inputs

Looks good!
This field is required.
This value may cause issues.

Buttons

Default
Disabled

Spinners

Progress

Progress75%
Upload40%
Storage90%
Loading...

Controls

Display mode
Compact
Comfortable
Spacious

Card Variants

default
muted
blue
cyan
gray
green
orange
pink
purple
red
teal
yellow

Borders & Surfaces

border
var(--color-border)
border-emp
var(--color-border-emphasized)
surface
var(--color-background-surface)
body
var(--color-background-body)
card
var(--color-background-card)
popover
var(--color-background-popover)

Elevations

Three shadow levels mapped to the components that use them.

Low — popovers / dropdowns / composer
Consumed by: Popover, TopNav mega menu, SegmentedControl item, ChatComposer (resting)
Medium — hover / floating
Consumed by: HoverCard, Toast, Carousel scroll button, Chat scroll button, Thumbnail (hover), ChatComposer (hover/focus)
High — modal / dialog
Consumed by: Dialog