Voiced/docs/templates/09-slate-band.md

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
• 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.

Implementation notes

Built as src/pdf/templates/band/ (one family component, Layout.tsx, shared with Teal Swoosh; tokens in slate.tsx, planning in plan.ts) on the decor primitives in src/pdf/decor/. Measured against 9.pdf with npm run templates:compare (/tmp/invoice-c4/compare-slate-band.png, left Canva, right ours; also -nologo and the logo variants).

Matches the design (measured, A4): dark band 0-103.5, blue band to 157.35 (53.8 tall), INVOICE in Montserrat 800 30 pt with 0.224 em tracking at x 59.5; the name and 'NO.' baseline at 74.7 (Canva 74.4 / 74.8), the number right-aligned to the content edge; Date row baseline 193.4 (label and value share it); party heading to first line 21.3 pt; header band 58.3 tall and full bleed; table text at x 69.4 (the 9.8 pt inset) with 2.25 pt #C1C5CE rules from 69 to 526; TOTAL with the 41.85 x 3 pt dash on its baseline; the footer rule 86.7 pt above the page bottom.

Intentional deviations, and why:

• Bands. Both are first-page decor inside FirstPageHeader, full bleed from the page edges (so they also fill Letter and any margin preset); their heights follow the flow (page top margin + logo row + gap), so they stay glued to the logo row whatever the preset. They overlap by half a point so no viewer shows a seam.
• Logo (dark surface). The slot is the measured 25 x 31 mark / 99 x 31 lockup. A logo with alpha uses its white knockout; one without alpha sits on a white rounded chip (4 pt padding) drawn as decor behind it. A wordmark replaces the name; a mark keeps the vendor name beside it in white Medium 12.
• Number and due date. 'NO. {number}' in the band; 'Due:' goes in the right column of the Date row (the From column), 'PO No:' under Date.
• Table. SERVICE / QTY / PRICE / TOTAL with PRICE right-aligned (centred prices left a ragged edge); the HSN/SAC code is a 10 pt sub-line under the description; the rate unit is '/hr' on the same line or a second 10 pt line when it does not fit. Rows are 44 pt (padY 13.5 + the rule) instead of 52.5, the compact density the doc offers, so a Voiced invoice (longer supplier block, tax rows, words, bank) still fits a page; the header band keeps its 58.3 pt. Money columns are at least 55 / 95 / 105 pt and grow to their widest amount (a 12-digit amount does not overflow from 1 lakh up).
• Totals. The design has only TOTAL. A right-anchored stack (SUBTOTAL, DISCOUNT, TAXABLE VALUE, CGST/SGST or IGST via Slot.TaxRows, tracked Bold 11 labels over Regular 12 amounts, 20 pt pitch) and a thin rule sit above the TOTAL row; the amount in words runs full width below it.
• Payment, note, signature. 'Payment details:' is a label plus bank lines (the inline single value does not scale); the Note sits under it when it is at most 100 pt tall, else flows below the table; the signature (the user's image or the signatory name and the computer-generated line) is the right column.
• Footer. Circled Carbon icons (phone, e-mail instead of the globe because Voiced has no website field, location) with 1.2 pt rings, drawn as static Svg decor on every page. Decor is not audited, so each text is fitted to one line (phone, e-mail) or two with an ellipsis (address); the full address is printed in the From block. The standard footer (name, 'Generated with Voiced', Page n of N) is added below the icons in grey 7 pt.
• Margins. Top 55.75 (the logo top), sides 59.55, bottom floor 20 plus a 79 pt reserve: the flow ends at least 99 pt above the page bottom (rule 86.7 + 12), on every preset.
• Letter. The 49.9 pt deficit comes out of the band's bottom padding (16.5 to 8), the gaps to the date row, parties and table, and the gap above the totals (54 pt of slack); type, rows and the header band are not scaled.