Brand Guidelines v1.1
Art Direction
& Brand System
Complete logo design system, visual identity, and art direction guidelines for the Innosoft brand.
Complete logo design system, visual identity, and art direction guidelines for the Innosoft brand.
The Innosoft logo features a geometric icon with interlocking paths and a bold custom wordmark. Available in SVG and high-res PNG.
The icon is built on a hexagonal grid, symbolizing structure, interconnection, and innovation.
Built on a regular hexagon — conveying stability, modularity, and tech precision.
Two interlocking chevron paths form an abstract "S" — representing data flow and innovation.
White paths on blue — maximum contrast, high legibility from favicon to billboard.
Always maintain a minimum clearspace of 1× the icon height around the full logo.
A high-contrast palette anchored in electric blue with deep darks.
Beyond the primary blue, the is.sa system uses a vivid secondary spectrum for illustrations, product surfaces, data categories, and status states. Use these sparingly — one accent per context — to add energy without breaking the blue-led hierarchy.
Low-saturation companions for backgrounds, cards, and badge fills. Pair each tint with its parent accent.
Use these for backgrounds, buttons, and accent elements.
linear-gradient(135deg, #2D7FF9, #00D4FF)linear-gradient(135deg, #1A5FD4, #2D7FF9)linear-gradient(180deg, #0A0A0F, #1A1A2E)linear-gradient(135deg, #2D7FF9, #865CFD, #4BE7F8)linear-gradient(135deg, #865CFD, #D8CBFE)Outfit serves as the primary English typeface — geometric, modern, and highly legible. Alexandria is the Arabic counterpart, providing seamless bilingual harmony.
A geometric sans-serif with a clean, contemporary feel. Used for all English-language display and body text across digital and print.
خط الكساندريا هو الخط العربي الرسمي للعلامة التجارية. يتميز بتصميم هندسي عصري يتناسب مع خط Outfit الإنجليزي.
The type system is designed for seamless bilingual applications. Outfit and Alexandria share geometric DNA, ensuring visual harmony across both scripts.
Innosoft empowers teams to build, deploy, and scale software solutions with confidence. Our platform bridges the gap between vision and execution.
إنوسوفت تمكّن الفرق من بناء ونشر وتوسيع الحلول البرمجية بثقة. منصتنا تربط بين الرؤية والتنفيذ بسلاسة تامة.
From startups to enterprises, our tools adapt to your needs and grow with your ambitions.
من الشركات الناشئة إلى المؤسسات الكبرى، أدواتنا تتكيف مع احتياجاتك وتنمو مع طموحاتك.
Built for the modern web with microservices, containers, and serverless at its core.
مصممة للويب الحديث مع الخدمات المصغرة والحاويات والحوسبة بدون خوادم.
When displaying English and Arabic side by side, maintain equal visual weight. Arabic headlines may need 2–4px smaller font size to match x-height.
Arabic text requires slightly more line height than English. Use 1.8–2.0 for Arabic body vs 1.6–1.7 for English to ensure readability.
Always set dir="rtl" on Arabic containers. Never mirror the icon — it reads correctly in both directions.
Consistent 24px line-icons with 2px stroke, rounded caps, and brand blue.
Protect brand consistency with these critical guidelines.
Use the logo in its original proportions with proper clearspace.
Never stretch, skew, or distort the logo.
Use the dark wordmark on light backgrounds for contrast.
Never place on busy or clashing backgrounds.
Use the icon standalone for favicons and app icons.
Never rotate the logo.
How the brand lives across touchpoints.
Dark variant with the original logo
Clean header with blue accent rule
Dark gradient with radial blue glow
White icon on gradient blue
Motion should feel swift and intentional.
Button feedback & hover
200ms ease-outContent entry & transitions
400ms cubic-bezier(0.16, 1, 0.3, 1)Processing & async ops
1200ms linear infinitePhotography should reinforce the brand's modern, innovative spirit.
Clean, high-contrast, cool-toned. Prefer dark environments with blue accent lighting.
Technology in use, data visualization, collaborative workspaces, code/screen details.
Subtle blue color grade. Slightly desaturated with lifted shadows. Never use heavy filters.
Geometric, line-based using brand colors. Isometric 3D welcome. Avoid hand-drawn styles.
Ready-made desktop wallpapers and corporate laptop lock screens built from the official logo. Open any design full screen, or download it as a 4K PNG.
An embeddable trust badge for products we build. Drop it in a product's footer to signal it's an InnosoftSA product and link back to the marketplace. Self-contained HTML + CSS — no dependencies.
A machine-readable brand brief for LLMs and design agents generating Innosoft (is.sa) assets, UI, or copy. Paste the block below into your agent's context so output stays on-brand.
Anchor every composition in the primary blue (#2D7FF9) over deep dark backgrounds. Treat secondary colors as accents, never as the dominant tone.
Use a single secondary color (violet, green, amber, cyan, or red) per screen or component. Mixing accents dilutes the identity.
Outfit for English, Alexandria for Arabic. Tight tracking on display, generous line-height on body. Never substitute generic system fonts.
Swift, intentional transitions (200–400ms, ease-out). No bouncing, no decorative spin. Motion should clarify, not entertain.
# Innosoft (is.sa) — Brand Brief for AI Agents
## Identity
name: Innosoft
domain: is.sa
voice: confident, precise, modern, technical-but-clear
tone: "trusted engineering partner — never hype, never casual"
## Colors
primary: #2D7FF9 # electric blue — lead color
primary_dark: #1A5FD4
accent_cyan: #00D4FF
bg_dark: #0A0A0F # default canvas
bg_card: #12121A
text_primary: #F0F0F5
secondary: # accents only — one per surface
violet: #865CFD # illustration / feature highlight
green: #39D94E # success
amber: #F49E08 # warning
cyan: #4BE7F8 # tech glow
red: #F10909 # error / destructive
tints: [#D8CBFE, #F8EAD1, #EAEBEB] # soft fills
## Typography
english: "Outfit" # weights 300–900, geometric sans
arabic: "Alexandria" # bilingual harmony
display: weight 800, letter-spacing -2px
body: weight 400, line-height 1.7
## Rules
do:
- lead with primary blue on dark backgrounds
- use ONE secondary accent per screen/component
- keep generous negative space; favor 16px radii
- motion 200–400ms ease-out, purposeful only
dont:
- dont use purple gradients on white (generic AI look)
- dont mix multiple accent colors in one surface
- dont substitute Inter/Roboto/Arial for the brand fonts
- dont stretch, recolor, or add effects to the logo
## Gradients
primary: linear-gradient(135deg, #2D7FF9, #00D4FF)
accent: linear-gradient(135deg, #2D7FF9, #865CFD, #4BE7F8)