One visual language across every TKAWEN product.
Engineered marks, design tokens, typography, and ready-made assets — for every product, surface, and partner. Single source of truth, generated from code.
1The system
One iconic geometric mark, used by every TKAWEN product. The parent uses three layers; products use two. Identity is carried by color and wordmark, never by icons inside the layers.
Geometry
22 × 22 layers, rx 5.5 (25% squircle ratio), offset (+8, −10). Cast shadow σ = 0.75, dy 1.2. Specular peak 36% at top-left.
Hierarchy
3 layers = TKAWEN parent (the platform). 2 layers = a product. The layer count alone communicates rank — no text required.
Color rules
Each product owns a 3-stop linear gradient. No off-palette tints. Wordmark accent matches the front gradient's mid stop.
2The family
Same shape language. Distinct color palette and wordmark per product. Click any tile to see its mark.
3Color tokens
Slate-based neutrals + four semantic colors + 11 product brand palettes. Drop tokens/index.css into any product to inherit the full token system.
Neutral scale
Semantic
Success
--tkw-success-*Warning
--tkw-warning-*Error
--tkw-error-*Info
--tkw-info-*4Typography
Inter for Latin, Cairo for Arabic, JetBrains Mono for code. One scale, six weights, paired with deliberate letter-spacing rules per script.
display-1
The future is layered.
display-2
Build, certified.
display-3
Algerian innovation, deployed.
h1
Engineered marks for every product
h2
One source of truth
h3
Color, type, geometry
body
Inter at 16 px, regular weight, 1.5 line-height. The default for paragraph copy across every TKAWEN product surface.
body / ar
Cairo بـ 16 بكسل، وزن regular، ارتفاع سطر 1.75 — الافتراضي للنصوص العربية في كل واجهات TKAWEN.
eyebrow
SECTION LABEL
mono
const tkawen = { engineered: true };
5Downloads
SVG marks · favicons · Apple touch · Android Chrome · Open Graph · brand kit. Pick a product, grab the format you need.
TKAWEN (parent)
tkawen.com
Algeria Certify
algeriacertify.com
PharmaPro
pharmapro.tkawen.com
TKAWEN Studio
studio.tkawen.com
TKAWEN Voice
tts.tkawen.com
TKAWEN Trust
trust.tkawen.com
TKAWEN Connect
connect.tkawen.com
TKAWEN Academy
academy.tkawen.com
TKAWEN ID
auth.tkawen.com
Get the full brand kit
Every SVG, every PNG, every favicon, every Open Graph image, design tokens, BRAND.md spec — in a single zip ready to drop into a product repo or hand to a partner.
Download tkawen-brand-kit.zip →~3 MB · contains 175+ files · regenerated from products.config.mjs
6Usage rules
Hard rules. Read them once before using a TKAWEN mark in production. Full text in BRAND.md.
DO
- Use the official files from this site — never recreate the mark by hand.
- Pair with the matching
logo.svgwhen explicit attribution is needed. - Use
-flat.svgfor sizes ≤ 32 px. - Use
-inversevariants on dark surfaces. - Maintain clear-space equal to one corner radius around the mark.
DON'T
- Don't recolor outside the sanctioned palette.
- Don't rotate, flip, skew, or stretch the mark.
- Don't add letters, glyphs, or icons inside the layers.
- Don't add custom shadows, glows, or 3D effects.
- Don't use parent mark for products or vice versa — layer count matters.