Yates Design System staging
Reference page for color, tokens, components, rollout, and unified accordion utilities. Ivory is site bg; Sand for bands. WCAG‑aware.
Palette (Core)
Palette (Variants)
Accessibility Notes (WCAG 2.1 AA)
- Body text: Charcoal on White/Ivory (≥16–18px).
- Headings: Charcoal; avoid Gold/Sage for headings on light backgrounds.
- Links: Sage default → Charcoal hover; underline visible.
- Buttons: Gold bg + dark text; Sage bg + near‑black text; hover darkens.
- Bands: Sand & Sage‑300 for separation; keep text Charcoal.
- Focus: Ensure visible focus outlines; keyboard test with Tab.
Design Tokens (Copy/Paste)
Use these variables on new pages to style locally without changing Global Styles.
:root{
--ivory:#FAF9F6; --white:#FFFFFF;
--charcoal:#2B2B2B; --charcoal-700:#3A3A3A; --charcoal-900:#161616;
--sage:#768C76; --sage-300:#A2B5A2; --sage-700:#5A6A5A;
--gold:#C8921F; --gold-300:#E2BE6C; --gold-700:#9B6D14;
--sand:#F2ECE4; --stone:#E9E5DF;
}Components (Preview)
Band · Ivory — universal background for breathable layout.
Band · Sand — section rhythm with subtle warmth.
Band · Sage‑300 — limited use for feature highlights.
Band · Gold‑300 — badges & small highlights.
Band · Charcoal — for quotes or high‑contrast hero blocks.
Type & Link Guidance
- Headings: Charcoal only on light surfaces.
- Body: Charcoal; 18–20px base recommended.
- Links: Sage by default → Charcoal on hover; keep underline.
- Buttons: Primary Gold (dark text), Secondary Sage (near‑black), Outline Charcoal.
AA targets: 4.5:1 for body; 3:1 for large text (≥24px regular or 18.66px bold).
Rollout Notes
- Phase 1: Apply tokens locally on new pages (Homepage hero, Staff, one Ministry page).
- Phase 2: Expand to About, Events; align slides/social to palette; collect feedback.
- Phase 3: Flip Global Styles after review; keep Realm monochrome if desired.
Vision Anchor
Snapshot of the rebuild aims for fast recall.
- Rallying Point: A digital front porch and theological centerline.
- Community Signpost: Findable, credible, compelling to seekers.
- Contact Point for Outsiders: Reduce friction from curiosity to participation.
- Information Hub for Insiders: Clear, current pathways for events, giving, service, and space requests.
Guiding Principle · Minimal, hospitable design serving both first‑time visitors and long‑time members.
Legacy Blue Accordions (Examples)
Accordion Boilerplate for Code-Driven Memos
🧾 Memo to Self: Accordion Boilerplate for Code-Driven Memos
…
Color & Tokens
:root { --ivory:#FAF9F6; --white:#FFFFFF; --charcoal:#2B2B2B; --sage:#768C76; --gold:#C8921F; }Developer Utilities · Unified Accordions (Legacy + Yates)
<style>
:root{ --ivory:var(--ivory,#FAF9F6); --white:var(--white,#FFFFFF); --charcoal:var(--charcoal,#2B2B2B); --charcoal-700:var(--charcoal-700,#3A3A3A); --sage:var(--sage,#768C76); --gold:var(--gold,#C8921F); --gold-700:var(--gold-700,#9B6D14); --stone:var(--stone,#E9E5DF); --blue-900:#1D3557; --blue-600:#457B9D; --blue-50:#F8FAFB; --green-600:#2A9D8F; --code-bg:#F1FAEE; }
.cheat-section{ max-width:1120px; margin:3rem auto; padding:0 20px; color:var(--charcoal); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,sans-serif; }
.legacy-acc .accordion{ background:var(--blue-50); border:1px solid #DDE6ED; border-radius:10px; margin-bottom:1rem; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.03); }
.legacy-acc .accordion-header{ background:var(--blue-900); color:#fff; padding:1rem 1.25rem; cursor:pointer; font-weight:700; position:relative; }
.legacy-acc .accordion-header::after{ content:'+'; position:absolute; right:1.25rem; font-size:1.25rem; transition:transform .2s ease; }
.legacy-acc .accordion.active .accordion-header::after{ content:'–'; }
.legacy-acc .accordion-content{ display:none; padding:1.25rem; background:#fff; font-size:.95rem; line-height:1.65; border-top:1px solid #eee; white-space:pre-wrap; position:relative; font-family:"Fira Code","Courier New",monospace; color:var(--charcoal); }
.legacy-acc .copy-btn{ position:absolute; top:1rem; right:1rem; background:var(--blue-600); color:#fff; border:0; padding:.4rem .75rem; border-radius:6px; font-size:.8rem; cursor:pointer; transition:background-color .2s ease; }
.legacy-acc .copy-btn:hover{ background:var(--blue-900); }
.legacy-acc .copy-btn.clicked{ background:var(--green-600)!important; }
.legacy-acc .code-block{ font-family:"Fira Code","Courier New",monospace; font-size:.9rem; background:var(--code-bg); padding:1rem; border-radius:8px; border:1px solid #DDE6ED; overflow-x:auto; color:#0f1f1f; }
.y-acc{ display:grid; gap:12px; }
.y-acc .acc-item{ border:1px solid var(--stone); border-radius:16px; background:var(--white); box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.y-acc summary.accordion-header{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:var(--ivory); color:var(--charcoal); font-weight:800; cursor:pointer; }
.y-acc .acc-item[open] summary.accordion-header{ background:#F2ECE4; }
.y-acc .accordion-content{ padding:14px 16px 16px; }
.y-acc .accordion-content pre{ background:#0f0f0f; color:#e9e9e9; padding:14px; border-radius:12px; overflow:auto; margin:0 0 10px 0; }
.y-acc .note{ color:var(--charcoal-700); font-size:14px; margin:6px 0 0; }
.y-acc .copy-btn{ background:var(--gold); color:#1f1400; border:0; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.y-acc .copy-btn:hover{ background:var(--gold-700); color:#fff6e6; }
.y-acc summary.accordion-header::-webkit-details-marker{ display:none; }
</style>
<div class="cheat-section legacy-acc">
<div class="accordion" role="region" aria-label="Example">
<div class="accordion-header" tabindex="0">Legacy Accordion Title</div>
<div class="accordion-content" id="legacy-1">
<button class="copy-btn" data-copy-target="legacy-1">Copy</button>
<pre class="code-block"><code>... legacy content ...</code></pre>
</div>
</div>
</div>
<section class="cheat-section y-acc" aria-label="Builder Cheat Sheet">
<details class="acc-item" id="acc-example">
<summary class="accordion-header">
<span>Yates Accordion Title</span>
<button class="copy-btn" type="button" data-copy-selector="#acc-example pre code">Copy</button>
</summary>
<div class="accordion-content">
<pre><code>... yates content ...</code></pre>
</div>
</details>
</section>
<script>
(function(){
document.querySelectorAll('.legacy-acc .accordion').forEach(acc => {
const header = acc.querySelector('.accordion-header');
const content = acc.querySelector('.accordion-content');
const toggle = () => { acc.classList.toggle('active'); content.style.display = acc.classList.contains('active') ? 'block' : 'none'; };
header.addEventListener('click', toggle);
header.addEventListener('keydown', (e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); toggle(); }});
});
document.addEventListener('click', function(e){
const btn = e.target.closest('.copy-btn'); if(!btn) return;
const id = btn.getAttribute('data-copy-target');
const sel = btn.getAttribute('data-copy-selector');
let text = '';
if(id){ const el = document.getElementById(id); if(el) text = el.innerText; }
else if(sel){ const code = document.querySelector(sel); if(code) text = code.innerText; }
if(!text) return;
navigator.clipboard.writeText(text).then(()=>{ const orig = btn.textContent; btn.textContent = '✓ Copied!'; btn.classList.add('clicked'); setTimeout(()=>{ btn.textContent = orig; btn.classList.remove('clicked'); }, 1200); });
});
})();
</script>