Finiquita tu Deuda

Overview

Finiquita tu Deuda is a Spanish financial services brand specializing in debt resolution and negotiation. The design system embodies 'Warm Professional Minimalism'—a visual language that combines the credibility of financial expertise with the accessibility of human-centered care. The aesthetic uses soft, rounded forms (50% border-radius on primary CTAs, 20px on secondary elements) paired with a confident color palette anchored by vibrant green (#25d366) for action and bold red (#e62222) for urgency, set against clean white surfaces (rgb(255, 255, 255)). The brand evokes trust through clarity: every interface element serves a purpose, and visual hierarchy is achieved through scale, color, and subtle depth (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on elevated cards).

The voice is direct, empathetic, and solution-focused. Tone: conversational but professional, never patronizing. Vocabulary emphasizes agency and partnership—'Libérate' (liberate yourself), 'No estás solo' (you're not alone), 'Nuestro equipo' (our team). The brand speaks to financially stressed individuals with respect and optimism, using concrete language ('Estudio de viabilidad GRATUITO'—free viability study) rather than jargon. Example sentence in brand voice: 'Con un promedio de 4.8, somos los más populares—porque tu libertad financiera es nuestra prioridad.'

Colors

The color system balances emotional warmth with financial credibility. Primary (#25d366, rgb(37, 211, 102)) is a vibrant, action-oriented green used exclusively on call-to-action buttons, interactive elements, and success states. It signals growth, resolution, and forward momentum. Secondary (#e62222, rgb(230, 34, 34)) is a bold red deployed on secondary CTAs, alerts, and emphasis text—it conveys urgency and importance without aggression. Tertiary (#6ec1e4, rgb(110, 193, 228)) is a soft cyan used for informational accents, highlights, and supporting UI elements, adding visual interest without competing for attention.

The surface stack anchors the design in clean, professional neutrality: surface (#ffffff) is the primary canvas, with surface-container-low (#f0f0f0) used for subtle backgrou

Typography

The type system uses a two-family approach: Roboto for all headings (display, headline-lg, headline-md, title-lg) and system fonts (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif) for body text, with Poppins reserved for button labels and small UI text. This creates visual hierarchy while maintaining legibility across devices.

Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence. Headline-lg (40px, 700 weight, -0.02em) is used for major section titles like 'Libérate de Deudas con Finiquita tu Deuda'. Headline-md (28px, 700 weight) breaks up content sections. Body-lg (18px, 400 weight, 28px line-height) is used for primary CTA text and prominent body copy, while body-md (16px, 400 weight, 24px line-height)

Layout

The layout system uses a 12-column grid with a max-width of 1200px (--wp--style--global--wide-size: 1200px), constrained to 800px for content-heavy sections (--wp--style--global--content-size: 800px). The design employs a fluid, mobile-first approach: sections stack vertically on small screens and expand to multi-column layouts at breakpoints (768px, 1024px, 1200px).

White-space is generous and intentional: section-to-section separation uses lg spacing (40px) to create breathing room and visual rhythm. Within cards and containers, md spacing (24px) is the default padding, with sm spacing (12px) used for internal element separation. The gutter between grid columns is 24px, maintained consistently across all breakpoints. Container margins follow the pattern: 24px on mobile, 40px on tablet,

Elevation & Depth

Depth is conveyed through a three-level shadow system combined with subtle background color shifts. Level 1 (Base/Flat) uses no shadow—elements sit flush on the surface (#ffffff). Level 2 (Elevated Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with a light background shift to surface-container-low (#f0f0f0). This is used on service cards, input fields, and secondary containers. Level 3 (Modals/Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), typically applied to floating elements like WhatsApp chat buttons or modal dialogs.

On hover, cards transition from Level 2

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners signal friendliness and accessibility, while measured radius values prevent the design from feeling overly playful or informal. Primary CTAs use full border-radius (50%, or 9999px in CSS), creating pill-shaped buttons that feel inviting and modern. Secondary buttons use xl radius (20px), slightly less aggressive but still warm. Service cards and containers use md radius (6px) or lg radius (10px), providing subtle softness without compromising professional appearance. Input fields use DEFAULT radius (5px), balancing form functiona

Components

Action Elements Primary buttons (button-primary) use backgroundColor: {colors.primary} (#25d366), textColor: white, fontFamily: Inter, fontSize: 18px, fontWeight: 400, borderRadius: 50%, padding: 8px 24px, height: 44px. On hover, the background shifts to #1fb854 with a subtle scale(1.02) transform and 0.2s ease-out transition. Secondary buttons (button-secondary) use backgroundColor: {colors.secondary} (#e62222), fontFamily: Poppins, fontSize: 14px, fontWeight: 500, borderRadius: 20px, padding: 12px 24px. Hover state darkens to #c41e1e. Both button types have no border and use white text for maximum contrast. The WhatsApp CTA button is fixed bottom-right (bottom: 20px, right: 60px, z-index: 999) with a 40px × 40px icon, scale(1.2) on hover, and a tooltip that appears on hover with back

Do's and Don'ts

**Do**

• Do use primary green (#25d366) exclusively on CTAs and success states—it's the brand's signature action color and must never be diluted or overused on non-interactive elements.
• Do apply the three-level shadow system consistently: flat (no shadow) for base surfaces, 0 3px 8px rgba(0, 0, 0, 0.15) for elevated cards, and 0 8px 24px rgba(0, 0, 0, 0.12) for modals—never mix shadow depths.
• Do maintain 24px gutter spacing between grid columns and 40px section separation (lg spacing) to preserve the clean, breathable layout rhythm across all breakpoints.
• Do use Roboto 700 weight for all headings with negative letter-spacing (-0.02em to -0.04em) to create premium visual weight and hierarchy.
• Do apply transform: translateY(-8px) on card hover states paired with shadow upgrade and 0.3s ease-out transition for consistent, polished interaction feedback.

**Don't**

• Don't use secondary red (#e62222) on primary CTAs—it's reserved for secondary actions, alerts, and urgency signals; mixing red and green CTAs creates visual confusion.
• Don't apply border-radius values outside the defined scale (3px, 5px, 6px, 10px, 20px, 50%)—arbitrary radii break the cohesive, intentional aesthetic.
• Don't center-align body text or paragraphs; left-align all body copy to maintain readability and professional appearance. Center only headings and CTAs.
• Don't use box-shadow on text elements or inline components—shadows are reserved for container-level depth only to maintain clarity and hierarchy.
• Don't exceed 1200px max-width on desktop or constrain content to less than 800px on tablet; respect the grid system to ensure consistent, scalable layouts across devices.