MoodSteady — Brand & Design Guide
Back to steady, together.
MoodSteady helps people notice early signals, understand patterns, and take steady action — together with the people who matter most.
This page requires JavaScript for the full interactive guide. The complete textual content is mirrored below for crawlers and assistants.
Brand principles
- Early signals, not alarms. Surface gentle changes before they escalate.
- Steady action, not panic. Recommend small, grounded steps.
- Together, not alone. Trusted people are part of the loop.
- Private and respectful. Personal data stays personal.
- Warm, not clinical. Calm language, warm neutral surfaces.
Logo system
The MoodSteady mark is an almost-closed circle with a calm pulse wave inside and four signal dots tracing the missing arc at the top-right — suggesting early signals, rhythm, and a return to baseline.
- Primary horizontal logo (mark + two-tone wordmark + tagline)
- Stacked logo
- Symbol-only mark
- Wordmark-only ("Mood" Forest Dark, "Steady" Signal Green)
- App icon (rounded square, Forest→Teal gradient)
- Favicon (light and dark variants)
- Monochrome and reversed white versions
Color palette
Brand
- Primary Teal — #3B6B6B — core identity, primary actions
- Forest Dark — #2A4A47 — depth, high-contrast surfaces
- Sage — #8FB3A7 — calm support accents
Surfaces
- Background — #FBF9F4 — warm off-white page background
- Surface — #F5F2EC — cards, 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, dividers
Signal
- Low / Green — #459070
- Moderate / Yellow — #E8B23A
- High / Orange — #E2701F
- Very High / Red — #C9402D (reserved, non-alarmist)
Typography
System UI stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif.
- H1 — System UI Bold 32/40, tight tracking
- H2 — System UI Semibold 24/32
- H3 — System UI Semibold 20/28
- Body — System UI Regular 16/24
- Small / caption — System UI Regular 12/16
Shape & elevation
- Card radius: 16px
- Button radius: 12px
- Minimum button height: 44px
- Shadow soft: 0 4px 24px -8px rgba(20,40,40,.08)
Voice and writing
Calm, supportive, serious but not clinical. Direct. Never alarmist, never shaming.
Use (Norwegian)
- "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
- English: Back to steady, together · Early signals · Steady actions · Trusted support · Private by design
- Norwegian: Tilbake til stødighet, sammen · Tidlige signaler · Stødige valg · Støttepersoner · Privat og trygt
Do and don't
Do
- Use calm colors and clear hierarchy.
- Support without judging.
- Keep dashboards focused.
- Explain status changes clearly.
- Use warm neutral backgrounds.
Don't
- Use scary alert language.
- Use aggressive red as a default.
- Overload screens with metrics.
- Make the product 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 text labels.
- Clear focus states and full keyboard navigation.
- Reduced-motion friendly.
Developer tokens (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);
}