Me Vs Me // Design System
HomeAnalyticsDevelopmentSecurityDesign SystemMe vs MeSite HealthFlowchart Designer
MVM
Design System
PHASES
9 available
OverviewDestiny 2 StylePhase 1: FoundationPhase 2: ComponentsPhase 3: NavigationPhase 4: Icons & MotionPhase 5: Templates & HubsPhase 6: Mobile & QAPhase 7: User Journeys
[ MvM / DESIGN_SYSTEM / COLORS ]

Color System

Our color palette is built around warm orange tones and neutral grays. Combined with the Nexus cyan accent, it creates a premium feel for MvM applications.

Primary Orange

The primary brand color used for CTAs, interactive elements, and brand emphasis.

50

#FFF7ED

100

#FFEDD5

200

#FED7AA

300

#FDBA74

400

#FF8E53

500

#FF6B35

600

#EA580C

700

#C2410C

800

#9A3412

900

#7C2D12

Neutral Grays

Used for text, backgrounds, borders, and UI elements. The darker end of the scale is used for the dark theme.

50

#FAFAFA

100

#F4F4F5

200

#E4E4E7

300

#D4D4D8

400

#A1A1AA

500

#71717A

600

#52525B

700

#3F3F46

800

#27272A

900

#18181B

Secondary & Accent

Blue

Used for informational elements and cool accents.

100
300
500
700
900

Teal

Accent color for highlights and special emphasis.

100
300
500
700
900

Semantic Colors

Used to communicate meaning and status across the interface.

Success

--neo-success

Confirmations, positive actions

Warning

--neo-warning

Alerts, caution states

Error

--neo-error

Errors, destructive actions

Info

--neo-info

Information, tips

Gradients

Primary Gradient

from-(--neo-orange-500) to-(--neo-orange-400)

Cool Gradient

from-(--neo-blue-500) to-(--neo-teal-500)

Dark Gradient

from-[#1a1a2e] to-[#0f0f1a]
DESIGN
Me Vs Me Design System9 phases