Magic Receipt AI

Overview

Magic Receipt AI is a fintech-forward expense management platform that transforms the mundane task of receipt tracking into an energetic, friction-free experience. Built for busy professionals and small business owners, the brand embodies 'Neon Minimalism'—a design philosophy that pairs a sophisticated dark canvas (#15171a) with electric neon accents (#95ff00 primary, #9542f4 secondary) to create visual excitement without sacrificing clarity. The interface feels simultaneously playful and professional, using vibrant glows and precision typography to make financial administration feel less like a chore and more like a delightful interaction. The emotional response is one of relief: users feel empowered, not overwhelmed.

The brand voice is conversational, confident, and slightly irreverent—never corporate-speak. Tone examples: 'Receipts are a nightmare' (headline), 'Ditch the hassle' (CTA copy), 'Deal with it' (subheading). The vocabulary leans into casual, direct language ('drowning in receipts', 'managing receipts is so hard') paired with technical precision when discussing features. The brand personality is that of a smart friend who gets the pain point and offers a genuinely clever solution, delivered with a wink and a neon glow.

Colors

The color system is built on a dark-first, accent-forward model. The surface stack anchors the UI in deep charcoal (#15171a as surface, #0b0c0d as surface-dim, #2a2d31 as surface-container-high), creating a premium, focused environment that minimizes eye strain during extended use. Primary (#95ff00, electric lime) is the brand's signature accent—deployed on all CTAs, focus states, and key interactive elements. It carries a 0 0 24px rgba(149, 255, 0, 0.3) glow in default state, escalating to 0 0 32px rgba(149, 255, 0, 0.5) on hover to signal interactivity. Secondary (#9542f4, violet-flame) supports the primary as a complementary accent for secondary actions, status indicators, and decorative elements; it uses a 0 0 32px rgba(149, 85, 244, 0.25) glow for depth. Tertiary (#a5cdff, sky-frost)

Typography

The type system pairs two distinct typefaces to create visual hierarchy and personality. Headlines and display text use DM Mono (a geometric monospace font) at weights 600–700, creating a technical, modern edge that reinforces the 'AI' positioning. Body copy and UI labels use Almarai (a clean, humanist sans-serif) at weights 400–600, ensuring readability and warmth. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence. Headline-lg (40px, 700 weight, -0.02em) and headline-md (28px, 600 weight) structure page sections. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle descriptive text with generous line-height for legibility. Label-md (14px

Layout

The layout system uses a 12-column grid with 24px gutters, scaling fluidly from mobile (single column) to desktop (full 12 columns). Container max-width is 1280px, centered with auto margins. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The grid background (visible in hero sections) uses a 45px × 45px cell size with rgba(255, 255, 255, 0.1) lines on #15171a, creating a subtle technical texture. White-space is generous—sections breathe with lg spacing between major blocks, and cards use md padding internally. This rhythm prevents cognitive overload and emphasizes the 'clarity' positioning. Responsive breakpoints:

Elevation & Depth

Depth is conveyed through a layered approach combining subtle shadows, glassmorphic effects, and strategic use of glow. Level 1 (Base): The dark surface (#15171a) with a subtle grid texture (rgba(255, 255, 255, 0.1) lines at 45px spacing) establishes the foundation. Level 2 (Standard Cards): Cards use background: {colors.surface-container}, border: 1px solid {colors.surface-container-high}, and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Modals): Elevated cards use background: {colors.surface-container-highest}, box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), and border: 1px sol

Shapes

The shape philosophy is 'Precision with Personality'—sharp enough to feel technical and modern, rounded enough to feel approachable. Buttons and primary CTAs use rounded: lg (1rem / 16px), creating a confident, clickable appearance. Cards and containers use rounded: xl (1.5rem / 24px) for a softer, more premium feel. Input fields and form elements use rounded: DEFAULT (0.5rem / 8px) for a compact, functional appearance. Badges and chips use rounded: full (9999px) for a pill-shaped, friendly aesthetic. The grid background uses 45px cells with sharp 90° corners, reinforcing the technical foundat

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: {colors.primary} (#95ff00), text-color: {colors.on-primary} (#15171a), padding: 12px 24px, height: 48px, rounded: lg (16px), and box-shadow: 0 0 24px rgba(149, 255, 0, 0.3). On hover, background shifts to {colors.primary-container} (#78d600) and glow intensifies to 0 0 32px rgba(149, 255, 0, 0.5); apply transition: all 200ms ease-out for smooth feedback. Button-secondary uses a transparent background with border: 2px solid {colors.primary}, same padding and height, and on hover applies background: rgba(149, 255, 0, 0.1) with the same glow. Button-ghost uses border: 1px solid {colors.outline-variant} and on hover applies background: {colors.surface-container-high} with text-color shifting to {co

Do's and Don'ts

**Do**

• Do use the primary glow (0 0 24px rgba(149, 255, 0, 0.3)) on all interactive elements to signal affordance and create visual energy.
• Do pair DM Mono (headlines) with Almarai (body) to maintain the technical-yet-approachable personality across all text.
• Do maintain the dark surface (#15171a) as the default background to ensure the neon accents pop and reduce eye strain.
• Do apply generous spacing (lg: 40px) between major sections to create breathing room and prevent cognitive overload.
• Do use the glass-card component (backdrop-filter: blur(20px)) for overlays and floating panels to create depth without heavy shadows.
• Do escalate glow intensity on hover (from 0 0 24px to 0 0 32px) to provide clear interactive feedback.

**Don't**

• Don't use the primary color (#95ff00) on body text or large text blocks—reserve it for CTAs, focus states, and accents only.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12)—the dark surface and glow effects handle depth; heavy shadows feel dated.
• Don't mix rounded radii arbitrarily; stick to the scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px) for visual consistency.
• Don't disable the glow effects on interactive elements—they are core to the brand's energy and signal interactivity.
• Don't use the secondary color (#9542f4) as a primary CTA; it's a supporting accent for secondary actions and status indicators.
• Don't apply text-shadow to body text; reserve the neon glow (text-shadow: 0px 0px 4.8178px #95ff00) for headlines and display text only.