Brand Guidelines

A comprehensive guide to the visual identity and design system for the datadefend brand.

Logo

Shield Icon

Layered data visualization elements representing protection and data defense

Gradient

Purple (#6640F4) to Cyan (#77E6FF) gradient for modern tech feel

Wordmark

Clean Geist sans-serif, lowercase for approachability

Color Palette

Primary Colors

Purple

#6640F4

Cyan

#77E6FF

Secondary Blue

#6DBFF2

Background

#030303

Segment Colors

Enterprise

#3B82F6

Startup

#10B981

Alert/Warning

#EF4444

Gradients

Primary Brand Gradient

Text Gradient (3-stop)

Typography

Font Family

Geist

Geist Mono (for code)

H1 Hero

64px · Bold

Get Compliant. Stay Protected.

H2 Section

48px · Bold

The Challenge

H3 Card Title

24px · Semibold

Security Operations

Body Large

18px · Regular

We help enterprises and startups build resilient security programs.

Body

16px · Regular

Security challenges facing modern organizations require a new approach.

Small

14px · Regular

ISO 27001 · NIS2 · DORA · KRITIS

Gradient Text

Scale Confidently

background: linear-gradient(135deg, #6640F4, #77E6FF, #6DBFF2);

Spacing System

Based on 4px grid using Tailwind spacing scale.

4px

8px

16px

24px

32px

2xl

48px

3xl

64px

4xl

96px

Components

Buttons

Cards (Glassmorphism)

✦

Default Card

Glassmorphism with subtle border and backdrop blur.

⬡

Enterprise Card

Blue accent for enterprise segment content.

◆

Startup Card

Green accent for startup segment content.

Tags & Badges

DefaultEnterpriseStartupAlertFeatured

Visual Effects

Grid Pattern

Gradient Orbs

Glow Effect

Glassmorphism

backdrop-blur + transparency

Usage Guidelines

Do

Use gradient text for section headlines
Apply glassmorphism to all card components
Include background gradient orbs on desktop
Maintain consistent border-radius (8px buttons, 16px cards)
Use segment colors only for segment-specific content

Don't

Use pure white backgrounds
Mix rounded and sharp corners
Use more than 2 font weights per component
Animate layout properties (width, height)
Use gradients with conflicting color temperatures