My Invoice design systemLegacy format
Calm, airy and light. Screens open on a soft blue sky gradient that fades into a pale cool grey canvas. Content sits on white cards with large rounded corners and almost no visible shadow. Black is used sparingly but boldly: headings, the small round "go" buttons on cards, and the floating pill tab bar. Blue is the single accent and appears in only a few places per screen (the main action, the selected state, the header wash). Greys carry secondary text. A few glossy, toy-like 3D illustrations in blue and white add personality on empty states and onboarding.
Color Palette
2.1 Core palette (from the reference sheet)
2.2 Derived tokens (needed for a working app, not in the sheet)
2.3 Status colours for invoices
2.4 Usage rules
2.5 The invoice PDF
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Calm, airy and light. Screens open on a soft blue sky gradient that fades into a pale cool grey canvas. Content sits on white cards with large rounded corners and almost no visible shadow. Black is used sparingly but boldly: headings, the small round "go" buttons on cards, and the floating pill tab bar. Blue is the single accent and appears in only a few places per screen (the main action, the selected state, the header wash). Greys carry secondary text. A few glossy, toy-like 3D illustrations in blue and white add personality on empty states and onboarding.
Components
Buttons
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
1. Look and feel in one paragraph
Calm, airy and light. Screens open on a soft blue sky gradient that fades into a pale cool grey canvas. Content sits on white cards with large rounded corners and almost no visible shadow. Black is used sparingly but boldly: headings, the small round "go" buttons on cards, and the floating pill tab bar. Blue is the single accent and appears in only a few places per screen (the main action, the selected state, the header wash). Greys carry secondary text. A few glossy, toy-like 3D illustrations in blue and white add personality on empty states and onboarding.
Principles:
1. One accent. Blue marks the one thing to do next. Everything else is black, white or grey.
2. Soft surfaces, hard ink. Surfaces are pale and rounded; text and key controls are near black for contrast.
3. Pills and circles. Every interactive element is either a full pill or a circle. Squares only appear as cards.
4. Space over lines. Separate content with whitespace and card edges, not dividers.
---
5. Backgrounds
### 5.1 Sky header gradient
Every top-level screen opens with a vertical gradient that covers the status bar and roughly the top 40% of the screen, then disappears into the canvas so there is no visible edge.
```
0% SkyTop #6FA6F3
45% SkyMid #C9DDFB
100% Canvas #F2F6F9 (reached at ~40% of screen height)
```
In Compose: a Brush.verticalGradient drawn behind the scaffold, with the status bar drawn edge-to-edge over it. The header scrolls with the content (it is not pinned), so long lists end on plain canvas.
On the assistant-style screen the gradient is stronger (fully saturated Primary at the top). Reserve that stronger version for one special moment, such as the "Invoice sent" or "Paid in full" confirmation.
### 5.2 Canvas
Below the gradient, the screen background is Canvas #F2F6F9. Cards are White, which is what makes them read as cards.
---
7. Illustration style
The poster and the hero card use glossy 3D "clay" illustrations:
• Soft, inflated shapes with rounded edges, like toys.
• Mostly Primary blue and white, with small warm yellow sparkle accents (#FFC233).
• A strong top-left specular highlight and soft ambient occlusion underneath.
• Floating paper cards with skeleton text lines orbiting a central object, joined by a thin glowing ring.
• Four-point sparkles scattered around.
Compose cannot render this live, so illustrations are pre-rendered transparent WebP files (at 1x, 2x, 3x) bundled in the app. Suggested set, all in the same style, with invoice subjects (not copies of the reference artwork):
| Illustration | Where |
|---|---|
| A glossy invoice sheet with a ₹ coin and a pen | Home hero card, onboarding |
| A paper plane leaving a document | "Invoice sent" confirmation |
| A stack of coins with a green tick | "Paid in full" confirmation |
| An empty folder with a sparkle | Empty Invoices and Clients lists |
| A cloud with a padlock | Google Drive backup screen |
Until those exist, the Compose-drawn layered card from PR #4 (EmptyIllustration in Glass.kt) can be recoloured to blue as a placeholder.
The glossy 3D sphere in the second reference is a nice single "mascot" object; a glossy blue ₹ coin could play the same role on the home screen.
---
8. Screen mapping
### Invoices (home)
1. Sky gradient with greeting header (6.1).
2. Hero card: outstanding total, overdue count, "+ New invoice" and "Record payment" (6.2).
3. Search pill (6.3) and status filter chips (6.4).
4. Section "Due this week" with "View all" link, then invoice cards (6.6).
5. Section "Recent" with the remaining invoices.
6. Floating tab bar with the New invoice FAB (6.9).
### Invoice details
• Gradient header with a dark back button (6.5), invoice number as headline, status pill below.
• White card: client, issue and due dates, currency.
• White card: line items and total, with amount in words in caption.
• Payments card: each recorded payment as a row, "Record payment" secondary button.
• Bottom bar: "Share PDF" dark button and "Edit" secondary button.
### Invoice editor
• Plain Canvas background (no gradient, so the form feels calm).
• Sections as white cards: Client, Dates, Currency chips, Line items, Notes.
• Sticky total bar with the primary "Save" button (6.10).
### Clients
• Gradient header with title "Clients" and a client count.
• Search pill.
• Client cards: name (cardTitle), email (caption), outstanding amount at bottom right, dark round button to open.
### Settings
• Gradient header with the studio logo and name.
• 2×2 quick tiles (6.7): Business profile, Bank details, Numbering, Backup.
• A white card list for the remaining toggles (show due date on PDF, GST note, default due days).
---
9. Implementing it in Compose (if adopted)
The restyle in PR #4 already has the right structure, so adopting this is mostly a reskin:
| PR #4 piece (androidApp/.../ui/) | Change |
|---|---|
| Theme.kt Palette (orange/peach) | Replace with the tokens in section 2 |
| Theme.kt Inter font family | Swap to Outfit Regular/Medium/SemiBold (res/font/outfit_*.ttf), type scale from section 3 |
| Theme.kt Shapes | Radii from section 4.2 |
| Glass.kt AppBackground | Sky gradient from section 5.1 |
| Glass.kt GlassCard | Flatter: white, radius 24, elevation 0 on canvas |
| Glass.kt HeroCard | White hero with two-weight headline instead of an orange glossy card |
| Glass.kt FloatingNavBar | Black pill with white selected pill, plus separate dark FAB |
| Glass.kt GlossyFab, PrimaryButton | Blue glow version; add DarkRoundButton and StatusChip |
| Glass.kt EmptyIllustration | Recolour now; replace with WebP illustrations later |
Status colours, the PDF accent and dark mode are the three choices this document leaves to Saurabh.
Use with MCP
Don't have the MCP? Install it here