Add per-template specifications measured from the Canva PDFs
This commit is contained in:
Vendored
+130
@@ -0,0 +1,130 @@
|
||||
# Template 9: Slate Band (`slate-band`)
|
||||
|
||||
Source: `templates/Modern Neutral Invoice Template/9.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
|
||||
|
||||
Modern geometric. A full-bleed slate top band (white logo, name, invoice number) sits over an ocean-blue band with a widely letter-spaced white INVOICE. Montserrat throughout; airy rows separated by soft grey rules; letter-spaced TOTAL with a blue dash; footer of circled icons.
|
||||
|
||||
## Fonts
|
||||
|
||||
One family: Montserrat, static weights 400/500/700/800. Metrics per 1000 units: ascent 968, descent -251, cap 700.
|
||||
- ExtraBold 800: 'INVOICE' 30pt #FDFCFD, tracking +6.71pt (0.224em). Labels 'Date:', 'Billed to:', 'From:' 12pt #2D3743. 'Payment method:' and 'Note:' 12pt #4D5869.
|
||||
- Bold 700: table header labels 14pt #4D5869 uppercase, tracking +2.24 to 2.40pt (~0.165em). 'TOTAL' 14pt with tracking 2.24; its value 14pt with tracking ~0.58 (0.04em).
|
||||
- Medium 500: vendor name in the band, 12pt #FFFFFF, tracking ~-0.2.
|
||||
- Regular 400: invoice number 12pt #FFFFFF (tracking 0.27, 0.022em). Date value 13pt #2A2A2A (0.61, 0.047em). Party lines 12pt #2D3743 (~0.28, 0.023em). Table body 12.03pt #4D5869 (~0.3, 0.025em). Payment and note values 12pt #4D5869 (~0.25). Footer contacts 10pt #4D5869 (-0.2, -0.02em).
|
||||
- Pitches: party lines 16.5 (lineHeight 1.375). Heading to first line 21.26. Date row to party headings 23.1. Payment to note 21.6.
|
||||
- Montserrat 9.0 is installed locally as 18 static TTFs in ~/.local/share/fonts. fc-list ':charset=20b9' confirms all of them include ₹.
|
||||
|
||||
## Colours
|
||||
|
||||
Exact fill operators:
|
||||
- #4D5869 (0.302 0.3451 0.4118), slate: top band; table header labels, body, totals, payment/note and footer text.
|
||||
- #0278B2 (0.0078 0.4706 0.698), ocean blue: INVOICE band, 3pt total dash, footer icons.
|
||||
- #FDFCFD (0.9922 0.9882 0.9922): page background (drawn over #FFFFFF) and the INVOICE text.
|
||||
- #FFFFFF: logo mark, vendor name, invoice number.
|
||||
- #54AFE6 (0.3294 0.6863 0.902): logo dot only.
|
||||
- #2D3743 (0.1765 0.2157 0.2627): Date/Billed to/From labels and party text.
|
||||
- #2A2A2A: date value.
|
||||
- #DEE2E5 drawn in a transparency-group XObject at ca 0.5 (/G5 set before Do; the inner /G3 ca 1 does not cancel it). Flattened on #FDFCFD it is #EEEFF1. Used for the table header band.
|
||||
- #8B95A4 drawn in groups at ca 0.53 (/G8). Flattened it is #C1C5CE. Used for the 2.25pt row rules and the footer rule.
|
||||
In react-pdf use the flattened hex values, or opacity on the View.
|
||||
|
||||
## Layout
|
||||
|
||||
A4, y measured from the top. Content x 59.55-535.94. The table content is inset to 69.4-525.95 (9.8 inset).
|
||||
| Region | Geometry (pt) |
|
||||
|---|---|
|
||||
| Slate band | full bleed, y 0-103.52 (#4D5869; drawn down to 111.46 underneath the blue band) |
|
||||
| Logo | x 59.55-84.60, y 55.85-86.98 (25x31): white curved mark + 5.67pt #54AFE6 dot |
|
||||
| Vendor name | x 92.36 (7.8 right of logo), baseline 74.42 |
|
||||
| Invoice number | 'NO. 000001' right-aligned to 535.94, baseline 74.80 |
|
||||
| Blue band | full bleed, y 103.52-157.35 (53.83 tall) |
|
||||
| INVOICE | x 59.55, baseline 139.07 (cap centre ~128.6; band centre 130.4) |
|
||||
| Date row | 'Date:' x 59.55, baseline 193.46 (= band bottom + 36.1); value x 109.16, baseline 193.56 |
|
||||
| Parties | Billed to at x 59.55, From at x 341.96 (59.3% split). Headings baseline 216.57; lines 237.83/254.34/270.84 |
|
||||
| Table header band | full bleed, y 302.07-360.41 (58.34 tall); labels baseline 337.32 |
|
||||
| Rows | baselines 394.00/446.02/498.54/552.66/605.17. 2.25pt rules at 415.24/469.26/521.78/575.89/628.41, x 69.0-525.2 |
|
||||
| Total row | dash x 69.66-111.51 at y 668.50 (3pt). 'TOTAL' at x 371.94; value right-aligned to 525.95; baseline 670.00 |
|
||||
| Payment / Note | x 69.37, baselines 704.44 / 726.02; values inline at x 196.58 / 113.84 |
|
||||
| Footer rule | y 755.58, x 59.04-536.46, 2.25pt |
|
||||
| Footer contacts | ring icons ~19pt at x 69.66/198.30/366.13 (y 771.2-790.4); text baseline 783.81 at x 94.69/223.34/391.41 |
|
||||
Whitespace below the icons is ~52pt. The footer rule is 86.7 above the page bottom.
|
||||
|
||||
## Items table
|
||||
|
||||
4 columns inside the inset box 69.4-525.95 (456.5 wide). Approximate column spans: SERVICE 69.4-270 (44%); QTY 270-350 (17.5%, centre 309.4); PRICE 350-452 (22.3%, centre ~401); TOTAL 452-525.95 (16.2%, right edge).
|
||||
- Header: full-bleed band #DEE2E5 at 50% (~#EEEFF1), 58.34 tall. Montserrat Bold 14 #4D5869 uppercase, tracking ~2.3. SERVICE left-aligned at 69.37, QTY and PRICE centred, TOTAL right-aligned at 525.95. Baseline is 35.25 below the band top and the natural line is 17.1, so react-pdf paddingVertical ~20.
|
||||
- Body: no fill. Montserrat Regular 12.03 #4D5869, tracking 0.3. Each row is ~52.5-54 tall and ends in a 2.25pt rule #C1C5CE (butt caps) spanning the inset box. Text baseline is ~29.3-30.9 below the previous rule and ~21-23 above the next, so paddingTop ~18.4 and paddingBottom ~19-20 (natural line 14.7).
|
||||
- Alignment as drawn: service left (Canva jitter between 69.0 and 71.7; use 69.4), qty centred, price centred (right edges drift between 418, 420 and 422), total right.
|
||||
- Recommendation: right-align PRICE and TOTAL. Offer a compact density (rows 30-34), because the default 52.5 fits only 5 rows on page 1.
|
||||
|
||||
## Totals and payment
|
||||
|
||||
- There is only a TOTAL row, with no subtotal or tax rows. A 3pt #0278B2 dash, 41.85 long, at the left (x 69.66, y 668.5, level with the label baseline). 'TOTAL' Bold 14 with tracking 2.24, starting at 371.94 (centred under PRICE). Value Bold 14, right-aligned at 525.95.
|
||||
- 'Payment method:' ExtraBold 12 followed inline by a Regular 12 value ('Cash'). 'Note:' followed inline by its value ('Thank you for choosing us!'). Pitch 21.6.
|
||||
- Missing from the template: bank block, signature, amount in words, due date.
|
||||
- Footer: full-width soft rule, then 3 circled icons (phone, globe, pin) with Montserrat 10 text.
|
||||
|
||||
## Decoration and images
|
||||
|
||||
No raster XObjects. Everything is vector shapes plus live text.
|
||||
- Two full-bleed bands (slate 0-103.5, blue 103.5-157.35) and the full-bleed table header band (50% alpha group).
|
||||
- Soft rules (53% alpha) and the opaque 3pt blue dash.
|
||||
- Placeholder logo: white curved 'G'-like mark (14 beziers) with a light-blue dot. Replace with the vendor logo. It sits on dark slate, so it needs a light/white logo variant or a white rounded chip (padding ~4) behind it.
|
||||
- Footer icons: filled rings ~18.4-19.3 in diameter and 0.6-1.5pt thick, #0278B2, each containing a ~9-10pt glyph (phone, globe, pin). Build as <Svg> with <Circle r stroke='#0278B2' strokeWidth 1.2 fill='none'/> plus <Path d={carbonIcon}/>. Swap the globe for Carbon 'Email', since Voiced has no website field.
|
||||
- Invisible (ca=0) rectangles tagged 'Image' are accessibility tags. Ignore them.
|
||||
|
||||
## Mapping to Voiced fields
|
||||
|
||||
- Logo: vendor logo (height <= 31, width <= 120). Needs a light variant to show on #4D5869.
|
||||
- Vendor name: vendorName (Medium 12, white).
|
||||
- 'NO. 000001': 'NO. {number}'.
|
||||
- 'INVOICE': 'TAX INVOICE' or 'INVOICE' (keep the 6.7 tracking).
|
||||
- Date row: 'Date: {invoiceDate}', NEW 'Due: {dueDate}' on the same baseline in the right column at x 341.96.
|
||||
- Billed to (left): clientName, clientAddress, 'GSTIN {clientGstin}', 'Place of supply: {state} ({code})'.
|
||||
- From (right): vendorName, vendorAddress, vendorPhone, vendorEmail, 'PAN {vendorPan}', 'GSTIN {vendorGstin}'.
|
||||
- Table: SERVICE = description (HSN/SAC as a grey 10pt sub-line); QTY = quantity (with unit); PRICE = rate; TOTAL = amount.
|
||||
- Subtotal / Discount / CGST+SGST / IGST (no slot): right-aligned summary rows above TOTAL. Label Bold 11, tracking 1.5, #4D5869, at x ~372; value Regular 12, right-aligned at 525.95; pitch ~20.
|
||||
- TOTAL: total.
|
||||
- Amount in words (no slot): full-width line under the TOTAL row, 'Amount in words:' ExtraBold 11 followed by Regular 11, #4D5869.
|
||||
- Payment method: label 'Payment details:' with a block of label/value lines (Bank, A/c name, A/c no, IFSC, Branch, UPI). The inline single-value pattern does not scale.
|
||||
- Note: notes.
|
||||
- Signature (no slot): right column beside Payment/Note (x ~372-526) with the signature Image (height <= 36), vendorName and 'Authorised signatory' (Regular 10). With no signature, the computer-generated note.
|
||||
- Footer: vendorPhone, vendorEmail (envelope icon), vendorAddress.
|
||||
|
||||
## Overflow risks
|
||||
|
||||
- Slate band header: the name (12pt from 92.4) and the right-aligned number (starts at 463.7) leave ~360pt free. Still use a flex row: name flex 1, number flexShrink 0. A wordmark logo wider than ~120pt pushes the name along.
|
||||
- 'TAX INVOICE' at 30pt with 6.7 tracking is ~300pt (59.6 to ~360); it fits.
|
||||
- Parties: only 3 lines fit between 237.8 and the table band at 302.07. A Voiced From block is 6-8 lines (+50-80pt) and Billed to is 4-5, so the table band must flow, never sit at a fixed 302.
|
||||
- The right column (341.96-536 = 194pt, ~28 chars at 12pt with tracking) wraps long emails and addresses. Emails with no break points need a character-splitting hyphenation callback.
|
||||
- The TOTAL column is ~74pt. At 12pt Montserrat with 0.3 tracking, '₹1,00,000.00' is ~81pt and '₹12,34,567.00' ~91pt, so amounts overflow from 1 lakh up. Widen TOTAL to ~105 (QTY to ~55, PRICE to ~95), or set the body at 10.5pt.
|
||||
- Centred prices leave ragged right edges when widths vary; right-align them.
|
||||
- With 52.5pt rows, 5 rows reach the bottom of page 1. Descriptions wrap within the ~200pt column, which is fine in flow.
|
||||
- Payment/Note values are inline, so long notes wrap under the label. Use a row with a fixed label width and a flex 1 value.
|
||||
- The footer address slot starting at 391.4 has only ~135-145pt. Use maxLines 2 or a short address.
|
||||
|
||||
## US Letter adaptation
|
||||
|
||||
- Bands and the full-bleed table header band: left 0, right 0, width auto.
|
||||
- Content: side margin M (59.55 by default); table inset M + 9.8.
|
||||
- Height is 50.25 shorter. The footer rule stays anchored 86.7 above the bottom (y 705.3 on Letter). To recover ~50pt: rows 52.5 -> ~42 (saves 10 x 5), or compact rows at 34; optionally slate band 103.5 -> 90 and blue band 53.8 -> 48.
|
||||
- Configurable margins: band content uses M horizontally. Date baseline = band bottom + 36. The footer's bottom offset is ~52 below the icons (about M_bottom).
|
||||
|
||||
## react-pdf notes
|
||||
|
||||
- Register Montserrat 400/500/700/800. Copy the TTFs from ~/.local/share/fonts into the app assets and the xbps; react-pdf never reads fontconfig.
|
||||
- Page style {paddingTop:M, paddingHorizontal:M, paddingBottom:~100}. Bands are normal-flow (not fixed) Views with marginTop -M and marginHorizontal -M; Yoga accepts negative margins. That makes them full bleed on page 1 only, and continuation pages keep their top margin.
|
||||
- Slate band: View height 103.5, bg #4D5869, row, space-between, alignItems center, paddingHorizontal M. Blue band: View height 53.8, bg #0278B2, justifyContent center, paddingHorizontal M, with Text INVOICE (letterSpacing 6.7).
|
||||
- Table header band: <View fixed style={{marginHorizontal:-M, paddingHorizontal:M+9.8, height:58.3, backgroundColor:'#EEEFF1', flexDirection:'row', alignItems:'center'}}> as the first child of the table View. layout 5.2 splitNodes repeats a fixed child in the continuation fragment; confirm visually. Rows: <View wrap={false} style={{marginHorizontal:9.8, flexDirection:'row', paddingTop:18.4, paddingBottom:19.5, borderBottomWidth:2.25, borderBottomColor:'#C1C5CE'}}>.
|
||||
- Total row: View row, alignItems center: dash View (width 41.85, height 3, bg #0278B2), a flex 1 spacer, the label (letterSpacing 2.24), then the value.
|
||||
- Footer: <View fixed style={{position:'absolute', left:M, right:M, bottom:~52}}> holding the rule (borderTopWidth 2.25, #C1C5CE) and a row of Svg ring icons with 10pt Text.
|
||||
- Baselines: Text top = baseline - 0.968 x size.
|
||||
- The tracked header labels have TOTAL right-aligned, so add marginRight -2.3 (textkit 7.0.1 adds letterSpacing after the last glyph).
|
||||
|
||||
## Similarity to other templates
|
||||
|
||||
- Near-duplicate: 10.pdf ('Liceria & Co.'). The body is identical: Date / Billed to / From, the full-bleed grey SERVICE-QTY-PRICE-TOTAL band, rule-separated rows, TOTAL with an accent dash, inline Payment method / Note. The header differs: teal/grey corner swoosh artwork instead of the slate and blue bands, a dark letter-spaced INVOICE on white, and NO. in the right column. 10 also has a 'Contact:' block instead of the icon footer. Build 9 and 10 as one component with header/decoration variants.
|
||||
- Shares Montserrat and letter-spaced uppercase INVOICE/headers with format.pdf (identical to 4.pdf), but the structure is different.
|
||||
- Does not resemble the in-app InvoiceDocument.tsx; the closest in the set is 3.pdf.
|
||||
Reference in New Issue
Block a user