Brand identity system — logo, mascot, color, type, and voice for the studio that builds websites, systems, and complete brand identities.
One idea holds this identity together: the Nexa spark — a four-point spark that is the brand's smallest atom. It lives inside the logo mark and it is the mascot's signature feature, so the character reads as part of the system, not a decoration added on top.
Everything below is anchored to the system already live on the site: a light, airy, card-based SaaS look — closer to Stripe/Linear than anything dark or cinematic — carried by a violet→cyan gradient and soft 3D clay-render illustration. This document uses the real tokens throughout, so what you see rendered here is the spec.
Logo system
A monochrome wordmark, a gradient spark-mark that survives to favicon size, and a defined way they lock up together.
Wordmark
Set in Plus Jakarta Sans ExtraBold with tight tracking (−0.03em). The wordmark stays a single solid color so it reads cleanly at any size — the gradient lives in the mark, the way Stripe and Linear keep their wordmarks quiet and let color live in the product. One word, mixed case, no space: NexaWeb.
Ink #14141a on light. White on dark/photo. A full-gradient wordmark is allowed only for large hero moments on a dark background — never for small UI, never on white (it muddies).
The mark (spark node)
A rounded-square (squircle) tile carrying the violet→cyan gradient, with the four-point Nexa spark in negative space at its center. The squircle + high-contrast spark keeps it legible all the way down to 16px. This same spark is the mascot's crown feature — that's the thread that ties the whole identity together.
Lockup & clear space
Horizontal lockup: mark + wordmark, optically centered, with a gap equal to half the mark's width. Keep clear space around the whole lockup equal to the height of the mark's corner radius on all sides. The mark may always stand alone; the wordmark should not appear beside a different icon.
Don't
Mascot — "Nex"
A small spark-being that gives NexaWeb a face across empty states, loading, the chat widget, 404s, and onboarding — techy and quietly friendly, built from the same rounded clay-render language as the rest of the site.
Greeting
Default / chat widget / onboarding. Eyes calm and open, spark hovering like a crown, one nub raised in a small wave.
Working
Loading / building. Eyes soften into focused curves, the spark splits and orbits the body — motion that reads as "thinking."
Empty / 404
Nothing-here states. A slight tilt, searching eyes, the spark dimmed and drifting low — a beat of personality, never sad-cute.
Character specification
Form. A single rounded, slightly egg-shaped orb body — like a smooth clay bead standing upright, a touch narrower at the top and rounder at the base. No arms or legs by default; it floats a short distance off the ground. Small rounded "nub" hands (separate floating clay beads) appear only when a pose needs a gesture.
Proportions. Body roughly 1 : 1.15 (width : height). One confident, uncluttered silhouette — the whole character should be recognizable as a solid shape at thumbnail size. Face panel occupies the upper-middle third.
Material & lighting. Soft 3D clay render — matte surface with a gentle glossy sheen, fully rounded, zero sharp edges. Studio lighting: soft key light from the upper-left giving one broad soft highlight; soft ambient fill; a subtle cyan rim light on the lower-right edge; a soft blurred contact shadow beneath. Same render language as the site's service-card icons.
Color placement. Body carries the brand gradient — violet #6c63ff at the top-left flowing diagonally into cyan #00d4ff at the bottom-right. Face is a dark inset "screen" panel (near-ink #14141a with a faint cyan sheen) so the glowing features read. Background: a soft gradient halo / studio backdrop in #f0efff→#e6faff.
Eyes. Two soft, glowing cyan shapes on the face panel (calm pill/oval "screens"). They are the main expression driver — open ovals (calm), gentle downward curves (focused), a dot + short dash (searching).
Signature feature. A single four-point spark (✦) floating just above the head, rendered as a small glowing shard: cyan core with a pink #f542ff tip and soft glow. This spark is the one place pink appears, and it is the visual link to the logo mark. It relocates and changes across poses (crown → orbiting → dimmed).
Personality guardrails. Techy, calm-confident, quietly friendly — a well-designed product being. No big anime eyes, no cheek blush, no cartoon mouth, no childish rounding-to-cute. It's for a B2B web studio: think "the friendliest object in a Linear/Stripe UI," not a kids'-app mascot.
Color system
Your live palette, extended into a full working system: the signature gradient, tint/shade ramps for UI, neutrals, and semantic colors.
Signature gradient
The core brand asset. Violet → cyan at ~120°. This is the identity — used on the mark, key CTAs, the mascot body, and hero accents. Pink is a spark, not a third gradient color: use it only in tiny highlights (the spark, a single hover glow), never as a large fill.
Core
Violet ramp
Cyan ramp
Note: cyan #00d4ff is a display/brand color — it fails contrast as text on white. For cyan text or icons on light backgrounds, step down to #0094b8 (cyan-600) or darker.
Neutrals
Semantic
Kept cool where possible so they sit inside the brand world. Warning/error carry the necessary warmth; error leans toward the pink family so it never clashes with the accent.
Typography
Two Latin families, two Arabic families — display carries personality, body stays quiet and readable.
Latin
Arabic
Arabic display in Alexandria, body in Tajawal. Arabic runs a touch larger than Latin at the same level (~+1px) and a little more line-height for comfortable reading.
Type scale & usage
| Role | Size / line | Family · weight | Use when |
|---|---|---|---|
| Display | 48–64 / 1.05 | Jakarta · 800 | Hero headline, one per page |
| H1 | 34–40 / 1.1 | Jakarta · 700 | Page / section title |
| H2 | 26–30 / 1.15 | Jakarta · 700 | Sub-section |
| H3 | 20 / 1.2 | Jakarta · 700 | Card titles |
| Lead | 19 / 1.55 | Inter · 400 | Intro paragraph under a heading |
| Body | 16–17 / 1.6 | Inter · 400 | Default reading text |
| Small | 13 / 1.5 | Inter · 500 | Captions, meta, labels |
Rules of thumb: display/headings = Jakarta with tight tracking (−0.02 to −0.03em); everything you actually read = Inter at default tracking. Body line length under ~70 characters. Sentence case everywhere — no all-caps labels. Never set long body copy in Jakarta, and never set a headline in Inter.
Brand voice
Same personality in both languages — capable and direct — expressed natively in each. English is clean and confident, not corporate-stiff. Arabic is warm Najdi-Saudi business tone, not textbook MSA.
English
Clear, confident, human. Short sentences. Say what a thing does, not how impressive it is. Active voice, plain verbs.
Do
"We build websites that actually ship."
"Clean, fast, and yours." / "Start a project"
Error: "That didn't go through. Try again."
Don't
"We leverage synergistic digital solutions to maximize your online presence."
"Submit inquiry" / "An error has occurred."
العربية — نبرة سعودية دافئة
لهجة أعمال نجدية ودّية: قريبة، واثقة، وبدون تكلّف. جُمل قصيرة وواضحة، نتكلم مع العميل مو نلقّي عليه محاضرة.
عدل ✓
«نطلّع لك موقع يشبه شغلك ويفرّق — خلّها علينا.»
«موقعك يستاهل شكل احترافي، ونجهّزه لك سريع.» / «ابدأ مشروعك»
خطأ: «صار خطأ بسيط، جرّب مرة ثانية.»
لا ✕
«نحن نقدّم حلولاً رقمية متكاملة تلبّي احتياجات عملائنا بأعلى معايير الجودة.»
«قم بإرسال الطلب» / «حدث خطأٌ ما، يُرجى المحاولة لاحقاً.»
Empty-state & system copy (pairs with Nex)
These are where the mascot lives, so the words should match its calm-friendly tone — direction, not apology.
- 404: "This page took a wrong turn. Let's get you back." · «الصفحة ضاعت، نرجّعك للبداية.»
- Empty: "Nothing here yet. Let's build something." · «ما فيه شي هنا لين الحين — نبدأ؟»
- Loading: "Putting the pieces together…" · «نرتّب لك الأمور…»
Applications
Mark + mascot + color, working together across three touchpoints.
Business card
Dark front (gradient glow + lockup reversed to white), light back (details in ink, one gradient hairline). The gradient does the heavy lifting; ink and white keep it legible.
Social post template
Three template modes: light card (default, most posts), full gradient (announcements / punchlines), dark + mascot (personality / product moments). Mark top-left, message in Jakarta, URL small in Inter.
Favicon / app icon
Same spark-node mark at every size. At 16px the spark thickens slightly and the corner radius holds — it never becomes the wordmark or the mascot. Solid gradient tile, white spark; no gradient-on-gradient at small sizes.