Conformo Brand Guidelines

Version 1.0 — October 2025

This document establishes the visual identity, color palette, typography, logo usage, UI component standards, accessibility, and voice/tone guidelines for Conformo.

Table of Contents

  1. Brand Overview
  2. Visual Identity
  3. Color Palette
  4. Typography
  5. Logo Usage
  6. UI Component Standards
  7. Accessibility Guidelines
  8. Voice and Tone
  9. Implementation Guidelines
  10. QA Checklist

Brand Overview

Conformo is an AI-powered GDPR compliance platform designed specifically for Italian Small and Medium Enterprises (SMEs). Our brand reflects:

  • Trust & Security: Professional, reliable, and secure
  • Simplicity: Making complex regulations simple and accessible
  • Italian Heritage: Built for Italian businesses with local understanding
  • Innovation: AI-powered solutions for modern compliance challenges

Brand Mission

Transform complex data protection regulations into simple, actionable steps that any business can follow.

Visual Identity

Design Principles

  1. Clear & Professional: Clean layouts with clear hierarchy
  2. Accessible: WCAG 2.1 AA compliant minimum
  3. Modern: Contemporary design that inspires confidence
  4. Consistent: Uniform styling across all touchpoints

Overall Aesthetic

  • Modern, clean interface design
  • Card-based layouts for content organization
  • Ample white space for clarity
  • Subtle shadows and rounded corners for depth
  • Professional gradient backgrounds for visual interest

Color Palette

Primary Colors

Primary Blue Cobalt
#2F54A6
RGB: 47, 84, 166
Secondary Emerald Green
#1B9F7E
RGB: 27, 159, 126

Usage:

  • Primary Blue Cobalt: Primary UI elements, buttons, main branding, navigation
  • Secondary Emerald Green: Highlights, special text, backgrounds, borders, success states

Accent Colors

Accent Warm Orange
#F68C3B
RGB: 246, 140, 59

Usage:

  • Alerts, calls to action, attention-grabbing elements
  • Important notifications requiring user action

Neutral Colors

Gray 700
Dark Gray
#4A5568
Primary text
Gray 600
Medium Gray
#718096
Secondary text
Gray 500
Light Gray
#A0AEC0
Borders, dividers
Gray 200
Very Light Gray
#E2E8F0
Backgrounds, cards
Gray 50
Background Gray
#F7FAFC
Page backgrounds

Gradient Backgrounds

For hero sections and special areas:

/* Primary gradient - Purple to Blue */
background: linear-gradient(135deg, #6B46C1 0%, #2F54A6 100%);

/* Subtle background gradient */
background: linear-gradient(180deg, #F7FAFC 0%, #E2E8F0 100%);

Typography

Primary Font Family

System Font Stack (for optimal performance and native feel):

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, sans-serif;

Alternative Font Options

For branded content and marketing materials, consider:

  • Headings: Inter, Poppins, or Montserrat
  • Body: Open Sans, Lato, or system default

Type Scale

/* Headings */
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }    /* 40px */
h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; }      /* 32px */
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; }    /* 24px */
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.5; }   /* 20px */
h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; }  /* 18px */

/* Body text */
body { font-size: 1rem; line-height: 1.6; }                      /* 16px */
small { font-size: 0.875rem; }                                   /* 14px */

Font Weights

  • Regular: 400 (body text)
  • Medium: 500 (emphasis)
  • Semibold: 600 (headings, buttons)
  • Bold: 700 (major headings)

Logo Usage

The Conformo logo consists of:

  • Icon: Shield with ‘C’ mark in gradient (purple to blue)
  • Wordmark: “Conformo” in brand typography

Logo Variations

  1. Full Logo: Icon + Wordmark (preferred)
  2. Icon Only: For small spaces, favicons, app icons
  3. Wordmark Only: For specific contexts where icon is already established

Clear Space

Maintain clear space around the logo equal to the height of the ‘C’ in the wordmark on all sides.

Minimum Sizes

  • Full Logo: 120px width minimum
  • Icon Only: 32px × 32px minimum

Logo Colors

  • Primary: Full color (purple/blue gradient shield with dark text)
  • Monochrome: All white for dark backgrounds
  • Monochrome: All dark (#2D3748) for light backgrounds

Logo Usage Guidelines

✅ Do:

  • Use official logo files only
  • Maintain proper clear space
  • Use appropriate logo variation for context
  • Ensure sufficient contrast with background

❌ Don’t:

  • Stretch, skew, or distort the logo
  • Change logo colors
  • Add effects (drop shadows, outlines)
  • Place on busy backgrounds without proper contrast

UI Component Standards

Buttons

Primary Button

.btn-primary {
  background-color: #2F54A6;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #244182;
}

Secondary Button

.btn-secondary {
  background-color: #1B9F7E;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #158065;
}

Accent Button

.btn-accent {
  background-color: #F68C3B;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-accent:hover {
  background-color: #E57A2A;
}

Cards

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Form Inputs

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #A0AEC0;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #2F54A6;
  box-shadow: 0 0 0 3px rgba(47, 84, 166, 0.1);
}

Status Indicators

/* Success */
.status-success {
  background-color: #1B9F7E;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Warning */
.status-warning {
  background-color: #F68C3B;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Error */
.status-error {
  background-color: #E53E3E;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Info */
.status-info {
  background-color: #2F54A6;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

Accessibility Guidelines

Color Contrast

All color combinations must meet WCAG 2.1 AA standards minimum:

  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+): 3:1 contrast ratio
  • UI components: 3:1 contrast ratio

Verified Combinations

✅ Accessible Pairings:

  • Primary Blue (#2F54A6) on white
  • White text on Primary Blue
  • Secondary Green (#1B9F7E) on white
  • White text on Secondary Green
  • Dark Gray (#4A5568) on white
  • Dark Gray on Very Light Gray (#F7FAFC)

⚠️ Use with caution:

  • Accent Orange (#F68C3B) on white (ensure sufficient weight/size)
  • Light Gray text on white backgrounds

Accessibility Best Practices

  1. Focus Indicators: Always visible and clear (3px outline minimum)
  2. Interactive Elements: Minimum 44×44px touch target
  3. Text Alternatives: Alt text for all images
  4. Keyboard Navigation: Full keyboard accessibility
  5. Screen Reader Support: Proper ARIA labels and semantic HTML
  6. Motion: Respect prefers-reduced-motion

Voice and Tone

Brand Voice Attributes

  1. Professional yet Approachable: Expert but not stuffy
  2. Clear and Direct: No jargon, straightforward communication
  3. Supportive and Reassuring: Understanding the challenges SMEs face
  4. Italian-centric: Culturally aware and locally relevant

Writing Guidelines

Do:

  • Use simple, clear language
  • Address the user directly (you/your)
  • Break down complex concepts into digestible steps
  • Be encouraging and positive
  • Use Italian business terminology appropriately

Don’t:

  • Use overly technical jargon
  • Create anxiety or fear around compliance
  • Use corporate buzzwords
  • Patronize or oversimplify
  • Translate directly from English without localization

Example Phrases

✅ Good: “Ti guidiamo passo dopo passo” (We guide you step by step) ❌ Avoid: “Utilizza la nostra soluzione enterprise per ottimizzare la governance dei dati”

✅ Good: “Il tuo percorso di conformità inizia qui” (Your compliance journey starts here) ❌ Avoid: “Implementa una strategia di data protection compliance”

Implementation Guidelines

CSS Variables

Use CSS custom properties for consistent theming:

:root {
  /* Primary Colors */
  --color-primary: #2F54A6;
  --color-primary-dark: #244182;
  --color-primary-light: #4A6BC2;
  
  /* Secondary Colors */
  --color-secondary: #1B9F7E;
  --color-secondary-dark: #158065;
  --color-secondary-light: #2CB996;
  
  /* Accent Colors */
  --color-accent: #F68C3B;
  --color-accent-dark: #E57A2A;
  --color-accent-light: #F9A461;
  
  /* Neutral Colors */
  --color-gray-900: #1A202C;
  --color-gray-800: #2D3748;
  --color-gray-700: #4A5568;
  --color-gray-600: #718096;
  --color-gray-500: #A0AEC0;
  --color-gray-400: #CBD5E0;
  --color-gray-300: #E2E8F0;
  --color-gray-200: #EDF2F7;
  --color-gray-100: #F7FAFC;
  
  /* Semantic Colors */
  --color-success: #1B9F7E;
  --color-warning: #F68C3B;
  --color-error: #E53E3E;
  --color-info: #2F54A6;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                       "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

React/Vue Component Examples

// Example Button Component
<Button 
  variant="primary"  // primary, secondary, accent
  size="medium"      // small, medium, large
  disabled={false}
>
  Inizia ora
</Button>

// Example Card Component
<Card 
  hover={true}
  padding="large"
>
  <CardHeader>Stato Generale Compliance</CardHeader>
  <CardContent>
    <StatusBadge percentage={85} status="low-risk" />
  </CardContent>
</Card>

QA Checklist

Use this checklist when implementing brand guidelines:

Visual Design

  • Colors match exact hex values from palette
  • Typography uses correct font family and weights
  • Spacing is consistent with spacing scale
  • Logo is used correctly (proper version, size, clear space)
  • UI components follow standard patterns

Accessibility

  • Color contrast meets WCAG 2.1 AA minimum (4.5:1 for text)
  • Focus indicators are visible and clear
  • Interactive elements are at least 44×44px
  • Alt text provided for all images
  • Keyboard navigation works throughout
  • Screen reader tested with NVDA/JAWS
  • Motion respects prefers-reduced-motion

Content

  • Writing follows voice and tone guidelines
  • Language is clear and approachable
  • Italian terminology is used appropriately
  • No jargon or complex technical terms without explanation
  • Content is supportive and reassuring

Technical

  • CSS variables used for colors and spacing
  • Responsive design works on mobile, tablet, desktop
  • Cross-browser tested (Chrome, Firefox, Safari, Edge)
  • Performance optimized (images, fonts)
  • No console errors or warnings

Brand Consistency

  • Matches existing Conformo materials
  • Consistent with dashboard UI design
  • Appropriate for target audience (Italian SMEs)
  • Professional yet approachable aesthetic maintained

Reference Materials

Dashboard UI Example

The Conformo dashboard showcases our brand in action:

  • Clean card-based layout
  • Primary blue navigation and CTAs
  • Secondary green for highlights
  • Purple gradient header background
  • Clear typography hierarchy
  • Accessible color contrast
  • Professional yet approachable design

Conformo Dashboard UI

Dashboard showing GDPR compliance monitoring interface with clean card-based layout and brand colors

Color Palette Reference

The color palette is designed for:

  • Primary Blue Cobalt: UI elements, buttons, trust and security
  • Secondary Emerald Green: Success states, highlights, special text
  • Accent Warm Orange: Alerts, calls-to-action, attention
  • Neutral Gray Tones: Text, backgrounds, borders for balance

Conformo Color Palette

Complete color palette with primary, secondary, accent, and neutral colors with usage guidelines

Contact and Support

For questions about brand guidelines or implementation support:

Last Updated: October 2025
Version: 1.0
Maintained by: Conformo Team