English
English
한국어

Brand guidelines

The logo, color, type and UI rules for every MUMU screen and asset.

Logo

The wide, low wordmark is the primary logo. Use the vector files. Don't retype it in a font.

Clear space

Keep one logo height of space on every side.

Minimum size

96px wide on screen, 25mm in print. Use the app icon below that.

  • Don't stretch or squash it
  • Don't add gradients, shadows or outlines
  • Don't recolor it outside indigo, ink or white
  • Don't place it on low-contrast backgrounds
Wordmark, indigo ↓Wordmark, ink ↓Wordmark, white ↓App icon, indigo ↓App icon, white ↓App icon, ink ↓

Color

Screens are neutral, with indigo only where people act. In code, use --mm-* tokens only.

Brand

MUMU Indigo is the only accent. Use it for buttons, links and selected states.

--mm-accent

#3129A5 / #5048D6

--mm-accent-hover

#261F86 / #625AE6

--mm-accent-text

#3129A5 / #AAA5FF

--mm-accent-soft

#ECEBFA / #24224E

Neutral

Most of every screen is neutral.

--mm-bg

#F6F6F9 / #0D0D14

--mm-surface

#FFFFFF / #16161F

--mm-fill

#F0F0F5 / #20202B

--mm-border

#E1E1E9 / #2B2B38

--mm-text

#14131F / #F4F4F8

--mm-text-2

#3B3A4A / #D2D2DC

--mm-text-3

#62617A / #A2A2B4

Status

For status only, never decoration. Always pair with text.

--mm-success

#0F7B4F / #4CD39A

--mm-warning

#975A06 / #F2B95C

--mm-danger

#C4281C / #FF8A80

Charts

For chart series only, in this order. Checked for color-blind separation.

--mm-data-1

#4A42C8 / #7A72F0

--mm-data-2

#00A098 / #00A89F

--mm-data-3

#C4742B / #CC7D36

--mm-data-4

#B0488F / #C258A4

Each swatch shows light on the left, dark on the right.

Typography

Syne echoes the logo and is for large marketing headlines only. Product UI and body use Geist, with Pretendard for Korean.

From keyword to adDisplay · Syne 700, 48/1.15
From keyword to adH1 · Geist 600, 28
From keyword to adH2 · Geist 600, 16
From keyword to adBody · Geist 400, 14
From keyword to adCaption · Geist 400, 12

UI elements

Three radii: 6px for chips, 8px for buttons and inputs, 12px for cards.

PrimarySecondaryInputSelectedPassedNeeds reviewFailed

Language and voice

We're global, so English comes first. Write in seller terms, not internal codes (A, B, C, KW-001): Research, Create, Edit images, Publish.

Buttons say what they do. Empty states say what to do next. Demo data is labeled as demo.