Ume

Overview

Ume is a B2B fintech platform that enables businesses to create, operate, and scale proprietary financial products without technical complexity or hidden costs. The brand embodies 'Technological Optimism'—a design philosophy that combines the precision of financial systems with the accessibility of modern consumer interfaces. The visual language uses a vibrant emerald green (#14cb53) as the signature accent, paired with a deep forest background (#0d1221) that conveys trust and stability, while maintaining a clean, light-mode interface for operational clarity. The emotional response is one of empowerment: users feel capable of controlling their financial destiny without friction. Ume's voice is direct, confident, and solution-oriented—never jargon-heavy, always action-focused. Example: 'Crie, opere e escale seus próprios produtos financeiros dentro do seu negócio, capturando o lucro do crédito.'

Colors

The color system is built on a high-contrast foundation: a pure white surface (#ffffff) serves as the operational canvas, while the hero section uses a dark gradient (from #00170d to #0d1221) to establish brand presence and visual hierarchy. Primary (#14cb53) is the signature action color—used exclusively on CTAs, interactive elements, and success states—creating an unmistakable visual anchor. The accent is paired with a secondary blue (#4d53ff) for secondary actions and informational elements, and a tertiary yellow (#ffe669) for highlights and warnings. Surface tokens follow a subtle scale: surface-container-low (#edfaf0) for input backgrounds, surface-container (#ffffff) for cards, and surface-container-high (#e9ecef) for hover states. The on-surface text is pure black (#000000) on light

Typography

The type system uses Inter as the primary typeface, chosen for its geometric clarity and excellent screen rendering at all weights. Display (72px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) structures major sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and maintains 1.56 line-height ratio for comfortable reading. Body-md (16px, 400 weight) serves as the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and UI labels, while Label-sm (12px, 500 weight, 0.02em tracking) handles metadata and secondary information. The hierarchy communicates information density: larger, heavier weights signal p

Layout

The layout uses a 12-column grid system with a max-width of 1224px, centered on the viewport. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Hero sections span full-width with 64px (lg spacing) vertical padding top and bottom, establishing breathing room. Content cards use 24px (md spacing) padding internally, with 40px (lg spacing) separating major sections vertically. The container-max of 1224px ensures readability on ultra-wide displays while maintaining focus. White-space is used strategically: the dark hero section occupies 600px minimum height, drawing the eye downward; light sections below use 40px vertical margins to separate concerns. Horizontal spacing follows the gutter rule: 24px between elements in a row, 12px (sm spacing) for tightly gr

Elevation & Depth

Elevation is achieved through a restrained shadow system that respects the flat-modern aesthetic while maintaining clear visual hierarchy. Level 1 (Base): no shadow; elements sit flush on the surface. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates subtle depth, lifting cards 4px off the surface. Level 3 (Hover/Elevated): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) indicates interactive elevation, typically applied on button-hover or card-hover states. The shadow color is always black with low opacity (12–15%) to maintain the light, airy feel. Transitions between sh

Shapes

The shape philosophy is 'Geometric Precision with Approachability'—sharp enough to feel modern and technical, rounded enough to feel human and trustworthy. Buttons use full radius (9999px / border-radius: 32px) to signal primary actions and create a pill-shaped affordance that is instantly recognizable as clickable. Cards and containers use lg radius (1rem / 16px) for a balanced, contemporary look that avoids harsh corners without appearing overly soft. Input fields use md radius (0.75rem / 12px) to differentiate them from buttons while maintaining visual cohesion. Small UI elements (badges, i

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#14cb53) background with {colors.on-primary} (#0099ff) text, full radius (32px), and 12px vertical / 56px horizontal padding, resulting in a 48px height. The button-primary-hover state transitions the background to {colors.primary-fixed-dim} (#14523d) with a 200ms ease-out animation. All buttons include a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them off the surface. Button-secondary uses a transparent background with a 2px solid border at {colors.primary}, maintaining the same padding and height for visual consistency. Secondary buttons are used for less critical actions (e.g., 'Learn More') and transition to {colors.surface-container-low} on hover.

Contai

Do's and Don'ts

**Do**

• Do use {colors.primary} (#14cb53) exclusively for primary CTAs, success states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain 24px (md spacing) as the default gap between major content blocks; use 40px (lg spacing) only for section breaks.
• Do apply full radius (32px) to all primary buttons; this shape is the visual signature of Ume and must remain consistent.
• Do use Inter 400 weight for body text and 600 weight for labels and headings; avoid mixing weights within a single component.
• Do include box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards to establish subtle elevation and visual separation.
• Do use white (#ffffff) text on dark backgrounds (#0d1221) with +0.02em letter-spacing for enhanced legibility.

**Don't**

• Don't use primary green (#14cb53) for non-interactive elements, backgrounds, or decorative purposes—reserve it for actions only.
• Don't apply rounded corners larger than xl (24px) to any component; the system maxes out at full radius (32px) for buttons only.
• Don't mix Inter with other typefaces; the system uses Inter exclusively for consistency and screen rendering quality.
• Don't add shadows to elements on dark backgrounds (hero sections); rely on contrast and gradient instead.
• Don't use the secondary blue (#4d53ff) or tertiary yellow (#ffe669) as primary accent colors; they are supporting roles only.
• Don't exceed 1224px container width; this ensures optimal readability and prevents text lines from becoming too long (>75 characters).