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

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 (Dark)

For light backgrounds. PNG format.

Logo (White)

For dark backgrounds. PNG format.

Favicon

White mark icon. SVG 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: fav-white.svg, 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

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;
}
      