musesoftware.ai — Design System

1. Visual Theme & Atmosphere

Muse Software.ai operates in a space of refined minimalism with organic undertones. The palette is built around pebble (#989990) — a warm gray-green — and limestone (#e4e5df) — a cool off-white — against pure black and white anchors. This earthy, almost geological vocabulary signals software that is grounded and considered rather than aggressively tech-forward. The type scale is dramatic: a 5rem H1 descending all the way to 0.75rem paragraphs creates an extreme hierarchy that rewards deliberate information architecture.

2. Color Palette & Roles

No saturated color. The palette is entirely achromatic with warm-gray tints — technology that feels tactile and calm.

3. Typography Rules

• Type scale: CSS custom property-driven fluid scale — extremely wide range
• H1: --_type---size--h1: 5rem / --_type---line-height--h1: 4.5rem — display at 80px, tight leading
• H2: --_type---size--h2: 2.5rem / --_type---line-height--h2: 2.5rem — perfect 1.0x ratio (display condensed)
• H3: --_type---size--h3: 1.5rem — 24px section headers
• Description: --_type---size--desc: 1.25rem — 20px lead text
• Paragraph: --_type---size--par: 0.75rem — 12px fine text; extremely small, editorial compactness

4. Component Stylings

• Surfaces: Black and white inversions with pebble/limestone accents
• Interactive overlays: Pebble light (rgba(152,153,144,0.3)) for hover states
• Dividers: Limestone (#e4e5df) — warm off-white lines instead of hard gray
• No border radius tokens — likely sharp edges consistent with the geological, precise aesthetic
• No shadows — flat surface philosophy

5. Layout Principles

• Breakpoints: Single breakpoint at 767px — clean mobile/desktop split
• CSS variable-driven: All type sizes managed through --_type---size--* tokens
• Content density: Extreme — 5rem headlines against 0.75rem body creates stark hierarchy
• Whitespace: Sections likely spaced generously to balance the type extremes

6. Depth & Elevation

• No shadows detected
• Depth achieved through the stark black/white inversion pattern
• Limestone sections create mid-tone separation without Z-axis effects
• Pebble-light translucency adds subtle hover depth

7. Do’s and Don’ts

Do:

• Use the full 5rem–0.75rem type range — the contrast is the design
• Keep to the four-color vocabulary: black, white, pebble, limestone
• Use pebble-light (rgba(152,153,144,0.3)) for interactive hover states
• Let the type scale carry expressive weight

Don’t:

• Introduce saturated color — it destroys the geological calm
• Soften the type extremes — the range from 80px to 12px is intentional
• Add drop shadows — flat surfaces are foundational to the aesthetic

8. Responsive Behavior

• Single breakpoint at 767px
• Type scale likely fluid-scales or reduces proportionally at mobile
• 5rem H1 may clamp to ~2.5rem on mobile to prevent overflow

9. Agent Prompt Guide

“Design in the style of Muse Software.ai: black/white base, warm-gray pebble #989990 and limestone #e4e5df accents, extreme type scale (5rem H1 to 0.75rem body), no shadows, no border radius, geological calm palette, flat surfaces.”

Quick reference:

• Black: #000000
• White: #ffffff
• Pebble: #989990
• Limestone: #e4e5df
• H1 size: 5rem (80px)
• Body size: 0.75rem (12px)

Generated by Sparkbites — extracted from live CSS analysis