Royal Mail

Overview

Royal Mail is the UK's institutional postal authority, serving millions of customers with trusted parcel and letter delivery. The design system embodies 'Authoritative Clarity'—a visual language that combines heritage legitimacy with modern efficiency. The interface prioritizes directness and confidence: bold red accents signal action and trust, while structured layouts and clear typography reduce cognitive load. The emotional response is reassurance: users feel their parcels are in capable hands. Voice: direct, professional, occasionally warm. Vocabulary favors clarity over cleverness—'Send an item' not 'Dispatch your package.' Example sentence: 'Track your parcel in real time, or arrange redelivery in seconds.'

Colors

The color system centers on Royal Mail's signature red (#DA202A) as the primary action color, deployed on CTAs, links, and interactive states to signal trust and urgency. This red is paired with a clean white surface (#FFFFFF) and a sophisticated dark text (#2A2A2D) for maximum legibility and institutional authority. Secondary blue (#3699F1) supports interactive states and focus indicators (box-shadow: 0 0 0 4px rgba(54, 153, 241, 0.2)), while tertiary green (#589F28) marks positive outcomes (delivery confirmation, success states). The surface stack uses subtle grays (#F5F5F5 to #DCDCDE) to create depth without visual noise. Primary (#DA202A) is used exclusively for primary CTAs, hover states shift to primary-fixed-dim (#B70D12) with a 200ms transition. Secondary buttons use transparent ba

Typography

The type system uses three distinct families to create hierarchy and personality. RM First Class (serif, custom brand font) anchors display and headline levels at 60px and 40px, conveying institutional weight and heritage. PF DinText Std (geometric sans, 700 weight) handles labels and smaller headlines at 20px–28px, providing technical precision. Chevin (humanist sans, 400 weight) carries body copy at 16px–18px with 24–28px line-height, ensuring readability at all sizes. Letter-spacing is tightened on display (-0.02em) to create visual impact, while body text uses 0em spacing for natural flow. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on small labels (label-sm, 12px) when placed over busy backgrounds or images to ensure legibility. Font weights are strictly enforced: body text is alw

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid design that adapts from mobile (16px side gutters) to desktop (24px gutter). The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, xl (64px) for hero spacing. The hero section uses lg spacing (40px) above and below the headline, with md spacing (24px) between the headline and supporting copy. Cards and containers use md padding (24px) internally, with lg spacing (40px) between card groups. White-space is generous but purposeful—never cramped, never wasteful. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters on body text, maintaining readab

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background shifts. Level 1 (Base): flat surfaces with no shadow, used for body backgrounds and primary containers. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and dropdowns to lift them 4px above the base. Level 3 (Modal/Overlay): box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.25), used for full-screen modals and critical overlays to establish clear visual hierarchy. Hover states increase shadow from Level 2 to Level 3 with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. No blur or s

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used strategically to soften institutional rigidity without sacrificing clarity. Buttons use full rounding (100px border-radius) to create pill-shaped CTAs that feel modern and approachable, while maintaining clear tap targets (minimum 48px height). Cards and containers use sm (4px) or DEFAULT (8px) rounding to suggest containment without distraction. Input fields use DEFAULT (8px) rounding to match card styling and create visual cohesion. Modals and overlays use lg (16px) rounding to signal importance and separation from the p

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use backgroundColor: {colors.primary} (#DA202A), textColor: {colors.on-primary} (#FFFFFF), with padding: 16px 32px and height: 48px. On hover, backgroundColor shifts to {colors.primary-fixed-dim} (#B70D12) with a 200ms transition. Focus states add boxShadow: 0 0 0 4px rgba(218, 32, 42, 0.2). Secondary buttons use a transparent background with border: 2px solid {colors.primary}, inverting to backgroundColor: {colors.primary-container} (#FFE5E5) on hover. All buttons use rounded: {rounded.full} (100px) and typography: {typography.label-md} (14px, 700 weight, 0.02em letter-spacing). Disabled buttons reduce opacity to 0.5 and set cursor: not-allowed.

Containers & Surfaces Cards use backgroundColor: {colors.

Do's and Don'ts

**Do**

• Do use primary red (#DA202A) exclusively for primary CTAs and critical interactive states—never for decorative elements or backgrounds.
• Do maintain minimum 48px touch targets for all interactive elements, with 24px padding around buttons to prevent accidental taps.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all state changes (hover, focus, active) for smooth, professional feedback.
• Do use the full rounded (100px) border-radius on all buttons to create instant visual recognition of clickable elements.
• Do enforce the typography hierarchy strictly: display/headline for titles, body-md for copy, label-md for buttons—never mix weights or sizes arbitrarily.
• Do test all color combinations against WCAG AA standards (4.5:1 contrast minimum) before deployment, especially on primary red backgrounds.
• Do use the three-tier shadow system (sm/md/lg) to create clear visual hierarchy—never use custom shadow values outside this system.

**Don't**

• Don't use primary red (#DA202A) for body text, backgrounds, or non-interactive elements—it's reserved for CTAs and critical feedback.
• Don't apply rounded corners larger than lg (16px) to cards or containers; use full (100px) only for buttons and badges.
• Don't mix font families within a single component; use RM First Class for headlines, PF DinText Std for labels, Chevin for body.
• Don't create custom shadows outside the three-tier system (sm/md/lg); this breaks the elevation hierarchy and confuses visual depth.
• Don't reduce button height below 48px or padding below 16px 32px; accessibility and touch-friendliness depend on these minimums.
• Don't use opacity or color overlays to create focus states; always use a 3px outline in secondary-container (#D0E1FD) for keyboard navigation.
• Don't apply letter-spacing tighter than -0.04em or looser than 0.1em; this breaks readability and looks unprofessional.