// Logo system for Tzedoka.org
// Mark: an open hand with a coin / seed (the gesture of giving) inside a circle.
// Reads symbolically — no fake Hebrew letter. Renders as pure geometry so it scales cleanly.
function LogoMark({ size = 56, color = 'var(--tz-gold)', accent = 'var(--tz-blue)', variant = 'tzadi' }) {
const s = size;
if (variant === 'tzadiBadge') {
return (
);
}
if (variant === 'coin') {
return (
);
}
// default: 'tzadi' — the Hebrew letter צ, geometric (approved version)
return (
);
}
function Wordmark({ color = 'var(--tz-blue)', goldDot = 'var(--tz-gold)', size = 28, family }) {
const fam = family || 'var(--tz-display)';
const letterStyle = { display:'inline-block', willChange:'transform' };
return (
{'tzedoka'.split('').map((ch,i)=>(
{ch}
))}
.
{'org'.split('').map((ch,i)=>(
{ch}
))}
);
}
// Wraps the mark in a contrasting rounded-square badge — used on dark backgrounds
// so the blue base stroke doesn't disappear into the navy.
function MarkBadge({ size=40, bg='var(--tz-cream)', children }){
// Pad the mark inside a rounded square. Mark renders at ~78% of badge size.
return (
{children}
);
}
function Logo({ variant = 'markLeft', size = 'md', color = 'var(--tz-blue)', mark = 'var(--tz-gold)', accent = 'var(--tz-blue)', dot = 'var(--tz-gold)', markVariant='tzadi', badge=false, badgeBg='var(--tz-cream)' }) {
const sizes = { sm: { mark: 28, word: 18 }, md: { mark: 40, word: 26 }, lg: { mark: 64, word: 44 }, xl:{mark:96,word:64} };
const s = sizes[size] || sizes.md;
if (variant === 'wordmark') {
return ;
}
const renderedMark = badge ? (
) : (
);
if (variant === 'stacked') {
return (
{badge ? renderedMark : }
);
}
return (
{renderedMark}
);
}
function LogoExplorations({ ctx }){
const { t } = ctx;
return (
Primary lockup
The fundraising platform for Jewish nonprofits — built once, yours forever.