Clarity
A clean, focused visual system that expresses who we are.
Brand guidelines
Innovation, with a clear identity.
The visual language of Digital Innovation. A practical system for consistent, confident communication.
A clear identity for a more innovative tomorrow.
DIGITAL INNOVATION01 / Foundation
Built to move ideas forward.
Our visual identity is a foundation for clear, consistent and confident communication across every touchpoint.
Precision
Consistent elements that work together across every medium.
Progress
A modern identity that supports what comes next.
Connection
A unified brand that speaks to people and possibilities.
02 / Logo
One mark. A consistent signature.
The approved horizontal signature combines the hexagonal symbol with the Arabic and English lettering. Choose the version for the surface; keep every part together.
Clear space
x = ¼ symbol widthLeave at least x around every edge. Increase the space beside photography, borders and other logos.
Minimum size
192 px logo · 32 px symbolUse the full signature at 192 px wide or larger (80 mm in print). Use the separate symbol in compact navigation. Check fine details at final size; 16 px is a browser favicon fallback only.
Keep it intact
No stretching, mirroring or effectsKeep the symbol, lettering, proportions and blue unchanged. Do not mirror it in Arabic, crop it, add shadows or place it on busy photography.
A recognizable symbol, at every touchpoint.
Use the approved standalone symbol for compact navigation, avatars and app icons. Square exports add transparent breathing room without cropping the hexagon.
The two approved SVG masters are preserved unchanged. Web derivatives retain every path and proportion. Only the dark Arabic and English descriptor text becomes white in the reverse version; the blue symbol and wordmark stay unchanged.
Use the original on white or pale surfaces and the white-text version on navy. On photography, place the logo on a solid panel. Keep the square icon padding; app icons are not maskable.
03 / Colors
Confidence in every color.
Navy anchors the system. Blue signals action. Cyan adds a considered accent. White gives the message space.
Navy
#07152FAction blue
#216B9FCyan
#35BFEAWhite
#FFFFFFPale surface
#F3F7FCMuted text
#53647AApproved logo blue
#297DBEArabic logo text
#213B57English descriptor
#032F42Suggested color balance
55% white · 30% navy · 10% pale surface · 5% blue. Use cyan sparingly.
Functional colors
Use navy text on cyan and pale surfaces. Pair every status color with a label or icon. The approved SVG uses #297DBE blue, #213B57 Arabic text and #032F42 English descriptor text. Use #216B9F for readable white-text actions; reserve #297DBE for the logo and decorative accents.
04 / Typography
Two languages. One voice.
Different scripts. A shared purpose. Deliberate weights and comfortable line heights keep every message readable.
Changa / شانجا
ابتكار يترك أثرًا.
200300400500600700800
Kumbh Sans
Ideas into impact.
400 500 600 700
| Role | Desktop size | Sample |
|---|---|---|
| Display | 72 px | Ideas into impact. |
| Heading | 48 px | Ideas into impact. |
| Title | 28 px | Ideas into impact. |
| Body | 18 px | Ideas into impact. |
| Label | 14 px | Ideas into impact. |
Do not add letter spacing to Arabic. Use flexible sizes, short headings and a comfortable reading rhythm.
05 / Visual language
Space to think. Structure to build.
Connection, rhythm and precision give the brand a recognizable visual language without unnecessary decoration.
Connection
Fine connected lines express a relationship between ideas. Keep the composition open.
Rhythm
An 8px base spacing system. Use 4px for small optical adjustments.
Precision
24px outline icons, 1.7px strokes and rounded joins. Icons remain independent of the logo.
06 / Components
Simple by design. Built for everyone.
Clear actions, visible focus and readable feedback. Examples below demonstrate the system locally.
Display example only. No data is submitted.
Quiet navigation
An 80 px desktop header, a 192 px signature and one clear current-page marker. Keep sign-in secondary. On small screens, use a 68 px header and the 40 px symbol.
Clear actions
Use one primary action per section, 48 px buttons, 44 px touch targets and visible keyboard focus. Switch language directly without an extra menu.
Space with purpose
Use a 4 px spacing scale, 20 px mobile gutters and a 1280 px content limit. Keep surfaces white, borders light and corners at 8 or 12 px.
Calm interaction
Use short 180 ms feedback, consistent outline icons and restrained shadows. Respect reduced motion. Navigation must work with keyboard, touch and Escape.
07 / Applications
A system that works everywhere.
One identity, adapted to the medium. These layout examples demonstrate hierarchy and spacing.
Ideas into impact.
A clearer digital future.
Digital Innovation Technology CompanyA clearer digital future.08 / Voice
Clear. Confident. Human.
Explain the value first. Use natural language and support claims with evidence. Write naturally in each language.
Use
We turn ideas into useful digital experiences.
Avoid
Unproven superlatives and technical jargon.
09 / Downloads
Everything you need to stay consistent.
Approved SVG masters, light and dark logos, standalone symbol, transparent PNGs, vector PDFs, favicons, device icons, social preview, tokens, fonts and usage rules in one package.
Download brand kit
Self-hosted Changa (200–800) and Kumbh Sans, with their OFL licenses, are included.
The logo belongs to Digital Innovation. Font redistribution follows the bundled OFL licenses.
Choose the right file.
SVG for scalable artwork. Transparent PNG for documents and presentations. Vector PDF for print. Square icons for browsers and devices. Every file below is included in the kit.
Approved SVG masters 2
Web SVG logos 3
Browser & device icons 10
- Padded square iconSVG · 46.0 KBditc-icon.svg
- Padded square iconPNG · 16 × 16 · 0.4 KBditc-icon-16.png
- Padded square iconPNG · 32 × 32 · 0.9 KBditc-icon-32.png
- Padded square iconPNG · 48 × 48 · 1.4 KBditc-icon-48.png
- Padded square iconPNG · 64 × 64 · 2.0 KBditc-icon-64.png
- Padded square iconPNG · 180 × 180 · 6.8 KBditc-icon-180.png
- Padded square iconPNG · 192 × 192 · 7.5 KBditc-icon-192.png
- Padded square iconPNG · 512 × 512 · 24.1 KBditc-icon-512.png
- Browser favicon (16–64 px)ICO · 4.8 KBfavicon.ico
- Web icon manifestWEBMANIFEST · 0.4 KBsite.webmanifest
Transparent PNG exports 7
- Original colors / light surfacesPNG · 640 × 207 · 24.6 KBditc-logo-horizontal-640.png
- Original colors / light surfacesPNG · 1280 × 414 · 55.3 KBditc-logo-horizontal-1280.png
- Original colors / light surfacesPNG · 2560 × 827 · 128.8 KBditc-logo-horizontal-2560.png
- White text / dark surfacesPNG · 640 × 207 · 23.8 KBditc-logo-horizontal-reverse-640.png
- White text / dark surfacesPNG · 1280 × 414 · 53.8 KBditc-logo-horizontal-reverse-1280.png
- White text / dark surfacesPNG · 2560 × 827 · 125.2 KBditc-logo-horizontal-reverse-2560.png
- Approved symbolPNG · 1024 × 1183 · 69.7 KBditc-symbol-1024.png
