A single source of truth for color, type, and tone. Use this for every customer dashboard, pricing page, pitch deck, ad creative, and PDF report.
These two colors carry the entire brand. Navy is the foundation: stable, trustworthy, premium. Gold is the accent: warmth, value, signal. Every other color in the system supports these two.
Three navy shades create depth in dark contexts. Use the darkest behind everything, mid-navy for surfaces, lightest for elevated cards or hover states.
Gold appears in three forms depending on the context. Use the lighter shade for gradients and warm highlights, deeper gold for text on light backgrounds where contrast matters.
The brand never uses pure stark white outside type. Cream adds warmth and premium feel. Three muted grays handle body text and meta info in light contexts.
These colors carry meaning. Use them only for their semantic purpose — never decoratively. A green that doesn't mean "good" breaks the visual language.
The brand operates in two contexts. Dark for digital products that users live inside (dashboards, app interstitials). Light for documents customers print or forward (pitch decks, PDF reports).
Background: --navy-dark with subtle gold radial gradient. Cards: rgba(255,255,255,0.04) on the dark background. Borders: rgba(201,168,76,0.18). Body text: rgba(255,255,255,0.85). Used in: dashboard, pricing.html, ad interstitials.
Background: #ffffff with cream #f7f6f0 as secondary surface. Borders: #e1ddc8. Body text: #5b6a8b. Gold text on white must use --gold-deep for AA contrast. Used in: pitch decks, PDF reports, the strategic roadmap.
Three small patterns repeat across the entire system. Use them consistently — they're how the brand is recognized.
Small uppercase label, 2.5px letter-spacing, gold color, with a 3px gold border on the left (or right in RTL). Used above every section title. CSS:
font-size: 9-11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); border-left: 3px solid var(--gold); padding-left: 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-light)); with color: var(--navy-dark); for the text. Hover: transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201,168,76,0.3);
Adds depth without distraction. Apply to body or hero containers in dark mode:
background-image: radial-gradient(ellipse at 20% 20%, rgba(201,168,76,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(26,39,68,0.9) 0%, var(--navy-dark) 100%);
Two fonts cover every need. Heebo for Hebrew interfaces, Inter for English interfaces and documents. Both share the same neutral, modern character so mixing feels natural.
--gold-deep (#a08232) or navy.linear-gradient(135deg, gold, gold-light) with color: navy-dark.
Drop this into the :root of any new file to inherit the complete palette. Already used by dashboard.html, pricing.html, admin index.html, and all PDF templates.
/* Hebrew Calendar Ad Platform — Brand palette */ /* Drop into the :root of any stylesheet */ :root { /* ─── Navy family ─── */ --navy: #1a2744; /* primary */ --navy-dark: #111b35; /* page bg dark */ --navy-light: #243358; /* elevated */ /* ─── Gold family ─── */ --gold: #c9a84c; /* accent */ --gold-light: #e8c97a; /* gradient end */ --gold-deep: #a08232; /* gold on light bg */ /* ─── Neutrals ─── */ --white: #ffffff; --cream: #f7f6f0; /* warm doc bg */ --border: #e1ddc8; /* light borders */ --text: #1a2744; /* primary text */ --muted: #5b6a8b; /* body in light */ --soft: #8b97b3; /* meta info */ /* ─── Semantic ─── */ --success: #25d366; --danger: #ff6b6b; --info: #6ab0ff; --warning: #8a5d0b; /* ─── In dark contexts only ─── */ --text-soft: rgba(255,255,255,0.85); --text-muted: rgba(255,255,255,0.55); --gold-soft: rgba(201,168,76,0.12); --gold-border: rgba(201,168,76,0.25); }