HomeAway’s First Design Language

Design language is an expressive medium. It’s a holistic knowledge and guidelines we use to build our products and it includes such disciplines as: visual system, component library, product content, research, video & photography, motion, sound, interaction guide.


The goal was to streamline how we build our product without losing the fidelity and craftsmanship. The goal also was to improve how design is collaborating with development. HomeAway has reached the point where the design had a seat at the table and company-wide support. Before we started a massive exercise across all disciplines defining our first language, we knew we have to align on our design principles.

Design principles matter. They define and communicate the critical characteristics of each product experience we build. The principles act as a filter we can run our design decisions through, always keeping our experiences moving toward a holistic goal.

Design Language Pillars
  • Design Principles
  • Typography Guidelines
  • Baseline & Grids
  • Spacing & Vertical Rhythm
  • Accessibility Standards
  • Interaction Guidelines
  • Company-wide Cadence
  • Research. Personas.

Less isn’t more. But sometimes less is better. We developed a stron rule that each element and interaction had to deserve it’s space on the screen. We were able to declutter, simplify, and improve user experience employing this principle.

Early on we established our design principles that will guide our design system.

Soul is authenticity. It’s something you feel: the intangible spirit of a well-designed product. It’s there in the product’s poetry -- the way the words, visuals, and interactions combine to form something that’s not just usable, but intuitive and seductive to use.


Do the right thing. Our experience had to be helpful and empowering. We’ve enabled data insights with recommendations to help the homeowner make more money through smart pricing and be more competitive. At the same time, the traveler was able to find the perfect vacation rental faster and cheaper.


Context is everything. We were well aware of the need to be in tune with the user. The way owners and travelers and homeowners owners interact with our platform on the Web is different from how they use Apps.

Defining vertical rhythm, spacing, type anatopy and type scale.
Typography, Type Scale, and Legibility

A simplified typographic approach allows us to establish a clear visual hierarchy and to optimize readability and legibility. We chose humanist fonts with calligraphic structure and variable stroke widths. Open forms help lead the eye horizontally, making an excellent font for reading and small text.

Design language allows using multiple color formats
Color Pallette

The primary palette uses bright colors to bring boldness to HomeAway’s brand and is used in logical ways throughout product and marketing to guide the eye and highlight the significant bits. Our signature color palette of Blue and White creates a powerful differentiator for our brand. Using this palette appropriately and consistently creates an additional layer of distinction.

HomeAway’s Vertical Rhythm was established with 8px soft grid.
Spacing & Vertical Rhythm

The French composer Claude Debussy had a saying, "The music is not in the notes, but in the silence between them." The same thing goes for the way we use spacing to refine an experience.

Spacing isn't just the distance between letters and objects. It's a design element all its own. Spacing makes copy easier to read, interfaces easier to navigate, and ideas easier to comprehend.

Emotion journey helps designer keep focus on a critical moments within a particular experience.
Research as a pillar.

Personas are archetypes that encapsulate the most critical data and observed behavioral patterns among our users in a way that’s easy to understand, relate to, and remember—making them powerful tools in creating and iterating products and designs.

Six personas had distinct priorities, behavior and motivations that informed a lot of design desicions.
Persona informed design.

Six personas were created with real data and then extensively reviewed by panels of cognitive scientists—all so HomeAway could build with the utmost confidence while using them. We were committed to evolving personas as the data evolves, so our personas will always be highly relevant tools that you can use to advance your designs.

When developing user personas, the designer must collect actionable information that tells you something about the person so that you can respond to their behavior with persuasive, impactful marketing.