TechTown Brand Guidelines

Overview

TechTown is a French tech consulting company specializing in Cloud & AI expertise, based in Nantes. The brand identity reflects innovation, technical excellence, and approachability.

Color Palette

Primary Colors

Text Colors

Background Colors

Gradient Colors

Special Purpose Colors

TechReady Event

Chatbot (Purple Theme)

Social Media

Google Brand

Typography

Font Family

• Primary Font: Poppins (sans-serif)
• Fallback: System sans-serif stack

font-family: "Poppins", sans-serif;

Font Weights

Font Sizes

Line Height

Default line height: 1.6 for body text, 1.4 for headings.

Spacing System

Layout

Shadows

/* Standard shadow */
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

/* Large shadow (cards, elevated elements) */
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

Components

Buttons

Primary Button

.btn {
  padding: var(--spacing-sm) var(--spacing-lg); /* 12px 24px */
  background-color: var(--color-primary); /* #1C62ED */
  color: white;
  border-radius: var(--border-radius); /* 8px */
  font-weight: var(--font-weight-medium); /* 500 */
  border: 2px solid transparent;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: var(--color-primary-dark); /* #1557D6 */
}

Secondary Button (Outlined)

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: white;
}

White Button (on dark backgrounds)

.btn-white {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.btn-white:hover {
  background-color: white;
  color: var(--color-primary);
}

Cards

Standard card styling:

.card {
  background: white;
  padding: var(--spacing-2xl); /* 48px */
  border-radius: var(--border-radius-lg); /* 16px */
  box-shadow: var(--shadow-lg);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

Icon Circles

Circular icons with primary background and texture:

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--texture-noise-light) var(--color-primary);
  color: white;
}

/* Sizes */
.icon--sm {
  width: 60px;
  height: 60px;
}
.icon--md {
  width: 100px;
  height: 100px;
}
.icon--lg {
  width: 100px;
  height: 100px;
}

Sections

.section {
  padding: var(--spacing-3xl) 0; /* 64px vertical */
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  color: var(--color-text);
}

Primary Background Section

.services {
  background: var(--texture-noise-light) var(--color-primary);
  color: var(--color-text-white);
}

Logo

Files (included in assets/)

Usage

<!-- Header logo -->
<img
  src="/techtown-logo.svg"
  alt="TechTown"
  class="brand-logo"
  width="167"
  height="30"
/>

<!-- Hero logo (larger) -->
<img
  src="/techtown-logo.svg"
  alt="TechTown"
  class="hero-logo"
  width="445"
  height="80"
/>

Guidelines

• Always use SVG when possible for crisp rendering
• Maintain aspect ratio
• Provide adequate clear space around the logo
• On dark backgrounds, use the light/white variant

Textures

A subtle noise texture is used on primary-colored backgrounds.

File: noise-light.png

--texture-noise-light: url(/noise-light.png);

/* Applied to primary backgrounds */
background: var(--texture-noise-light) var(--color-primary);

Responsive Breakpoints

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-md);
  }

  .section {
    padding: var(--spacing-2xl) 0 var(--spacing-md);
  }
}

Grid System

.grid {
  display: grid;
  gap: var(--spacing-xl); /* 32px */
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Best Practices

1. Consistency: Always use CSS variables instead of hardcoded values
2. Accessibility: Ensure sufficient color contrast (WCAG AA minimum)
3. Primary Blue Usage: Reserve #1C62ED for interactive elements and brand emphasis
4. White Space: Use generous spacing for clean, modern feel
5. Typography Hierarchy: Clear visual hierarchy using font weights and sizes
6. Hover States: Apply subtle transitions (0.2-0.3s ease) for interactive elements
7. Card Elevation: Use shadows and hover transforms for depth
8. Mobile First: Design for mobile, enhance for desktop