Success Mpowered

Overview

Success Mpowered is a partner-led leadership and culture consultancy that transforms how scaling organisations build leadership capacity and navigate periods of change. The design system embodies 'Architectural Warmth'—a philosophy that marries the precision and authority of professional services with the human-centered approachability of modern consulting. The visual language uses a restrained palette anchored by a warm terracotta accent (#C96A3F) against deep navy (#0E1E3F) and soft ivory (#F6F1E8), creating an environment that feels both trustworthy and inviting. The aesthetic evokes the feeling of entering a thoughtfully designed consulting office: calm, intentional, and grounded in expertise.

The brand voice is direct, grounded, and human-centered. Rather than corporate jargon, Success Mpowered speaks in concrete, specific language that acknowledges the real challenges leaders face—burnout, culture drift, rapid growth—without false optimism. The tone is conversational yet authoritative, never breathless or hyperbolic. Example: 'Middle managers quietly burning out. Boards asking harder questions about culture.' The vocabulary favors active verbs (build, shift, navigate) and avoids abstractions. Typography reinforces this duality: Fraunces (a high-contrast serif with classical proportions) conveys authority and permanence in headlines, while Inter (a humanist sans-serif) brings warmth and accessibility to body copy.

Colors

The color system is built on a principle of 'confident restraint.' Primary (#C96A3F, a warm terracotta) is the brand's signature accent—used exclusively on call-to-action buttons, interactive elements, and key brand moments like the 'M' in the logo. This warm earth tone signals approachability and human connection, differentiating Success Mpowered from the cool blues and purples typical of corporate consulting. Secondary (#0E1E3F, a deep navy) anchors the system as the dominant text color and appears in hero sections, dark-mode cards, and the proof strip. Tertiary (#2A2560, an indigo) provides subtle depth in gradients and background overlays, creating visual hierarchy without introducing competing accents. The surface stack progresses from pure white (#FFFFFF) through warm ivory tones (#F

Typography

The type system uses a two-family pairing: Fraunces for headlines and display text, Inter for body and UI copy. Fraunces (a variable serif with high contrast and classical proportions) conveys authority, permanence, and the gravitas of leadership expertise; it appears at 76px (display), 40px (headline-lg), 26px (headline-md), and 22px (title-lg), all at 400–500 weight with tight letter-spacing (-0.03em to -0.01em) to enhance its architectural quality. Inter (a humanist sans-serif) brings warmth and approachability to body text at 22px (body-lg, used for lede copy), 17px (body-md, standard paragraph), and 14.5px (label-md, buttons and UI labels). All body text uses a line-height of 1.5–1.65 to ensure generous vertical rhythm and readability; labels use tighter line-heights (1.3–1.4) to main

Layout

The layout system uses a 12-column grid with a max-width of 1180px and 32px horizontal padding (gutter), creating a flexible, spacious canvas that adapts from desktop to mobile. Section padding follows a semantic rhythm: 110px vertical padding for standard sections, 100px for hero and feature blocks, and 130px for final CTAs, creating a breathing, hierarchical page flow. The spacing scale (4px, 12px, 24px, 40px, 64px) is used consistently: 24px (md) for card padding and component spacing, 40px (lg) for section separation and grid gaps, and 64px (xl) for major layout breaks. Container max-widths vary by content type (1180px for full-width, 820px for narrow text blocks, 960px for case studies), ensuring optimal line-length and readability. White space is treated as a design element, not a vo

Elevation & Depth

Depth in this system is achieved through subtle layering and soft shadows rather than dramatic contrast. The elevation scale uses three levels: Level 1 (Base, no shadow) for standard surfaces and cards; Level 2 (md shadow, 0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements like buttons and hovered cards; Level 3 (lg shadow, 0 12px 32px rgba(14, 30, 63, 0.08)) for modals, elevated cards, and final CTAs. Cards use a 1px solid border at {colors.outline} (#E2E0DA) to define edges without relying solely on shadow. On hover, cards apply the lg shadow and a subtle 3px upward transform (translate

Shapes

The shape philosophy is 'Soft-Technical'—combining the precision of professional services with subtle human warmth. Border-radius values are conservative and intentional: 4px (DEFAULT) for buttons, inputs, and small UI elements, creating a slightly softened corner that feels modern without being playful; 6px (md) for cards and larger containers, adding a touch more approachability; 8px (lg) for elevated cards and modals, signaling importance; 50% (full) for circular badges, avatars, and decorative elements like the pillar marks. The rationale: 4px is the minimum radius that reads as 'intention

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses {colors.primary} (#C96A3F) background, {colors.on-primary} (#FFFFFF) text, 13px vertical × 24px horizontal padding, 4px border-radius, and {typography.label-md} (14.5px Inter, 600 weight). On hover, the background darkens to #B15A30, the text remains white, and the button applies transform: translateY(-1px) with a 0.15s transition to signal responsiveness. Secondary buttons use a transparent background with a 1px border at {colors.secondary} (#0E1E3F) and {colors.secondary} text; on hover, the background fills with {colors.secondary} and text inverts to white. Ghost buttons (used for inline links like 'See how we work →') have no background, {colors.secondary} text, a 1px bottom border at rgba(14, 30,

Do's and Don'ts

**Do**

• Do use the primary terracotta (#C96A3F) exclusively on CTAs, interactive elements, and brand moments—never on backgrounds or body text.
• Do maintain the 32px gutter and 110px section padding to preserve the calm, spacious rhythm that defines the brand.
• Do pair Fraunces headlines with Inter body copy to create a clear visual hierarchy between authority (serif) and approachability (sans-serif).
• Do apply the lg shadow (0 12px 32px rgba(14, 30, 63, 0.08)) to elevated elements like hovered cards and modals to signal depth without harshness.
• Do use the warm ivory surface stack (#F6F1E8, #FAF6EE) instead of pure white to create a cohesive, human-centered aesthetic.

**Don't**

• Don't use cool grays or pure white backgrounds—stick to the warm ivory palette (#F6F1E8, #FAF6EE, #EFEDE7) to maintain brand warmth.
• Don't apply border-radius > 12px on UI elements; the brand's precision requires restrained, architectural rounding (4–8px for functional elements).
• Don't use the secondary navy (#0E1E3F) or tertiary indigo (#2A2560) as accent colors on buttons or interactive elements—reserve the primary terracotta for all CTAs.
• Don't mix typefaces within a single headline or body paragraph; maintain clear Fraunces (headlines) / Inter (body) separation.
• Don't use hard shadows (blur > 40px or spread > 0px); the elevation system relies on subtle, soft shadows (0 3px 8px, 0 12px 32px) to maintain sophistication.