Design Ops
Research-driven design for CAAS products. Every asset starts with audience understanding, not aesthetics.
Start With the Brief
Every design starts by answering these questions. No exceptions.
What action should they take?
Sign up, approve, understand, share, purchase. One primary action per asset.
Who sees this?
Spanish consumers, investors, expats, internal team. Age, tech literacy, cultural context.
What should it feel like?
Dark ops, luxury, friendly, editorial, playful, minimal. Pick one and commit.
What do competitors look like?
Study them, then look different. Steal patterns, not style.
The Brief Template
ASSET TYPE: [landing page | deck | chart | dashboard | doc]
PRODUCT: [cambialeon | voyachat | renie | seldon | reservbot]
GOAL: [what action should the viewer take?]
AUDIENCE: [who sees this? age, context, tech level]
TONE: [dark ops | luxury | friendly | editorial | minimal]
KEY MESSAGE:[one sentence — what must they remember?]
TRUST: [trustpilot, customer count, regulatory, testimonials]
CTA: [WhatsApp, sign up, approve, download]
AVOID: [what competitor patterns to NOT copy]Typography
Font choice is 80% of a design's personality. Never use system fonts for headlines.
Font Pairings by Product
| Product | Headers | Body | Vibe |
|---|---|---|---|
| Cambialeon | Instrument Serif | Satoshi | Trust + modern energy |
| VoyaChat | Playfair Display | DM Sans | Travel sophistication |
| ReNie | Recoleta | Rubik | Warm + approachable |
| Seldon Corp | Instrument Serif | Satoshi | Geometric luxury |
| Internal/Ops | JetBrains Mono | DM Sans | Precision + clarity |
Size Scale
| Element | Desktop | Mobile |
|---|---|---|
| Hero headline | 56-72px | 36-44px |
| Section title (H2) | 32-40px | 24-28px |
| Subsection (H3) | 20-24px | 18-20px |
| Body text | 16-18px | 15-16px |
| Small / labels | 13-14px | 12-13px |
| Mono / data | 13-14px | 12-13px |
Color Palettes
Each product has its own palette. Dominant color + sharp accent beats evenly-distributed palettes.
Cambialeon — Energy
VoyaChat — Travel Insurance
ReNie — Immigration
Seldon Corporate
Layout Patterns
Asymmetric Hero
One oversized headline + one supporting element. Off-center creates visual tension. 56px+ display font.
Bento Grid
Asymmetrical boxes with varied sizes. Large hero card + smaller info cards. Not a 3x3 grid.
3-Tier Cards
Basic / Popular (highlighted) / Premium. Savings emphasized over price. "Save €480/year" beats "€30/month".
Sticky Bottom CTA
Primary action fixed at bottom. 48px min height. WhatsApp green. Visible at all scroll positions.
Spacing System
Desktop section padding: 80px+. Card gaps: 16-24px. Mobile: halve everything. Generous whitespace > cramped content.
Motion & Animation
What Works
- Page load: Staggered fade-up, 0.6s, 100ms delay between elements
- Hover: translateY(-2px) + shadow increase, 0.15s ease
- Scroll reveal: IntersectionObserver fade-in, 0.5s
- Form validation: Green checkmark appears inline, 0.2s
What to Avoid
- Bounce/spring animations on text
- Auto-playing background videos
- Parallax on every section
- Fade-in on every paragraph (kills perceived speed)
transform and opacity (GPU-accelerated). Never animate width, height, left, or top.Trust Signals
Spanish consumers need specific trust markers. Generic "we're great" doesn't convert.
| Signal | Placement | Impact |
|---|---|---|
| Trustpilot / Google Reviews | Hero or header, sticky on mobile | Highest |
| Customer count | Hero subtitle: "12,340 clientes" | High |
| Regulatory logos | Footer or near CTA (CNMC, DGSFP) | High |
| Real testimonials | Dedicated section, name + city | High |
| Company CIF | Footer (B26921650) | Medium |
| Physical address | Footer (Calle Zamora 45, Barcelona) | Medium |
| GDPR badge | Near data collection forms | Medium |
| "Featured in" logos | Below hero (El Pais, RTVE, etc.) | Medium |
WhatsApp CTA
Primary contact method in Spain. Not optional — it's the main CTA.
Button Pattern
<a href="https://wa.me/34XXXXXXXXX?text=Hola!%20Me%20interesa..."
class="wa-btn">
Chat on WhatsApp
</a>Rules
- Official green:
#25D366— always use this, not brand green - Pre-fill the message with context ("Hola, me interesa comparar tarifas...")
- Show business hours: "Lun-Vie 9-18h"
- Sticky on mobile (bottom bar or floating)
- Text says "Chat on WhatsApp" not "Contact Us"
Form Design
Progressive disclosure converts 40% better than showing all fields at once.
The Pattern
- Step 1: 2-3 fields only (postal code + supply type)
- Step 2: 2-3 more fields (consumption + current provider)
- Step 3: Contact info (name + phone/WhatsApp)
Field Rules
- One input per line on mobile
- Inline validation with green checkmarks (real-time)
- "This takes 2 minutes" reassurance near top
- Correct keyboard per field (email, numpad, text)
- Progress bar: "Step 1 of 3"
- Never more than 5 fields visible simultaneously
Tools & Resources
Google Fonts
fonts.google.com — free, variable fonts. Use Instrument Serif, Satoshi, JetBrains Mono.
Coolors.co
Palette generation. Spacebar = new palette. Lock colors you like. Export as CSS variables.
Tabler Icons
tabler-icons.io — 5,500+ free SVG icons. Consistent 2px stroke. React/Vue packages.
Undraw
undraw.co — free customizable SVGs. Change colors to match brand. Search by keyword.
Tailwind CSS v4
Utility-first, 5x faster builds. Full control. 31M weekly downloads. The standard.
Cloudflare Pages
Free hosting. Global CDN. Password protection via gate. Deploy in 10 seconds.
The Design Agent
One command to research, design, and deploy.
# Full design with research
claude --agent designer "Landing page for VoyaChat targeting Spanish families"
# Quick chart
claude --agent designer "Savings comparison chart for Cambialeon investor deck"
# Presentation
claude --agent designer "10-section pitch deck for Seldon Solutions"
# Internal dashboard
claude --agent designer "Sim results dashboard for CAAS testing framework"What the Agent Does
- Research — analyzes audience, competitors, cultural preferences
- Brief — fills in the design brief template
- Design — builds production HTML/CSS with correct fonts, colors, motion
- Deploy — pushes to Cloudflare Pages with password gate
- Deliver — sends link + password via Telegram