# Ebenworks · Brand Kit **Better products. Better people. Better tomorrow.** A complete, production-ready brand asset kit derived from the source Ebenworks logo. This bundle is built to be **dropped into a real product** — not just admired in a PDF. --- ## What's inside ``` ebenworks-brand-kit/ ├── source-logo.svg Original master file (preserve this) ├── README.md You are here │ ├── guidelines/ │ └── index.html Brand book — open in a browser │ (voice guidance now lives in repo CLAUDE.md) │ ├── logos/ Ebenworks corporate marks │ ├── ebenworks-lockup.svg ★ Horizontal full lockup (mark + │ │ wordmark), content-cropped, real │ │ counter holes. THE default mark │ │ for app headers/navs — use this, │ │ not the bare EW monogram. │ ├── ebenworks-lockup-on-dark.svg Same, white WORKS for dark UIs │ ├── ebenworks-lockup{,-on-dark}.png 900×121 raster of the same pair, │ │ transparent. For renderers with │ │ no SVG support (the Chingu React │ │ Native apps) — prefer the SVG │ │ anywhere that can take it. │ ├── ebenworks-primary.{svg,png} Full lockup with tagline │ ├── ebenworks-primary-on-white.{svg,png} Same on solid white │ ├── ebenworks-stacked.{svg,png} Mark + wordmark, no tagline │ ├── ebenworks-mark.{svg,png} EW monogram only │ ├── ebenworks-wordmark.{svg,png} EBENWORKS only │ ├── ebenworks-mono-{black,white}.svg Single-color full lockup │ ├── ebenworks-orange.svg Single-color all-orange │ ├── ebenworks-stacked-mono-{black,white}.svg │ ├── ebenworks-mark-{mono-black,mono-white,orange}.svg │ ├── backed-by-ebenworks{,-on-dark}.svg Badge for portfolio companies │ │ │ ├── products/ All nine: each product's OWN mark on one │ │ │ shared tile (512², inset 32, radius 112, │ │ │ the product's own ground). Opaque, so │ │ │ there is no reversed variant. │ │ ├── *-icon.png 512² master │ │ ├── *-icon-256.png for ~72px — brand portal │ │ ├── *-icon-128.png for ~44px — card marks │ │ ├── *-icon-64.png for ~20px — identity badges │ │ ├── source/ the real art, vendored from each │ │ │ product's repo. Never hand-edit. │ │ └── build-product-icons.py composes them; --sync re-pulls source/ │ │ │ └── partners/ Partner & client marks │ └── {kafcon,statotech,statosports,zim-korea-hub,esotericones}-mark.png │ ├── favicons/ Drop the contents into your web root │ ├── favicon.ico Multi-res Windows favicon │ ├── favicon.svg Modern browsers │ ├── favicon-{16..512}.png PNG fallback ladder │ ├── apple-touch-icon{,-on-dark}.png iOS home screen, 180×180 │ ├── android-chrome-{192,512}.png Android / PWA standard │ ├── android-chrome-maskable-{192,512}.png Maskable PWA icons │ ├── safari-pinned-tab.svg Single-color (Safari requirement) │ ├── site.webmanifest PWA manifest │ ├── browserconfig.xml Legacy Windows tile │ └── favicon-html-snippet.html tags, ready to paste │ ├── social/ Platform-correct dimensions │ ├── linkedin-personal-banner.png 1584×396 │ ├── linkedin-company-banner.png 1128×191 │ ├── youtube-banner.png 2560×1440 (safe zone respected) │ ├── profile-{400,1024}-{light,dark,round} Avatar variants │ ├── social-post-square.png 1080×1080 IG / general │ └── ebenworks-email-signature.png │ ├── og/ Share cards — the live site links these, │ ├── og-image-{light,dark,hero}.png 1200×630 OG cards │ ├── twitter-card.png 1200×675 │ ├── bidwright-lockup.png │ └── press-*.jpg Press article images │ so treat these URLs as stable. │ ├── founder/ · photo/ · posters/ · product-shots/ │ Site editorial imagery │ ├── open-source/ Project images for /open-source │ └── {hwpkit.jpeg, claude-token-tracker.png, claudehop.png, │ browser-llm-api.{svg,png}} │ └── tokens/ ├── tokens.css CSS variables, light + dark mode ├── tokens.json DTCG-style for design tools ├── tailwind.config.js Tailwind extend block └── theme.ts Typed TS constants ``` > **Share cards live in `og/`, not `social/`.** `social/` holds the platform > banners and avatars; the 1200×630 OG cards and the Twitter card are in `og/`, > which is what the site's metadata and this brand book point at. They used to > be duplicated in both places — don't reintroduce the second copy. --- ## Brand at a glance ### Colors | Role | Hex | RGB | Use | | ------------ | --------- | --------------- | -------------------------------- | | Orange | `#FC5F00` | 252, 95, 0 | Brand accent, CTAs, highlights | | Orange Deep | `#DA4300` | 218, 67, 0 | Pressed / hover state | | Ink | `#1D1009` | 29, 16, 9 | Body text | | Charcoal | `#28282B` | 40, 40, 43 | UI dark / wordmark dark | | Paper | `#FAF8F4` | 250, 248, 244 | Default background | | White | `#FFFFFF` | 255, 255, 255 | Surfaces | The system runs on **one orange**, **one charcoal**, and **air**. Use orange surgically. ### Typography - **Display:** Bricolage Grotesque (700–800) - **Body:** Geist (400–600) - **Mono:** Geist Mono (400–500) All three are open-source and on Google Fonts. If you're already standardized on Inter, swap it in for Geist — the system holds. ### Logo Three components: **EW mark** + **EBENWORKS wordmark** + tagline. Pick the variant that fits the context — don't make one variant do every job. | Variant | Use for | | ----------- | ------------------------------------------------- | | Primary | Hero, brand pages, formal docs, first impressions | | Stacked | Everyday — slides, signatures, product chrome | | Mark | Tight spaces — favicons, app icons, avatars | | Wordmark | When a strong mark already lives on the page | | Monochrome | Single-color contexts (newsprint, silkscreen) | --- ## Quick start ### Web — drop the favicons in ```bash cp favicons/* /your/site/web/root/ ``` Add the snippet from `favicons/favicon-html-snippet.html` to your ``. Done. ### CSS — pick your token strategy ```css /* Option A: copy tokens.css contents into your stylesheet root */ @import "tokens/tokens.css"; .headline { color: var(--ew-orange); } .body { color: var(--ew-text); background: var(--ew-bg); } ``` ### Tailwind ```js // tailwind.config.js — paste the extend block const ewTheme = require('./tokens/tailwind.config.js'); module.exports = { ...ewTheme, content: ['./src/**/*.{js,ts,jsx,tsx,html}'], }; ``` ### TypeScript ```ts import theme, { colors } from './tokens/theme'; const Button = styled.button` background: ${colors.brand.orange}; &:hover { background: ${colors.brand.orangeDeep}; } `; ``` ### React + inline tokens ```tsx import { colors, fontFamily } from './tokens/theme'; export const Header = () => (

Better tomorrow.

); ``` --- ## How the logo files were generated The source SVG was decomposed by path index: | Paths | Component | | ------- | ---------------------------------------- | | 0 | White background rectangle | | 1–10 | EW monogram (with gradient defs) | | 11–18 | EBENWORKS wordmark (compound paths) | | 19–65 | Tagline characters | Variants are produced by selecting subsets, optionally recoloring all paths, and re-rendering. The source SVG is shipped with the kit — anything here can be regenerated from it. --- ## Brand voice — short version Ebenworks is one company, founded 2026, shipping a group of products — **nine live in production**: [**Imali AI**](https://imali.ebenworks.co) (WhatsApp business OS, live in South Africa, Botswana, Nigeria, Kenya and Zimbabwe, proven first in South Africa's ~1.2–1.3M reachable informal merchants), [**Chingu Care AI**](https://chingu-ai.ebenworks.co) (voice AI care for Korean seniors living alone), **Phila Health Ecosystem** (offline-first primary care), **BidWright Tender AI** (bids & tenders), [**StatoSports**](https://statosports.statotec.com) (tournament platform), [**Diaspry Community OS**](https://diaspry.ebenworks.co) (diaspora community platform), **Izwi Music OS**, **Tzohar Sites** and **A–Z Dates**. Official names follow `infra/docs/NAMING.md`. If a product earns its own company at scale, that is a milestone, not the starting framing. > **StatoSports and Diaspry are products, not client work.** Both are Ebenworks > products built with Statotech Systems. StatoSports lives on Statotech's domain > because Statotech hosts it — that is hosting, not ownership. The work each one > brought in (KAFCON and the Liberian Association in South Korea's Independence > Day competitions; the Zim-Korea Hub) is what belongs under "work". This was > mis-filed on the site until August 2026; don't reintroduce it. > > **Public copy credits "built with Statotech Systems" and stops there.** The > ownership split is a data-room fact and is not written on the public site or in > this kit (founder direction, 2026-08-05). This file ships to third parties, so > it follows the same rule as the site. > Imali IS genuinely multi-country as of 2026-07-01 — South Africa, Botswana, > Nigeria, Kenya and Zimbabwe, each on its own currency and tax regime. Don't > present it as South-Africa-only anymore. The remaining limits: isiZulu/ > isiXhosa are South-Africa-only (English elsewhere), and only 5 of the 21 > supported currencies are live markets. See the claims guardrails in the > repo's `CLAUDE.md` / `docs/claims-fact-audit.json`. The thread across them: each product is built around a specific population that markets and institutions tend to underweight. The *user* is the constant; the *industry* is the variable. > **Current site voice (August 2026):** plain, concrete English written by an > engineer who did the work. The "confident enterprise" register tried earlier > in 2026 was reverted — it read as AI-generated filler. No > "production-grade", no "engineered end to end", no "across the portfolio". > The canonical, up-to-date guidance is in the repo's `CLAUDE.md` → "Voice & > content". **Writing rules** (the durable core): 1. **Plain over polished.** Shortest word that fits. 2. **Specific beats abstract.** TLS 1.3 in transit — not "bank-grade security." 3. **Local language, when there is one.** *spaza*, *kasi*, *Gyeongsang* — not "regional." 4. **Honest about stage.** Pre-pilot is pre-pilot. Targets labeled as targets. 5. **Technical proof, only when it pays its weight.** Show the stack only when it answers a real user question. **Manifesto language** (*the unseen, the underserved, the marginalized*) belongs in essays, manifestos, and press — not on feature cards or push notifications. **Yes-words:** product · products · group · company · serve · for *[named population]* · pilot · pre-pilot · POPIA Art 72 · PIPA Art 23 **No-words:** platform · solution · ecosystem · emerging markets · bank-grade · revolutionary · best-in-class · "for everyone" **Tagline as a causal chain, not a triplet:** *Better products* (the craft we ship) → *Better people* (the populations served) → *Better tomorrow* (the systemic outcome). Order matters. For the current, authoritative voice + claims guidance (numbers policy, brand architecture, AI-copy policy, per-surface voice) see the repo's `CLAUDE.md` ("Voice & content") and `docs/claims-fact-audit.json`. (An earlier `voice-playbook.md` is not shipped in this snapshot.) --- ## Accessibility notes - **Orange 500 (`#FC5F00`) on Paper** — passes WCAG AA for **large text only** (3:1). For body copy, use Ink or Charcoal. - **Orange 700 (`#B23700`) on Paper** — passes WCAG AA for normal body text. - **Mark on photographs** — always use a solid backing (paper or charcoal) or the mono-white variant on a dark scrim. Don't drop the color mark directly on imagery. - **Min target size for tappable controls** — 44×44 px (per Apple HIG / WCAG). --- ## Versioning `v1.2` (2026-08-14) — product icons are each product's **own** mark again, composed onto one shared tile instead of drawn to a common glyph grammar. Art is vendored in `logos/products/source/` from each product's repo, so the kit and the product it names can't show different logos. PNG ladder (512/256/128/64) replaces the SVG and the `-on-dark` / `-mono` variants. StatoSports' accent moves to its own brand navy `#0B5A94`. `v1.1` (2026-08-14) — logo SVGs content-cropped to real bounding boxes (the art used to float inside a 2048² canvas), all PNG renders regenerated from the cropped sources at long-edge sizes, dark-variant naming standardized on `-on-dark`, partner marks suffixed `-mark`, token files synced to the live site (Geist stack). Fleet rules: `infra/docs/BRAND.md` in the workspace. `v1.0` — first release. Built from the source logo as-is. If you change the logo, recolor the brand, or add new variants, bump the version and update `guidelines/index.html` along with the token files. Keep the source SVG untouched as the master. --- ## License The logo and brand assets in this kit are the property of Ebenworks. Use them in accordance with your internal brand policy. The fonts referenced in this kit (Bricolage Grotesque, Geist, Geist Mono) are licensed under the SIL Open Font License — free to use commercially. --- **Better products. Better people. Better tomorrow.**