The Manage Her®

Overview

The Manage Her® is a leadership movement for women that redefines how women lead in life, at home, and in business. The design system embodies 'Architectural Femininity'—a bold aesthetic that pairs a deep, near-black canvas (rgb(10, 10, 10)) with a vivid magenta accent (rgb(235, 25, 137)) and warm tertiary tones (rgb(201, 169, 110)). The brand evokes empowerment, clarity, and sophistication: invisible work finally gets the spotlight it deserves. The UI transforms complex leadership narratives into an elegant, navigable experience that feels both premium and approachable.

The voice is direct, confident, and unapologetically feminine—never breathless, always grounded. Vocabulary leans into leadership metaphors ("CEO of your household," "reclaim your role") and speaks to the lived experience of women juggling multiple domains. Example sentence in brand voice: "You're running a Fortune 500 from your kitchen. It's time the world noticed."

Colors

The color system centers on a high-contrast dark foundation with strategic accent deployment. Primary (rgb(235, 25, 137) / #eb1887) is the signature magenta used exclusively on CTAs, active states, and brand moments—it commands attention without aggression. Secondary (rgb(201, 169, 110) / #c9a96e) is a warm, sophisticated tan that softens the palette and appears in secondary containers and supporting UI. Tertiary (rgb(136, 136, 136) / #888888) is a neutral gray used for disabled states, secondary text, and dividers. The surface stack progresses from near-black (rgb(10, 10, 10)) at the base through container layers (rgb(26, 26, 26) at mid-level, rgb(46, 46, 46) at highest) to support depth without sacrificing readability. On-surface text is rgb(224, 224, 224), a soft white that reduces eye

Typography

The type system pairs Playfair Display (serif, 700 weight) for headlines and display text with DM Sans (sans-serif, 400–700 weights) for body and UI labels, and Cormorant Garamond (serif italic, 400 weight) for supporting narrative text. Display (88px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; Headline-LG (56px, 700 weight) breaks major sections; Body-LG (20px, 400 weight, Cormorant italic) carries long-form narrative with elegance. Label-SM (11px, 600 weight, 0.05em letter-spacing) is used on all buttons and badges, creating visual hierarchy through weight and spacing rather than size. On small labels over busy backgrounds or dark surfaces, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure legibility. The serif/sans pairing communicates pr

Layout

The page uses a fluid 12-column grid with a max-width of 1400px, centered with symmetric gutters (24px on each side). Section rhythm alternates between full-width hero (no padding), contained content blocks (40px lg spacing for vertical separation), and card grids (24px md spacing between items). The hero section spans full viewport height with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) over a background image, ensuring text legibility. Container max-widths step down for narrower sections: 1200px for podcast episode lists, 1000px for testimonials. Whitespace is generous—lg spacing (40px) separates major sections, md spacing (24px) separates cards and list items, sm spacing (12px) separates inline elements. This breathing room reinforces the premium, uncluttered aesthetic and give

Elevation & Depth

Depth is conveyed through a layered shadow system and background color progression, not through bright highlights. Level 1 (Base): surface at rgb(10, 10, 10) with no shadow. Level 2 (Standard Card): surface-container at rgb(26, 26, 26) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), creating subtle separation. Level 3 (Elevated/Modal): surface-container-high at rgb(36, 36, 36) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), signaling prominence. Interactive elements (buttons, inputs) on hover elevate to Level 3 shadow, providing tactile feedback. Focus states add a thin 3px ring of rgba(235

Shapes

The shape philosophy is 'Architectural Precision with Feminine Softness'—sharp where it matters, rounded where it invites. Buttons use full-radius (9999px) for primary CTAs, creating a pill shape that feels approachable and modern; secondary buttons use 6px (DEFAULT) for a more structured, less playful appearance. Cards and containers use 12px (lg) for a balanced, professional look. Input fields use 6px (DEFAULT) to align with form conventions. The logo and badge elements use full-radius to emphasize brand identity. This graduated approach ensures buttons feel inviting (full-radius = call-to-a

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use rgb(235, 25, 135) background, white text, 16px 32px padding, 48px height, and full-radius (9999px). On hover (button-primary-hover), the background darkens to rgb(208, 20, 112) and a soft magenta shadow (0 4px 12px rgba(235, 24, 135, 0.3)) appears. Active state (button-primary-active) scales to 0.98 for tactile feedback. Secondary buttons (button-secondary) are transparent with a 1px outline in rgb(112, 112, 112), 12px 24px padding, and 44px height. On hover, they fill with surface-container-high and the outline brightens. All button transitions use 200ms ease timing for a responsive but deliberate feel.

Containers & Surfaces Cards (card) use surface-container (rgb(26, 26, 26)) backgr

Do's and Don'ts

**Do**

• Do use primary (rgb(235, 25, 137)) exclusively on CTAs, active states, and brand-defining moments—never on body text or neutral UI.
• Do pair Playfair Display headlines with DM Sans body text to create a premium editorial feel that signals leadership and sophistication.
• Do maintain the dark surface (rgb(10, 10, 10)) as the dominant background; light surfaces should be used sparingly for contrast and emphasis.
• Do apply 200ms ease transitions to all interactive elements (buttons, cards, inputs) to create a responsive, deliberate interaction model.
• Do use the full-radius (9999px) shape exclusively on primary buttons to signal 'call-to-action'; use 6–12px on structural elements.
• Do layer shadows progressively (Level 1: no shadow, Level 2: 0 4px 12px, Level 3: 0 16px 40px) to convey depth without overuse.

**Don't**

• Don't use primary (rgb(235, 25, 137)) on disabled states, secondary text, or decorative elements—reserve it for moments that demand user action.
• Don't mix serif and sans-serif in the same text block; use Playfair Display for headlines, DM Sans for UI labels, and Cormorant Garamond for italicized narrative only.
• Don't lighten the surface beyond rgb(46, 46, 46) in standard containers; the dark palette is core to the brand identity and readability.
• Don't use transitions longer than 200ms on interactive elements; the brand voice is direct and responsive, not sluggish.
• Don't apply rounded corners greater than 12px on cards or containers; the architectural precision would be lost.
• Don't use drop shadows with colors other than pure black (rgba(0, 0, 0, x)); colored shadows muddy the dark palette and reduce contrast.