Unified style guide for projecthelping.org · kyndhub.com · sparkchange.org
Full palette across the blue scale, neutrals, Spark brand, and Kynd Hub audience colors. Navy #1d3040 is removed — Blue 800 #1d4a60 fills all dark-section roles.
Each program uses a dedicated color subset. Apply consistently across all program-specific materials.
DM Sans is the only web typeface. Never use DM Serif Display. Neue Einstellung is Spark logo/print only — never on web pages.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap"/>
Consistent spacing and radius tokens used across all page builds.
| Breakpoint | Behavior |
|---|---|
max-width: 900px | 3-col grids → 2-col; detail hero stacks vertically |
max-width: 600px | All grids → 1-col; headings scale down; CTA strips stack |
min-width: 375px | Minimum supported mobile viewport |
Live demos of core patterns. No accordions as a catch-all — each section should use a layout suited to its content type.
.tb = tinted blue · .tg = tinted green · .tp = tinted purple · .fb/.fg/.fp = icon fill variant
Background: Blue 800 #1d4a60. Stat numbers use Blue 300 #7ec4d8.
| Class | Columns | Use |
|---|---|---|
.aud-cards | 3 → 2 → 1 | Audience path cards |
.feat-tiles | 3 → 2 → 1 | Platform feature tiles |
.home-cta | 3 → 2 → 1 | Bottom CTA cards |
.stats-grid | 4 → 2 → 1 | Stat numbers bar |
.fg3 | 3 → 2 → 1 | Feature card grid |
.fg2 | 2 → 1 | Two-column feature grid |
.kit-g | 4 → 2 → 1 | Kit tier cards |
.split-g | 2 → 1 | Member/admin split layout |
Always use Tabler Icons — never emojis. Outline style only; never use -filled suffixes.
https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css
<!-- Decorative: add aria-hidden --> <i class="ti ti-heart-handshake" aria-hidden="true"></i> <!-- Meaningful (no text label): use aria-label --> <i class="ti ti-arrow-right" aria-label="Go to next step"></i>
Copy-paste patterns for Elementor conflict fixes, section CSS, JS navigation, and common components.
.ph-slug *,.ph-slug *::before,.ph-slug *::after{box-sizing:border-box;margin:0;padding:0;}
.ph-slug h1,.ph-slug h2,.ph-slug h3,.ph-slug h4,.ph-slug h5,.ph-slug h6{margin:0;padding:0;border:none;font-weight:normal;line-height:inherit;}
.ph-slug p{margin:0;padding:0;}
.ph-slug a{text-decoration:none;color:inherit;}
.ph-slug ul,.ph-slug ol{list-style:none;margin:0;padding:0;}
.ph-slug li{margin:0;padding:0;}
.ph-slug button{cursor:pointer;font-family:'DM Sans',sans-serif;}
.ph-slug img{max-width:100%;height:auto;display:block;}
.ph-slug .btn{line-height:1;letter-spacing:normal;text-transform:none;box-shadow:none;background-image:none;}
.ph-slug .btn:hover{text-decoration:none;}
.section { padding: 4.5rem 0; background: #fff; }
.section-alt { padding: 4.5rem 0; background: #f7fafb; }
.section-dark { padding: 4.5rem 0; background: #1d4a60; } /* Blue 800 — replaces Navy */
.section-lt { padding: 4.5rem 0; background: #f4fbfc; } /* hero/callout bands only */
@media(max-width:900px){
.ph-slug .aud-cards,
.ph-slug .feat-tiles,
.ph-slug .stats-grid { grid-template-columns: 1fr 1fr; }
.ph-slug .det-hero-inner { grid-template-columns: 1fr; }
}
@media(max-width:600px){
.ph-slug h1.page-title { font-size: 1.9rem; }
.ph-slug h2.sec-title { font-size: 1.7rem; }
.ph-slug .aud-cards,
.ph-slug .feat-tiles,
.ph-slug .stats-grid { grid-template-columns: 1fr; }
.ph-slug .det-cta { flex-direction: column; align-items: flex-start; }
}
(function(){
var KH_CUR = 'home';
var KH_VIEWS = ['home','nonprofits','volunteers','companies'];
window.khNavigate = function(id) {
if (!KH_VIEWS.includes(id) || id === KH_CUR) return;
var root = document.querySelector('.kh-lp');
var from = root.querySelector('#kh-view-' + KH_CUR);
var to = root.querySelector('#kh-view-' + id);
from.classList.remove('active');
from.style.display = 'none';
to.style.display = 'block';
to.getBoundingClientRect(); // force reflow
to.classList.add('active');
window.scrollTo({top: 0, behavior: 'instant'});
KH_CUR = id;
try { history.pushState(null,'','#kh-'+(id==='home'?'':id)); } catch(e){}
};
})();
.kh-lp .view { display: none; }
.kh-lp .view.active { display: block; animation: kh-vIn .28s ease both; }
@keyframes kh-vIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
Standing rules that apply to every page build across all three properties.
aria-hidden="true" on decorative instances.#f4fbfc is for hero bands and callout rows only — never the default page background.#1d4a60 is now the darkest color in the palette. Use it for headings, footers, dark section backgrounds, stats bars, and CTA strips.color: #fff !important.clip-path, which creates sharp corners on some browsers./kynd-hub/ without exception.:root.