Noh Masks · design reference

Button color system

One filled primary action. One outlined alternative.
The same lettering, spacing and quiet press effect across every background.

Paper

#F0EEE8 · Gallery and reading background


First: Lacquer #A43A32 fill · Paper #F0EEE8 text and Lacquer border.

Second: Paper #F0EEE8 fill · Ink #11100D text and border.

Ink

#11100D · Dark gallery background


First: Paper #F0EEE8 fill · Ink #11100D text and Paper border.

Second: Ink #11100D fill · Paper #F0EEE8 text and border.

Indigo

#1F4052 · Atmospheric banner


First: Paper #F0EEE8 fill · Ink #11100D text and Paper border.

Second: Indigo #1F4052 fill · Paper #F0EEE8 text and border.

Plum

#5D3042 · Editorial banner


First: Paper #F0EEE8 fill · Ink #11100D text and Paper border.

Second: Plum #5D3042 fill · Paper #F0EEE8 text and border.

Lacquer

#A43A32 · Occasional red banner


First: Paper #F0EEE8 fill · Ink #11100D text and Paper border.

Second: Lacquer #A43A32 fill · Paper #F0EEE8 text and border.

Bronze

#B08A57 · Decorative reference


First: Ink #11100D fill · Paper #F0EEE8 text and Ink border.

Second: Bronze #B08A57 fill · Ink #11100D text and border.

Shown for comparison. The brand guide reserves Bronze for small
decorative accents rather than full banners.

Buttons follow the length of their labels when the pair fits in a space
at least 480px wide. In narrower spaces they stack at equal width.
Minimum height is 48px, or 52px on touch devices; longer labels can wrap.
All buttons use 16px Söhne at weight 500, a 1px border and 3px corners.
The first primary button has one brief arrival trace.
These demonstration buttons stay on this page when pressed.

Font note: Söhne and Signifier must already be loaded by your website.
Otherwise, Arial and Georgia are used.