Muse Multimedia

Overview

Muse Multimedia embodies a "Refined Minimalism" aesthetic—a design philosophy that pairs warm, earthy neutrals (#fdebde, #fbf6f3) with a vibrant cyan accent (#149efc) to create an approachable yet authoritative brand presence. The UI prioritizes clarity and human connection, reflecting the consultancy's mission to help founders navigate brand alignment during critical growth stages. Every visual element—from typography hierarchy to button states—reinforces the brand's core message: strategic thinking made accessible. The brand personality is confident yet collaborative, speaking to founders as peers rather than clients. Voice: direct, insightful, and grounded in real business outcomes. Example sentence: "Your brand isn't just what you say—it's what your customers believe about you at scale."

Colors

The color system anchors on a warm, inviting surface palette (#fbf6f3 base, #fdebde for containers) that evokes trust and approachability, while the primary accent—a bold cyan (#149efc)—commands attention on CTAs, links, and interactive states. This contrast creates a "calm-yet-energetic" visual rhythm: the warm neutrals provide visual rest, while the cyan punctuates moments of action and engagement. Secondary colors include a warm terracotta (#c28876) for supporting accents and a deep teal (#002a32) for typography emphasis. The on-surface text color (#131313) is near-black for maximum legibility over light backgrounds. Usage rules: Primary (#149efc) appears exclusively on call-to-action buttons, link text, and focus states—never as a background. Secondary (#c28876) supports testimonials,

Typography

The type system pairs TTRamillasTrlVariableRoman—a distinctive serif with strong personality—for headlines (60px, 700 weight, -1px letter-spacing) with Montserrat for body and UI text (18px–22px for body-lg, 600 weight, centered alignment). This pairing communicates sophistication and approachability: the serif headlines command authority while Montserrat's geometric warmth keeps the interface human-scaled. Display text (60px, 64px line-height) is reserved for hero sections and major section breaks, while body-lg (18px, 24px line-height) carries the primary narrative. On mobile, display scales to 30–35px and body-lg to 16px, maintaining hierarchy without overwhelming small screens. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photography (as seen in the hero)

Layout

The page uses a fluid, center-aligned grid with a max-width of 1120px and 12-column structure, collapsing to single-column on devices ≤800px. Sections employ generous vertical spacing: 50px margins between major sections (md spacing: 24px for internal card padding, lg spacing: 40px for section separation). The hero section anchors with a full-bleed background image, overlaid with a semi-transparent dark gradient to ensure text legibility, followed by a clear call-to-action zone with two primary buttons ("In My Build Era" / "In My Scale Era"). Subsequent sections use 20–30px internal padding and maintain consistent left/right gutters (24px on desktop, 0px on mobile for edge-to-edge cards). Container max-width of 1120px ensures readability while allowing breathing room; text never exceeds 80

Elevation & Depth

Depth is conveyed through subtle shadows and luminosity shifts rather than dramatic layering. Level 1 (Base): flat surface (#fbf6f3) with no shadow. Level 2 (Cards/Containers): box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), background: #fdebde or #faf5f0, creating a gentle lift. Level 3 (Modals/Overlays): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: #f8f3ed, with increased blur radius for greater separation. Hover states on cards transition to Level 3 shadow (0 8px 24px rgba(0, 0, 0, 0.12)) over 0.2s ease, signaling interactivity. Buttons use no shadow at rest but gain a 1.05x scale

Shapes

The design employs "Soft-Technical" rounding: buttons and primary CTAs use 8px radius (rounded.lg), creating a friendly, approachable feel without the rigidity of sharp corners or the softness of 16px+. Secondary containers and cards use 8px as well, maintaining visual consistency. Input fields and smaller UI elements use 4px (rounded.DEFAULT) for a more technical, precise appearance. This hierarchy—8px for primary interactions, 4px for supporting elements—signals importance while keeping the interface cohesive. The 8px radius sits at the sweet spot between modern (not too rounded) and approac

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses #149efc background with #1e2749 text, 18px Montserrat 600, 16px 21px padding, 8px radius, and a 1px transparent border. On hover, the background shifts to #faf5f0 (surface-container-low) and the button scales 1.05x over 0.3s, creating a tactile press effect. The secondary button (button-secondary) mirrors the primary but uses #fdebde background with #1e2749 text and 32px horizontal padding for wider click targets. Links use #149efc text with no underline at rest; on hover, they gain an inset underline (box-shadow: inset 0 -1px 0 #149efc) with a 0.1s transition, avoiding color change to maintain visual stability.

Containers & Surfaces Cards (card) use #fdebde background, 8px radi

Do's and Don'ts

**Do**

• Do use #149efc exclusively for CTAs, links, and focus states—it's the brand's signature accent and should never be diluted by overuse.
• Do maintain the warm surface palette (#fbf6f3, #fdebde) as the visual foundation; it's what makes the cyan pop and creates the brand's distinctive warmth.
• Do apply 8px radius to primary buttons and cards; this is the brand's rounding signature and distinguishes it from both sharp-corner and ultra-rounded competitors.
• Do use TTRamillasTrlVariableRoman for headlines and Montserrat for body/UI; this pairing is the brand's typographic identity and should never be substituted.
• Do layer shadows subtly (0px 1px 5px for cards, 0 3px 8px for elevated states) rather than relying on dark overlays; the brand's lightness is a core differentiator.

**Don't**

• Don't use #149efc as a background color or for large surface areas; it's an accent, not a primary surface. Overuse dilutes its impact on CTAs.
• Don't apply rounded corners larger than 12px to primary UI elements; the brand's signature is 8px, and larger radii feel generic and soft.
• Don't mix serif and sans-serif within a single headline or body section; TTRamillasTrlVariableRoman and Montserrat are paired, not interchangeable.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); the brand relies on subtle depth, and heavy shadows feel dated and corporate.
• Don't reduce the contrast between text and background below 4.5:1; the warm neutrals are light, so ensure on-surface text (#131313) or white text with shadow is always legible.