# How hiyodel.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/hiyodel.com-design)

Last updated: 2026-08-10

## Captured pages

[![Hero banner with centered Yodel logotype, pink CTA button, and whimsical fairy illustrations on curved color fields](https://pin.fontofweb.com/5478?format=jpg)](https://design.withfudge.com/share/pin-5478)

[Hero banner with centered Yodel logotype, pink CTA button, and whimsical fairy illustrations on curved color fields](https://design.withfudge.com/share/pin-5478)

[![Personal founder message with large navy headline, body paragraphs, and illustrated avatar signature](https://pin.fontofweb.com/5477?format=jpg)](https://design.withfudge.com/share/pin-5477)

[Personal founder message with large navy headline, body paragraphs, and illustrated avatar signature](https://design.withfudge.com/share/pin-5477)

[![Testimonials section with three merchant review cards, star ratings, and horizontal scroll indicator](https://pin.fontofweb.com/5476?format=jpg)](https://design.withfudge.com/share/pin-5476)

[Testimonials section with three merchant review cards, star ratings, and horizontal scroll indicator](https://design.withfudge.com/share/pin-5476)

[![Full landing page with navigation, hero headline, badge, CTA button, and decorative character illustrations](https://pin.fontofweb.com/5475?format=jpg)](https://design.withfudge.com/share/pin-5475)

[Full landing page with navigation, hero headline, badge, CTA button, and decorative character illustrations](https://design.withfudge.com/share/pin-5475)

## Overview

Yodel's landing page presents a Shopify productivity tool through a distinctive visual personality that balances professional credibility with playful charm. The design centers on a deep navy wordmark and headline system set against clean white space, punctuated by vibrant pink call-to-action elements and whimsical fairy-tale character illustrations. The overall impression is approachable and energetic—targeting merchant entrepreneurs who appreciate both efficiency and personality in their tools.

The page structure follows a classic landing-page rhythm: a navigation bar, a hero section with value proposition and primary conversion action, a personal founder message establishing trust, social proof through merchant testimonials, and a minimal footer. What distinguishes this system is the consistent integration of illustrated characters—fairy figures with wands and stars—that reinforce the "magic" of automated content generation without undermining the product's business utility. The color strategy pairs authoritative navy for trust with energetic pink for action, while soft lavender and pink background shapes create depth without competing for attention.

## Colors

The color system operates in three functional layers: authoritative dark tones for readability and trust, vibrant accents for action and emphasis, and soft atmospheric tones for decorative depth.

| token | value | use |
|---|---|---|
| ink | #1a1a5e | Primary headlines, body text, logotype, navigation links |
| ink-light | #4a4a8a | Secondary text, footer legal copy, muted labels |
| action | #c44a9c | Primary CTA buttons, interactive highlights, footer link accents |
| action-hover | #a83d84 | Button hover states, deeper emphasis moments |
| accent-blue | #4a6cf7 | Badge backgrounds, star ratings, decorative elements |
| accent-blue-light | #8ab4f8 | Headline word highlights, illustration accents |
| canvas | #ffffff | Page background, card surfaces, button text |
| surface | #f8f6fc | Subtle section alternation, testimonial area background |
| surface-blue | #e8e4f8 | Decorative curved shapes, illustration backdrops |
| surface-pink | #f0e4f0 | Warm decorative curves, secondary illustration fields |
| border | #d4d0e8 | Card outlines, subtle dividers, testimonial card borders |
| star | #4a6cf7 | Rating star fills, social proof indicators |

The navy ink establishes immediate authority for a business tool, while the magenta action color carries energetic conversion intent. The accent blue serves dual purpose: functional (badges, stars) and expressive (headline highlights, illustration details). Decorative surfaces in muted lavender and pink appear as large curved shapes behind illustrations, creating dimensional layering without photographic complexity. The overall palette avoids gradients in interface elements, relying on flat color fields with occasional soft curves for visual interest.

## Typography

The typographic system uses a single family—Poppins—across all text roles, leveraging weight and size variation to create hierarchy. The geometric sans-serif contributes to the friendly, modern character while maintaining legibility at all scales.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Poppins | 3rem | 700 | 1.1 | -0.02em | Hero headline, major value propositions |
| section-display | Poppins | 2.25rem | 700 | 1.15 | -0.01em | Section headings, testimonial title |
| body-large | Poppins | 1.25rem | 400 | 1.6 | 0 | Introductory paragraphs, founder message |
| body | Poppins | 1rem | 400 | 1.6 | 0 | Standard paragraphs, descriptions |
| body-small | Poppins | 0.875rem | 400 | 1.5 | 0 | Card content, secondary descriptions |
| label | Poppins | 0.875rem | 600 | 1.4 | 0.01em | Button text, badge labels, emphasis |
| navigation | Poppins | 0.875rem | 500 | 1.4 | 0 | Header navigation links |
| legal-copy | Poppins | 0.75rem | 400 | 1.5 | 0 | Footer copyright, terms links |

Headlines employ tight negative tracking for a compact, confident presence. The hero display uses a two-tone treatment: the majority in ink with key phrases rendered in accent-blue-light for emphasis. Body text maintains generous line height for comfortable reading of longer founder messages. The single-family approach simplifies implementation while weight variation (400, 500, 600, 700) provides sufficient hierarchy for scanning.

Poppins is designed by Jonny Pinhorn for the Indian Type Foundry. Verify licensing for these families before production use.

## Layout

The page employs a centered, content-constrained layout with generous vertical breathing room. Maximum content width is approximately 75rem, creating comfortable line lengths for readability while allowing hero illustrations to extend toward viewport edges.

The hero section centers all elements—badge, headline, subheadline, CTA button, and illustration pair—establishing immediate focus on the value proposition. Navigation sits at the extreme top with logo left-aligned and link cluster right-aligned, maintaining the content max-width constraint. Below the hero, content sections alternate between centered narrow columns (founder message) and full-width constrained containers (testimonials).

The founder message section uses an asymmetric text block, approximately 60% of content width, left-aligned with substantial right margin. This creates a personal, letter-like reading experience distinct from the centered marketing sections. The signature area combines a small circular avatar with italicized name and title, reinforcing human authenticity.

Testimonials deploy a horizontal scroll or carousel pattern with three visible card slots. Cards maintain equal width with consistent internal padding, separated by standard gutter spacing. A horizontal progress indicator below the card row suggests additional content available through interaction.

Vertical section spacing is generous, approximately 5rem between major content areas, allowing each section to register as a distinct beat in the page narrative. Internal component padding follows a modular scale based on 0.25rem increments.

## Visual language

The illustration style defines the brand's distinctive character: flat, geometric characters with minimal detail, bold color blocking, and fairy-tale thematic elements. Characters feature oversized heads, simple facial features, and costume elements (wings, wands, party hats) that suggest magic and celebration without literal fantasy narrative. The palette for illustrations draws from the interface system—navy, magenta, blue, lavender, pink—ensuring cohesion between decorative and functional elements.

Decorative background shapes are large, soft-edged curves that sweep behind illustration clusters, creating depth through overlapping color fields rather than shadows or gradients. These curves use the surface-blue and surface-pink tokens at full opacity, positioned to frame rather than compete with foreground content.

The star motif appears consistently: in the logotype (replacing the letter 'o'), as wand-toppers on characters, as scattered decorative elements, and as rating indicators. This creates a recognizable visual signature that ties brand identity to the "magic" product promise.

Interface elements maintain flat, clean surfaces. Buttons are fully rounded pills with centered text and flanking decorative plus icons. Badges share the same pill shape with smaller padding. Cards use moderate rounding with subtle border definition. No drop shadows appear in the visible interface, relying on color contrast and spacing for separation.

## Components

### Primary Action Button

- **Anatomy**: Pill-shaped container with centered text label and symmetric plus icons on either side
- **Surface**: Solid action background with canvas text
- **Typography**: label token, uppercase or title-case treatment
- **Shape**: Fully rounded (9999px), generous horizontal padding (2rem), comfortable vertical padding (0.875rem)
- **Spacing**: Centered within parent, typically preceded by descriptive text and followed by illustration content
- **Composition**: The flanking plus icons create a framed, special-event quality suggesting addition or positive action
- **Variants**: Two visible labels—"Try It For Free" and "Add To Shopify For Free"—share identical styling

### Secondary Badge

- **Anatomy**: Compact pill container with centered text
- **Surface**: Solid accent-blue background with canvas text
- **Typography**: label token at reduced weight or smaller size than buttons
- **Shape**: Fully rounded, moderate padding (0.5rem vertical, 1rem horizontal)
- **Spacing**: Positioned above hero headline as category or trust indicator
- **Composition**: "Built For Shopify" and "Testimonials" variants establish context without competing with primary headlines

### Testimonial Card

- **Anatomy**: Rounded rectangle containing star rating row, merchant name, and quotation text
- **Surface**: Canvas background with subtle border definition
- **Typography**: Merchant name in body-small with accent-blue color; quotation in body or body-small in ink; star rating uses star color
- **Shape**: 1rem border radius, consistent internal padding (1.5rem)
- **Spacing**: Equal-width cards in horizontal sequence with standard gutter separation
- **Composition**: Star row and merchant name form a header area; quotation fills remaining vertical space with natural line breaks
- **Variants**: Three visible merchant examples (InterCyprus, Crafty-Clayworks, Mydressline) share identical structure

### Navigation Bar

- **Anatomy**: Horizontal row with logo left, link cluster right, optional CTA link at far right
- **Surface**: Transparent or canvas background, no visible border
- **Typography**: navigation token for standard links; action color for emphasized "Try Yodel for FREE" link
- **Spacing**: Logo with comfortable left margin, links with even horizontal distribution, generous vertical padding
- **Composition**: The rightmost link uses action color to draw conversion attention without button styling

### Footer Legal

- **Anatomy**: Centered text line with copyright, separator pipes, and linked terms
- **Surface**: Transparent, inherits page background
- **Typography**: legal-copy token in ink-light, with action color for interactive links
- **Spacing**: Compact vertical padding, positioned below main content with generous top margin

## Responsive behavior

The visible desktop layout suggests several responsive adaptation points. The centered hero composition should maintain vertical stacking on narrower viewports, with headline size scaling down to preserve readability without excessive line breaks. The two-character illustration cluster may shift from side-by-side to stacked or reduce to a single primary illustration.

The founder message's asymmetric left-aligned block should likely expand to full content width on mobile, eliminating the generous right margin that creates the letter-like quality on desktop. The signature avatar and text may stack vertically if horizontal space becomes constrained.

The testimonial carousel presents the clearest responsive challenge: the three-card visible set should reduce to single-card focus on narrow viewports, with swipe or arrow navigation replacing the horizontal scroll indicator. Card internal padding should remain consistent, but external gutters may compress.

Navigation links should collapse to a hamburger menu or simplified icon on mobile, preserving the action-colored CTA link as persistently visible if possible. The logo should scale proportionally, maintaining legibility at smaller sizes.

## Practical implementation guidance

### Preserve
- The single-family typographic system with weight-based hierarchy
- The distinctive pill-shaped buttons with flanking plus icons
- The two-tone headline treatment (ink base with accent-blue-light emphasis)
- The flat illustration style with geometric simplification and fairy-tale motifs
- The generous section spacing that creates breathing room between content beats
- The star motif as a consistent brand signature across logotype, decoration, and ratings

### Avoid
- Adding drop shadows or dimensional effects that contradict the flat visual language
- Introducing additional font families that would dilute the cohesive geometric character
- Using the action pink for large background areas—it functions best as an accent and CTA color
- Crowding the hero with excessive text; the current minimal approach focuses attention effectively
- Gradient fills in interface elements; the system relies on solid color fields

### Recommended Build Order
1. Establish the typographic foundation with Poppins at all weights
2. Implement the color tokens, particularly ink, action, and accent-blue
3. Build the hero section with centered composition, badge, headline, and primary CTA
4. Add the navigation bar with logo and link structure
5. Create the illustration system with character components and decorative curves
6. Implement the founder message section with asymmetric text block
7. Build the testimonial card component and carousel container
8. Add the footer legal component
9. Apply responsive scaling and breakpoint adjustments

### Accessibility
- Ensure the action pink on white meets minimum contrast ratios for interactive elements; the current tone may need darkening for WCAG AA compliance
- Provide visible focus states for all interactive elements, using ink or accent-blue outlines
- Maintain semantic heading hierarchy despite the visual size similarities between sections
- Add descriptive alt text for character illustrations that conveys their decorative purpose
- Ensure the testimonial carousel is operable via keyboard and screen reader, with clear current-item indication
- Consider adding reduced-motion preferences for any scroll-triggered animations

## Scope note

This guide covers the visible landing page surface including hero, founder message, testimonials, and footer sections. Pricing pages, app interface screens, mobile layouts, hover states, loading sequences, and form interactions are not represented in the supplied materials. Measurements are practical adaptation targets derived from visual inspection.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).