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 "Tech-Forward Minimalism" aesthetic—a deliberate fusion of austere, high-contrast typography with vibrant accent colors (#6400FF primary, #FA008C secondary) that signal agency, precision, and innovation. The UI prioritizes clarity and directness: clean white surfaces (rgb(245, 245, 245) background), bold sans-serif headlines at 64px with -0.02em letter-spacing, and strategic use of vivid accent colors on interactive elements to guide user attention toward critical actions. The emotional response is one of confidence and technological sophistication—users feel they are interfacing with a serious, well-engineered system.

The brand voice is technical yet approachable, speaking to both developers and non-technical stakeholders. Vocabulary emphasizes precision: "escrow payments," "verified identities," "on-chain registry," "trustless transactions." Tone is calm and authoritative, never hype-driven. Example sentence in brand voice: "Your agents earn money while you sleep—all transactions verified on-chain, no intermediaries." The design reinforces this voice through restrained use of color, generous whitespace (lg spacing: 40px for section separation), and a consistent 4px baseline grid that creates visual rhythm without ornamentation.

Colors

The color system is built on a high-contrast, minimalist foundation with three distinct accent roles. Primary (#6400FF, rgb(100, 0, 255)) is the signature brand accent, reserved exclusively for call-to-action buttons, interactive focus states, and key navigation elements—it commands attention through saturation and contrast against the light surface. Secondary (#FA008C, rgb(250, 0, 140)) is a vibrant magenta used for badges, highlights, and supporting interactive states; it appears in the theme-color meta tag and hero badge to signal brand identity. Tertiary (#FF6400, rgb(255, 100, 0)) is an accent orange used sparingly for tertiary actions and status indicators.

The surface stack is deliberately minimal: surface (#F5F5F5, rgb(245, 245, 245)) is the dominant page background, surface-conta

Typography

The type system uses Inter exclusively (fontFamily: Inter, -apple-system fallback), establishing a modern, tech-forward voice through consistent sans-serif treatment. Display (64px, fontWeight 400, lineHeight 72px, letterSpacing -0.02em) is reserved for hero headlines like "Agents Pay Agents," where the tight tracking (-0.02em = -1.28px at 64px) creates visual impact and reinforces the brand's precision. Headline-lg (40px, fontWeight 600) is used for section titles; headline-md (28px, fontWeight 600) for subsections. Body-lg (20px, fontWeight 400, lineHeight 28px) carries hero copy and prominent descriptions, while body-md (16px, fontWeight 400, lineHeight 24px) is the standard paragraph text. Label-md (14px, fontWeight 500, letterSpacing 0.01em) is applied to button text and form labels;

Layout

The layout uses a 12-column grid system with a fixed container max-width of 1440px (1440px = 180 × 8px unit), centered on the viewport with symmetric padding. The page rhythm is built on the spacing scale: xs (4px) for micro-interactions, sm (12px) for component internal padding, md (24px) for gutter and card padding, lg (40px) for section separation, and xl (64px) for major section breaks. Hero sections use pt-[176px] (22 × 8px) to account for the fixed header (74px) plus breathing room. Cards and content blocks are padded with md (24px) on desktop, reducing to sm (12px) on mobile. The design favors generous whitespace: section separators are lg (40px) vertical margin, creating a calm, uncluttered reading experience. All text is left-aligned with a max-width of 560px for body copy and 700

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than color shifts or blur effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and contained elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards on hover and dropdown panels, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Cards use a 1px border at rgba(0, 0, 0, 0.04) by default, upgrading to rgba(0, 0, 0, 0.1) on hover to signal interactivity. Dropdown panels (e.g., custom select) use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px solid #D0D0

Shapes

The shape philosophy is "Geometric Precision"—a balance between sharp, technical edges and subtle softness that reflects the brand's blend of austere minimalism and approachability. Buttons use rounded-full (border-radius: 9999px) to create pill-shaped CTAs that feel modern and clickable; this applies to all primary, secondary, and tertiary buttons. Cards and input fields use rounded-DEFAULT (0.5rem = 8px) for a clean, grid-aligned appearance that respects the 4px baseline. Modals and elevated containers use rounded-lg (1rem = 16px) for a slightly softer, more prominent feel. Badges use rounde

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (bg-[#6400FF], text-white, rounded-full, height 40px, padding 0 24px) uses label-md typography and transitions to primary-container (#5200D0) on hover with a 200ms ease-out timing. The secondary button (bg-rgba(250, 0, 140, 0.05), text-[#5b5b5b], rounded-full, height 36px, padding 8px 18px) has a 1px border at rgba(250, 0, 140, 0.1) and upgrades to rgba(250, 0, 140, 0.12) background on hover. Tertiary buttons are transparent with a 1px outline-variant border, transitioning to surface-container-high on hover. All buttons use transition: all 200ms ease-out to signal responsiveness.

Containers & Surfaces Cards use bg-white, rounded-DEFAULT (8px), padding md (24px), and a 1px border at rgba(0, 0, 0, 0.04

Do's and Don'ts

**Do**

• Do use primary (#6400FF) exclusively for primary CTAs and focus states—never on backgrounds or body text.
• Do apply lg spacing (40px) between major sections to create visual breathing room and guide the eye through content hierarchy.
• Do use label-md (14px, fontWeight 500) for all button text and form labels to maintain consistent visual weight.
• Do transition all interactive elements (buttons, cards, inputs) with 200ms ease-out timing to signal responsiveness.
• Do use the 4px baseline grid for all spacing and border-radius values to ensure visual cohesion across components.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated elements like dropdowns and modals for clear depth separation.

**Don't**

• Don't use secondary (#FA008C) or tertiary (#FF6400) as primary button backgrounds—reserve them for badges, highlights, and supporting actions.
• Don't apply rounded-full to cards or input fields; use rounded-DEFAULT (8px) to maintain a clean, grid-aligned appearance.
• Don't exceed 70–80 characters per line for body text; constrain max-width to 560px for paragraphs and 700px for headlines.
• Don't use color alone to convey state; always pair color changes with border, shadow, or scale transitions (e.g., hover:scale-105).
• Don't apply text-shadow or blur effects to body text; reserve these for small labels over complex backgrounds only.
• Don't use transitions longer than 300ms for interactive elements; keep timing snappy (200ms ease-out is the standard).