# 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

| Role | Value | Usage |
|------|-------|-------|
| Black | `#000000` | Primary text, anchoring elements |
| White | `#ffffff` | Background, inverted text |
| Pebble | `#989990` | Secondary UI, muted accents |
| Pebble Light | `rgba(152,153,144,0.3)` | Hover states, translucent overlays |
| Limestone | `#e4e5df` | Section backgrounds, subtle dividers |

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

| Level | Size | Line Height | Notes |
|-------|------|-------------|-------|
| H1 | 5rem (80px) | 4.5rem | Tighter than display — high impact |
| H2 | 2.5rem (40px) | 2.5rem | 1:1 ratio — very tight |
| H3 | 1.5rem (24px) | — | Standard section header |
| Desc | 1.25rem (20px) | — | Lead / intro text |
| P | 0.75rem (12px) | — | Fine print / dense copy |

## 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*