Yapmesh brand sheet
Voice
Plain, exact, warm. Yapmesh says what a thing does and whether it has been proven, in the words a good teacher uses: short sentences, real numbers, no adjectives doing the work of evidence. It is confident about the design and honest about the state of the build. It never sells fear; it names the days the network is gone and shows what still works.
Words
Say
- no internet, no server, no account
- phone to phone; in reach; nearby
- rides in a pocket; hand-carry
- sealed; signed; your key is your identity
- verified on phones; built, not yet field-tested
- Yapmesh, written as one word with a capital Y
Don't say
- mesh as a concept in the first sentence; the name carries it already
- military-grade, unhackable, 100% private, bulletproof
- trusted by, users love, join thousands
- revolutionary, disruptive, seamless
- YAPMESH, yapmesh, YapMesh, Yap Mesh, or "Yap" on its own
- any earlier working name of the code
The mark
Three directions were explored: A, the junction: four nodes, three links, the letter Y as a mesh fork with the amber message at its centre; B, the pocket-ride: a row of nodes with the message arcing over a gap; C, the lattice: a hexagonal ring of nodes around one lit node. A was chosen because the letterform is the diagram: the Y of Yapmesh is literally three phones meeting at one, the amber dot is the message at the hop, and it stays a recognisable Y at 16 pixels in one colour, which B loses (the arc closes) and C loses (the ring blurs). It also avoids the speech bubble every messenger uses.
Clear space and minimum size
Keep clear space around the mark equal to the diameter of one end node (about one eighth of the mark's height) on every side; around the lockup, the height of the cap "Y" on every side. Minimum size: mark 16 px (use the one-colour version below 24 px), lockup 24 px tall. On photographs use the white or black version, never the colour mark on a busy background.
Colour
Tokens are CSS variables in brand/tokens.css and JSON in brand/tokens.json, each with a light and a dark value. Every text token is at least 4.5:1 and every UI token at least 3:1 against the page and card backgrounds of its own theme (WCAG 2.2 AA), checked by the generator. Amber is the mark and large fills only; as text use the accent-text token.
Core
#0B6B57 · dark #3FD1A7
#F2A900 · dark #F5B82E
#8A5A00 · dark #F5B82E
#15202B · dark #E8EDF2
#4B5A69 · dark #A3AEBB
#FCFBF7 · dark #0E1116
#FFFFFF · dark #161B22
#F1EFE8 · dark #1F262E
#6B7785 · dark #9AA6B2
#B3261E · dark #FF8A80
Delivery states
#5F6B79 · dark #9AA6B2
#9A5B00 · dark #FFB74D
#6D3FC4 · dark #C4A5FF
#1D5FBF · dark #7FB2FF
#0B6B57 · dark #3FD1A7
Rungs
#3949AB · dark #9FA8FF
#0F7B6C · dark #4FD1C5
#2E7D32 · dark #7CD182
#1565C0 · dark #79B8FF
#B25400 · dark #FFA24D
#7B1FA2 · dark #D59BFF
#B0165A · dark #FF8BB8
#6D4C41 · dark #D2A58F
Type
Vazirmatn, a variable font (weights 100–900) with Latin and Arabic script in one family, self-hosted under the SIL Open Font License, subset into Latin, Latin Extended and Arabic files so a page loads only the script it shows. Headlines at weight 750, body at 400, Urdu body at 1.9 line height. Fallback stack: system-ui, Segoe UI, Roboto, Noto Sans, Noto Naskh Arabic, sans-serif. Test strings used: یپ: نہ انٹرنیٹ، نہ سرور، نہ اکاؤنٹ۔ آپ کی کنجی ہی آپ کی شناخت ہے۔ and رسائل موقّعة ومشفّرة من هاتف إلى هاتف.
Files
brand/logo/ SVG mark, wordmark and lockups in colour, black, white and one colour; PNG mark at 512 and 1024. brand/icons/ favicon.svg, favicon.ico (16/32/48), PNG 16–512, apple-touch 180. brand/android/ adaptive icon foreground, background and monochrome layers (SVG and 432 px PNG, safe zone respected). brand/og.png 1200×630. brand/tokens.css, brand/tokens.json.