/* Acorn & Oak Care Homes - design tokens Two homes on Maidstone Road, Chatham: Acorn House (39) and Oak House (95). Tier: Homely. Refresh page set, finished to the gratwick-standard. Type set T2 Letter: Lora (display, 500/600 + italics) / Source Sans 3 (body). THE PALETTE, AND WHY No brand colours exist (no logo, no signage supplied), so the palette is derived from the name, by the design-engine rules. The acorn gives the primary: a warm copper-brown, the colour of a ripe acorn and of old oak timber. A warm primary takes a deep green accent (design-engine rule 7), and here the green is the oak leaf, so the two colours are the two halves of the name rather than an arbitrary pairing. Everything else is walked out of those two: 1. THE PAPER IS OATMEAL, NEVER WHITE. --surface is tinted warm, and pure white survives only as --card, where it reads as paper on paper. 2. COPPER CARRIES WORDS, GREEN CARRIES ACTIONS. Links, eyebrows and the italic heading word are copper ink; every button and the form's selected state are oak green. A family learns in one screen that green is "do something". 3. THE TWO BANDS ARE THE TWO COLOURS. --band-tint is copper at 9% over the paper; --accent-tint is oak green at about 7%. Alternating them down a page reads as one family, not one colour repeated. Every ratio below was computed for THIS token set (WCAG 2.x relative luminance): ink on surface / band-tint / accent-tint / card 14.97 / 13.30 / 13.48 / 15.87 ink-soft on surface / band-tint / accent-tint 7.65 / 6.79 / 6.88 primary-ink on surface / band-tint / accent-tint 6.72 / 5.97 / 6.05 primary (acorn copper) on surface / band-tint 5.47 / 4.85 cta (oak green) on surface / band-tint / accent-tint 6.51 / 5.78 / 5.86 white on cta / cta-hover / primary-deep 6.90 / 8.70 / 14.52 good on card / surface / band-tint 7.25 / 6.84 / 6.08 accent-soft / accent-on-photo on primary-deep 9.35 / 8.21 Body text needs >=4.5:1, large text >=3:1. Every text token clears 4.5:1 on every band it is used on; the copper clears it too, which is why it is allowed to carry the score ring and the ornament strokes without a separate "ornament only" rule. DISTANCE CHECK against the build log: Elm Lodge shares T2 but is sage-led in Eastbourne; nothing in the portfolio is copper-and-oak-green. Nearest builds are in Sussex, Devon and Bristol, none in Kent or Medway. */ :root{ /* ---- palette: acorn copper on oatmeal paper, oak-leaf green actions ---- */ --primary: #8A5B33; /* acorn copper. Ornament strokes, rules, the mark, large numerals. 5.47:1 on the paper */ --primary-ink: #7C4D26; /* copper walked down for TEXT and links. 6.72:1 on surface, 5.97:1 on the copper band */ --primary-deep: #3A2419; /* deep russet-brown. Footer, deep bands, the veil. White on it 14.52:1 */ --band-tint: #F1EAE1; /* copper at 9% over the paper. The alternating band */ --accent-tint: #EDEDE4; /* oak green at ~7% over the paper. The second band */ --surface: #FBF8F2; /* oatmeal paper, never white */ --card: #FFFFFF; /* white survives here only, inside the paper */ --ink: #2B2019; /* near-black warmed towards the copper */ --ink-soft: #5C4D40; /* 7.65:1 on surface, 6.79:1 on the copper band */ /* Actions: the oak leaf. White on it 6.90:1, on the hover 8.70:1. */ --cta: #3F6244; --cta-hover: #34523A; --btn-ink: #FFFFFF; /* Names inherited from the shared library so every ported component still resolves, remapped onto this palette rather than left pointing at retired colours. */ --sea-ink: #7C4D26; /* accent TEXT on light bands */ --gold-ink: #7C4D26; /* eyebrows and accent text: copper on this build */ --accent-line: #8A5B33; /* line art and ornaments */ --accent-soft: #E8CBA6; /* accent text on the russet band. 9.35:1 */ --accent-on-photo: #F1C59C;/* the italic hero word over the hero photographs. Round 2: lifted from #EDB985 after measuring the client's sunny exteriors, where the old value fell to 4.32:1 at its worst pixel. 8.9:1 on the deep field; photo figures in BUILD_NOTES round 2 */ --good: #35603F; /* the rating word on the inspection certificate. A muted forest, deliberately quieter than the CQC's own green so we never borrow their trade dress. 7.25:1 on the card */ --mixed: #7E4F16; /* kept for the library's mixed-result certificate; not used on this build */ --cqc-good: #35603F; /* ---- component tints (the library reads these instead of literals) ---- */ --ph-bloom: rgba(138,91,51,.18); --ph-bloom-0: rgba(138,91,51,0); --field-bloom-a: rgba(176,118,66,.46); --field-bloom-a0:rgba(138,91,51,0); --field-bloom-b: rgba(63,98,68,.34); --field-bloom-b0:rgba(63,98,68,0); --paper-a95: rgba(251,248,242,.95); /* the scrolled nav, card badges, pills */ --paper-a92: rgba(251,248,242,.92); --ring: rgba(138,91,51,.42); /* the score ring's hairline */ --focus-ring: rgba(63,98,68,.42); /* form-field focus halo, oak green */ --rule: rgba(43,32,25,.13); --shadow-rgb: 43,32,25; --scrim: linear-gradient(180deg, rgba(40,26,18,.62) 0%, rgba(40,26,18,.50) 45%, rgba(40,26,18,.86) 100%); --scrim-deep: linear-gradient(180deg, rgba(40,26,18,.80) 0%, rgba(40,26,18,.70) 45%, rgba(40,26,18,.92) 100%); /* ---- type: T2 Letter ---- */ --display: "Lora", Georgia, "Times New Roman", serif; --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --brand: "Lora", Georgia, serif; /* ---- width system (shared across the library) ---- */ --w1: clamp(16px, 5.2vw, 92px); --w2: calc(var(--w1) * 2); --hold: 1300px; /* ---- scale: Homely - soft radius, lifted shadow, cosier density ---- */ --sp: clamp(4.4rem, 8.6vw, 6.6rem); --radius: 20px; --radius-sm: 14px; --shadow: 0 40px 80px -50px rgba(43,32,25,.5); --shadow-sm: 0 20px 44px -28px rgba(43,32,25,.4); --ease: cubic-bezier(.22,.61,.36,1); }