valantic-brand

Valantic Brand Styling

Overview

To access Valantic's official brand identity resources, use this skill. This includes the Liquid Brand Design system, which adapts the visual language to specific target groups while maintaining the One Firm identity.

Keywords: Liquid Brand Design, Route A, Route B, Route C, valantic gradient, Segoe UI, Calibre, visual identity, One Firm

---

1. Liquid Brand Design Strategy

The Valantic brand operates on a flexible Liquid Brand Design model. This allows for distinct visual communication depending on the target group and touchpoint.

Visual Routes (The A–B–C System)

Select the appropriate route based on the audience and message intensity.

Route A: Restrained & Elegant

• Attributes: Restrained, elegant, informative, serious
• Target Audience: Conservative industries (Banking, Insurance), high-probity services (Finance, Legal, Data Privacy)
• Use Cases: Invoices, data sheets, formal reporting
• Visual Style: Standard layouts, minimal distraction

Route B: Self-Confident & Human (Standard)

• Attributes: Self-confident, activating, human, approachable
• Status: Default choice (covers ~80% of use cases)
• Target Audience: Agile customers (IT, Automotive, Manufacturing), internal communications
• Use Cases: Project updates, team presentations, general communication
• Visual Style: Circular portrait mask ("Route B Shape") emphasizing the human element

Route C: Dynamic & Expressive

• Attributes: Dynamic, present, expressive, bold
• Target Audience: Marketing, start-ups, recruiting (talent acquisition)
• Use Cases: Fairs, events, zeitgeist-sensitive industries (e-commerce, tourism)
• Visual Style: Irregular "Valantic V" polygon mask with high visual energy

---

2. Design Tokens & Colors

Primary Brand Colors

• Valantic Coral: #FF5757 — primary accent for headings, links, and highlights
• Purple Heart: #4C26B7 — secondary anchor (deep blue-purple, used sparingly)
• Peach: #FFCCAA — secondary accent, primarily used in gradients

Utility Colors

• Info Blue: #4A9EFF — informational callouts and tips
• Warning Orange: #FF9800 — warnings and important notices

Text Colors

• Primary Text: #333333 — body text
• Dark Text: #1A1A1A — emphasized text, subheadings
• Light Background: #F8F8F8 — intro sections, table headers

The Valantic Gradient

The gradient adds depth and recognition without overwhelming content.

• Colors: Valantic Coral (#FF5757) → Peach (#FFCCAA)
• Angle: 315° (top-left to bottom-right)
• Usage: Shapes, active elements, selected icons

---

3. Typography System

Digital & Web Standard

• Font Family: Calibre
• Fallbacks: Segoe UI, Helvetica, Arial, sans-serif
• Weights:
  • H1/H2 (Section Titles): Light (300) — CORAL color
  • H3/H4 (Subsections): Semibold/Bold (600) — BLACK color
  • Body: Regular (400)

Heading Hierarchy

Level	Color	Weight	Example
H1	#FF5757 Coral	300 (Light)	Main document titles
H2	#FF5757 Coral	300 (Light)	Section headings
H3	#1A1A1A Black	600 (Semibold)	Subsection headings
H4	#1A1A1A Black	600 (Semibold)	Detail headings

Special Text Styles

• Pull Quotes: Coral (#FF5757), italic
• Person Names: Coral (#FF5757), bold
• Running Header: Black, uppercase

Office & Presentation Standard (PowerPoint / Word)

When proprietary fonts are unavailable, use Segoe UI.

• Rule: Do not use Segoe UI Bold (poor proportions on Windows)
• Correct Usage: Use Segoe UI Semibold for headings and emphasized text

---

4. Iconography & Imagery

Icon Style

• Source: Microsoft Stock Icons (Thin style)
• Coloring:
  • Default: Valantic Coral (#FF5757)
  • Route-specific: Purple Heart (#4C26B7) for formal contexts
  • Highlights: Apply the valantic gradient (315°) selectively

Generative Image Workflow

• Requirement: Header images (especially Route C) must use Generative Fill to extend the canvas horizontally
• Goal: Prevent cropping of faces or subjects when applying irregular Valantic masks

---

5. Technical Implementation Details

CSS Variables (Web)

:root {
  /* Primary Brand Colors */
  --valantic-coral: #FF5757;
  --valantic-purple: #4C26B7;
  --valantic-peach: #FFCCAA;

  /* Utility Colors */
  --valantic-info: #4A9EFF;
  --valantic-warning: #FF9800;

  /* Text Colors */
  --text-primary: #333333;
  --text-dark: #1A1A1A;
  --bg-light: #F8F8F8;

  /* Gradient */
  --valantic-gradient: linear-gradient(
    315deg,
    #FF5757 0%,
    #FFCCAA 100%
  );

  /* Typography */
  --font-primary: "Calibre", "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2 {
  color: var(--valantic-coral);
  font-weight: 300;
}

h3, h4 {
  color: var(--text-dark);
  font-weight: 600;
}

p {
  color: var(--text-primary);
  line-height: 1.6;
}

a {
  color: var(--valantic-coral);
  text-decoration: none;
}

.pull-quote, blockquote.highlight {
  color: var(--valantic-coral);
  font-style: italic;
}

.author-name {
  color: var(--valantic-coral);
  font-weight: 600;
}

.highlight-box {
  border-left: 4pt solid var(--valantic-coral);
  background: #fff5f5;
  padding: 12pt 12pt 12pt 15pt;
}

.info-box {
  border-left: 4pt solid var(--valantic-info);
  background: #f0f8ff;
  padding: 12pt 12pt 12pt 15pt;
}

.warning-box {
  border-left: 4pt solid var(--valantic-warning);
  background: #fff8f0;
  padding: 12pt 12pt 12pt 15pt;
}

th {
  background: var(--bg-light);
  font-weight: 600;
}

.chart-primary { fill: var(--valantic-coral); }
.chart-secondary { fill: #999999; }

List Formatting (Presentations)

• Levels 1–3: Standard bullets
• Level 4:
  • Bold Coral (Route B / C)
  • Black (Route A) Used as subheadings within lists

---

6. Quick Reference

Color Palette

Name	Hex	RGB	Usage
Valantic Coral	#FF5757	255, 87, 87	H1/H2 headings, links, quotes, accents
Purple Heart	#4C26B7	76, 38, 183	Secondary brand, formal contexts
Peach	#FFCCAA	255, 204, 170	Gradient end, soft backgrounds
Info Blue	#4A9EFF	74, 158, 255	Info callouts
Warning Orange	#FF9800	255, 152, 0	Warning callouts
Text Primary	#333333	51, 51, 51	Body text
Text Dark	#1A1A1A	26, 26, 26	H3/H4 headings, bold text
Background Light	#F8F8F8	248, 248, 248	Intro boxes, table headers

Element Quick Reference

Element	Color	Weight	Style
H1, H2	Coral #FF5757	300	Normal
H3, H4	Black #1A1A1A	600	Normal
Body	Gray #333333	400	Normal
Pull Quote	Coral #FF5757	400	Italic
Author Name	Coral #FF5757	600	Normal
Links	Coral #FF5757	-	No underline
Chart Bars	Coral #FF5757	-	Primary data