Brand Identity

Brand Guidelines

A complete reference for the visual identity of Abdullah Sajjad — covering logo, color palette, typography, and usage rules.

Logo

The wordmark uses Space Grotesk Bold with a signature gold accent dot. The dot is the brand's most recognizable element — it signals precision and completeness.

Abdullah Sajjad.

Download Logo Files

SVG files are resolution-independent and ideal for print and web. WebP files are high-resolution (3x) raster images for quick use.

Dark Background

Light Background

White (Transparent)

Gold Background

Logo Usage Rules

✓ Always keep the gold dot — it is part of the wordmark
✓ Minimum clear space around the logo equals the height of the dot
✓ Use on dark navy, white, or gold backgrounds only
✗ Never stretch, rotate, or add effects to the wordmark
✗ Never change the dot color independently of the approved palette
✗ Never place on busy or low-contrast backgrounds

Color Palette — Dark Theme (Primary)

The dark theme is the primary brand expression. Deep navy conveys trust and professionalism; warm gold signals craft and quality.

Navy

Background

#0F1219

hsl(220, 26%, 8%)

Gold

Primary / Accent

#C49B51

hsl(38, 60%, 56%)

Warm White

Foreground / Text

#F4F1EC

hsl(40, 20%, 95%)

Card Navy

Cards / Surfaces

#1B1F29

hsl(220, 20%, 13%)

Deep Navy

Secondary / Muted

#222733

hsl(220, 18%, 16%)

Steel

Muted Foreground

#838A94

hsl(220, 10%, 55%)

Border Navy

Borders / Dividers

#272C36

hsl(220, 15%, 18%)

Gold Light

Gradient End

#CBB68A

hsl(38, 40%, 72%)

Color Palette — Light Theme

The light theme uses the same hue families but adjusts saturation and lightness to maintain readability and warmth on white surfaces.

Warm White

Background

#F8F6F3

hsl(40, 20%, 97%)

Deep Amber

Primary / Accent

#A57718

hsl(38, 70%, 38%)

Dark Navy

Foreground / Text

#17192A

hsl(220, 26%, 12%)

White

Cards / Surfaces

#FFFFFF

hsl(0, 0%, 100%)

Cloud

Secondary / Muted

#E8E9EC

hsl(220, 14%, 92%)

Slate

Muted Foreground

#4D5363

hsl(220, 12%, 34%)

Mist

Borders / Dividers

#D5D7DC

hsl(220, 14%, 86%)

Mid Amber

Ring / Focus

#C9921B

hsl(38, 65%, 48%)

Gold Gradient

The signature gradient is used for emphasized text, decorative accents, and hover states. It always flows left to right.

Dark Theme Gradient

from #C49B51 → to #CBB68Ahsl(38,60%,56%) → hsl(38,40%,72%)

Light Theme Gradient

from #B18A2A → to #C9A03Dhsl(38,65%,42%) → hsl(38,50%,55%)

Complex Solutions

Typography

Two typefaces create a clear hierarchy — Space Grotesk for headings that demand attention, Inter for body copy that reads effortlessly.

Display / Headings

Space Grotesk

Bold · Semibold

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789

font-family: 'Space Grotesk', sans-serif

Body / UI

Inter

Regular · Medium · Semibold

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789

font-family: 'Inter', sans-serif

Type Scale

5xl / 48pxPage Heading

3xl / 30pxSection Title

xl / 20pxSubsection

base / 16pxBody text — the standard reading size for paragraphs and content blocks.

sm / 14pxCaptions, labels, and secondary information.

xs / 12pxMicro text, badges, and legal copy.

UI Elements

Consistent radii, borders, and effects ensure a cohesive look across all components.

Border Radius

Small

4px

Default

8px (0.5rem)

Large

16px (1rem)

Glass Card

Glassmorphism

50% card opacity + 12px blur + 40% border opacity

backdrop-filter: blur(12px)background: card @ 50% opacity

Spacing System

Section gap80px (5rem)

Card padding24px (1.5rem)

Component gap16px (1rem)

Inline gap8px (0.5rem)

Container max1280px

Container padding24px (1.5rem)

Buttons

Tags & Badges

WordPressReactAPIFeaturedHeadless

Design Principles

Premium, Not Flashy

Use navy and gold with restraint. No neon colors, no rainbow gradients. Every visual choice should feel considered and intentional — like a well-tailored suit.

Clear Hierarchy

Space Grotesk leads, Inter supports. Gold draws the eye to what matters. Generous whitespace gives content room to breathe and readers time to absorb.

Accessible by Default

WCAG AA minimum across all color combinations. Focus rings on interactive elements. Semantic HTML. Screen-reader-friendly. No information conveyed by color alone.

Motion with Purpose

Animations should reveal content and guide attention — never distract. Entrance animations are subtle (fade + slight translate). Respect reduced-motion preferences.

Quick Reference

Token	Dark Value	Light Value
Background	`#0F1219`	`#F8F6F3`
Foreground	`#F4F1EC`	`#17192A`
Primary	`#C49B51`	`#A57718`
Card	`#1B1F29`	`#FFFFFF`
Secondary	`#222733`	`#E8E9EC`
Muted FG	`#838A94`	`#4D5363`
Border	`#272C36`	`#D5D7DC`
Ring / Focus	`#C49B51`	`#C9921B`
Display Font	`Space Grotesk`	`Space Grotesk`
Body Font	`Inter`	`Inter`
Base Radius	`8px`	`8px`