Acounto

Overview

Acounto is a modern accounting and bookkeeping platform designed to demystify financial management for small businesses and freelancers. The design system embraces 'Vibrant Minimalism'—a philosophy that pairs a clean, spacious white canvas with a signature lime-green accent (#b2ec5d) that conveys energy, growth, and approachability. The brand personality is warm, encouraging, and human-centric: financial tools should feel less like spreadsheets and more like a trusted advisor. The UI prioritizes clarity and confidence through generous whitespace (40px section gaps), rounded corners (999px pill buttons), and a carefully curated color palette that avoids corporate coldness. Voice: conversational, jargon-light, and action-oriented. Example: 'Your finances, simplified—log in and see what's possible.'

Colors

The color system is anchored in a high-contrast, light-first aesthetic. Primary (#b2ec5d) is the vibrant lime-green used exclusively for call-to-action buttons, active states, and brand moments—it signals 'go' and 'growth' without aggression. On-primary text (#252734) is a warm dark gray that ensures 99%+ WCAG AA contrast (4.5:1 minimum). Secondary (#6c757d) is a neutral gray reserved for supporting text, disabled states, and secondary UI elements; it maintains visual hierarchy without competing for attention. Tertiary (#007bff) is a professional blue used sparingly for links, info states, and secondary actions. Error (#dc3545) is a clinical red for validation failures and destructive actions. Surface colors range from pure white (#ffffff) to soft grays (#f8f9fa, #e9ecef) to create subtle

Typography

The type system pairs Jumper (a custom, geometric sans-serif used for headlines and UI labels) with the system font stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto) for body text. This combination balances brand personality (Jumper's friendly, rounded letterforms) with legibility and performance. Display (56px, 500 weight, -0.02em tracking) anchors hero sections and conveys confidence. Headline-lg (32px, 500 weight) is used for section titles and major form headings. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, table content, and explanatory text—the 1.5x line-height ratio (24px / 16px) ensures comfortable reading on both desktop and mobile. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and field labels to create visual

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero, form area, footer), md (24px) separates cards and subsections, and sm (12px) separates inline elements. The hero uses a 2-column split (image left, form right on desktop; stacked on mobile) with the form occupying 40% width and the image 60%, creating visual balance. Containers use gutter (24px) padding on all sides to prevent edge-bleed. The form itself is centered within its column with max-width: 480px to maintain focus. White-space is treated as a design material—empty space around inputs (20px horizontal padding inside fields, 24px margin between fields) reduces cognitive load and emphasizes each elem

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not darkness. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the ground plane. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 8px. Level 3 (Modals, popovers, hover states): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), suggesting a 24px elevation. Shadows use a 15% opacity black to maintain the light, airy feel—no harsh or dark shadows. Transitions between shadow states are 200ms ease-in-out (e.g., card-hover applies the Level 3 shadow on :hover). The header overlay uses

Shapes

The shape philosophy is 'Approachable Roundness'—corners are softened to convey friendliness and reduce visual tension, but not so extreme as to feel childish. Buttons and inputs use border-radius: 999px (full pill shape) to maximize tap targets and signal interactivity. Cards and containers use 1rem (16px) to balance softness with structure. Smaller UI elements (badges, tabs) use 0.75rem (12px) for a mid-ground. The most frequent radius is 0.25rem (4px) for micro-interactions and icon containers. This graduated scale ensures visual coherence: larger, more prominent elements get rounder corner

Components

Action Elements Buttons are the primary interaction affordance. Button-primary uses backgroundColor: {colors.primary} (#b2ec5d), textColor: {colors.on-primary} (#252734), rounded: 999px, padding: 12px 32px, and height: 48px. On hover, the background shifts to #a0d946 (a 10% darker green) with transition: background-color 200ms ease-in-out. The active state (#8bc34a) provides tactile feedback. Button-secondary is transparent with a 1px outline border and the same dimensions; on hover, it fills with surface-container-low (#f1f3f5). Tabs follow the same pattern: tab-active uses the primary green pill style, while tab-inactive is transparent; on hover, tab-inactive fills with surface-container-low and transitions in 150ms.

Containers & Surfaces Cards use backgroundColor: {colors.surfa

Do's and Don'ts

**Do**

• Do use the primary green (#b2ec5d) exclusively for primary CTAs and active states—it is the brand's signature and should never be diluted or overused.
• Do maintain 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal affordance without jarring the user.
• Do use Jumper for headlines and UI labels to reinforce brand personality; reserve the system font stack for body text and form content.
• Do ensure all interactive elements meet WCAG AA contrast minimums: 4.5:1 for text, 3:1 for graphics (e.g., button borders).
• Do use rounded corners (999px for buttons, 1rem for cards) to convey approachability and reduce corporate coldness.

**Don't**

• Don't use the primary green for body text, backgrounds, or non-interactive elements—reserve it for moments that demand user action.
• Don't apply shadows darker than 0 8px 24px rgba(0, 0, 0, 0.12) or use opacity > 15% for black shadows; the system is light-first and shadows should feel soft.
• Don't mix Jumper and system fonts within a single headline or label; pick one and commit to it for visual consistency.
• Don't use sharp corners (border-radius: 0) on buttons, inputs, or cards—the brand is approachable, not austere.
• Don't apply transitions longer than 300ms or use easing functions other than ease-in-out for standard interactions; faster feedback feels more responsive.
• Don't use the secondary gray (#6c757d) for primary CTAs or interactive elements; it is reserved for supporting text and disabled states.