Masumi

Overview

Masumi is a decentralized financial protocol designed for AI agent networks, enabling secure peer-to-peer transactions and collaborative intelligence. The design system embodies 'Technical Minimalism with Vibrant Accents'—a philosophy that prioritizes clarity and precision while using bold brand colors (vivid magenta #ca63ed and energetic orange #f04e23) to signal innovation and trust. The interface evokes a sense of financial sophistication combined with cutting-edge technology: clean typography, generous whitespace, and purposeful color placement guide users through complex agent-to-agent interactions without overwhelming them.

The brand voice is direct, authoritative, and forward-thinking. Masumi speaks in the language of technical builders and financial operators—precise, jargon-aware, but never condescending. Tone examples: 'Secure agent-to-agent payments in milliseconds' (not 'lightning-fast transactions'), 'Independent multi-agent collaboration' (not 'work together easily'). The vocabulary emphasizes decentralization, autonomy, and financial empowerment. Every interaction should feel like a conversation with a knowledgeable partner, not a marketing pitch.

Colors

The Masumi color system is built on a foundation of near-white surfaces (#fbfbfe, #f0f0fa) paired with deep, neutral text (#0e0e11) for maximum readability and a clean, professional aesthetic. Primary accent is vivid magenta (#ca63ed), used exclusively for call-to-action buttons, interactive focus states, and brand-critical UI elements—this color signals agency and financial empowerment. Secondary accent is energetic orange (#f04e23), deployed for warnings, secondary actions, and supporting highlights. Tertiary is a soft sky blue (#a0d8ef), reserved for informational badges and tertiary UI layers. The surface stack uses transparent black and white overlays (rgba(9, 9, 27, 0.4) for borders, rgba(221, 221, 244, 0.28) for container backgrounds) to create subtle depth without introducing new h

Typography

The typography system uses Inter exclusively across all scales, from display (60px, 700 weight, -0.04em tracking) down to label-sm (12px, 500 weight, 0.05em tracking). Display and headline-lg are reserved for hero sections and major section breaks, using tight negative letter-spacing (-0.04em to -0.02em) to create visual impact and convey authority. Body text (16px–18px, 400 weight, 0.01–0.02em tracking) is set with generous line-height (24–28px) to ensure readability in dense information layouts. Labels and buttons use 600–700 weights with increased letter-spacing (0.01–0.05em) to emphasize action and hierarchy. Apply text-shadow: 0 2px 4px rgba(14, 14, 17, 0.1) to small labels (label-sm) when placed over busy backgrounds or gradient overlays to maintain contrast. Headings should never ex

Layout

Masumi uses a 12-column grid system with a maximum container width of 1280px, maintaining a fluid layout on screens below 1024px. The gutter spacing is consistently 24px (md spacing token), creating a rhythm that feels spacious without wasting real estate. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for internal component padding. The layout philosophy is 'breathing room with purpose': whitespace is not empty; it's a design element that reduces cognitive load and directs attention to key CTAs. Cards and containers use 24px internal padding (md spacing), with 12px (sm spacing) for input fields and list items. Margins between sections follow the lg/md/sm scale, never mixing arbitrary values. The container max-wi

Elevation & Depth

Depth in Masumi is achieved through subtle shadows and surface-container layering, not through dramatic drop shadows or glassmorphism. Level 1 (Base): flat surfaces at surface (#fbfbfe) with no shadow. Level 2 (Elevated Cards): surface-container-low (#ddddf447) with elevation.sm (0 1px 2px rgba(14, 14, 17, 0.06)) for hover states. Level 3 (Modals/Overlays): surface-container-high (#ddddf480) with elevation.md (0 4px 12px rgba(14, 14, 17, 0.08)). Level 4 (Floating Elements): surface-container-highest (#fbfbfeeb) with elevation.lg (0 16px 40px rgba(14, 14, 17, 0.12)). Interactive elements (butto

Shapes

The shape philosophy is 'Geometric Precision with Approachability'—sharp enough to feel technical and trustworthy, rounded enough to feel modern and human. Buttons use rounded.lg (1rem / 16px), creating a subtle roundness that signals interactivity without appearing playful. Cards and containers use rounded.xl (1.5rem / 24px) for a softer, more inviting appearance. Input fields use rounded.DEFAULT (0.5rem / 8px), maintaining a compact, functional aesthetic. Badges and pills use rounded.full (9999px) for maximum roundness, emphasizing their role as secondary information. Modals and overlays use

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#ca63ed) background with {colors.on-primary} text, 48px height, 12px 24px padding, and rounded.lg (1rem). On hover, shift to {colors.primary-fixed-dim} with a 0.3s ease transition and add elevation.md shadow (0 4px 12px rgba(202, 99, 237, 0.25)). On focus, apply a 2px solid outline in {colors.primary} with 2px outlineOffset. Secondary buttons use transparent background with a 1px solid {colors.outline-variant} border, {colors.primary} text, and the same padding/height. On hover, fill the background with {colors.surface-container-high} and change the border to {colors.primary}. Disabled state: reduce opacity to 0.5 and remove all hover effects.

Containers & Surfaces Cards are the pr

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ca63ed) exclusively for primary CTAs and interactive focus states—this is the brand's signature accent and should never be diluted or overused.
• Do maintain consistent spacing using the semantic scale (xs/sm/md/lg/xl) rather than arbitrary pixel values; this ensures rhythm and predictability across all layouts.
• Do apply elevation.md shadow (0 4px 12px rgba(14, 14, 17, 0.08)) to interactive elements on hover to signal state change without introducing visual clutter.
• Do use Inter font-family exclusively; load from Google Fonts and never fall back to system fonts, ensuring brand consistency across all platforms.
• Do preserve whitespace as a design element; use lg spacing (40px) between major sections to reduce cognitive load and guide user attention to key CTAs.

**Don't**

• Don't use primary color (#ca63ed) for body text, backgrounds, or non-interactive elements; reserve it exclusively for actions and focus states.
• Don't mix rounded values within a single component family (e.g., don't use rounded.md for some buttons and rounded.lg for others in the same group).
• Don't apply shadows to cards at rest; shadows should appear only on hover or when the card is elevated to a higher layer (Level 3+).
• Don't use gradients or glassmorphism effects; rely instead on the surface-container stack and strategic use of borders and shadows for depth.
• Don't exceed 16px blur radius on any shadow; keep shadows soft and diffuse to maintain the clean, professional aesthetic.