COINED

Overview

COINED is a vibrant, student-centric platform for cultural exchange and international education, serving Spanish-speaking learners across Latin America and Spain. The brand embodies 'Energetic Approachability'—a design philosophy that combines bold, action-oriented accent colors (vivid orange-red and electric purple) with clean, modern typography to lower barriers to exploration while maintaining credibility and trust. The interface celebrates the transformative moment of stepping into a new culture, using high-contrast CTAs and warm, inviting card-based layouts to guide users through program discovery. The emotional response is one of possibility and excitement: users should feel empowered to take their next step abroad.

The brand voice is conversational, encouraging, and locally resonant. COINED speaks directly to students in their language (Spanish) with vocabulary that emphasizes agency ('Descubrí', 'Vivi tu propia experiencia') and belonging ('tu intercambio', 'te acompañamos'). The tone avoids corporate stiffness; instead, it's peer-to-peer, optimistic without being saccharine. Example sentence in brand voice: 'Vivi tu propia experiencia educativa en el extranjero y adquiri las habilidades más demandadas del siglo 21.'

Colors

COINED's color system is built on three strategic accent roles: Primary (rgb(255, 82, 36) / #ff5224), Secondary (rgb(95, 88, 235) / #5f58eb), and Tertiary (rgb(26, 115, 232) / #1a73e8). The primary orange-red is the brand's signature action color, deployed on all primary CTAs ('Consultar', 'Buscar programas'), form field borders, and interactive highlights. It conveys urgency and energy—the call to adventure. Secondary purple is reserved for secondary actions and navigation elements ('Contactar a un asesor'), creating visual hierarchy without competing for attention. Tertiary blue supports informational elements, links, and status indicators. The surface stack is anchored in clean white (#ffffff) for maximum legibility and trust, with carefully calibrated grays (surface-container-high: #e8

Typography

COINED's type system uses Mont as the primary typeface family across all scales, creating a cohesive, modern aesthetic that feels contemporary without sacrificing readability. The hierarchy spans from display (56px, 700 weight, -0.02em tracking) for hero headlines down to label-sm (12px, 500 weight, 0.05em tracking) for metadata and badges. Headlines (display through headline-md) use 600–700 weights with tighter letter-spacing (-0.01em to -0.02em) to create visual impact and draw the eye through page sections. Body text (body-lg at 18px and body-md at 16px) maintains 400 weight with 0em tracking and 1.5x line-height (28px and 24px respectively) to ensure comfortable reading on mobile and desktop. Labels and form text use 600 weight to signal interactivity and hierarchy within input fields

Layout

COINED uses a fluid, mobile-first 12-column grid system with a maximum container width of 1024px, ensuring content remains scannable on all devices without excessive line lengths. The page rhythm is driven by semantic spacing: lg spacing (40px) separates major sections (hero, card grids, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, expanding proportionally on desktop. White space is treated as a design material—the generous 48px vertical padding on cards and 32px horizontal padding create a sense of luxury and focus, preventing cognitive overload. Section transitions use the lg spacing scale to create natural visual pauses

Elevation & Depth

Depth in COINED is conveyed through a three-tier shadow system that creates subtle visual hierarchy without the heaviness of glassmorphism or dramatic drop shadows. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to all card containers and input fields, creating a gentle lift from the white surface. Level 2 (Hover/Elevated): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) on card-hover and interactive elements, signaling interactivity and focus. Level 3 (Modals/Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) reserved for modals, dropdowns, and floating action elements.

Shapes

COINED employs a 'Soft-Technical' shape philosophy: rounded corners are used consistently but never aggressively, balancing approachability with professional polish. Buttons and primary CTAs use rounded.lg (16px) to feel friendly and clickable without appearing childish. Cards and containers use rounded.xl (20px), creating a slightly softer, more inviting aesthetic that encourages exploration. Input fields and dropdowns use rounded.lg (16px) to align with button styling and signal their interactive nature. Smaller UI elements (badges, chips, list items) use rounded.md (12px) or rounded.DEFAULT

Components

Action Elements Buttons are the primary drivers of user progression through COINED's experience. The button-primary component (rgb(255, 82, 36) background, white text, 16px Mont 600, 16px rounded, 15px 30px padding, 48px height) is deployed on all primary CTAs: 'Consultar', 'Ver programas', 'Buscar programas'. On hover, the background shifts to #cc3d1a (a 20% darkening) with a 200ms ease-in-out transition, providing immediate tactile feedback. The button-secondary component uses the secondary purple (rgb(95, 88, 235)) with 20px rounded corners and 12px 24px padding, creating visual distinction for secondary actions like 'Contactar a un asesor'. Ghost buttons (transparent background, 2px primary border, primary text) are used sparingly for tertiary actions, maintaining visual hierarchy

Do's and Don'ts

**Do**

• Do use primary orange (#ff5224) exclusively on primary CTAs and form field borders—it's the brand's signature action color and loses impact if overused.
• Do maintain the 48px/32px card padding ratio; it creates the generous, inviting aesthetic that defines COINED's approachability.
• Do apply the three-tier shadow system (3px, 8px, 16px) consistently; it's the primary depth cue and must be predictable across all interactive elements.
• Do use Mont typeface at 600+ weight for all interactive labels (buttons, form fields, badges); it signals clickability and maintains visual hierarchy.
• Do respect the 1024px container-max-width on desktop; narrower containers force better content focus and prevent cognitive overload.
• Do use secondary purple (#5f58eb) for secondary actions and navigation; it creates visual hierarchy without competing with primary orange.

**Don't**

• Don't use primary orange on non-interactive elements (backgrounds, dividers, text) unless they are CTAs or form indicators—it dilutes the action signal.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.1); COINED's aesthetic is clean and modern, not dramatic or theatrical.
• Don't use rounded corners smaller than 4px (rounded.sm) on interactive elements; they feel fragile and reduce clickability perception.
• Don't mix typefaces; Mont is the sole brand typeface. System fonts (Arial, Verdana) are acceptable only as fallbacks in legacy browsers.
• Don't reduce padding on cards below 24px; the generous white space is core to COINED's premium, approachable positioning.
• Don't use pure black (#000000) for text; always use on-surface (#333333) or on-surface-variant (#666666) to reduce eye strain and maintain warmth.