Visual Identity & Brand Guidelines

Comprehensive brand system for consistent, professional digital presence

Brand Overview

Core identity and positioning

Mission

To craft exceptional digital experiences that transform ideas into stunning, functional websites and applications.

Brand Personality

Modern, Professional, Bold, Innovative, Trustworthy, Premium

Target Audience

Businesses and individuals seeking high-quality web development and design services.

Brand Voice

Confident, Clear, Technical yet Accessible, Results-Oriented

Color Palette

Primary, secondary, and accent colors

Primary Colors

Aa
Midnight Black
HEX: #0a0a0a
RGB: 10, 10, 10
CMYK: 0, 0, 0, 96
Usage: Primary backgrounds, headers, main text
Aa
Honey Yellow
HEX: #FFB800
RGB: 255, 184, 0
CMYK: 0, 28, 100, 0
Usage: Primary accent, CTAs, highlights, links
Aa
Deep Honey
HEX: #FFA000
RGB: 255, 160, 0
CMYK: 0, 37, 100, 0
Usage: Gradients, hover states, depth

Secondary Colors

Aa
Charcoal
HEX: #1a1a1a
RGB: 26, 26, 26
Usage: Secondary backgrounds, cards
Aa
Steel Gray
HEX: #2a2a2a
RGB: 42, 42, 42
Usage: Borders, dividers, subtle elements
Aa
Neutral Gray
HEX: #999999
RGB: 153, 153, 153
Usage: Secondary text, descriptions

Accent & Overlay Colors

Aa
Honey Glow
RGBA: 255, 184, 0, 0.2
Usage: Hover states, highlights, badges
Aa
Dark Overlay
RGBA: 10, 10, 10, 0.95
Usage: Image overlays, modals

Typography

Font families, sizes, and hierarchy

Primary Font Family

Segoe UI / Fallback: Tahoma, Geneva, Verdana, sans-serif
Clean, modern, highly readable across all devices and platforms.

Heading 1 - Hero Title
Crafting Digital Experiences
font-size: 3.5rem (56px) | font-weight: 900 | line-height: 1.1 | color: #0a0a0a
Heading 2 - Section Title
Featured Projects
font-size: 2.5rem (40px) | font-weight: bold | color: #FFB800
Heading 3 - Card Title
BathKitch Pro
font-size: 1.8rem (28.8px) | font-weight: 600 | color: #0a0a0a
Body Text
Transforming ideas into stunning, functional websites and applications. Specialized in creating responsive, user-friendly digital solutions that deliver results.
font-size: 1rem (16px) | font-weight: normal | line-height: 1.6 | color: #666
Button / CTA Text
View Project
font-size: 1rem (16px) | font-weight: 600 | text-transform: none

Logo Variations

Different logo treatments for various backgrounds

MAJD.IO

Primary - Dark Background

MAJD.IO

Light Background

MAJD.IO

White on Dark

Logo Specifications

  • Font Weight: Bold (700)
  • Letter Spacing: 2-3px
  • Minimum Size: 120px width
  • Clear Space: Minimum 20px on all sides
  • File Formats: SVG (primary), PNG (fallback)

Spacing System

Consistent spacing scale for layouts

4px - Tiny Icon gaps, tight spacing
8px - Small Element padding, margins
16px - Medium Component spacing
24px - Large Card padding, gaps
32px - XLarge Section spacing
48px - XXLarge Large section gaps
64px - Huge Major section padding
80px - Massive Hero sections, page spacing

UI Components

Reusable interface elements

Buttons

CSS:
Primary: background: linear-gradient(135deg, #FFB800 0%, #FFA000 100%);
Secondary: border: 2px solid #FFB800; color: #FFB800;
Ghost: border: 2px solid white; color: white;

Cards

Card Title

Car