219 lines
15 KiB
Markdown
219 lines
15 KiB
Markdown
# Template 12: Purple Pop (`purple-pop`)
|
||
|
||
Source: `templates/Modern Neutral Invoice Template/12.pdf`. All coordinates are in points from the top-left of the Canva page (595.5 x 842.25). Measured from the PDF content streams during design analysis.
|
||
|
||
## Style
|
||
|
||
A playful Memphis style on cream: an oversized purple 'Invoice' wordmark; purple, yellow and grey pill-shaped rows and labels; 8-arm asterisk motifs (solid purple, plus huge pale-pink watermarks); and a yellow dome shape.
|
||
|
||
## Fonts
|
||
|
||
- **Open Sauce One Bold:** the 'Invoice' wordmark only, 94pt (94.07), letterSpacing −7.44pt (−0.079em), #530895.
|
||
- **DM Sans Bold:**
|
||
- Vendor name 17.77pt.
|
||
- Amount due 32.74pt.
|
||
- Dates 14.05pt, uppercase, right-aligned.
|
||
- Table header labels 14pt, uppercase, white.
|
||
- 'PAYMENT TERMS' 13pt.
|
||
- **DM Sans Regular:** table body 11.83pt; terms bullets 11pt with 14.2 pitch.
|
||
- **Gotham Bold (commercial):**
|
||
- 'BILLED TO:' 12pt.
|
||
- Client name 14.39pt, caps.
|
||
- 'INVOICE NO : 012345' 13.39pt, letterSpacing 1.75pt (0.13em).
|
||
- 'AMOUNT DUE:' 12pt.
|
||
- SUBTOTAL, TAX and TOTAL labels and the total value, 13pt.
|
||
- 'PAYMENT METHOD' 10.52pt.
|
||
- **Gotham Book:** client lines 10.16pt (17.1 pitch); subtotal and tax values 13pt; bank lines 12pt (17.9 pitch); footer contacts 10.14pt (18.4 pitch).
|
||
|
||
**Bundling:**
|
||
- Gotham cannot be redistributed. Substitute Montserrat 400/700 (about 5% wider, so drop about 0.5pt), or use DM Sans 400/700 for all Gotham text, which needs the fewest files.
|
||
- Open Sauce One is used for one word. Its licence is reportedly OFL but needs checking; otherwise use Poppins ExtraBold or Montserrat ExtraBold at −0.08em.
|
||
- ₹: fallback ['DM Sans','IBM Plex Sans'].
|
||
|
||
## Colours
|
||
|
||
- Page background: #FEFFEE (cream).
|
||
- Primary purple #530895: wordmark, amount due, header pill, total pill, asterisks, client name text, invoice-number text.
|
||
- Yellow #FFD80B: client-name pill, every second item row, dome shape.
|
||
- Grey #E5E5E5: invoice-number pill (solid). Item rows use it at 68% opacity, which is flat #EDEDE8 on cream.
|
||
- Watermark asterisks: #FFF7F7 (pale pink).
|
||
- Text: #060605, #231F20 and #000000. On purple: #FFFFFF in the header, #FFF4F4 in the total.
|
||
- Rules #060605, 1.5pt. Icons #231F20 and #060605. Bullets #231F20.
|
||
- Canva shadow images use black, coral #FF524B and brown #413731 at 30%. Do not reproduce them.
|
||
|
||
## Layout
|
||
|
||
Units are pt with the origin at the top-left. For text, y is the **baseline**. Content spans x ≈54.8–542.8.
|
||
|
||
| # | Region | Position / content |
|
||
|---|---|---|
|
||
| 1 | Header | Vendor name DM Sans Bold 17.77 at x 59.5, baseline 98.5. INVOICE NO pill at x 312.8–530.9, y 77.0–110.2 (radius 16.6), text centred at ≈421.9, baseline 96.7 |
|
||
| 2 | Client (left, x 54.8 to ≈232) | 'BILLED TO:' at x 67.1, baseline 157.8. Yellow name pill x 54.8–201.4, y 173.8–207.0 (radius 16.6), sized to its text with 12.3 left padding; name baseline 195.2. Three lines at x 67.1, baselines 223.9 / 241.0 / 258.2 |
|
||
| 3 | Wordmark (right) | 'Invoice' 94pt, x 238.2–530.4, baseline 238.4. Glyph tops at ≈172 |
|
||
| 4 | Rule 1 | x 64.8–533.4, y 279.6, 1.5pt |
|
||
| 5 | Amount and dates | 'AMOUNT DUE:' at x 71.8, baseline 310.5. Amount 32.74pt at x 73.7, baseline 350.0. Dates right-aligned to 519.7, baselines 315.7 / 335.2 |
|
||
| 6 | Items | Block x 176.9–539.4. Header pill y 378.2–424.8 (radius 23.3). Rows 424.3–457.0, 457.0–489.7, 489.7–522.5, each a pill (radius ≈16.4). Purple asterisk 71.5 at (57.0, 397.7), to the left |
|
||
| 7 | Subtotal / Tax | Labels at x 192, baselines 545.9 / 576.7. Values right-aligned to 522.0; source baselines are 550.8 / 576.7, so normalise both to the label baseline. Yellow dome 65.3×62.3 at (57.0, 565.3), to the left |
|
||
| 8 | Total pill | x 173.4–542.8, y 594.9–635.9 (radius 20.5). 'TOTAL' at x 192, baseline 621.3. Value right-aligned to 529.1, baseline 619.6 |
|
||
| 9 | Terms row | 'PAYMENT TERMS' DM Sans Bold 13 at x 71.8, baseline 677.2. Bullets are 3.8pt dots at x 208.1–211.9 with centres at y 661.4 / 675.7; text at x 220.8, baselines 665.6 / 679.8. Purple asterisk 29.3 at (495.1, 653.2) |
|
||
| 10 | Rule 2 | x 67.4–536.0, y 703.3, 1.5pt |
|
||
| 11 | Footer (3 columns) | A at x 67.4: 'PAYMENT METHOD' baseline 732.1, bank lines at 750.8 / 768.7. B: icons at x 218.5–229.7, text at x 239.0, baselines 734.6 / 753.0. C: icons at x 380.7–392.2, text at x 414.2, baselines 733.6 / 752.0 |
|
||
| 12 | Watermarks | Pale-pink asterisks 352.4 wide at (255.5, −51.4) and (−58.0, 511.4), clipped by the page |
|
||
|
||
## Items table
|
||
|
||
**Columns (A4):**
|
||
- SERVICE: left-aligned. Header text at x 192.0, body at x 196.0, i.e. 15–19 inside the pill.
|
||
- QTY: centred at ≈354.7.
|
||
- RATE: centred at ≈421.3.
|
||
- AMOUNT: centred at ≈495.1.
|
||
- The block's right edge is 539.4.
|
||
|
||
**Header:** a #530895 pill, 46.6 tall (radius 23.3). DM Sans Bold 14, white, uppercase, baseline centred at 405.6.
|
||
|
||
**Rows:**
|
||
- Each row is its own full pill, 32.7 tall (radius ≈16.35), stacked flush.
|
||
- Fills: row 1 grey #EDEDE8 (flat), row 2 yellow #FFD80B, row 3 grey.
|
||
- Body text: DM Sans Regular 11.83 #060605, baseline about 18.1 below the row top.
|
||
- No borders.
|
||
- For N rows, alternate grey and yellow, with yellow on even rows.
|
||
|
||
**Voiced adaptation:**
|
||
- Right-align RATE and AMOUNT; the source centres them.
|
||
- Widths: qty 40, rate 90, amount 100. That leaves only about 125 for the description when the block starts at x 176.9.
|
||
- Recommend a full-width variant (x 59.5–539.4, dropping the 71.5pt asterisk) when there are more than 3 items or any description wraps.
|
||
- Multi-line rows become rounded rectangles: keep radius 16.35 and use paddingVertical 9.
|
||
|
||
## Totals and payment
|
||
|
||
**Source:**
|
||
- Totals (x 192–522, no fill): 'SUBTOTAL' and 'TAX' with values. Labels Gotham Bold 13; values Gotham Book 13, right-aligned at 522; 30.8 pitch.
|
||
- Then a purple TOTAL pill, 41 tall (radius 20.5), with #FFF4F4 text: label left at 192, value right-aligned to 529.
|
||
- AMOUNT DUE is a big purple DM Sans Bold 32.74 number at left (y 300–355).
|
||
- A terms row with bullets, and a footer with PAYMENT METHOD (bank name, account number) and contact rows with icons.
|
||
- There is no signature.
|
||
|
||
**Voiced:**
|
||
- Rows SUBTOTAL, optional DISCOUNT, then CGST x% plus SGST x% (or IGST x%), in the same label/value style with 25 pitch, then the TOTAL pill.
|
||
- Amount in words: below the pill, DM Sans Regular 10 #231F20, across x 192–529, at most 2 lines.
|
||
- AMOUNT DUE shows the total.
|
||
- PAYMENT TERMS bullets come from notes, one bullet per line, plus 'Payment due within N days.'
|
||
- PAYMENT METHOD: bank name, A/c name, A/c no., IFSC, branch and UPI, at 10–11pt with 14 pitch. Footer column A grows to about 90 tall.
|
||
- Signature (no slot): a right-aligned block above rule 2, replacing the 29pt asterisk at 495–524 × 653–682. Image up to 120×40 plus 'Authorised Signatory' in DM Sans 9, or the computer-generated note.
|
||
|
||
## Decoration and images
|
||
|
||
All vector shapes can be reproduced with react-pdf Svg.
|
||
|
||
**8-arm asterisk.** One path, used at 4 sizes, normalised to a 0–100 box:
|
||
`M100 41.7H69.9L91.1 20.6 79.7 8.9 58.3 30.1V0H41.7V30.1L20.6 8.9 8.9 20.6 30.1 41.7H0V58.3H30.1L8.9 79.4 20.6 91.1 41.7 69.9V100H58.3V69.9L79.4 91.1 91.1 79.4 69.9 58.3H100Z`
|
||
Each arm is 16.5% of the size; Canva rounds the corners by about 0.2%. Instances:
|
||
- #530895, 71.5pt, at (57.0, 397.7).
|
||
- #530895, 29.3pt, at (495.1, 653.2).
|
||
- #FFF7F7, 352.4pt, at (255.5, −51.4) and at (−58.0, 511.4).
|
||
|
||
**Yellow dome/bell, #FFD80B, even-odd fill:**
|
||
`M89.7,565.3 C107.7,565.3 122.3,579.9 122.3,597.9 L103.3,597.9 C114.5,603.1 122.3,614.4 122.3,627.6 L57.0,627.6 C57.0,614.4 64.8,603.1 76.1,597.9 L57.0,597.9 C57.0,579.9 71.7,565.3 89.7,565.3 Z`
|
||
|
||
**Pills** are plain rounded rectangles with radius = height/2:
|
||
- Invoice-number pill: #E5E5E5, 218.1×33.2.
|
||
- Client-name pill: #FFD80B, 146.6×33.2.
|
||
- Header: 362.5×46.6.
|
||
- Rows: 362.5×32.7.
|
||
- Total: 369.4×41.
|
||
|
||
**Icons, about 11pt:** phone and mail are filled #231F20 circles with knocked-out glyphs; globe and map-pin are #060605 outline glyphs. Use @carbon/icons path data (Phone, Email, Earth, Location) inside Svg.
|
||
|
||
**Bullets:** 3.8pt #231F20 circles.
|
||
|
||
**Raster images.** 17 RGB images with soft masks, about 300 dpi, sizes from 125×69 to 756×69 plus 572×196 and 399×137 px. They are Canva's 'shadow' effect (30% opacity, about 0 offset, about 1–2pt blur) under:
|
||
- BILLED TO, the client name and client lines (black).
|
||
- INVOICE NO and AMOUNT DUE (black).
|
||
- Table header labels (brown).
|
||
- Subtotal, tax and total (coral).
|
||
- Payment method and bank lines (black).
|
||
|
||
Each of these strings is also drawn a second time at opacity 0, which is why this PDF's text extracts garbled. Do not reproduce the shadows; react-pdf has no text-shadow. If wanted, fake them with a duplicate Text at opacity .3, offset 0.6pt.
|
||
|
||
## Mapping to Voiced fields
|
||
|
||
- **'Northline Group'** → vendorName, DM Sans Bold 17.77.
|
||
- **Logo (no slot):** an Image with maxHeight 34 to the left of the name at x 59.5 (the name shifts right), or replace the name when the logo is a wordmark.
|
||
- **Vendor address, phone, email, PAN, GSTIN** (no header slot):
|
||
- GSTIN and PAN as 2 small lines (DM Sans Regular 9) under the vendor name, x 59.5–300, y ≈108–135.
|
||
- Phone and email in footer column B.
|
||
- Address (at most 2 lines) and UPI in footer column C, in place of the website.
|
||
- **INVOICE NO pill** → 'INVOICE NO : {number}'. The pill sizes to its text, with its right edge fixed at 530.9.
|
||
- **'Invoice' wordmark** → keep 'Invoice'. When taxType ≠ none, add 'TAX', either in the pill ('TAX INVOICE NO : …') or as a DM Sans Bold 14 caption above the wordmark. 'Tax Invoice' at 94pt would be about 450 wide and cannot fit; auto-fit it to about 61pt if one line is required.
|
||
- **'BILLED TO:' and the yellow pill** → clientName.
|
||
- **Client lines** → clientAddress. Add 'GSTIN: …' and 'Place of supply: …' (no slot) as extra lines.
|
||
- **AMOUNT DUE** → total.
|
||
- **Dates** → 'INVOICE DATE : {invoiceDate}' and 'DUE DATE : {dueDate}' as two explicit lines. PO number (no slot): a third line 'PO : …'.
|
||
- **Table** → items. HSN/SAC (no slot): a 9pt grey second line under the description.
|
||
- **SUBTOTAL / TAX** → subtotal, CGST/SGST/IGST and discount.
|
||
- **TOTAL pill** → total. Amount in words (no slot): under the pill.
|
||
- **PAYMENT TERMS** → notes.
|
||
- **PAYMENT METHOD** → bank details. IFSC, branch and UPI have no slot and become extra lines.
|
||
- **Signature (no slot):** see totals_and_payment.
|
||
|
||
## Overflow risks
|
||
|
||
- **Vendor name vs INVOICE NO pill.** The name runs into the pill at x 312.8 (y 77–110). Cap it at about 240 wide and let it wrap; 2 lines end around y 125, still above BILLED TO at 148.
|
||
- **INVOICE NO pill.** Long series numbers grow it leftward. Keep at least 12 between it and the vendor name.
|
||
- **Client block vs wordmark.**
|
||
- The client name pill can be at most about 170 wide, because the wordmark starts at x 238.2; longer names wrap to 2 lines.
|
||
- Client lines (10.16pt) must be capped at about 165 wide beside the 94pt wordmark.
|
||
- A long address extends below the wordmark, so rule 1 must follow the taller of the client block and the wordmark in the flow.
|
||
- **AMOUNT DUE.** At 32.74pt, '₹12,34,567.00' is about 230 wide, but only about 210 is free before the right-aligned dates at x 291. Shrink it automatically (for example to 26pt when longer than 9 characters) or stack the dates under it.
|
||
- **Dates.** The source's first date line already wraps badly ('… 2030 DUE'); render it as two fixed lines.
|
||
- **Items.**
|
||
- The description column is only about 125–140 wide, so wrapping is frequent.
|
||
- More than 3–5 items push totals, terms and footer onto page 2, and the header pill must repeat there.
|
||
- **Footer.** 6 bank lines plus contacts can pass the bottom margin; the source footer ends at 772. Use 10pt text and a 2-column bank grid.
|
||
|
||
## US Letter adaptation
|
||
|
||
US Letter is 612 × 792.
|
||
- **Width.** Keep the x margins (≈55–59.5 left, ≈53 right) and widen the rules, pills and table by 16.5. Right-anchored elements (INVOICE NO pill, wordmark, dates, total pill) move right by 16.5.
|
||
- **Watermarks.** Anchor them to the corners and let the page clip them:
|
||
- Top-right: right −12.4, top −51.4.
|
||
- Bottom-left: left −58, bottom −21.5.
|
||
- **Height (−50pt).**
|
||
- Compress the 98pt gap between rule 1 and the table (the amount-due band) to about 75.
|
||
- Keep row pills at 32.7.
|
||
- Shrink the totals-to-terms gap from 40 to 24.
|
||
- Use a bottom padding of 30.
|
||
- **Configurable margins.** Map them to Page padding; pills and rows are in the flow, so they follow the margins. The asterisk and dome stay in the left gutter only when the left margin leaves at least about 115 beside the table. Otherwise switch to the full-width table variant and hide them.
|
||
|
||
## react-pdf notes
|
||
|
||
**Page:** style {backgroundColor:'#FEFFEE', paddingTop:70, paddingHorizontal:55, paddingBottom:40}. Watermarks are the first children: fixed, absolutely positioned Svgs.
|
||
|
||
**Header:** a row with space-between. The vendor block has maxWidth 240. The pill is a View with backgroundColor '#E5E5E5', borderRadius 16.6, height 33.2, paddingHorizontal 20, justifyContent center.
|
||
|
||
**Client and wordmark:** a row.
|
||
- Left: a View 175 wide holding the label, the pill (alignSelf 'flex-start', borderRadius 16.6, paddingHorizontal 12) and the lines.
|
||
- Right: Text with fontSize 94, letterSpacing −7.44, lineHeight 1, textAlign right, flex 1.
|
||
|
||
**Rules:** a View with height 1.5 and backgroundColor '#060605'.
|
||
|
||
**Items:**
|
||
- Container View with marginLeft 122, or 0 for the full-width variant.
|
||
- Header: a View with backgroundColor '#530895', borderRadius 23.3, height 46.6, flexDirection row, alignItems center, paddingHorizontal 15.
|
||
- Rows: Views with wrap={false}, borderRadius 16.35, minHeight 32.7, and backgroundColor '#FFD80B' for even rows or '#EDEDE8' for odd rows.
|
||
- Use flat colours, not opacity, because opacity also fades the text.
|
||
|
||
**Asterisks and dome:** `<Svg viewBox='0 0 100 100' width={71.5} height={71.5}><Path d=… fill='#530895'/></Svg>`, absolutely positioned inside the items/totals section wrappers, which are position relative.
|
||
|
||
**Totals:** the label/value rows, then the total pill, with wrap={false} and minPresenceAhead.
|
||
|
||
**Footer:** a row of 3 Views (A 150 wide, B 160 wide, C flex 1). Icons are 11×11 Svgs.
|
||
|
||
**Fonts:** DM Sans 400/700, Montserrat 400/700 (the Gotham substitute) and the display font at 700. Use fontFamily arrays with 'IBM Plex Sans' for ₹.
|
||
|
||
## Similarity to other templates
|
||
|
||
Sibling of 13.pdf. They are from the same Canva family, with the same placeholder data ('Northline Group', 'Amy Fletcher', 'Intelligent Bank'), the same DM Sans plus Gotham type system, the same raster 30% shadow effects, and the same SERVICE/QTY/RATE/AMOUNT table with SUBTOTAL/TAX/TOTAL.
|
||
|
||
The composition is different: pills and asterisks on cream here, versus a split grey column on blush in 13. Keep both and share the data-mapping code. Not similar to 1–11, format.pdf or the in-app template.
|