# 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-playbook.md Writer's reference: rules, examples, templates │ ├── logos/ 13 SVG variants + 19 PNG renders │ ├── 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 │ ├── 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{,-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 │ ├── og-image-{light,dark,hero}.png 1200×630 OG cards │ ├── twitter-card.png 1200×675 │ ├── 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 │ └── 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 ``` --- ## 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 a company. The first two operating companies inside it are [**Imali**](https://imali.ebstar.co) (fintech for SA's 1.6M informal merchants) and [**Chingu**](https://chingu-ai.ebstar.co) (voice AI care for Korean seniors living alone). More are intended over time — possibly outside software. The thread across them: each operating company is built around a specific population that markets and institutions tend to underweight. The *user* is the constant; the *industry* is the variable. **Five writing rules** (full text, examples, and surface-by-surface guidance in `guidelines/voice-playbook.md`): 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:** company · group · 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. See the full playbook for: voice by surface · numbers policy (measured / target / illustrative) · composite-content sunset rules · crisis-comms register · how the products themselves speak to users · brand architecture (Imali / Chingu / Ebenworks / Ebstar) · AI-copy policy. --- ## 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.0` — first release. Built from the source logo as-is. If you change the logo, recolor the brand, or add new variants, bump to `v1.1` 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.**