# MoodSteady — Brand & Design Guide (full)

> Source of truth for any AI assistant generating UI, copy, marketing, or assets for MoodSteady. Use the exact tokens and assets below — do not paraphrase, invent, or substitute.

- Brand: **MoodSteady**
- Domain: moodsteady.com
- Design guide: https://designguide.moodsteady.com
- Payoff (EN): **Back to steady, together**
- Payoff (NO): **Tilbake til stødighet, sammen**
- Machine-readable: [design-tokens.json](https://designguide.moodsteady.com/design-tokens.json) · [brand.json](https://designguide.moodsteady.com/brand.json) · [tokens.css](https://designguide.moodsteady.com/tokens.css)

## What MoodSteady is

MoodSteady helps people notice early signals, understand personal patterns, and return to steadiness with support from trusted people. The product is for mental-health stability — calm, supportive, serious but not clinical, direct, never alarmist, never shaming.

## Brand principles

1. **Early signals, not alarms.** Surface gentle changes before they escalate.
2. **Steady action, not panic.** Recommend small, grounded steps.
3. **Together, not alone.** Trusted people are part of the loop.
4. **Private and respectful.** Personal data stays personal.
5. **Warm, not clinical.** Calm language, warm neutral surfaces.

## Logo system

The mark is an almost-closed circle (gap from ~10:30 to ~3:00 at the top-right), a calm pulse wave inside, and four sage signal dots tracing the missing arc — largest top, decreasing toward the right. Wordmark is two-tone: "Mood" in Forest Dark, "Steady" in Signal Green.

**Use the supplied SVGs directly — do not redraw the mark.**

| Variant | File |
| --- | --- |
| Horizontal (default light bg) | `/brand/moodsteady/svg/moodsteady-logo-horizontal.svg` |
| Horizontal on dark/forest | `/brand/moodsteady/svg/moodsteady-logo-horizontal-dark.svg` |
| Stacked | `/brand/moodsteady/svg/moodsteady-logo-stacked.svg` |
| Symbol only | `/brand/moodsteady/svg/moodsteady-symbol.svg` |
| Symbol reversed (white) | `/brand/moodsteady/svg/moodsteady-symbol-reversed.svg` |
| Wordmark only | `/brand/moodsteady/svg/moodsteady-wordmark.svg` |
| App icon | `/brand/moodsteady/svg/moodsteady-app-icon.svg` |
| Favicon | `/brand/moodsteady/svg/favicon.svg` |

PNG exports live under `/brand/moodsteady/png/` and `/brand/moodsteady/icons/` (16, 32, 64, 180, 192, 512, 1024 px, plus `favicon.ico`).

### Store icons (no alpha, flat RGB)

For App Store and Google Play uploads, use the no-transparency variants — the background is filled with Forest Dark (#2A4A47) so the icon is a fully opaque square with no alpha channel.

- 1024×1024: `/brand/moodsteady/icons/moodsteady-app-icon-1024-noalpha.png`
- 512×512:  `/brand/moodsteady/icons/moodsteady-app-icon-512-noalpha.png`

## Color palette

### Brand
- Primary Teal — `#3B6B6B` — core identity and primary actions
- Forest Dark  — `#2A4A47` — depth, high-contrast surfaces, dark mode
- Sage         — `#8FB3A7` — calm support accents

### Surfaces
- Background — `#FBF9F4` — warm off-white page background
- Surface    — `#F5F2EC` — cards and raised surfaces
- Sand       — `#F0E3D0` — warm secondary surfaces
- Mint       — `#E8F0EC` — quiet support areas

### Text & border
- Ink    — `#1D2629` — primary text
- Muted  — `#5F6B70` — secondary text
- Border — `#E4DED2` — hairlines and dividers

### Signal (status only — never decorative)
- Low / Green       — `#459070` — "Lav"
- Moderate / Yellow — `#E8B23A` — "Moderat"
- High / Orange     — `#E2701F` — "Høy"
- Very High / Red   — `#C9402D` — "Svært høy" — reserved, non-alarmist, always paired with a text label

## Typography

System UI stack — do not introduce webfonts unless explicitly asked.

```
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif
```

| Role    | Size / line | Weight |
| ------- | ----------- | ------ |
| H1      | 32 / 40, tight tracking | 700 |
| H2      | 24 / 32 | 600 |
| H3      | 20 / 28 | 600 |
| Body    | 16 / 24 | 400 |
| Small   | 14 / 20 | 400 |
| Caption | 12 / 16 | 400 |

Use calm spacing. Avoid dense dashboards. Keep text short and direct. Avoid dramatic wording.

## Shape & elevation

- Card radius: `16px`
- Button radius: `12px`
- Minimum tap target: `44px`
- Soft shadow: `0 4px 24px -8px rgba(20,40,40,.08)`

## Components (defaults)

- **Primary button** — Primary Teal background, white text, 12px radius, 44px min height.
- **Secondary button** — Surface background, Ink text, 1px Border.
- **Quiet button** — transparent, Muted text, no border.
- **Tag/chip** — Mint background, Forest Dark text (e.g. "Stabil dag").
- **Risk badge** — Signal color background at 15% opacity + signal-color text + text label ("Lav", "Moderat", "Høy", "Svært høy").
- **Card** — Surface bg, 16px radius, soft shadow, generous padding.
- **Notification** — calm one-line title, supportive one-line body. Example: "Tidlig signal oppdaget — Søvn under normalen de siste 2 nettene. Ta det litt med ro i dag."

## Iconography

Lucide style, rounded stroke, calm and functional. Preferred glyphs: activity, users, shield, leaf, bell, calendar, bed, chart, lock, settings. Avoid aggressive warning glyphs as a default state.

## Voice & writing

Calm, supportive, serious but not clinical. Direct. Never alarmist, never shaming.

**Use (NO)**
- "Dette er et tidlig signal."
- "Senk tempoet litt i dag."
- "Beskytt søvnen."
- "Parker store beslutninger."
- "Du står ikke alene."

**Avoid**
- "Du er manisk."
- "Farlig nivå."
- "Alarm." / "Krise."
- "Du har mistet kontrollen."

**Product language**
- EN: Back to steady, together · Early signals · Steady actions · Trusted support · Private by design
- NO: Tilbake til stødighet, sammen · Tidlige signaler · Stødige valg · Støttepersoner · Privat og trygt

## Do and don't

**Do** — calm colors and clear hierarchy · support without judging · keep dashboards focused · explain status changes clearly · warm neutral backgrounds.

**Don't** — scary alert language · aggressive red as default · overload screens with metrics · feel like emergency medicine · imply diagnosis from signals.

## Accessibility

- WCAG AA minimum contrast.
- 44px minimum tap targets.
- Never rely on color alone for risk state — always include a text label.
- Clear focus states and full keyboard navigation.
- Reduced-motion friendly.

## CSS tokens (drop into `:root`)

```css
:root {
  --color-primary: #3B6B6B;
  --color-forest: #2A4A47;
  --color-sage: #8FB3A7;
  --color-background: #FBF9F4;
  --color-surface: #F5F2EC;
  --color-sand: #F0E3D0;
  --color-mint: #E8F0EC;
  --color-ink: #1D2629;
  --color-muted: #5F6B70;
  --color-border: #E4DED2;
  --signal-green: #459070;
  --signal-yellow: #E8B23A;
  --signal-orange: #E2701F;
  --signal-red: #C9402D;
  --radius-card: 16px;
  --radius-button: 12px;
  --shadow-soft: 0 4px 24px -8px rgba(20,40,40,.08);
}
```

## How to reference this guide

Point any AI assistant at:

- https://designguide.moodsteady.com/llms.txt (index)
- https://designguide.moodsteady.com/llms-full.txt (this file)
- https://designguide.moodsteady.com/design-tokens.json
- https://designguide.moodsteady.com/brand.json
- https://designguide.moodsteady.com/tokens.css

Example prompt: *"Follow the MoodSteady design guide at https://designguide.moodsteady.com/llms-full.txt. Use the exact tokens from design-tokens.json and the supplied logo SVGs. Do not invent colors or fonts."*