Ecosystem Brand Guidelines 2025
Two Voices. One Vision.
This is the definitive brand system for Portfolio, Hub, and Insights. A single source of truth that orchestrates emotion and structure, storytelling and systems, creativity and clarity.
Version 3.0 • December 2025
Typography Usage Matrix
Visual Language
"Emojis introduce inconsistent colors and platform-dependent rendering. Always use custom SVG icons in our brand colors."
Voice & Messaging
Primary Message:
"Where creativity meets ROI—transforming artistic vision into measurable business impact through strategic marketing and design."
Supporting Message:
"From Venezuela to Seattle, bringing global perspective and cultural intelligence to every campaign, story, and visual experience."
Call to Action:
"Ready to turn your creative vision into business results? Let's create something extraordinary together."
Brand Applications
Implementation
:root {
--font-narrative: 'Playfair Display', serif;
--font-architect: 'Big Shoulders Display', sans-serif;
--font-system: 'Inter', sans-serif;
--coral: #F96F6E;
--teal: #2ED3C6;
--cloud-dancer: #F3EFE0;
--deep-blue: #2C3E50;
--cool-gray: #B2B2BB;
--ink: #FFFFFF;
--ink-dim: rgba(255,255,255,0.85);
--surface-dark: #0A0A0A;
--glass-border: rgba(255,255,255,0.1);
}
[data-theme="light"] {
--ink: #2a2a2a;
--ink-dim: #666666;
--surface-dark: #FFFFFF;
--glass-border: rgba(0,0,0,0.1);
}
.heading-narrative { font-family: var(--font-narrative); font-weight: 800; }
.heading-architect { font-family: var(--font-architect); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.body-text { font-family: var(--font-system); max-width: 65ch; line-height: 1.8; }
.hybrid-heading .narrative { font-family: var(--font-narrative); font-style: italic; color: var(--coral); }
.hybrid-heading .architect { font-family: var(--font-architect); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
Brand Philosophy
Latin warmth meets Scandinavian minimalism. Every element earns its place. Sophisticated design with purposeful restraint. This is where creativity meets ROI—transforming artistic vision into measurable business impact.
To bridge the gap between creative vision and business impact through strategic design thinking, data-driven insights, and innovative digital experiences that resonate with audiences and drive measurable results.
Typography System
The Storyteller — Editorial sophistication and emotional depth.
Use for hero headlines, narrative moments, and pull quotes that need emotional weight.
Where syntax meets stories
Strategic Intelligence
The Architect — Structural boldness and systematic clarity.
Use for navigation and section headers, project titles, and productized systems.
STRATEGIC PARTNERSHIPS
PORTFOLIO PROJECT TITLE
The Translator — Clarity, accessibility, and human readability.
Use for all body copy, UI labels, forms, captions, and supporting text.
Inter provides clear, highly readable text that scales across devices and densities. With generous line-height and balanced letterforms, it is perfect for long-form reading, UI controls, and metadata. Use Inter as the connective tissue that brings emotion and structure together in a human way.
"This isn't indecision. This is orchestration. Every typeface has a purpose. Every moment has a voice."
| Context | Primary Font | Secondary Font | Body Font | Notes |
|---|---|---|---|---|
| Landing Hero | Playfair Display | Big Shoulders | Inter | Use hybrid lockup for maximum impact |
| About / Personal Pages | Playfair Display | Inter | Inter | Human-first storytelling moments |
| Portfolio / Work Pages | Big Shoulders | Inter | Inter | Showcase the systematic build |
| Services / Products | Big Shoulders | Inter | Inter | Structural clarity and productized systems |
| Navigation / Menus | Big Shoulders | — | Inter (labels) | Architectural wayfinding |
| Editorial / Insights | Big Shoulders | Playfair (quotes) | Inter | Structure with emotional highlights |
| Timeline | Big Shoulders | Playfair (milestones) | Inter | Systematic progression with human moments |
| Contact / Forms | Playfair Display | Big Shoulders | Inter | Invitation to connect (human-first) |
Color System
Coral
#F96F6E
Strategy, leadership, primary CTAs. Use for Playfair Display accents and emotional anchor moments.
Teal
#2ED3C6
Creative execution, innovation, delivery. Use for Big Shoulders Display accents and structural elements.
Cloud Dancer
#F3EFE0 • Pantone 2026
Warm neutrality, editorial calm. The connective tissue that softens the dark/light contrast. See implementation below.
Gradient
Coral → Teal
Collaboration moments. Use sparingly for hybrid lockups or when emotion and structure converge.
Deep Blue
#2C3E50
Backgrounds, subtle accents, depth. Professional foundation that grounds the warmer tones.
Cool Gray
#B2B2BB
Secondary text, borders, subtle UI elements. The neutral translator between bold statements.