background icon 1
background icon 2
background icon 3
background icon 4
background icon 5
background icon 6
background icon 7
background icon 8
background icon 9
background icon 10
background icon 11
background icon 12
background icon 13
background icon 14
background icon 15
background icon 16
background icon 17
background icon 18
background icon 19
background icon 20
background icon 21
background icon 22
background icon 23
background icon 24
background icon 25
background icon 26
background icon 27
background icon 28
background icon 29
background icon 30
SARHANE Studio

Brand Identity Manual

The official guide to the SARHANE Studio brand.

Logo
SARHANE Studio Logo

Usage Guidelines

The SARHANE Studio logo is the primary identifier of our brand. It should be used consistently across all materials.

  • Maintain a clear space around the logo, equal to at least 50% of its width.
  • Do not alter, rotate, or distort the logo in any way.
  • Prefer the full-color version on dark backgrounds for maximum impact.
Color Palette

Primary

hsl(275 87% 53%)

Background

hsl(240 33% 17%)

Accent

hsl(275 87% 53%)
Typography

Space Grotesk

Used for all headings. Its futuristic and technical feel establishes a bold, modern tone.

Aa Bb Cc Dd Ee Ff

Inter

Used for all body copy. It is clean, highly readable, and provides a professional and clear reading experience.

Aa Bb Cc Dd Ee Ff

Social Media Icons

Icons from the Lucide library are used for social media links to maintain a clean and consistent aesthetic.

Imagery

Visuals embrace a "glassmorphism" style with blurred backgrounds and floating elements. Imagery should feel futuristic, abstract, and high-tech, often incorporating neon glows and dark, moody color schemes.

Interactive Elements

Buttons & Hovers

Buttons provide clear interactive feedback. The primary call-to-action buttons use a `btn-glow-primary` class for a pulsating shadow effect on hover. Navigational buttons often include an arrow icon that animates on hover, while destructive actions like signing out feature a clear icon transition.

Custom Cursors

Download Pack

A variety of unique cursor skins are available to enhance the user experience, from a 'glass orb' to geometric 'Zelij' patterns. Each has a distinct hover animation. A downloadable pack is available for Windows users.

Glass Orb

Neon Ring

Target Reticle

Glitchy Square

Diamond Pointer

Star Burst

Liquid Metal

Scanner Line

Vortex

Sonic Boom

Zelij: Najma Star

Zelij: Square Cross

Zelij: Mosaic Tile

Zelij: Chevron

Zelij: Intersect

Glassmorphism Cards

Cards use a semi-transparent, blurred background (`glass-card`) to create a sense of depth and a floating, modern feel over the dynamic background elements.

Example Card

This is a glass card.

Holiday Banners

Dynamic banners can be enabled for special occasions. These banners are draggable and feature a subtle glow animation, adding a timely and celebratory feel to the brand.

Happy Holidays!

Liquid Orbs

Animated liquid orbs float in the foreground, adding a layer of depth and dynamic energy. Their color, size, blur, and opacity are all customizable, allowing for a unique, fluid aesthetic that enhances the site's futuristic feel.

Orb Preview
Tone of Voice

Creative

Imaginative, artistic, and forward-thinking.

Professional

Clear, confident, expert-driven, and reliable.

Futuristic

Inspired by technology, innovation, and modern aesthetics.