Gothic Theme Palette

Dark-only theme: deep blue-gray surfaces, distressed display heading, pastel categorical accents that glow against the dark page like illuminated panels.

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

Gothic Neutral
0
5
10
10
15
20
2
25
30
35
40
4
45
50
55
60
65
2
70
75
3
80
85
90
95
15
100
H:257 C:5
Green= Success / forest moss
0
5
10
15
20
2
25
30
35
40
45
50
55
60
65
70
2
75
4
80
85
90
95
100
H:131 C:39
Red= Error / blood crimson
0
5
10
15
20
2
25
30
35
40
45
50
55
60
65
70
75
4
80
85
90
95
100
H:49 C:16
Yellow= Warning / aged gold
0
5
10
15
2
20
25
30
35
40
45
50
55
60
65
70
2
75
4
80
85
90
95
100
H:86 C:51
Blue
0
5
10
15
20
2
25
30
35
40
45
50
55
60
65
2
70
75
3
80
85
90
95
100
H:291 C:46
Purple
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
2
85
90
95
100
H:318 C:56
Pink
0
5
10
15
20
25
30
35
40
45
50
55
60
65
2
70
75
80
85
90
95
100
H:360 C:39
Cyan
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:231 C:20
Orange
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:56 C:47
Teal
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
H:178 C:26

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

Core Palette

Body / Surface
Card
Popover
Border emp.
Text secondary
Text primary

Display Text (Manufacturing Consent)

Display 1Display 2Display 3Little joys, everywhere you go

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.
Warning banner title
Description text for the warning state.
Error banner title
Description text for the error 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