Masumi

Overview

Masumi is a blockchain-native payment infrastructure for autonomous AI agents, built on a philosophy of "Technical Minimalism"—where every visual element serves a functional purpose in communicating trust, clarity, and precision. The brand eschews decorative flourishes in favor of a clean, light-mode-first aesthetic dominated by pure white surfaces (#ffffff), deep blacks (#000000), and a signature hot-pink accent (#fa008c) that signals interactivity and brand presence. The interface evokes the precision of financial systems and the clarity of technical documentation, creating an environment where agents and humans alike can confidently execute trustless transactions. Voice: direct, technical yet accessible, never marketing-heavy. Example: "Escrow payments settle on-chain in 6 seconds—no intermediaries, no delays."

Colors

The color system is built on a light, high-contrast foundation optimized for clarity and accessibility. Primary (#fa008c) is the brand's signature accent, deployed on all call-to-action buttons, interactive toggles, and status indicators—it commands attention without aggression. Secondary (#6400ff, a deep violet) serves as a supporting accent for secondary actions and highlights, creating visual hierarchy without competing for focus. Tertiary (#ff6400, a warm orange) is reserved for alerts, warnings, and tertiary CTAs. The surface stack is deliberately minimal: surface (#f5f5f5) provides the page background with just enough warmth to avoid clinical coldness, while surface-container (#ffffff) is pure white for cards and elevated content. On-surface (#000000) and on-surface-variant (#5b5b5b)

Typography

The typography system is anchored in Inter, a geometric sans-serif that communicates technical precision while remaining warm and approachable. Display (64px, 400 weight, -0.02em tracking) is used sparingly for hero headlines like "Agents Pay Agents," where its generous size and tight tracking create impact without heaviness. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) establish section hierarchy with consistent 400 weight—the brand avoids bold headlines, preferring weight contrast through size and spacing instead. Body-lg (18px) and body-md (16px) both use 400 weight with 28px and 24px line-heights respectively, ensuring comfortable reading at any size. Label-md (14px, 500 weight, 0.01em tracking) is used for button text and UI labels, where the slight weight increas

Layout

The layout follows a fluid 12-column grid with a max-width of 1440px, centered on the viewport. The hero section uses a centered, single-column composition with 24px horizontal gutters on mobile (scaling to 48px on desktop), creating breathing room around the headline and copy. Section spacing follows the semantic scale: lg (40px) separates major sections, md (24px) separates subsections, and sm (12px) is used for internal component spacing. The container max-width of 1440px ensures content remains readable on ultra-wide displays without excessive line lengths. White-space is used strategically to create visual rest: the hero has 176px top padding (pt-[176px]) to account for the fixed header, and sections use 40px vertical spacing to establish rhythm. Cards and containers use 16px padding

Elevation & Depth

Depth in Masumi is achieved through subtle shadows and border treatments rather than layering or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Cards use a 1px border at rgba(0, 0, 0, 0.04) combined with md shadow to create a subtle lift from the surface. Interactive elements like buttons and toggles use no shadow by default, but gain md shadow on hover to signal elevation. The

Shapes

The shape philosophy is "Functional Geometry"—rounded corners are used strategically to soften technical interfaces while maintaining clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel approachable and clickable; this applies to primary buttons (button-primary), secondary buttons (button-secondary), and toggle buttons (toggle-button-active/inactive). Cards and containers use 0px border-radius (sharp corners) to maintain a technical, architectural feel that aligns with blockchain infrastructure. Input fields use md (0.75rem / 12px) border-radius to balance usa

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#fa008c) background with white text, 12px 24px padding, 44px height, and full border-radius. On hover, the background shifts to #e6007a (a darker pink) with a 200ms ease-out transition—no scale or shadow change, just color. Button-secondary uses rgba(250, 0, 140, 0.05) background with #0f0f14 text, a 1px border at rgba(250, 0, 140, 0.1), and full border-radius; on hover, the background becomes rgba(250, 0, 140, 0.12) for subtle feedback. Button-tertiary (used for the "Open Documentation" CTA in the header) uses {colors.secondary} (#6400ff) background with white text, 0px border-radius (sharp), and 40px height. Toggle buttons (toggle-button-active/inactive) use full border-radius, 36px hei

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fa008c) exclusively for primary CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do maintain sharp corners (0px border-radius) on cards and containers to reinforce the technical, trustworthy nature of the platform.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for consistent, snappy feedback.
• Do use Inter 400 weight for headlines and body text; reserve 500 weight for labels and UI text only.
• Do combine 1px borders with subtle shadows (md: 0 3px 8px rgba(0, 0, 0, 0.15)) on cards to create depth without visual heaviness.
• Do use full border-radius (9999px) on all buttons to signal interactivity through familiar, pill-shaped affordances.

**Don't**

• Don't use bold (700+) font weights for headlines—the brand communicates hierarchy through size and spacing, not weight.
• Don't apply rounded corners to cards or containers; sharp corners are essential to the technical aesthetic.
• Don't use shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) on any element—the brand prioritizes subtlety and clarity.
• Don't introduce new accent colors outside the primary (#fa008c), secondary (#6400ff), and tertiary (#ff6400) palette—color consistency is critical to brand recognition.
• Don't use transitions longer than 300ms or easing functions other than ease-out; the brand feels responsive and snappy, not sluggish.
• Don't place small text (label-sm) over busy backgrounds without applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) for legibility.