Masumi

Overview

Masumi is a blockchain-native payment infrastructure for autonomous AI agents, enabling trustless escrow transactions and verified on-chain identity. The design system embodies a philosophy of "Technical Minimalism with Vibrant Accents"—a clean, light aesthetic anchored by a light gray surface (#f5f5f5) and pure white containers, punctuated by a bold violet primary (#6400ff) and hot magenta secondary (#fa008c) that signal agency, trust, and the cutting-edge nature of AI-to-AI commerce. The UI prioritizes clarity and precision: every interaction is intentional, every color choice deliberate, and every transition smooth (200ms cubic-bezier for state changes). The brand voice is direct, technical yet approachable, and never hyperbolic—example: "Escrow payments, verified identities, and a public registry — all on-chain" conveys capability without breathlessness.

The visual language rejects skeuomorphism and excessive ornamentation. Typography uses Inter at four distinct weights (400 for body, 600 for labels and headlines) with tight negative letter-spacing on display sizes (-0.02em on 64px headlines) to create a sense of forward momentum. Interactions are micro-managed: buttons use a 200ms transition on hover, toggle states animate with a 300ms ease-out curve, and focus states apply a 3px rgba(100, 0, 255, 0.1) glow. The palette is deliberately restrained—grays from #0a0a0a to #f5f5f5, with the secondary magenta (#fa008c) reserved for badges, highlights, and hover states to avoid visual fatigue while maintaining brand presence.

Colors

The color system is built on a light-mode-first philosophy with a neutral surface stack and two primary accent colors. The surface stack ranges from #f5f5f5 (surface) through #ffffff (surface-container, used for cards and modals) to #f0f0f0 (surface-container-lowest, for subtle backgrounds). On-surface text is #0a0a0a (pure black with 6% lightness) for maximum readability at 16px body size, with a secondary text color of #5b5b5b (on-surface-variant) for supporting copy and disabled states. The outline color is #999999, used for borders and dividers, with a lighter variant at #d0d0d0 for subtle separations (e.g., dropdown borders at 1px solid #d0d0d0).

Primary accent is violet (#6400ff), used exclusively for call-to-action buttons, navigation active states, and focus rings (box-shadow: 0 0

Typography

The type system uses Inter exclusively, a humanist sans-serif that balances technical precision with approachability. Display (64px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines like "Agents Pay Agents"; headline-lg (40px, 400 weight) for section titles; headline-md (28px, 600 weight) for subsection headers; and body-lg (20px, 400 weight) for hero copy and large blocks of text. Body-md (16px, 400 weight, 24px line-height) is the default for all body text, ensuring 1.5 line-height ratio for comfortable reading at arm's length. Labels use label-md (14px, 600 weight, 0.01em letter-spacing) for button text and form labels, with label-sm (13px, 400 weight) for badges and secondary UI text. The 400-weight body text is paired with 600-weight labels to create visual hierarchy

Layout

The layout uses a 12-column grid with a fixed max-width of 1440px, centered on the viewport with symmetric padding of 24px (gutter) on mobile and 48px on desktop (lg:px-12 in Tailwind). The page rhythm is built on a semantic spacing scale: 8px unit, 12px (sm) for tight groupings, 24px (md) for component padding and section margins, 40px (lg) for major section separation, and 64px (xl) for hero-to-content transitions. The hero section uses pt-[176px] (header height 74px + 102px top padding) to create breathing room below the fixed navigation. Cards and containers use 16px padding (2 × unit) with 0px border-radius (sharp corners, reinforcing the technical aesthetic), while interactive elements like buttons and inputs use 12px padding with rounded-full (9999px) for buttons and rounded-DEFAULT

Elevation & Depth

Elevation is achieved through subtle shadows and border treatments rather than color shifts or blur effects. The base shadow (elevation-sm) is 0 1px 2px rgba(0, 0, 0, 0.06), used for hover states on cards and light interactive elements. The standard shadow (elevation-md) is 0 3px 8px rgba(0, 0, 0, 0.15), applied to dropdowns (e.g., .bb-custom-select-panel), modals, and elevated cards on hover. The highest elevation (elevation-lg) is 0 8px 24px rgba(0, 0, 0, 0.12), reserved for full-page overlays and critical modals. Cards in the default state have no shadow (border: 1px solid rgba(0, 0, 0, 0.0

Shapes

The shape philosophy is "Technical Sharpness with Contextual Softness"—a deliberate contrast that reinforces the brand's dual nature as both cutting-edge technology and user-friendly interface. Cards, containers, and most surfaces use 0px border-radius (sharp, architectural corners) to evoke precision and technical rigor. Buttons and interactive elements use rounded-full (9999px border-radius) to signal affordance and approachability, making them instantly recognizable as clickable. Form inputs use rounded-DEFAULT (0.5rem / 8px) as a middle ground—slightly rounded to feel modern but not so sof

Components

Action Elements Buttons are the primary interaction mechanism and use a 44px height (12px vertical padding + 20px line-height) for comfortable touch targets on mobile. Primary buttons (button-primary) use background: {colors.primary} (#6400ff), text: white, rounded-full (9999px), and padding: 12px 24px. On hover, the background transitions to #5200d0 over 200ms (transition: background-color 200ms ease-out). Secondary buttons (button-secondary) use background: rgba(250, 0, 140, 0.05), text: rgba(15, 15, 20, 0.72), and a 1px border of rgba(250, 0, 140, 0.1); on hover, the background strengthens to rgba(250, 0, 140, 0.12) and text darkens to rgba(15, 15, 20, 0.85). Ghost buttons (button-ghost) are transparent with a 1px outline border (#999999) and text in {colors.on-surface}; on hover, t

Do's and Don'ts

**Do**

• Do use {colors.primary} (#6400ff) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain visually distinct from secondary elements.
• Do apply rounded-full (9999px) to all interactive buttons and form inputs to signal affordance; reserve 0px radius for static cards and containers to reinforce technical precision.
• Do maintain the 200ms ease-out transition timing on all hover and focus state changes (background-color, border-color, box-shadow) to create a cohesive, responsive feel across the interface.
• Do use the spacing scale semantically: 24px (md) for component padding and section margins, 40px (lg) for major section breaks, and 64px (xl) for hero-to-content transitions to establish a clear visual rhythm.
• Do apply label-md (14px, 600 weight) to all button text and form labels to create consistent visual hierarchy without relying on size alone.

**Don't**

• Don't use {colors.secondary} (#fa008c) for primary CTAs or navigation—it is reserved for badges, highlights, and secondary interactive states to avoid visual confusion.
• Don't apply shadows to cards in their default state; use only a 1px border (rgba(0, 0, 0, 0.04)) to maintain the flat, minimalist aesthetic. Shadows are reserved for elevated states (modals, dropdowns) and hover interactions.
• Don't mix border-radius values within a single component family (e.g., don't use 8px on one button and 12px on another)—stick to the defined scale (0px for cards, 8px for inputs, 9999px for buttons) to maintain visual consistency.
• Don't use body-lg (20px) for default body text; reserve it for hero copy and large text blocks. Default body text must be body-md (16px, 400 weight, 24px line-height) to ensure readability at standard viewing distances.
• Don't apply text-shadow or blur effects to body text; reserve these techniques for small labels (label-sm) over busy backgrounds where legibility is at risk (e.g., badges on gradient overlays).