Estate Magazine Design System & Style Guide
This page documents the typographic standards, colour system, card components, and content guidelines used across Estate Magazine's digital platform. It is maintained for the benefit of our editorial, design, and development teams.
Typography
Primary Typeface — Freight Display Pro: Used for all feature headlines, section headers, and display text. Set in Regular weight for editorial headings, Light for standfirsts and pullquotes. Tracking: -20 at display sizes (48px+), 0 at body heading sizes (24–40px).
Secondary Typeface — Graphik: Used for all body copy, captions, labels, navigation, and interface text. Regular weight at 16px/24px line-height for body text. Medium weight for subheadings, labels, and bylines. Light weight for captions and metadata.
Monospace — IBM Plex Mono: Used for data tables, financial figures, and code references. Regular at 14px/20px line-height.
Colour System
Primary — Estate Black #1A1A1A: Primary text, headings, borders on light backgrounds.
Gold — #C9A84C: Accent colour for premium indicators, subscription CTAs, featured post borders, and decorative elements. Use sparingly — this colour carries the most brand weight.
Warm White — #F9F6F1: Page backgrounds, card backgrounds in light mode. Warmer than pure white; contributes to the print-editorial aesthetic.
Mid Grey — #6B6B6B: Secondary text, metadata, captions, dividers.
Light Grey — #E8E3DC: Borders, dividers, input backgrounds, disabled states.
Content Cards
Feature Card (Hero): Full-width image at 16:9, headline in Freight Display Pro 48px, standfirst in Graphik Light 20px, author and date in Graphik Medium 13px uppercase tracked. Used for the primary featured article on the homepage and category pages.
Standard Card: Image at 3:2, headline in Freight Display 28px, excerpt in Graphik Regular 15px, two lines maximum. Tag pill in Graphik Medium 11px uppercase on Gold background.
Compact List Card: Small thumbnail at 1:1, headline in Graphik Medium 16px, date and category in Graphik Regular 13px Mid Grey. Used in sidebars and "More from this section" modules.
Paywall/Members Card: Standard card layout with a Gold gradient overlay on the lower 40% of the image. "Members Only" pill in Graphik Medium 11px. CTA button in Gold with Estate Black text: "Read with Membership".
Editorial Standards
Headlines: Use sentence case. Avoid question headlines unless the article genuinely answers the question. No colons in headlines where a dash or restructuring will serve. Maximum 12 words for display headlines.
Numbers: Spell out one through nine. Use numerals for 10 and above. Financial figures: use £/$/€ symbol with full amount written to at least one decimal place (£5.4 million, not £5m, except in headlines). Millions abbreviated to 'm' and billions to 'bn' only in headlines and data labels.
Property prices: Always specify currency, always specify whether the price is asking or achieved, always include the source of the information where it is not from a public registry.