Design Statement

Typography & Layout

I chose Playfair Display for headings and Roboto for body text. Playfair Display has a classic, elegant serif look that helps the titles feel premium and almost magazine-like, which matches the idea of a luxury resort. Roboto is a clean sans-serif font that stays easy to read on screens and balances the more decorative headings. Text is aligned mostly left to keep reading natural, while section introductions are centered to make them stand out as key ideas. The layout uses a consistent max width and grid system. Each page has a sticky header with navigation so users can move between pages at any time. Content is organized using cards in three-column grids on desktop, which collapse into a single column on small screens. This keeps images and descriptions visually grouped together, making it easy to scan activities and restaurants.

Color, Imagery & Buttons

The color palette is based on deep navy and soft teal to suggest a calm nighttime ocean, with bright cyan as the accent. The dark background also helps photos and buttons stand out. Images are placed at the top of cards so that users see the visual first, then read supporting details. Rounded corners and soft shadows are used throughout to make the UI feel gentle and safe, which fits the relaxing vacation theme. All primary actions—such as “Book now,” “Contact us,” and “Reserve a table”—are styled as pill-shaped buttons with gradients and strong contrast so they are easy to notice. Secondary actions are ghost buttons with a thin border, giving clear visual hierarchy.

Animation & Interaction

I added a subtle animation to the main “Book now” button on the home page using a floatPulse keyframe. The button gently rises and falls while its shadow changes, creating the feeling that it is lightly floating. Hover states on buttons and navigation links provide immediate feedback so users can see what is clickable.

Sources & Credits