Clear
Understandable decisions, direct language, and journeys that never leave people guessing.
Visual identity system · Version 2.1
Clear technology. Impact you can trust.
Hassoud Technology brings engineering precision and human clarity into one system: distinctive in its mark, flexible in application, and designed for Arabic and English from day one.
#06253FPrimary
RTL / LTRBilingual
v2.1Version
HTECH / FOUNDATION
Strategic foundation
We are more than a technical delivery team. We turn a clear idea into a dependable digital product and make every detail communicate that before we say it.
We build smart software and responsible digital growth through clear language and dependable delivery.
Dependable
Security, quality, and maintainability are visible in the experience, not just the promise.
Intelligent
Solve the problem before choosing the tool, then use only the technology the outcome needs.
Human
Technology that respects time, privacy, and access at every point of contact.
HTECH / MARK
Logo system
The logo is a fixed asset. Use approved files as supplied—never redraw, recolor, distort, or alter their details.
Clear space
At least the height of the symbol corner
Minimum size
160 px digital · 38 mm print
Never do this
Do not stretch, rotate, shadow, recolor, or separate the symbol from the name unless an approved standalone asset is issued.
HTECH / PALETTE
Color palette
The navy and cyan are taken directly from the logo master. Neutrals expand the system without replacing the brand colors.
Recommended balance
55% warm white, 30% navy, 10% tech mist, and 5% cyan. Cyan signals action and movement; it is not a dominant background.
STATUS / FEEDBACK
Functional colors
Reserved for states and feedback; they never replace navy and cyan as brand expression. Always pair color with text or an icon.
HTECH / TYPE
Typography system
Decisive headlines and comfortable reading. Arabic and Latin are treated as equal voices within the same system.
حلول رقمية تُبنى بوضوح.
400 · 500 · 600 · 700Built for clarity.
400 · 500 · 600 · 700Aa أب
- Headlines: 600–700 weight and short lines.
- Body: 400–500 weight with relaxed leading.
- Never add artificial tracking to Arabic.
- Numbers and technical data use Sora.
RESPONSIVE TYPE
Digital type scale
Reference values for large screens. Use fluid sizing and step down progressively on smaller screens without flattening hierarchy.
| TOKEN | PX / LINE | WEIGHT | SAMPLE |
|---|---|---|---|
| Display | 72 / 76 | 650 | Clarity builds trust |
| Heading 1 | 56 / 62 | 650 | Clarity builds trust |
| Heading 2 | 40 / 48 | 600 | Clarity builds trust |
| Heading 3 | 28 / 36 | 600 | Clarity builds trust |
| Body Large | 20 / 34 | 400 | Clarity builds trust |
| Body | 16 / 28 | 400 | Clarity builds trust |
| Label | 14 / 20 | 600 | Clarity builds trust |
| Caption | 12 / 18 | 500 | Clarity builds trust |
HTECH / VISUAL LANGUAGE
Visual language
The visual language follows the mark’s logic: connected paths, deliberate angles, and generous negative space. Technical, never cold.
Connected path
One line links idea to delivery across diagrams and section dividers.
Geometric angle
A single angle visually derived from the mark, reserved for direction and transition.
Intelligent space
Clear space gives content priority and reduces visual noise.
GRID / SPACE / SHAPE
Layout system
A fluid grid, consistent spacing rhythm, and quiet edges make different products feel like one family.
Desktop columns
Fluid margins and 24px gutters, grouping content into clear modules.
Mobile columns
One clear sequence with priority on content and the primary action.
Spacing unit
Fine details may use 4px while the main rhythm follows multiples of 8px.
Container radius
For major surfaces; compact controls use a 10–12px radius.
4812162432486496
IMAGE DIRECTION
Photography & composition
Use honest, calm imagery that shows context, work, and outcome. Avoid staged visuals and generic, cluttered technology stock.
- ✓One clear subject with negative space for copy
- ✓Natural light and deliberate contrast
- ✓Subtle color treatment that preserves reality
- ✓Geometry that explains rather than decorates
HTECH / UI
Digital components
Buttons, navigation, and fields behave consistently across products: clear, quiet, and keyboard accessible.
DefaultHoverFocusActiveLoadingDisabled
SuccessChanges saved successfully.
WarningReview the details before continuing.
ErrorThe request could not be completed.
InformationAn update is available.
CARDS / DATA / EMPTY
Product patterns
Touch targets are at least 44px, focus rings stay visible, and disabled states never rely on color alone.
H.
01 / PRODUCT
Digital product development
A clear path from discovery through launch and improvement.
Read the case studyPROJECT / 024
On trackDelivery status
Discovery100%
Design72%
Build38%
No results yet
Adjust your filters or start a new request.
Touch targets are at least 44px, focus rings stay visible, and disabled states never rely on color alone.
HTECH / APPLICATIONS
Brand applications
One system scales from a fast social post to an executive deck and a product interface while keeping message and mark in their proper place.
HTECH / 01Clear ideas move faster.
Social post
1080 × 1080
STRATEGY / 2026From decision to a product that works.H.
Deck cover
16 : 9
HTECHProject pulse
72%
Mobile interface
390 × 844
PROPOSAL / 024Digital platform proposal
Formal document
A4 / PDF
Every piece starts with one idea, one headline, and one clear action. The logo is never repeated or used as decoration.
HTECH / ICONS
Icon system
A line icon system independent from the logo, with rounded corners and consistent stroke. Icons never borrow from or compete with the mark.
24 × 24GRID1.7 pxSTROKEROUNDCAP / JOIN
HTECH / VOICE
Brand voice
We speak like a technical team that understands business: precise, calm, and honest about what we know and what needs discovery.
Direct
Lead with value, then add only the detail that helps.
Evidence-led
Never make a claim we cannot substantiate.
Reassuring
Quiet confidence without hype or noise.
Bilingual
Write naturally for each language, never word-for-word.
“We build a clear path from the problem to a product you can depend on.”
“We deliver the world’s best revolutionary solutions with no limits!!!”
HTECH / ACCESS
Digital identity & accessibility
A successful identity works for every user and every screen, not only the perfect presentation.
15.2:1
Primary navy on warm white contrast
WCAG AAA- Component-level RTL and LTR support
- WCAG 2.2 AA contrast or better
- Touch targets of at least 44×44px
- Complete keyboard navigation
- Respect for reduced-motion preferences
- Optimized images with meaningful alternatives
MOTION SYSTEM
Meaningful motion
180ms for immediate feedback, 240ms for standard transitions, and 320ms for editorial reveals. Paths use quiet movement to connect elements, and the entire experience stays still when reduced motion is preferred.
cubic-bezier(.2,.75,.25,1)HTECH / ASSETS
Approved assets
Download the original files directly. Published copies match the supplied masters; their paths and colors have not been altered.
