Sonrisa Group
Product Designer & Creative Director — Digital Marketing Agency Website
Overview
Full website design for a digital marketing agency
Sonrisa Group is a premier technology consulting firm that partners with high-growth B2B SaaS businesses. They needed a complete website that reflects their professionalism, builds trust with enterprise clients, and drives conversions—all while conveying the warmth behind their brand name ("Sonrisa" means smile in Spanish).
The Challenge
Balancing trust, creativity, and conversion
Sonrisa Group needed to position itself as a credible partner for enterprise SaaS companies while standing out in a crowded consulting landscape. The site had to instantly convey expertise and reliability, yet feel approachable—not cold or corporate.
Key challenges included: building a visual identity that balances professionalism with warmth, creating a conversion-oriented layout without feeling "salesy," and ensuring the design worked beautifully across all devices with accessibility standards (WCAG 2.1 AA) baked in from the start.
Design Philosophy
Dark/light contrast with animated depth
The design language uses a bold dark hero that commands attention, transitioning into warm cream sections that invite reading. Wave transitions and animated elements add personality without sacrificing performance.
Dark/Light Contrast
Navy hero creates authority; cream body sections feel warm and readable—a deliberate emotional arc from impact to approachability.
Wave Transitions
Custom SVG wave dividers replace hard section breaks with fluid, organic curves—reinforcing the brand's friendly personality.
Accessibility-Focused
WCAG 2.1 AA compliance from day one. All interactive elements meet 44px touch targets, semantic HTML, and proper contrast ratios.
Visual Showcase
The final design in context
A dark navy hero with animated canvas and floating glow elements creates an immersive first impression, transitioning smoothly into warm cream content sections via custom SVG wave dividers.
Color & Typography
Navy depth meets warm cream
The palette is anchored by a deep navy that conveys authority and trust, balanced with a warm cream background. Strategic blue accents guide the eye toward calls to action.
Color Palette
Navy
#010028
Blue Primary
#4A90D9
Deep Blue
#2563EB
Light Blue
#6BB5F0
Cream
#fffbf7
Typography
Headlines — Lora
The Human Side
Serif · Brushed curves · Gravitas with warmth
Body — Inter
Clean & Legible
Sans-serif · Open apertures · Tall x-height
Sections Designed
Two pages, every detail crafted
Each section was designed to guide the visitor from initial impact to conversion, with a deliberate emotional arc.
Hero with Animated Canvas
Full-viewport dark hero with particle animation, floating glow blobs, and gradient text. Two CTA buttons drive conversion above the fold.
✦ Animated CanvasServices Grid
4-column card grid with icon badges, subtle borders, and hover-lift animations. Each card is a clear entry point to a capability.
✦ Card GridAbout Section
Counter-animated statistics (150+ projects, 98% retention) paired with narrative about the company's mission and culture.
✦ Counter AnimationPartners & Trust
Logo strip with subtle grayscale-to-color hover effect, providing enterprise social proof and trust signals.
✦ Trust StripCTA Section
Dark navy contact section with gradient-bordered CTA button, creating a strong visual endpoint that drives inquiries.
✦ Gradient CTAFooter
Clean footer with navigation links, contact info, and social icons — consistent with the dark-to-light brand language.
✦ Brand FooterKey Design Decisions
Why every detail matters
Dark / Light Contrast
The navy hero creates a bold first impression, while cream body sections feel warm and readable—a deliberate emotional arc.
Wave Transitions
Custom SVG wave dividers replace hard section breaks with fluid, organic curves—reinforcing the brand's friendly personality.
Animated Hero
Subtle particle animation adds depth and sophistication without distracting from core messaging. Glow blobs create ambient movement.
Responsive Grid
A fluid 4→2→1 column grid, clamp-based typography, and slide-out mobile menu ensure a polished experience at every breakpoint.
44px Touch Targets
All interactive targets meet WCAG's 44px minimum, color contrasts pass AA standards, and semantic HTML ensures screen reader compatibility.
Hover Lift Effects
White cards with subtle blue-tinted borders and soft hover lifts create consistent, scannable layout for services.
Results
What was delivered
2
Pages Delivered
100%
Fully Responsive
AA
Accessibility Compliant
95+
Performance Score
Workflow
Human creativity, amplified by AI
AI-Enhanced Design Process
This project leveraged an AI-enhanced workflow where AI tools accelerated ideation, code generation, and iteration—while every creative and strategic decision was made by the designer. AI assisted with competitor analysis, content strategy, and rapid prototyping, but all visual and brand decisions remained human-led.