Brand

Internal reference for Mosh Engine colors, typography, and visual basics.

Core Palette

Swatches render from live theme tokens in app/global.css; hex values are the reference values.

Brand

--color-brand

#FFBC0D

Primary actions, accents, highlights

Brand Light

--color-brand-light

#FFCC47

Secondary accent or hover states

Brand Dark

--color-brand-dark

#CE9A13

Pressed states and stronger contrast

Black Deep

--color-black-deep

#111111

Primary text and dark UI anchors

Accessibility and Contrast

Brand colors are intentionally vivid, but they are not suitable for white text in UI components.

Recommended

  • Use black/deep text on brand backgrounds.
  • Example: #FFBC0D with #111111 (contrast ~11.20:1).

Avoid

  • Do not use white text on current brand yellow/orange shades.
  • Example: #FFBC0D with #FFFFFF (contrast ~1.69:1, fails).

Implementation rule

For buttons, tags, and highlighted surfaces using brand colors, default to dark foreground text. If white text is required, use a significantly darker brand shade specifically designed for that use case.

Base Surfaces

Surface / Light

#FFFFFF

Default light background

Surface / Dark

#0A0A0A

Default dark background

Card / Dark

#1A1A1A

Dark cards and elevated sections

Typography

Primary Font

Inter

Configured in app/layout.tsx and used globally.

Display / Hero

Mosh Engine

Section Heading

Turning Heavy Music Into Playful Experiences

Body Copy

Keep body text clear and direct. Prioritize readability and strong contrast in both light and dark mode.

Usage Notes

  • Use Brand for interactive highlights and primary CTAs.
  • Prefer Black Deep for strong text contrast in light mode.
  • Keep uppercase + heavy weight for major headings only.
  • Respect dark mode parity when adding new UI patterns.