# 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 with plus . 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: as the first child of the table View. layout 5.2 splitNodes repeats a fixed child in the continuation fragment; confirm visually. Rows: . - 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: 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.