myProfit

Overview

myProfit is a fintech platform designed for Brazilian entrepreneurs and small business owners seeking to simplify profit management and financial clarity. The design system embodies a "Vibrant Minimalism" aesthetic—a movement that pairs energetic, forward-moving accent colors (vivid greens and teals) with clean, light surfaces and precise typography to convey both approachability and professional competence. The interface evokes confidence and momentum: users feel empowered to take control of their finances without cognitive overload. The brand voice is conversational yet authoritative, speaking directly to the user's pain point: "Descomplique seu lucro" (Simplify your profit). Example sentence in brand voice: "Seu fluxo de caixa está claro agora—veja exatamente onde seu dinheiro vai." (Your cash flow is clear now—see exactly where your money goes.)

Colors

The color palette is built on a foundation of clean whites and light grays (surface: #ffffff, surface-container-lowest: #f2f3f9) that establish trust and clarity, paired with three energetic accent colors that drive user action and emotion. Primary (#4de193, a vibrant emerald green) is the signature brand color, used exclusively on call-to-action buttons, active states, and key interactive elements—it signals growth, progress, and financial health. Secondary (#0796c6, a bright cyan-blue) supports the primary in secondary actions and highlights, evoking stability and digital confidence. Tertiary (#f25071, a warm coral-pink) is reserved for alerts, warnings, and emotional emphasis, creating visual urgency without aggression. The error color (#cc274e, a deeper red) is used sparingly for destr

Typography

The type system pairs Poppins (a geometric, modern sans-serif from Google Fonts) for all headlines, buttons, and labels with Lato (a humanist sans-serif, also from Google Fonts) for body text and supporting copy. This pairing creates a clear hierarchy: Poppins's structured geometry conveys precision and forward momentum, while Lato's warmth makes longer passages feel approachable and human. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks; headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modules. Body text uses Lato at 16px, 300 weight (light), with 24px line-height for comfortable reading on screens; this light weight reduces v

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on desktop while scaling gracefully to mobile. The page rhythm uses semantic spacing: lg (40px) separates major sections (hero, feature blocks, footer), md (24px) separates cards and subsections within a section, and sm (12px) provides breathing room between inline elements. The gutter (24px) is applied consistently to left/right margins on all containers, creating a predictable visual rhythm. Input fields and buttons use a 18px 25px padding (vertical × horizontal) with 35px border-radius, creating a pill-shaped affordance that feels modern and touch-friendly. Cards use 24px padding with 1rem border-radius and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them of

Elevation & Depth

Depth in this system is achieved through a three-level shadow hierarchy combined with subtle background color shifts. Level 1 (Base/Surface): no shadow, white background (#ffffff) with no border. Level 2 (Standard Card/Input): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: #f2f3f9 or #ffffff, 1px solid border at #d0d0d0 (outline-variant). Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: #ffffff, 1px solid border at #afafaf (outline). On hover, cards transition from Level 2 to Level 3 with a 200ms ease-in-out timing, and a subtle 2px upward transform (tr

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the interface and signal friendliness, while maintaining enough angularity to feel professional and trustworthy. Buttons and inputs use the full 35px border-radius (rounded.full), creating a pill shape that feels modern, touch-friendly, and distinctly contemporary. This aggressive rounding on interactive elements makes them instantly recognizable as clickable. Cards and modals use 1rem (16px) border-radius (rounded.lg), providing a subtle curve that softens the container without making it feel playful or

Components

Action Elements Buttons are the primary drivers of user intent. The primary button uses background: #4de193 (primary), text: #ffffff (on-primary), Poppins 16px 400 weight, 35px border-radius, 14px 38px padding, and 48px minimum height for touch targets. On hover, the background transitions to #23a27f (primary-container) with a 200ms ease-in-out timing. On active/pressed, the background shifts to #64ce65 (primary-fixed-dim) to provide tactile feedback. Secondary buttons use a transparent background with a 2px solid border at #4de193, text in #4de193, and the same padding and rounding. On hover, the background fills with #e9ecef (surface-container-high) while maintaining the border, creating a "fill" effect. All buttons include a cursor: pointer and transition: all 200ms ease-in-out for

Do's and Don'ts

**Do**

• Do use primary (#4de193) exclusively on call-to-action buttons and active states—it's the brand's signature accent and should never be diluted or overused on secondary elements.
• Do apply 24px (md spacing) between major content sections and 12px (sm spacing) between inline elements to maintain the generous, breathing layout that defines the brand.
• Do use Poppins for all headlines, labels, and buttons to reinforce hierarchy and forward momentum; reserve Lato for body text and supporting copy to maintain warmth and readability.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-in-out timing to create smooth, predictable feedback without feeling sluggish.
• Do use the full 35px border-radius on buttons and inputs to create a modern, touch-friendly affordance that signals interactivity at a glance.

**Don't**

• Don't use primary or secondary colors on body text or backgrounds—they're reserved for interactive elements and accents. Body text must always use on-surface (#212121) for legibility.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12) on standard cards; excessive shadow depth breaks the clean, modern aesthetic and creates visual clutter.
• Don't mix Poppins and Lato weights arbitrarily—use Poppins 600+ for headlines and Lato 300–400 for body to maintain the intended contrast and hierarchy.
• Don't use border-radius smaller than 4px on any interactive element; the brand's soft-technical philosophy requires at least subtle rounding to feel approachable.
• Don't override the 200ms transition timing on button and card hover states—faster transitions feel twitchy, slower ones feel sluggish and undermine the brand's sense of momentum.