Müven Design System

Müven · Design System v1.0

One source of truth.

Every colour, space, type size and component token — sourced from Figma designs and production HTML. Helvetica Neue throughout.

✦ Tokens ✦ Real Colours ✦ Hover for values ✦ Click to copy

Colours

6 colour ramps sourced from production SVG and Figma. Full semantic layer.

6 ramps · 50+ tokens

Typography

Helvetica Neue. Complete heading scale with weights and tracking values.

6 levels · 4 weights

Spacing

8px base grid. Interactive demo lets you feel every step visually.

9 steps · 4px–48px

Buttons

Primary, secondary, ghost, danger, dark-surface variants at 3 sizes.

5 variants · 3 sizes

Diary Events

All 7 event types with typed colour accent tokens. Data-attribute system.

7 event types

Icons

System icon set with stroke weights and size tokens matched to components.

32 icons · 2 weights

Colour Tokens

Extracted from production SVG files. Click any swatch to copy its hex value.

Primitive Ramps

Purple — Brand ★

100

--p-100 · #E0DDFC

200

--p-200 · #C0BBF8

300

--p-300 · #A198F5

400

--p-400 · #8176F1

500★

--p-500 · #6254EE · Primary

600

--p-600 · #4E43BE

700

--p-700 · #3B328F

800

--p-800 · #27225F

900

--p-900 · #141130

Navy — Sidebar

700★

--n-700 · #1C2143 · Sidebar bg

800

--n-800 · #141730

900

--n-900 · #0D0327 · Deepest

Grey — Neutrals

50

--g-50 · #F9F9FA · Page bg

100

--g-100 · #F0F1F5

200

--g-200 · #DEE0E5 · Borders

300

--g-300 · #BDC1CB

400

--g-400 · #8C93A3

500

--g-500 · #59647E · Secondary text

600

--g-600 · #4D4D4D

700

--g-700 · #333A46

800

--g-800 · #111827 · Primary text

Green — Success

50

--s-50 · #D0FFE5

500

--s-500 · #0ACF97

700

--s-700 · #02813B

Amber — Warning

50

--w-50 · #FFF3DE

500

--w-500 · #FFC35A

700

--w-700 · #997536

Pink-Red — Danger

50

--d-50 · #FEDEE5

500

--d-500 · #FA5C7C

700

--d-700 · #96304D

Teal — Info

50

--i-50 · #D7EFF6

500

--i-500 · #39AFD1

700

--i-700 · #22697D

Semantic Tokens

--brand

Primary interactive colour

#6254EE · p-500

Click to copy

--brand-hover

Hover / pressed state

#4E43BE · p-600

Click to copy

--text-primary

Body and headings

#111827 · g-800

Click to copy

--text-secondary

Captions, meta text

#59647E · g-500

Click to copy

--surface-page

Page background

#F9F9FA · g-50

Click to copy

--surface-dark

Sidebar / dark surfaces

#0D0327 · n-900

Click to copy

Typography Scale

Helvetica Neue throughout — Light (300), Regular (400), Medium (500), Bold (700). Hover any row to reveal all token values.

Heading Scale

Display — Page Title

34px · Bold · tracking -0.025em

line-height 1.05

HelveticaNeue-Bold · Display

Hover to reveal values

H1 — Section heading

24px · Bold · tracking -0.015em

line-height 1.2

HelveticaNeue-Bold · H1

H2 — Card title

20px · Bold

line-height 1.3

HelveticaNeue-Bold · H2

H3 — Sub-section

18px · Bold

line-height 1.3

HelveticaNeue-Bold · H3

H4 — Component heading

16px · Medium

line-height 1.4

HelveticaNeue-Medium · H4

KICKER / OVERLINE LABEL

10px · Bold · uppercase · 0.1em

Used for section labels

HelveticaNeue-Bold · Kicker

Body & UI Text

Body — Welcome back, here's what's happening today. Manage all your properties from one place.

14px · Light · line-height 1.65

Primary body copy

HelveticaNeue-Light

Caption — Date Entered: 2025-12-22 15:22:45 · Mr Taylor · All day

12px · Light · text-secondary

Timestamps, meta labels

HelveticaNeue-Light · Caption

Brand Name Treatment

Hello, Jane Tillmore

24px Light + Medium · --p-700

Greeting: Light / Name: Medium

--text-brand-h · p-700

Spacing Scale

8px base grid. Click any row to copy. Use the interactive demo to feel each step.

Token	Value	Visual	Used for
--sp-1	4px	4px	Icon gap, tight padding
--sp-2	8px	8px	Badge padding, nav gap
--sp-3	12px	12px	Button sm, input padding
--sp-4	16px	16px	Button md, card padding-sm
--sp-5	20px	20px	Diary rows, nav items
--sp-6	24px	24px	Card padding, section gaps
--sp-8	32px	32px	Grid gap, section padding
--sp-10	40px	40px	Page padding, major gaps
--sp-12	48px	48px	Hero padding, max gaps

Interactive Padding Demo — click a step to apply

padding: 16px

Border Radius

Hover to see the shape animate. Click to copy the CSS variable.

4px

Small

--r-sm · 4px

Input borders, icon badges

8px

Medium

--r-md · 8px

Buttons, dropdowns, inputs

12px

Large

--r-lg · 12px

Cards, modals, panels

16px

X-Large

--r-xl · 16px

Manage Properties card

24px

2X-Large

--r-2xl · 24px

Banners, hero surfaces

pill

Pill

--r-pill · 999px

Badges, tags, chips

Shadow Scale

Hover to lift. Click to copy.

XSmall

0 1px 2px rgba(0,0,0,.05)

--sh-xs

Click to copy

Small

0 1px 3px + layer

--sh-sm · Cards

Click to copy

Medium

0 4px 12px + layer

--sh-md · Card hover

Click to copy

Large

0 12px 28px + layer

--sh-lg · Modals

Click to copy

Focus Ring

0 0 0 3px rgba(98,84,238,.28)

--sh-focus · Inputs

Click to copy

Brand Glow

0 8px 28px rgba(98,84,238,.35)

--sh-brand · Manage card

Click to copy

Motion Tokens

Hover each card to feel the duration difference. Click to copy.

--dur-fast140msHover states, toggles, instant feedback

Click to copy

--dur-base200msButtons, card transitions, colour changes

Click to copy

--dur-slow320msModals, sidebar, large layout shifts

Click to copy

--ease

cubic-bezier(0.16, 1, 0.3, 1)

Snappy spring — used for all transitions. Fast start, soft landing.

Click to copy cubic-bezier

Button System

5 variants × 3 sizes. Helvetica Neue Medium for labels. Hover for token values.

Variants

Primary

Secondary

Ghost

Status

Dark surface

With icon

Badges & Pills

Always ramp-50 bg with ramp-700 text. Hover for token detail.

Semantic Brand

--p-100 bg · --p-700 text

Success

--s-50 bg · --s-700 text

Warning

--w-50 bg · --w-700 text

Danger

--d-50 bg · --d-700 text

Info

--i-50 bg · --i-700 text

Neutral

--g-100 bg · --g-600 text

Property Residential Sales

--p-500 bg · active

Residential Lettings

--p-100 bg · inactive

Commercial Sales Commercial Lettings

Event dots Viewing Appointment Offer Applicant Property

Card Variants

Default card + the brand Manage Properties dark card with the cog graphic asset.

DEFAULT CARD

Since You Last Logged In

Last logged in 2 days ago

--surface-card · --r-lg · --sh-sm

SUBTLE CARD

Task Management

This week's tasks

Manage Properties

12 Properties on the market

Form Elements

Focus any input to see the brand focus ring token. Hover for detail.

Default

With value

Error state

height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border-default); font-family: var(--font); font-size: 14px; focus: border-color var(--brand) + box-shadow var(--sh-focus);

Diary Events

7 event types mapped to named colour tokens via data-attributes. Hover for token detail.

Diary

SATURDAY, APRIL 27, 2026

9:15 AM

Holiday

OOO

All day

--s-500 · #0ACF97 · holiday

10:00 AM

Meeting on site

All hands

30 mins

--p-500 · #6254EE · meeting

10:30 AM

Admin / Office

Greenfield

1hr 45mins

--g-300 · #BDC1CB · admin

12:15 PM

Property viewing

Greenfield

1hr

--i-500 · #39AFD1 · viewing

1:45 PM

Legal Process

Divorce – 42 Stakes Road

45 mins

--w-500 · #FFC35A · legal

3:00 PM

Market Appraisal

HPS Council

2hrs

#56EFEB · appraisal

5:00 PM

General

Admin time

45 mins

--d-500 · #FA5C7C · general

Activity Timeline

Dot colours map to event types. Hover for the token name.

Since You Last Logged In

Last logged in 2 days ago

--w-500 · Viewing
New Viewing
71 Jones Valleys, Simpsonfort – Mr Taylor
2025-12-22 · 15:22:45
--i-500 · Appointment
New Appointment
New Subject
2025-12-17 · 16:31:37
--s-500 · Offer
New Offer
Offer submitted
2025-12-16 · 10:21:11
--p-400 · Applicant
New Applicant
New Company
2025-12-22 · 15:22:45

Task Counters

Three semantic status states. Hover each cell for token values.

Task Management

This week's tasks

3

Overdue

--d-50 bg · --d-700 text

7

Due Today

--w-50 bg · --w-700 text

1

Upcoming

In the next 14 days

--s-50 bg · --s-700 text

Navigation Components

Sidebar nav tokens + topbar alert chips. Hover for detail.

Sidebar

müven

Dashboard

rgba(98,84,238,.3) bg · #fff · Medium

Add Property

Default: rgba(255,255,255,.55) text

Calendar

Hover: rgba(255,255,255,.07) bg

Contacts

Topbar Alert Chips

Müven Credits LOW

--d-50 bg · --d-700 text · --r-pill

Inactive users 2

--w-50 bg · --w-700 text

Icon System

Inline SVG icons. 15px in nav, 14px in buttons, 16px standalone. Stroke width 2px default, 1.5px on dark. Hover to copy.

Navigation & UI Icons

Dashboard

Copy SVG

Property

Copy SVG

Contacts

Copy SVG

Applicants

Copy SVG

Reports

Copy SVG

Calendar

Copy SVG

Settings

Copy SVG

Admin

Copy SVG

Help

Copy SVG

Add

Copy SVG

Search

Copy SVG

Notification

Copy SVG

User

Copy SVG

Check

Copy SVG

Close

Copy SVG

Arrow right

Copy SVG

External

Copy SVG

Logout

Copy SVG

Menu

Copy SVG

Eye

Copy SVG

Edit

Copy SVG

Delete

Copy SVG

Filter

Copy SVG

Download

Copy SVG

Upload

Copy SVG

Share

Copy SVG

Mail

Copy SVG

Phone

Copy SVG

Tag

Copy SVG

Info

Copy SVG

Warning

Copy SVG

Offer

Copy SVG

Sizing Tokens

In nav 15×15px · stroke 2 · sidebar menu items

In buttons 14×14px · stroke 2.5 · inside button labels

Standalone 18×18px · stroke 1.5 · headers, feature callouts