[maheshrijal]

Apply comprehensive design improvements to escape generic AI aesthetic:

Typography:

• Replace Inter/Manrope with distinctive DM Sans + Instrument Serif pairing
• Add DM Mono for all financial figures with tabular-nums
• Improve letter-spacing and font hierarchy

Color System:

• Replace indigo/purple gradients with warm earth tone palette
• Add bold terracotta accent (#c4541d) for high-impact moments
• Warm neutral backgrounds instead of tinted gradients

Layout & Motion:

• Asymmetrical grid (0.85fr : 1fr) instead of symmetrical split
• Orchestrated page entry with staggered form block animations
• Coordinated slide-in effects for two-panel layout
• Added reduced-motion support for accessibility

Visual Polish:

• Subtle grain texture overlay on form section
• Paper grid texture for invoice preview
• Solid dark buttons with accent hover instead of gradients
• Improved interactive states (hover transforms, focus rings)

Responsive & Print:

• Updated responsive breakpoints for new design
• Hide textures on tablet/mobile for performance
• Enhanced print styles with preserved dark total row

[github-actions]

Playwright test results

 72 passed

Details

 72 tests across 2 suites
 2 minutes, 27 seconds
 6e5caa9

[Copilot]

Pull request overview

This PR applies a comprehensive visual redesign to the invoicing UI, aligning it with a warmer, more editorial Anthropic/Vercel-inspired aesthetic while improving motion, typography, and print fidelity.

Changes:

• Introduces a new warm earth-tone color system, terracotta accent, and updated typography stack (DM Sans / Instrument Serif / DM Mono) with numeric-alignment for financial data.
• Reworks layout and motion: asymmetrical two-panel grid, orchestrated entry animations, staggered form blocks, and reduced-motion support.
• Adds texture treatments (grain and paper grid), refines button and hover states, and enhances responsive and print-specific styles, including better mobile cards for line items and preserved dark total row in printouts.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/css/utilities/animations.css	Defines orchestrated slide/scale/fade/reveal animations, interactive hover/press effects, focus ring animation, and a global prefers-reduced-motion override for transitions and animations.
src/css/layout/responsive.css	Adjusts tablet/mobile behavior (disables textures, tweaks typography and spacing, card-style line items) and refines print styles (white backgrounds, smaller invoice heading, dark total row with explicit print color adjustments).
src/css/layout/grid.css	Switches to an asymmetrical two-column grid with a minimum width on the form panel and applies the new background token to the main container.
src/css/components/invoice.css	Re-skins the invoice placeholder and preview: warm paper background with grid texture, serif/DM Sans typography, DM Mono numeric columns, refined table headers/rows, and a prominent dark total row and updated footer styling.
src/css/components/history.css	Updates history panel styling to match the new surface and type system, adds a scale-in entry animation and custom scrollbars, and tightens hover and delete-button behavior.
src/css/components/forms.css	Applies grain-textured glass surface to the form, serif section heading with animated accent bar, DM Sans labels/inputs, enhanced line-item layout and numeric styling, revised remove/number-button interactions, and an “open source” badge component.
src/css/components/buttons.css	Standardizes buttons on DM Sans with solid dark/gray/ghost variants, stronger hover/active states, and accent-colored focus-visible outlines.
src/css/base/variables.css	Replaces the indigo/purple palette with warm earth tones, introduces terracotta accent tokens, warms neutrals and shadows, and adds stagger timing CSS variables.
src/css/base/typography.css	Switches global fonts to DM Sans / Instrument Serif, and centralizes monospace + tabular numeric styling for all monetary/quantity fields and invoice totals.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.