← Back to map

Button color system

Theme-derived button colors with WCAG contrast ratios. Each sample below shows a fixed interaction state. Focus samples include the visible keyboard outline.

Theme	Primary					Secondary					Link
Theme	Default	Hover	Active	Focus	Disabled	Default	Hover	Active	Focus	Disabled	Default	Hover	Active	Focus	Disabled
Profile`#514f7e`	Fg 8.06 Ed 3.73	Fg 9.28 Ed 4.29	Fg 8.06 Ed 3.73	Fg 8.06 Ed 3.73	Fg 8.16 Ed 3.81	Fg 5.67 Ed 3.73	Fg 4.75 Ed 3.73	Fg 5.67 Ed 3.73	Fg 5.67 Ed 3.73	Fg 5.58 Ed 3.81	↗ Fg 3.73 Ed 3.73	↗ Fg 3.73 Ed 3.73	↗ Fg 3.73 Ed 3.73	↗ Fg 3.73 Ed 3.73	↗ Fg 3.81 Ed 3.81
Writing`#3d6786`	Fg 8.23 Ed 3.23	Fg 9.41 Ed 3.70	Fg 8.23 Ed 3.23	Fg 8.23 Ed 3.23	Fg 8.18 Ed 3.22	Fg 5.85 Ed 3.23	Fg 4.89 Ed 3.23	Fg 5.85 Ed 3.23	Fg 5.85 Ed 3.23	Fg 5.87 Ed 3.22	↗ Fg 3.23 Ed 3.23	↗ Fg 3.23 Ed 3.23	↗ Fg 3.23 Ed 3.23	↗ Fg 3.23 Ed 3.23	↗ Fg 3.22 Ed 3.22
Moods`#7a5236`	Fg 7.75 Ed 3.43	Fg 8.88 Ed 3.93	Fg 7.75 Ed 3.43	Fg 7.75 Ed 3.43	Fg 7.81 Ed 3.47	Fg 5.51 Ed 3.43	Fg 4.66 Ed 3.43	Fg 5.51 Ed 3.43	Fg 5.51 Ed 3.43	Fg 5.48 Ed 3.47	↗ Fg 3.43 Ed 3.43	↗ Fg 3.43 Ed 3.43	↗ Fg 3.43 Ed 3.43	↗ Fg 3.43 Ed 3.43	↗ Fg 3.47 Ed 3.47
Music`#7a4660`	Fg 7.89 Ed 3.56	Fg 9.05 Ed 4.09	Fg 7.89 Ed 3.56	Fg 7.89 Ed 3.56	Fg 8.00 Ed 3.65	Fg 5.92 Ed 3.56	Fg 5.01 Ed 3.56	Fg 5.92 Ed 3.56	Fg 5.92 Ed 3.56	Fg 5.80 Ed 3.65	↗ Fg 3.56 Ed 3.56	↗ Fg 3.56 Ed 3.56	↗ Fg 3.56 Ed 3.56	↗ Fg 3.56 Ed 3.56	↗ Fg 3.65 Ed 3.65
GitHub`#3d6b5c`	Fg 8.94 Ed 3.51	Fg 10.20 Ed 4.01	Fg 8.94 Ed 3.51	Fg 8.94 Ed 3.51	Fg 8.86 Ed 3.45	Fg 5.89 Ed 3.51	Fg 4.93 Ed 3.51	Fg 5.89 Ed 3.51	Fg 5.89 Ed 3.51	Fg 5.98 Ed 3.45	↗ Fg 3.51 Ed 3.51	↗ Fg 3.51 Ed 3.51	↗ Fg 3.51 Ed 3.51	↗ Fg 3.51 Ed 3.51	↗ Fg 3.45 Ed 3.45

Theme	page-bg	frame	ink	accent	fill	fill-pale	ink-light
Profile	`#514f7e`	`#3a385f`	`#1f1c38`	`#c3a9eb`	`#c6a9f0`	`#ddbfff`	`#f4f1ea`
Writing	`#3d6786`	`#2d4f69`	`#14263a`	`#8cccf2`	`#8cc4ef`	`#a2dbff`	`#f4f1ea`
Moods	`#7a5236`	`#5c3b25`	`#35200f`	`#f3a27b`	`#f2a869`	`#ffbe7f`	`#f4f1ea`
Music	`#7a4660`	`#5c3249`	`#351628`	`#e99abc`	`#f29bc0`	`#ffb1d7`	`#f4f1ea`
GitHub	`#3d6b5c`	`#2d5144`	`#10291e`	`#8ecb9b`	`#93d49d`	`#a9ebb3`	`#f4f1ea`