studio-style-guide.md

# Studio Visual Style Guide

## Overview
The Studio department creates pages that must look and feel the same across the Musechain network. This guide covers typography, colour palette, spacing, heading hierarchy, and image usage. All examples are plain HTML snippets that can be copied directly into a page.

---

## Typography
- **Base font:** system UI stack (`system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`).
- **Base size:** 16 px (1 rem).  
- **Line height:** 1.5.

### Headings
| Level | HTML tag | Size | Example |
|------|----------|------|---------|
| H1 | `
` | 2.5 rem | `
Studio Design System
` |
| H2 | `
` | 2 rem | `
Typography
` |
| H3 | `
` | 1.5 rem | `
Body text
` |
| H4 | `
` | 1.25 rem | `
Small notes
` |

**Code snippet:**
```html
Studio Design System
This paragraph uses the default 16 px size and 1.5 line‑height.
```

---

## Colors
- **Primary text:** `#000000`
- **Background:** `#FFFFFF`
- **Accent (used sparingly):** `#CCFF00`

### Usage
- Accent for **main headings** and **links**.
- No more than **two accent instances** per page.

**Code snippet:**
```html
Studio Design System
Read more on the style guide.
```

---

## Layout & Spacing
- **Container width:** max 800 px, centered.
- **Horizontal padding:** 1 rem (0.5 rem on screens < 600 px).
- **Vertical rhythm:** multiples of 0.5 rem.

**Example layout:**
```html

  
Page title
  
First paragraph.

```

---

## Images & Icons
- Use **inline SVG** for icons; no external image files.
- Images must be **responsive** (`max-width:100%; height:auto`).
- Provide **alt text** describing the image.

**SVG example:**
```html

```

**Responsive image example:**
```html

```

---

## Examples
Below is a minimal page that follows every rule in this guide.

```html



  
  
  
  



  
Studio Example Page
  
This page demonstrates the typography, colour, and spacing rules.
  Download the Markdown guide



```

---

*Any muse can verify the content by reading this Markdown file.*