Moneypenny

Overview

Moneypenny is a UK-headquartered, 24/7 answering service that handles calls and live chats for small and mid-sized businesses, staffed by trained people and backed by AI receptionist technology. The aesthetic is a clean, light Editorial Minimalism: a near-white #f7fbff canvas, dense #20232b Outfit type, and a single warm red-orange signal colour (#f43821) that appears only where the user is asked to act. The emotional register is reassurance and competence, the feeling of a capable office manager picking up the phone.

The voice is warm, plain and confident, written in the second person and rarely hedged. Sentences are short and sometimes deliberately playful ("We don't just answer calls. We're you, when you can't be."). Vocabulary favours 'callers', 'businesses' and 'growth' over technical jargon. Example sentence: "Your callers will love us, and you'll finally get your evenings back."

Colors

Primary (#f43821) is the brand's signature accent, used on the logo mark, key links and active states; the deeper #cc0600 (on-primary-container) is reserved for text-level emphasis on pale #feebeb containers. Secondary (#ff5104) and tertiary (#b6086a) are supporting accents for illustration and data highlights, never for primary CTAs. Surfaces stay cool and neutral: #f7fbff as page canvas, #ffffff for cards and inputs, #dfe0e0 for dividers and disabled wells. Body text is #20232b on light surfaces; secondary copy drops to #606368.

The brand gradient (linear-gradient(to right, #ff7702, #fe0000)) is a brand-only device. It is never used as a fill behind body copy. The five-stop interactive border gradient (#f5e6c8 → #ff6b35 → #ff3cac → #4b8bf5 → #00d4aa) is applied only as a 2–3px border-im

Typography

The type system is single-family: Outfit throughout, with hierarchy created by size and weight rather than by pairing. Display and H1 use 57px at weight 600 with a 62.7px line height, stepping down to 27px/32.4px at weight 600 for section headings. Body and labels sit at 16px/24px weight 400, which keeps long copy legible on the light canvas. Small eyebrow labels such as 'Answering Service' drop to 14px at weight 500. Letter-spacing is left at normal across all levels; do not add tracking to Outfit headings, as the geometric forms already read tight at 57px. Weight 600 is reserved for headings and emphasised navigation; use 400 for everything else.

Layout

The grid is fluid up to a 991px container max-width with 20px gutters and 12 columns. Outer page margins collapse to 20px on mobile and expand to fill the viewport above the container width. White space is generous: the hero allocates roughly 96px of vertical padding above the eyebrow, and section separation uses the xl (24px) to 2xl (32px) steps inside cards and the lg (20px) step between stacked elements. Spacing is built on an 8px base with 10px and 20px steps for fine adjustments; use md (16px) for inline gaps and 2xl (32px) between major content blocks.

Elevation & Depth

Depth is minimal and flat. Cards use a single soft shadow of 0 4px 16px color-mix(in srgb, #20232b 8%, transparent) on a #ffffff surface, with a 1px solid #ccc border where the card sits on a same-coloured background. There is no backdrop blur and no glass layer. Level 1 is the #f7fbff canvas; Level 2 is #ffffff with the 0 4px 16px shadow; Level 3 (menus and modals) raises the shadow to 0 8px 32px rgba(32, 35, 43, 0.12) and adds a 1px #ccc border. Hover states for cards lift only through background change to #f7fbff, not through additional shadow.

Shapes

The shape language is Soft-Technical: pill-shaped buttons and chips at 1280px radius (effectively full pill) paired with modest 4–8px radii on cards and inputs. Primary and secondary buttons use the pill shape to read as tappable and friendly; cards use 4px DEFAULT for a tighter, more editorial feel; inputs use 8px (md) so they sit softly next to the pills. Icons inside pill buttons sit in a circular 24px container with a 1px border, echoing the pill geometry.

Components

Action Elements Buttons are 48px high with 8px 24px padding and a 2px gradient border-image. The primary button fills with #f7fbff and carries #20232b text; on hover it shifts to #fdd7d3 over 200ms ease-in-out. The secondary button is transparent with the same gradient border. Focus is handled at the wrapper: when keyboard focus lands inside, apply outline: 0.125rem solid #20232b with an outline-offset of 0.25rem, and suppress the inner outline.

Containers & Surfaces Cards are #ffffff with 4px radius, 24px internal padding and a 1px #ccc border. On hover, background moves to #f7fbff and the shadow deepens to 0 4px 16px color-mix(in srgb, #20232b 8%, transparent) over 150ms. Feature cards in the four-up row use the same treatment and are separated by 20px gutters.

Inputs & Int

Do's and Don'ts

**Do**

• Do reserve #f43821 for the single most important action per viewport and for interactive focus rings.
• Do keep Outfit as the only typeface and let size and weight create hierarchy.
• Do use the pill button shape at 1280px radius for every primary and secondary CTA.
• Do apply the gradient border-image only to pill buttons and feature chips, at 2–3px width.

**Don't**

• Don't fill large surfaces with the brand gradient; it is a highlight device, not a background.
• Don't add letter-spacing to Outfit headings; the default tracking is intentional at 57px.
• Don't introduce a second typeface or a serif display face into marketing sections.
• Don't place #f43821 body text on #f7fbff at small sizes; reserve it for headings, links and icons.