This document is the single source of truth for UniCoders brand. It contains everything a designer, developer, or collaborator needs to represent us accurately — from logo usage rules to our complete visual language.
What We Stand For
Our brand is a visual expression of our values — every design decision should reinforce who we are and what we believe in.
Excellence
We don't cut corners. Every product we ship, every course we produce, every interaction we design carries the mark of craftsmanship. The word "good enough" doesn't live here.
Community
UniCoders exists because of the people inside it — students, instructors, builders. Everything we create starts and ends with our community's growth and success.
Ambition
We are building Jordan's most elite tech community. Our visual identity should feel aspirational — like a destination, not just a platform. Think big, design bold.
Technical Depth
We speak the language of engineers. Our tone is precise, direct, and never dumbed down. We respect the intelligence of our audience — always.
Trust
Verified identities, transparent processes, protected data. Our brand conveys security and reliability. The dark aesthetic is deliberate — it signals seriousness.
Identity
From UCM membership cards to gamification — we help students feel like they belong to something bigger than themselves. Brand = belonging.
UniCoders Mark
Our logo is our most valuable visual asset. Treat it with respect — never distort, recolor, or overcrowd it.
Primary — Dark Background
Square Variant
On Brand Color
On Light Background
Clear Space & Minimum Size
Minimum clear space = 0.5× logo height on all sides
Logo Do's & Don'ts
✓ Do
✗ Don't
UniCoders Palette
Every color has a role. Click any swatch to copy the hex value.
Hover swatch → copy hex. Use CSS variables shown below in code.
Primary — Royal Violet
Accent — Championship Gold
Accent — Tech Green
Accent — Code Blue
Backgrounds & Surfaces
Text Colors
Brand Gradients
These are the approved gradient combinations. Use them for CTAs, hero backgrounds, and key UI highlights. Click a gradient to copy its CSS.
Radial Orbs — Atmospheric Accents
These blurred radial orbs are placed behind content to create depth and brand atmosphere. Always use filter: blur(80px) and low opacity (4–12%).
English Typeface
Inter is our primary English typeface — clean, technical, and highly legible at all sizes. It was designed for screen clarity and aligns perfectly with our developer-first identity.
UniCoders is Jordan's most ambitious technology education initiative. We bring together the brightest minds from universities across the country and give them the tools, community, and knowledge to become elite developers.
Our platform isn't just a place to take courses — it's an identity. Members carry UCM membership cards, earn achievements, and build careers alongside a network of peers who take their craft seriously. If you're here, you're already ahead.
Arabic Typeface
Cairo is our Arabic typeface — a humanist sans-serif designed specifically for Arabic alongside Latin. It maintains the modern, technical feel of Inter while providing full Arabic script support. Always use right-to-left text direction for Arabic content.
Bilingual Pairing Example
Learn from real engineers. Build real products. Join a community that pushes you forward.
تعلم من مهندسين حقيقيين. ابنِ منتجات حقيقية. انضم إلى مجتمع يدفعك للأمام.
Always set dir="rtl" on Arabic text containers and use font-family: 'Cairo', sans-serif. Never use Inter for Arabic — it lacks proper Arabic character support. The CSS class .arabic-text handles both direction and font in this codebase.
Spacing System
UniCoders uses a 4px base grid. All spacing tokens are multiples of 4. Consistent spacing creates visual rhythm and calm.
Icons
We use Font Awesome 6 (Free tier) as our icon library. Always use the solid (fas) style for consistency. Icon sizes follow the base font scale.
Glassmorphism & Depth
UniCoders UI is built on layered glass surfaces. Each layer adds depth while maintaining the dark, luxury aesthetic. Blur, border, and transparency work together.
Border Tokens
Status Indicators
Badges communicate state, role, and category at a glance. Each color has a specific semantic meaning — be consistent.
Card System
Cards are the primary unit of information display. They follow the glass layer system — always dark backgrounds, always border, always rounded.
Course Card
Full-Stack Web Dev Bootcamp
Master React, Laravel, and PostgreSQL from scratch with real projects.
Stat / Dashboard Card
Profile / Member Card
How We Sound
Our voice is consistent but our tone shifts with context. We're always direct and confident — we adjust the warmth based on the situation.
Confident, Not Arrogant
State what's true. Avoid boasting — let results speak.
"We've trained engineers who now work at top companies."
"We are the best institution in Jordan. No one compares."
Direct, Not Blunt
Be clear and actionable, not judgmental or harsh.
"Your submission is overdue. Submit now to avoid losing marks."
"You failed to submit on time. This is your problem."
Inspiring, Not Hype
Inspire with vision and specifics. Avoid buzzwords and excessive emoji.
"This is where serious developers begin. Are you in?"
"🚀🔥 INSANE bootcamp!! You'll go from ZERO to HERO!!!"
Warm, Not Informal
We're friendly and approachable, but always professional.
"Welcome to the community. We're glad you're here."
"Yoooo welcome fam!! This is gonna be LIT!"
Tone by Context
"Well done — your assignment has been submitted successfully."
"File upload failed. Please ensure your file is under 10MB and in .pdf, .zip, or .docx format."
"No courses yet. Browse our library to find something that matches your goals."
"This content is available to Pro members. Unlock full access and invest in your career."
"Submission closes in 2 hours. Submit your work now to avoid a late penalty."
"You're in. UniCoders is Jordan's most serious tech community — and you're now part of it."
Words That Matter
Consistent terminology builds a coherent experience. Use these exact terms throughout all copy, UI, and communication.
When mentioning UniCoders in body copy, always write it as one word with capital U and C: UniCoders. In legal documents only, the full registered name UniCoders Ltd should be used. Never abbreviate to "UC" in public-facing content.
Downloads
All official UniCoders brand assets. Always use the most current version of these files. If you need a format not listed here, reach out to the design team.
Typefaces
CSS Variables — Copy & Use
/* UniCoders Brand CSS Variables */ :root { --uc-bg: #050510; --uc-surface: #0a0a1e; --uc-card: rgba(255,255,255,0.03); --uc-border: rgba(255,255,255,0.08); /* Primary Purple */ --uc-purple: #7c3aed; --uc-purple-light: #a78bfa; --uc-purple-dark: #5b21b6; /* Accents */ --uc-gold: #f59e0b; --uc-emerald: #10b981; --uc-cyan: #06b6d4; --uc-indigo: #6366f1; /* Text */ --uc-text: #ffffff; --uc-text-secondary:rgba(255,255,255,0.65); --uc-text-muted: rgba(255,255,255,0.35); /* Fonts */ --uc-font-en: 'Inter', ui-sans-serif, system-ui, sans-serif; --uc-font-ar: 'Cairo', sans-serif; }
Designer Handoff Checklist
Brand & Design Team
Have a question about the brand? Need assets in a different format? Working on a collaboration? Reach out — we respond fast.
128 City Road, London EC1V 2NX, UK