Stone Theme Palette

A warm, earthy neutral theme inspired by natural stone and sandstone. Light mode uses pastel T90 surfaces with T30 text; dark mode uses T35 surfaces with T90 text, same hex as the light-mode pastel, clean palette symmetry. Montserrat for headings and display, Figtree for body, JetBrains Mono for code.

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).

Stone Neutral
0
5
10
15
13
20
25
30
2
35
40
5
45
50
55
2
60
65
70
75
80
85
4
90
3
95
2
100
5
H:158 C:0
Blue
0
5
10
15
20
25
30
2
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:264 C:10
Cyan
0
5
10
15
20
25
30
2
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:190 C:10
Green= Success
0
5
10
15
20
25
30
4
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:142 C:17
Teal
0
5
10
15
20
25
30
2
35
40
2
45
50
55
60
65
70
75
80
85
90
95
100
H:159 C:9
Yellow= Warning
0
5
10
15
20
25
30
4
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:90 C:23
Orange
0
5
10
15
20
25
30
2
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:71 C:22
Red= Error
0
5
10
15
20
25
30
4
35
40
3
45
50
55
60
65
70
75
80
85
90
2
95
100
H:34 C:11
Pink
0
5
10
15
20
25
30
2
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:340 C:9
Purple
0
5
10
15
20
25
30
2
35
40
2
45
50
55
60
65
70
75
80
85
90
95
100
H:308 C:11

● = 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).

Stone Neutral
0
5
10
2
15
5
20
25
2
30
35
40
4
45
50
55
60
65
70
5
75
80
85
90
2
95
11
100
2
H:158 C:0
Blue
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:264 C:10
Cyan
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:190 C:10
Green= Success
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
2
75
80
2
85
90
3
95
100
H:142 C:17
Teal
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:159 C:9
Yellow= Warning
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
3
95
100
H:90 C:23
Orange
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:71 C:22
Red= Error
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
3
95
100
H:34 C:11
Pink
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
2
95
100
H:340 C:9
Purple
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
2
75
80
85
90
2
95
100
H:308 C:11

● = 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

Stone 900
Stone 500
Stone 300
Stone 100
White

Display Text (Montserrat)

Display 1Display 2Display 3Quietly hewn from sand and time

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: warm, low-alpha drop shadow stack using Stone 900. Plain drops in both modes (no inset bezel); dark surfaces lift via a slightly lighter card token rather than a shadow rim.

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

Stone 900
Stone 500
Stone 300
Stone 100
White

Display Text (Montserrat)

Display 1Display 2Display 3Quietly hewn from sand and time

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: warm, low-alpha drop shadow stack using Stone 900. Plain drops in both modes (no inset bezel); dark surfaces lift via a slightly lighter card token rather than a shadow rim.

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