mannuu design system / living brand kit

the same feeling, every page.

The living reference for the mannuu site: how the artist world should look, read, move, and stay coherent across the homepage, events, videos, writings, projects, and brand kit.

V0 rule: new mannuu pages must keep the same palette, Dahlia spacing, day/night behavior, navigation, and mobile readability unless a specific page has a documented reason to differ.

purple / pink onlyday + night persistsmobile readableartist-first

01 / foundation

What the system is.

A shared visual language for mannuu: music-facing, intimate, purple, readable, and consistent from page to page.

sound

Music first.

The site should quickly lead people to listen, watch, book, read context, or understand the artist world.

rooms

People in space.

Events, dates, world moments, and Lovepunks references show the work as lived gatherings, not isolated content blocks.

context

Clear without flattening.

Writings, projects, press, and archive pages explain what each thing is while keeping the artist voice human and specific.

02 / color tokens

Purple, violet, pink.

No orange/green/blue drift. The current mannuu palette is violet/lavender/pink-purple in both night and day modes.

--bg / #0B0618

Night background.

--ink / #F7F0FF

Night primary text.

--muted / #B8ADD0

Secondary text.

--card / #160D28

Card surface.

--card2 / #25113F

Card depth.

--red / #D74FFF

Orchid heat / primary accent.

--cyan / #8D62FF

Violet signal.

--acid / #F08CFF

Pink love / hover accent.

day --bg / #FBF2FF

Light mode background.

03 / typography

Readable, not cramped.

Dahlia carries the mannuu feeling. Letters must breathe everywhere Dahlia/DahliaCondensed appears: wordmark, menus, section titles, subtitles, brand samples, and responsive states. Avoid negative tracking. Section descriptions are support/body copy and stay regular weight unless explicitly approved.

Dahlia / regular + condensed

mannuu

No matter where.

Use for the wordmark, hero language, section titles, menu links, and short display phrases. The reference rule is positive, breathable tracking across Dahlia display type: letter-spacing: .018em–.026em. Do not use negative Dahlia tracking. If a title wraps awkwardly, fix the container width, font size, or deliberate line break without compressing the letters.

Archivo + IBM Plex Mono

Archivo carries body copy, captions, and readable long-form content. IBM Plex Mono is for metadata, filters, city labels, small tags, and system notes.

Body

Archivo 400/500/650/800/900, line-height 1.35–1.55.

Mono

IBM Plex Mono uppercase, 10–12px, tracking 0.10–0.13em.

03b / design system contract

Build from this first.

Every new page, feature, card, filter, embed, dashboard module, or campaign surface starts from these rules. If a feature needs a new asset or component, design it inside this system first, verify it against the existing mannuu context, and only then ship it.

Typography lock

Dahlia breathes everywhere.

Use Dahlia/DahliaCondensed only with positive tracking. Reference: wordmark .012em, display .024em, hero .018em, mobile display around .022em. Never solve wrapping by cramping Dahlia or adding negative tracking.

Copy hierarchy

Descriptions stay regular.

Section descriptions, leads, intros, and support copy are normal-weight Archivo, not bold, italic, or decorative by default. Bold is reserved for labels, emphasis inside content, or explicitly approved experiments.

Build rule

Extend before inventing.

Before building a new feature, use the shared nav, palette, typography, buttons, cards, chips, spacing, and motion already defined here. If new UI assets are needed, add the token/component to this brand kit, test day/night and mobile, then apply it to the feature.

Implementation checklist

Before editing

Open this brand kit and the shared CSS contract. Confirm the page inherits the design-system stylesheet or has an explicit local contract block.

During build

Use existing tokens/components first. New components must match purple/pink palette, breathable Dahlia, regular support copy, rounded glass cards/buttons, and mobile readability.

Before shipping

Verify computed styles for Dahlia letter-spacing and section-description font weight. Capture desktop/mobile screenshots for the page and brand kit when visual rules change.

04 / buttons + navigation

Glass, pills, clear CTAs.

The menu bar must always include the day/night switch and hamburger. Buttons stay rounded, direct, and purple.

button states

Default button Hot CTA

Shape

999px pill radius for CTAs, chips, filters, tabs, social buttons.

Hover

Lift subtly, border turns pink/violet, text shifts to accent.

nav rule

Same bar everywhere.

Wordmark left, desktop section links center, day/night switch + hamburger right. The selected day/night mode must persist when moving between linked mannuu pages.

05 / motion

Breath, signal, arrival.

Motion gives the site a living pulse without making navigation, buttons, or text harder to use.

hero

letter / word arrival

Soft entry for words and letters. The hero support/love module appears immediately after the full headline sentence has arrived, but it must sequence internally: `mannuu` appears first, then `♥`, then the first rotating word, then the support terms underneath reveal one by one. Each term starts in the pink/violet signal color and animates into readable white; after a short pause, the word after `♥` rotates and the new terms repeat the same sequence.

media

slow photo movement

Photos can drift subtly. Video and music embeds stay stable so people can watch and listen comfortably.

interaction

small confirmation

Hover lift, glass menu blur, map marker pulse, and city label feedback give confirmation without feeling like generic UI effects.

06 / page patterns

Every page connects back.

Each page should say what it is, why it exists, and where it connects in the larger mannuu world.

Events

World / Dates expanded.

Cities, Luma traces, future dates, and rooms connected to the homepage globe.

Writings

Press / proof expanded.

Context and references that explain without flattening the voice.

Videos

Audio Visual expanded.

DJ sets, talks, interviews, project videos, and visual memory.

Projects

Worlds around mannuu.

Artist OS, Lovepunks, Blockravers lineage, and infrastructure.

Brand kit

The design ledger.

The V0 source of truth for the current visual system and its future decisions.

Main page

Emotional source.

All subpages should borrow its palette, rhythm, motion, and voice.

07 / changelog

From V0 forward.

The system starts here. Future changes should describe decisions, not the prompts or iteration path that produced them.

V0 / 2026-05-19

Living brand kit started: purple/pink palette, Dahlia display spacing matched to the homepage hero, persistent day/night mode, shared navigation, mobile readability, page patterns, and update rules are the current source of truth.

Design contract / 2026-05-20

Dahlia + hierarchy lock: all Dahlia usage must breathe with positive tracking like the hero; section descriptions/support copy return to regular weight; new UI or assets must be added to this design system before they are used in a feature.

Artist OS / 2026-05-19

Protected dashboard parity: Artist OS video review uses the shared mannuu nav, day/night theme, Dahlia/Archivo/mono hierarchy, list/grid/story review modes, and password-gated public-IP access.

V0 style system

Unified, not final.

V0 is the working system: purple glass surfaces, breathable Dahlia, Archivo medium card titles, regular section descriptions/support copy, mono labels, and filter chips. Release polish comes after this system is consistent everywhere.

Display

Dahlia breathes.

Positive tracking at all times. No cramped negative display type.

Hierarchy

One job per style.

Section descriptions/support copy stay regular. Cards and event titles stay medium.