Branding Guidelines — CyberHeed Design System

01

Brand Identity

Core attributes that define CyberHeed across every channel and touchpoint.

Brand Name

CyberHeed

Tagline

"GRC, but smart."

Secondary Tagline

"Compliance and Risk Management Solutions for All"

Founder

Raif Al Bedewi

Founder & CEO

Industry

Cybersecurity Compliance / GRC

Personality

Technically credible, specific over vague, honest without corporate fluff

Voice

Direct, evidence-backed, education-first

Abbreviation

CH

02

Colour Palette

Click any swatch to copy its hex code to the clipboard.

Primary

Deep Navy

#132E52

--ch-primary

Main brand colour, headings, dark backgrounds

Sky Blue

#53A8DE

--ch-secondary

Links, highlights, interactive elements

Accent

Orange

#EF8729

--ch-accent

CTAs, buttons, emphasis

Light Orange

#FFB16B

--ch-accent-light

Hover states, gradients, secondary emphasis

Dark Backgrounds

Dark Navy 1

#091A31

--ch-dark

Dark sections, footer backgrounds

Dark Navy 2

#0A1B2D

--ch-dark-alt

Dark section variants, card backgrounds

Text Dark

#060845

--ch-text

Primary body text colour

Neutrals

Light Grey

#F3F3F3

--ch-light

Light backgrounds, cards

White

#FFFFFF

--ch-white

Backgrounds, text on dark

03

Typography

Inter is the sole typeface, loaded from Google Fonts at weights 400 through 900.

Hero

98px / 900 / 1.1

GRC, but smart.

H2 Desktop

44px / 600 / 1.2

Continuous compliance assurance

H2 Tablet

34px / 600 / 1.2

AI-powered risk management

H2 Mobile

26px / 600 / 1.3

Framework certification made practical

Body

15px / 400 / 1.6

Organisations routinely overestimate their compliance posture by 30-40%. CyberHeed's AI-powered platform provides continuous assurance, replacing periodic audits with real-time validation.

Button / Label

14px / 500-600 / 1

Book a Gap Analysis Call

Google Fonts Embed


          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">

04

Logo Assets

Download logo files for use in presentations, documents and marketing materials.

Logo (Light)

For dark backgrounds. PNG format.

Logo (Dark)

For light backgrounds. PNG format.

Icon (Dark)

"ch" mark, dark. For dark backgrounds. PNG format.

Icon (Light)

"ch" mark, light. For light backgrounds. PNG format.

Favicon

"ch" mark on black. Used as browser favicon. PNG format.

Logo Usage

Navigation bar: Dark logo on light bg, h-8 to h-10

Hero section: White logo on dark navy, h-12 to h-16

Footer: White logo on dark navy, h-10

Favicon: icon-dark-black-bg.png, 32x32px

05

Component Patterns

Live-rendered buttons and cards showing the standard component styles.

CTA Buttons

Light Card

White background with subtle shadow and border.

Card (Light)

Dark Card

Dark navy background, white text.

Card (Dark)

Orange Tag Blue Tag Green Tag

Tags / Badges

06

Voice & Tone

How CyberHeed sounds across different communication contexts.

Lead Magnets

Expert, authoritative, educational

"Organisations routinely overestimate their compliance posture by 30-40%."

Email Campaigns

Direct, practical, challenging

"Your team self-assessed at 84%. AI scored you at 43%."

CTA Copy

Confident, low-friction

"Book a free gap analysis call"

Proof Points

Evidence-backed, specific

"2 hours vs 4-6 weeks" / "98% stock time reduction"

07

Design Direction

Visual direction and aesthetic principles for CyberHeed assets.

Overall Feel

Professional, trustworthy, tech-forward — navy + blue signals security, orange accents add energy

Layout Density

Clean with generous whitespace — compliance is complex, design should feel simple

Visual Style

Modern SaaS — flat with subtle shadows, rounded cards, gradient dark sections

Animation

Subtle — hover lifts on buttons/cards, fade-in on scroll. No excessive motion

Imagery

Abstract tech/brain graphics, framework certification badges, minimal stock photos

08

Spacing & Layout

Standard dimensions and spacing values for consistent layouts.

Content Max-Width

896px (max-w-4xl)

Article Max-Width

1024px (max-w-5xl)

Section Padding (Mobile)

3rem 1.5rem

Section Padding (Desktop)

5rem 3rem

Card Border-Radius

1rem (rounded-2xl)

CTA Border-Radius

9999px (rounded-full)

09

Inspiration & References

Design references and visual direction that inform CyberHeed's aesthetic.

Primary Reference

cyberheed.com — colour palette, section layout, hero treatment, dark navy sections

Imagery

Abstract tech/brain graphics (Brain-light@4x.png), framework certification badges, minimal stock photos

Typography Reference

Inter on Google Fonts — clean, professional, excellent readability at all sizes

10

CSS Variables

Copy the full :root block into any stylesheet to use CyberHeed's brand tokens.

        
:root {
    /* Primary */
    --ch-primary: #132E52;
    --ch-secondary: #53A8DE;

    /* Accent (use sparingly for CTAs) */
    --ch-accent: #EF8729;
    --ch-accent-light: #FFB16B;

    /* Dark backgrounds */
    --ch-dark: #091A31;
    --ch-dark-alt: #0A1B2D;

    /* Text */
    --ch-text: #060845;
    --ch-text-muted: #23291FCC;

    /* Neutrals */
    --ch-light: #F3F3F3;
    --ch-white: #FFFFFF;
}
      