f8763ed6f5
Requested: make the site lighter, the way the colours were originally. Taken from the house palette "Papier & Gold" (warm off-white, gold as the only accent): papier #FCFAF6, papier-2 #F4EFE4, card #FFFDF8, ink #1C1813, quiet #6B6154. Gold needs more than one hex value. The old dark theme used a single light gold for both text and fills, which works on a dark ground but breaks on paper: #C9A461 as text scores 2.25:1. So primary and accent are now the dark gold #7A5D1F, which carries fill *and* type (5.90:1 on paper, and takes cream text on top), with #FFFDF8 as its contrast. googleBlue became Google's actual link blue so the search mock stays readable on a light ground. Fonts untouched. Fixed a pre-existing bug this exposed: ".nav-links a" also matched the header CTA and overrode .btn-primary's colour, so the button rendered muted text on the primary fill - 1.01:1, effectively invisible. It just never showed on the dark theme, where both tones were light. Narrowed to ".nav-links ul a", matching the :hover rule right below it. Rebuilt the logo as a transparent PNG: logo.jpg had the old dark background baked in and sat on the page as a black box, with its "WEBDESIGN" label in light grey that disappears on paper. The pill is preserved pixel for pixel (row-wise fill so the dark lettering inside stays opaque, then eroded 1px to drop the old anti-aliasing halo); the label is recoloured to ink. logo.jpg is kept. Verified in the browser across all three pages: 228 rendered text elements measured, 0 WCAG AA failures, tightest pair 5.82 - which is exactly the documented figure for "quiet on paper". No horizontal scroll, no console errors. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
113 lines
1.6 KiB
JSON
113 lines
1.6 KiB
JSON
{
|
|
"fonts": {
|
|
"heading": "Playfair Display",
|
|
"body": "Inter"
|
|
},
|
|
"fontSizes": {
|
|
"sm": "0.875rem",
|
|
"base": "1rem",
|
|
"md": "1.125rem",
|
|
"lg": "1.375rem",
|
|
"xl": "1.75rem",
|
|
"2xl": "2.25rem",
|
|
"3xl": "3rem"
|
|
},
|
|
"colors": {
|
|
"bg": {
|
|
"r": 252,
|
|
"g": 250,
|
|
"b": 246,
|
|
"a": 1
|
|
},
|
|
"bgAlt": {
|
|
"r": 244,
|
|
"g": 239,
|
|
"b": 228,
|
|
"a": 1
|
|
},
|
|
"surface": {
|
|
"r": 255,
|
|
"g": 253,
|
|
"b": 248,
|
|
"a": 1
|
|
},
|
|
"text": {
|
|
"r": 28,
|
|
"g": 24,
|
|
"b": 19,
|
|
"a": 1
|
|
},
|
|
"textMuted": {
|
|
"r": 107,
|
|
"g": 97,
|
|
"b": 84,
|
|
"a": 1
|
|
},
|
|
"border": {
|
|
"r": 220,
|
|
"g": 207,
|
|
"b": 182,
|
|
"a": 1
|
|
},
|
|
"primary": {
|
|
"r": 122,
|
|
"g": 93,
|
|
"b": 31,
|
|
"a": 1
|
|
},
|
|
"primaryDark": {
|
|
"r": 94,
|
|
"g": 71,
|
|
"b": 22,
|
|
"a": 1
|
|
},
|
|
"primaryContrast": {
|
|
"r": 255,
|
|
"g": 253,
|
|
"b": 248,
|
|
"a": 1
|
|
},
|
|
"accent": {
|
|
"r": 122,
|
|
"g": 93,
|
|
"b": 31,
|
|
"a": 1
|
|
},
|
|
"accentDark": {
|
|
"r": 94,
|
|
"g": 71,
|
|
"b": 22,
|
|
"a": 1
|
|
},
|
|
"success": {
|
|
"r": 79,
|
|
"g": 107,
|
|
"b": 66,
|
|
"a": 1
|
|
},
|
|
"danger": {
|
|
"r": 138,
|
|
"g": 59,
|
|
"b": 34,
|
|
"a": 1
|
|
},
|
|
"flag": {
|
|
"r": 138,
|
|
"g": 59,
|
|
"b": 34,
|
|
"a": 1
|
|
},
|
|
"flagBg": {
|
|
"r": 138,
|
|
"g": 59,
|
|
"b": 34,
|
|
"a": 0.1
|
|
},
|
|
"googleBlue": {
|
|
"r": 26,
|
|
"g": 13,
|
|
"b": 171,
|
|
"a": 1
|
|
}
|
|
}
|
|
}
|