Hotel & Resort Magazine Design System

This style guide documents the typographic, colour, and component standards used across Hotel & Resort Magazine's digital platform. It is maintained for editorial, design, and development team reference.

Typography

Display — Cormorant Garamond: Serif typeface used for all editorial headlines, feature titles, and pull-quotes. Reflects the magazine's positioning at the intersection of classical elegance and contemporary authority. Set in Regular (400) for primary headings, Light (300) for standfirsts. Minimum size: 32px for display use. Line-height: 1.15 at display sizes.

Body — DM Sans: Clean geometric sans-serif for all body copy, captions, navigation, UI labels, and metadata. Regular (400) at 16px / 28px line-height for body text. Medium (500) for subheadings, bylines, and category labels. The visual contrast between Cormorant and DM Sans creates the editorial tension between luxury heritage and modern readability that defines the brand.

Data — IBM Plex Mono: Monospace typeface for pricing data, rating tables, award counts, and any structured numerical content. Regular at 14px / 22px.

Colour Palette

Deep Teal #1B4F5A: Primary brand colour. Used for navigation backgrounds, CTA buttons, subscription elements, and section headers. Evokes the Indian Ocean — the brand's spiritual home.

Warm Ivory #F8F4EE: Page backgrounds and card surfaces. Warmer than white; creates the impression of quality paper stock that premium print publications carry.

Champagne Gold #C5A55A: Accent colour for premium tier indicators, featured property labels, star ratings, and decorative dividers. Use sparingly to preserve its premium signalling.

Slate #4A5568: Secondary text, metadata, bylines, captions, and UI secondary elements.

Coral Rose #E8776A: Alert states, breaking news labels, and editorial "Editor's Pick" designations.

Content Cards

Hero Review Card: Full-width image at 16:9 aspect ratio. Cormorant headline at 52px. Hotel star rating shown as Champagne Gold stars. Standfirst in DM Sans Regular 18px. Author name and review date in DM Sans Medium 12px uppercase. "Our Score" badge in Deep Teal with score in Cormorant 36px.

Standard Card: Image at 4:3. Headline in Cormorant 28px. Two-line excerpt in DM Sans 15px. Category tag in DM Sans Medium 11px uppercase on Deep Teal background. Score chip where applicable.

Members Card: Deep Teal gradient overlay on lower third of image. "Members Only" label in DM Sans Medium 11px. "Read Full Review" CTA in Champagne Gold.

Editorial Voice

We write for sophisticated readers who travel frequently and have high expectations. Our voice is authoritative without being condescending, specific without being pedantic. We name names — of chefs, designers, general managers — because specificity is credibility. We use precise numerical data — rates per night, square footages, Michelin star counts — because our readers make decisions based on facts, not impressions. We use British English spelling and punctuation throughout.