Brand Overview
JobSphere is where talent meets opportunity. Our brand represents trust, innovation, and the human side of career growth.
Our Mission
To connect exceptional talent with meaningful opportunities through technology that makes job discovery simple, transparent, and empowering for everyone.
Our Vision
Every person deserves access to a career that fulfills them. We're building the platform that makes that a reality.
Human-Centered
People first, always. Every design decision and message we craft starts with empathy for job seekers and hiring teams.
Effortless
We remove friction from the job search and hiring process. Simplicity and speed are core to everything we build.
Trustworthy
Transparency and reliability are non-negotiable. Our users trust us with their careers — we honor that every day.
Forward-Thinking
We embrace innovation, modern design, and progressive ideas to stay ahead of the evolving workforce landscape.
Logo Usage
The JobSphere logo is the visual anchor of our brand. Use it consistently and with care.
Logo Variants
Light — Primary
Dark — On Dark Backgrounds
Gradient — Marketing Materials
Color — Primary Background
Clear Space
Maintain a minimum clear space of x (based on the icon height) around the logo at all times.
Minimum Size
Web: 120px width
Mobile: 96px width
Favicon: 32×32px
Do's & Don'ts
Do
- Use approved logo variants from this guide
- Maintain the specified clear space around the logo
- Scale the logo proportionally
- Use the primary logo in digital contexts
- Use vector (SVG) files for best quality
Don't
- Stretch, distort, or rotate the logo
- Change the logo colors outside of approved variants
- Add effects like shadows, outlines, or gradients
- Place the logo on busy or low-contrast backgrounds
- Modify the spacing between icon and wordmark
Color Palette
Our colors convey trust, energy, and professionalism. Use them consistently to maintain brand recognition.
Primary Colors
Secondary & Accent Colors
Usage Examples
Gradient
Hero sections, key CTAs, featured elements
Primary Background
Tag backgrounds, subtle highlights, hover states
Success State
Confirmation messages, saved items, achievements
Typography
Inter is our primary typeface — clean, modern, and highly legible across all screen sizes.
/* Font Import */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Font weights in use */
300 — Light / body text (rarely)
400 — Regular / body copy, descriptions
500 — Medium / labels, nav, meta
600 — SemiBold / buttons, inputs
700 — Bold / subheadings, strong text
800 — ExtraBold / section headings
900 — Black / hero headlines
Type Scale
Typography Rules
Line Height
Use 1.6 for body text, 1.2–1.3 for headings, and 1.7 for paragraphs with longer content.
Max Width
Body text should never exceed 65ch (approx. 65 characters per line) for optimal readability.
Letter Spacing
Use -0.02em to -0.03em for large headings, 0 for body text, and 1–2px for uppercase labels.
Text Colors
Headings use #0F172A, body text #4B5563, and secondary/muted text #6B7280. Always maintain WCAG AA contrast.
UI Elements
Consistent UI components create a cohesive experience. Follow these guidelines for buttons, inputs, cards, and more.
Buttons
/* Button Properties */
border-radius: 24px (pill shape)
padding: 12px 28px (default) / 14px 32px (large)
font-weight: 600 (SemiBold)
transition: all 0.3s ease
/* Primary Button */
background: linear-gradient(135deg, #4F46E5, #7C3AED, #EC4899)
color: #FFFFFF
box-shadow: 0 4px 15px rgba(79,70,229,0.3)
Border Radius System
Shadows
SM
MD
LG
XL
2XL
Iconography
We use Font Awesome 6 as our primary icon library. Icons should support content, not replace it.
Job / Career
Search
Location
Company
Save / Bookmark
Launch / Growth
Trust / Security
Speed / Fast
Sign Up
Verified / Done
Remote / Global
Technology
/* Icon Usage Guidelines */
✓ Use icons alongside text labels (never alone for critical actions)
✓ Default size: 16px / 20px / 24px
✓ Color: match surrounding text or use var(--primary)
✓ Use solid style (fas) for primary icons
✓ Use regular style (far) for secondary / inactive states
Imagery & Photography
Visual content should feel authentic, diverse, and aspirational. It should reflect the real experience of career growth.
Use Diverse Representations
Showcase people of all backgrounds, ages, and abilities. Reflect the global nature of modern work.
Authentic Over Staged
Prefer candid, natural-feeling photos over heavily staged or overly polished stock imagery.
Modern Work Environments
Show remote work setups, collaborative spaces, and contemporary office environments.
Consistent Color Grading
Apply our brand's color warmth and vibrancy to all photographs for visual cohesion.
Avoid Clichés
No handshakes, pointing at whiteboards, or generic "business people" stock photos.
No Dark or Moody Tones
Our brand is optimistic and approachable. Avoid overly dark, desaturated, or somber imagery.
Don't Over-Saturate
Keep color treatment natural. Avoid heavy filters, HDR effects, or artificial color shifts.
No Competitor Logos
Never include logos, branding, or identifiable IP from other companies in our imagery.
Grid & Spacing
A consistent grid system and spacing scale ensure layout harmony across all pages and breakpoints.
Grid System
Spacing Scale
/* Container Max Widths */
max-width: 1200px /* Standard container */
padding: 0 24px /* Horizontal padding */
/* Section Spacing */
padding: 100px 0 /* Full sections */
padding: 60px 0 /* Smaller sections */
/* Gap Scale */
gap: 16px / 20px / 24px / 32px / 40px / 60px
Voice & Tone
Our voice is the personality behind every word we write. It should feel consistent whether a user reads a job listing, an email, or a blog post.
Our Tone Attributes
Clear & Direct
We get to the point. No jargon, no fluff. Every sentence should earn its place.
Empathetic
We understand the stress of job hunting. Our words should reassure and support.
Energetic
We're excited about careers and growth. Let that enthusiasm shine through our copy.
Inclusive
Our language welcomes everyone. We avoid assumptions and use gender-neutral terms.
Informative
We educate and guide. Our content helps people make better career decisions.
Confident
We know what we're offering is great. Communicate that with conviction, not arrogance.
Writing Guidelines
Do this, not that
✅ Do
"Find jobs that match your skills and schedule."
"Your application was submitted successfully."
"3,240 roles available in your area."
❌ Don't
"Utilize our platform to locate employment opportunities commensurate with your qualifications and availability."
"Your submission has been processed and is now in our system."
"A plurality of roles are currently being offered within your geographic vicinity."
Style Rules
/* JobSphere Writing Style */
Capitalization: Sentence case for headings (not Title Case)
Punctuation: Oxford comma always. Em dashes (—) not hyphens.
Numbers: Use numerals for all numbers (3 roles, not three roles)
Abbreviations: Spell out on first use ("Artificial Intelligence (AI)")
Voice: Active voice preferred over passive
Pronouns: Use "you" and "your" — speak directly to the reader
Exclamation points: Use sparingly — max 1 per paragraph