Voiced/docs/templates/05-monogram.md

Template 5: Monogram (monogram)

Source: templates/reference/5.pdf. All coordinates are in points from the top-left of the reference page (595.5 x 842.25). Measured from the PDF content streams during design analysis.

Style

The Linea grid restyled in Open Sans. A heavy, tracked 'INVOICE' faces a circular script-monogram logo. Labels and table headers are bold and tracked, and payment info shares the bottom row with a script signature.

Fonts

• Open Sans Bold (700):
  • Title 'INVOICE': 38.01pt, letterSpacing 3.8pt (0.10em).
  • 10pt labels with letterSpacing 1.0pt (0.10em): 'ISSUED TO:', 'INVOICE NO:' and its value, the table header 'DESCRIPTION/RATE/QTY/TOTAL', 'SUBTOTAL' and its value, 'TOTAL' and its value, 'PAYMENT INFO:'.
  • Logo caption 'MORGAN MAXWELL': 9.31pt, letterSpacing 0.47pt (0.05em).
• Open Sans Medium (500), 10pt, letterSpacing 1pt: client lines and bank lines (address-type text).
• Open Sans Regular (400), 10pt, letterSpacing 1pt: 'DATE:'/'DUE DATE:' labels and values, the table body, and 'Tax' with its rate. Stacked lines use a 13.5pt pitch (lineHeight 1.35).
• reference-licensed fonts, not to be shipped:
  • TheBigmaker 325.55pt: the monogram 'm.' (logo art).
  • BuongiornoRastellinoCyr-Script 70.02pt: the signature 'Maxwell'.
  • The vendor's logo and signature images replace both.
• Metrics from the descriptors: Open Sans ascent 1069, descent -293, capHeight 714 per 1000; cap height is 7.1pt at 10pt.
• Bundling: Open Sans is OFL; download static TTFs for 400/500/700 from Google Fonts. It isn't installed on this machine, so I couldn't check U+20B9 (₹) coverage. Verify the chosen TTF, and keep fontFamily ['Open Sans','IBM Plex Sans'] so ₹ falls back to Plex if it's missing.

Colours

Single colour only. Every glyph, rule and the monogram ring is #3D3B3A (rgb 61,59,58). The page is #FFFFFF. The monogram's gap comes from a #FFFFFF rotated rectangle painted over the ring, so that trick only works on white.

Layout

Page is 595.5x842.25 (A4). Same grid as Linea: rules x 69.64-525.86; text column 77.4 to 519.2; money right edge 514.4.

1. Header band, y about 58-200.
   • Title 'INVOICE': x 69.3-248.6, baseline 143.98, cap-top 116.8. It sits flush with the rule start (69.6), not the text column.
   • Monogram logo, top-right; group bounding box about x 387-531 / y 58-198.
     • Ring: outer diameter 116.4 (x 414.2-530.6, y 81.3-197.7), centre 472.4/139.5, visible stroke 3.75pt.
     • About 84° of the ring is missing on the left (roughly 7:20 to 10:10 o'clock), where a script 'm.' crosses it (baseline 195.75, advance x 398.5-496.9).
     • Caption 'MORGAN MAXWELL' is centred at x about 448, baseline 169.81 (x 399.3-496.9).
     • The ring centre sits about 4.5pt above the title baseline.
2. Empty space, y 200-318 (about 118pt).
3. Info row, first baseline 325.42.
   • Left, at x 77.6: 'ISSUED TO:' plus 3 Medium lines at 341.38 / 354.89 / 368.39.
   • Right, meta block. Labels right-aligned at about 447.7: 'INVOICE NO:' 375.0-447.75, 'DATE:' starts 415.3, 'DUE DATE:' starts 388.8. Values: '01234' 486.6-519.2; dates 458.1-518.1. Baselines 325.42 / 340.88 / 355.60.
4. Empty space, y 368-428.
5. Table: header baseline 435.09; rule at y 447.56; rows at baseline 471.41 + n × 24.94 (5 rows, last at 570.58); closing rule at y 587.46.
6. Totals:
   • SUBTOTAL at 606.59: Bold, label x 77.45, value right-aligned at 514.4.
   • Tax at 625.98: label right-aligned at 460.3, '10%' right-aligned at 514.4.
   • TOTAL at 643.86: Bold.
7. Empty space, y 644-700.
8. Bottom row:
   • Left: 'PAYMENT INFO:' (Bold) at baseline 708.85, x 77.6, plus 3 Medium lines at 725.11 / 738.61 / 752.12.
   • Right: signature (script, 70pt) x 392.3-518.1, baseline 759.31, ink about y 705-775.
9. About 65pt empty at the bottom; no footer.

Items table

• Columns: same geometry as Linea.
  • DESCRIPTION: left; header at 77.45, cells at 78.0.
  • RATE: centred on 325.2 (header 311.3-339.2; cell '100' 315.7-334.8).
  • QTY: centred on 416.4 (header 405.4-427.4).
  • TOTAL: right-aligned; header right edge 519.2, cells right edge 514.4.
• Header: Open Sans Bold 10pt, UPPERCASE, letterSpacing 1pt, no fill. A single 0.75pt #3D3B3A rule 12.5pt below the header baseline (y 447.56), x 69.64-525.86.
• Body: Open Sans Regular 10pt, letterSpacing 1pt. First baseline is 23.85pt below the rule. Pitch is 24.94pt (13.5 line plus about 5.7pt padding top and bottom). No dividers or zebra striping. A closing 0.75pt rule sits 16.9pt below the last baseline (y 587.46).
• Alignment: rate and qty centred, amount right-aligned. '$' appears only in the TOTAL column.
• Suggested Voiced widths: description flex:1, rate 96 centred, qty 48 centred, amount 86 right. Open Sans with 1pt tracking averages about 5.6pt per character, so descriptions fit about 36 characters per line.

Totals and payment

• SUBTOTAL: a full-width row with label AND value in Bold (Linea uses Regular here). Baseline 606.59, 19.1pt below the closing rule. Label at x 77.45, value right-aligned at 514.4.
• Tax: 'Tax' (Regular) right-aligned at 460.3, '10%' right-aligned at 514.4, baseline 625.98. Rate only, no amount.
• TOTAL: Bold label right-aligned at 460.35 and Bold value right-aligned at 514.4, baseline 643.86. No rules, boxes or size change; rows are about 18-19pt apart.
• Payment: the 'PAYMENT INFO:' block sits bottom-left (baseline 708.85; bank name, Account Name and Account No. in Medium). It shares a row with the signature on the right, and their bottoms roughly line up: last bank line 752.1, signature baseline 759.3.
• No notes, terms, thank-you line or footer.

Decoration and images

• Rules: two 0.75pt table rules at y 447.56 and 587.46, x 69.64-525.86.
• No raster images (the file is 54 KB).
• Monogram construction (vector plus text):
  • A circle path stroked at 7.5pt but clipped to its own interior, so the visible ring is 3.75pt (outer r 58.2, inner r 54.45, centre 472.43/139.50).
  • A white rectangle, 134.4x77.8pt and rotated 34.5°, is painted over it. Its corners are about (356.7,58.8), (467.5,135.0), (423.4,199.1) and (312.6,122.9).
  • The rectangle erases the arc from about 144.6° to 229° (maths angles), i.e. 84° on the left.
  • The script 'm.' (TheBigmaker 325.6pt) and the caption text sit on top.
• To draw the ring as vector without masking, use an SVG arc only. Centre-relative path 'M -45.9 -32.6 A 56.33 56.33 0 1 1 -37.0 42.5' (y-down, large-arc 1, sweep 1), stroke #3D3B3A, strokeWidth 3.75, fill none.
• Signature: live script text at 70pt.

Mapping to Voiced fields

• Title: 'INVOICE' or 'TAX INVOICE'. At 38pt with 3.8pt tracking, 'TAX INVOICE' is about 277pt wide and ends at x about 346, so it clears a logo that starts at x 387 or later.
• Monogram slot (x 387-531, y 58-198): the vendor logo Image in a box of about 130x116pt, objectFit contain, right-aligned, vertically centred on y about 139.5. Optional fallback when there is no logo: the ring arc above, the vendor's initial in an OFL script (e.g. Great Vibes or Allura, or simply Montserrat), and a vendor-name caption in Open Sans Bold 9.3pt, letterSpacing 0.47.
• Vendor name, address, phone, email, GSTIN, PAN: no slot in the design. Put a right-aligned FROM block directly under the logo: right edge at x 519-526, y about 205-305, maxWidth about 240pt. Name in Bold 10pt; lines in Medium 10pt or 9pt, letterSpacing 1pt. It is its own row below the header, so it cannot overlap the title.
• ISSUED TO: clientName, clientAddress, 'GSTIN: …' (optional), 'Place of Supply: …'.
• Meta: INVOICE NO / DATE / DUE DATE, plus an optional PO NO row.
• Table: DESCRIPTION; RATE (money(rate) plus '/hr' etc., '—' for fixed lines); QTY; TOTAL (line amount).
• Totals: SUBTOTAL; DISCOUNT when present; then 'CGST @ x%' and 'SGST @ x%', or 'IGST @ x%', each WITH its amount, replacing the 'Tax 10%' row; TOTAL.
• PAYMENT INFO: bank name, Account Name, Account No., IFSC, Branch, and the planned UPI.
• Signature slot (bottom-right, right edge 518): the signature image in a box of about 150x60pt, plus 'Authorised Signatory' at 8pt. Without an image, use the computer-generated note.
• Fields with no slot:
  • Amount in words: on the left of the totals block beside Tax/TOTAL (x 77.4, at most 300pt wide), or full width below TOTAL.
  • Notes: between the totals and the bottom row, full width, 9pt Regular.
  • HSN/SAC: an 8pt sub-line under the description (not in the data model yet).
  • Footer and page numbers: fixed, 7pt, at y about 818.

Overflow risks

• Header: a wide wordmark logo (say 200pt) would collide with 'TAX INVOICE', which ends at about 346. Lay the header out as a row: title with flexShrink:1, logo box with maxWidth 140pt.
• FROM block: at most 240pt wide under the logo. Long addresses wrap to 3-4 lines (about 36 characters per line at Open Sans 10pt with 1pt tracking). It may push 'ISSUED TO' down, which is fine in flow layout.
• Meta block (x 375-519 = 144pt): long invoice numbers need the same grow-leftwards fix as Linea.
• RATE column: about 70pt in the design. Abbreviate unit labels or put them on a second 8pt line.
• Totals: labels end at 460.3 and values at 514.4, leaving only 54pt for amounts. Use a 90pt value column.
• Description width: Open Sans with 1pt tracking is wide, so the roughly 210pt description column holds about 36 characters per line. Rows must grow via padding (5.7pt) instead of a fixed 24.94 pitch.
• Page 1 capacity: about 6-8 rows. After that the totals (about 60pt) and the bottom row (payment plus signature, about 80-110pt with a 6-line bank block) spill to page 2. Keep the bottom row wrap={false}.
• PAYMENT INFO grows from 3 to 6 lines (+40pt). Keep the signature bottom-aligned with it (alignItems flex-end).

US Letter adaptation

• Width: keep the 69.6pt rule margins, so content width goes from 456.2 to 472.8. Anchor the title to the left margin (x = marginLeft). Anchor the logo, FROM block, meta, totals and signature to the right margin; the logo may overshoot the rule end by 5pt.
• Height (50pt shorter): move the header band up (top from 58 to about 40) and cut the header-to-ISSUED TO gap from about 118 to about 85. The bottom row stays right after the totals plus about 56pt of space. When page 1 has little content, a flex spacer can push the bottom row to the page bottom.
• Configurable margins: the header band's top equals marginTop. The logo box keeps its 130x116 size but shrinks proportionally if pageWidth minus margins is under 440.

react-pdf notes

• Fonts: register Open Sans 400/500/700 (static TTFs). Base style: {fontFamily:['Open Sans','IBM Plex Sans'], fontSize:10, letterSpacing:1, lineHeight:1.35, color:'#3D3B3A'}. Labels use fontWeight 700; address lines use 500.
• Page: paddingHorizontal 77.4. Give the title marginLeft -8 so it sits flush with the 69.6 rule start.
• Header: View {flexDirection:'row', justifyContent:'space-between', alignItems:'center', minHeight:140}.
  • Title Text {fontSize:38, fontWeight:700, letterSpacing:3.8}.
  • Logo View {width:144, height:140, alignItems:'center', justifyContent:'center', marginRight:-12}.
  • The Image needs an explicit width/height box for objectFit 'contain' to work.
• Optional monogram fallback: , plus an absolutely positioned initial and caption. react-pdf Views have no clip or mask, so draw the arc rather than masking a full circle.
• FROM block: View {alignSelf:'flex-end', maxWidth:240, marginTop:8}, textAlign right.
• Info row, table and totals: exactly as Linea, except:
  • Row paddingVertical 5.7 and header paddingBottom 7.5.
  • SUBTOTAL is bold.
  • letterSpacing is 1. react-pdf also adds tracking after the last glyph, so right-aligned columns end 1pt short; add marginRight:-1 if matching exactly.
• Bottom row: View {flexDirection:'row', justifyContent:'space-between', alignItems:'flex-end', marginTop:56}, wrap={false}. Left payment View {maxWidth:'55%'}; right signature box about 150x60.
• Pagination: table header row fixed; item rows wrap={false}; footer fixed with page numbers; hyphenation callback as in Linea.

Similarity to other templates

• Same reference design and grid as 4.pdf. It is page 5 of design and shares 4.pdf's rules, column centres 325.2 / 416.4, money right edge 514.4, meta anchors about 447.7 / 519 and totals label anchor 460.3. It is a typography-and-decoration variant of Linea:
  • Open Sans instead of Montserrat.
  • Bold labels and header with 0.1em tracking.
  • Row pitch 24.94 instead of 21.46.
  • A monogram logo.
  • The payment block moved to the bottom row.
  • 'RATE' instead of 'UNIT PRICE', and a bold SUBTOTAL.
• Not similar to the current in-app template beyond normal invoice structure.
• Shares its type system with 6.pdf: Open Sans sizes and weights, 1pt tracking, Medium address lines.

Implementation notes

Built on the shared Neutral family (src/pdf/templates/neutral/, tokens in monogram.ts). Measured against 5.pdf with npm run templates:compare (/tmp/invoice-c3/compare-monogram.png).

Matches the design (measured, A4): title baseline 144.0 pt (reference 143.98) and x 69.6 (flush with the rule start, 69.3 in reference); ISSUED TO and INVOICE NO baselines 325.4 pt and meta pitch 15 pt; header baseline to first row 36.3 pt; label and value widths agree to 0.1 pt (Open Sans at 0.10 em tracking); rules x 69.6-525.6; ink #3D3B3A only.

Intentional deviations, and why:

• Data text is tracked 0.05 em, not 0.10 em. Wider tracking makes PDF text extraction split words, so the table body, address lines and values use 0.05 em (layout rule 7). Titles, labels and table heads keep 0.10 em. Body lines are therefore a little narrower than the reference design's.
• Logo, not the ring. The user's logo goes in the measured slot (up to 142.75 x 116.5 pt, right edge on the margin, vertically centred on the old ring centre). A wordmark such as The sample vendor's comes out about 100 x 22 pt because the weight factor matches the visual weight of the ring (ink density 0.14). Without a logo the vendor's initials are set in Open Sans Bold 46 pt in the same slot, with no ring and no caption; a vendor name is always printed as text in the supplier block.
• Supplier block (FROM) is right-aligned under the logo (max 240 pt), as the doc suggests, and may push the info row down.
• Margins. Left and right 69.64 pt (the rule edge, text 7.8 pt inside), top 58, bottom 60 plus a 16 pt footer reserve. The logo may not overshoot the rule end by the reference design's 5 pt (the audit keeps flowing content inside the margin box); it sits 4.6 pt further left.
• Payment block sits in the bottom row with the signature, bottoms aligned; it grows with IFSC, Branch and Account Name, and the user's signature image replaces the script name (name and designation without one). 'Payment info:' keeps the design's label.
• Totals as Linea, except SUBTOTAL, TOTAL and the labels are bold and the rows 18.6 pt apart; the right column shows tax amounts (CGST @ 9%), not a rate.
• Table. RATE is shown as in Linea (amount plus short unit), HSN/SAC is a column when present.
• Letter: the band above the logo shrinks (23.25 to 8 pt after the 58 pt margin) and the header-to-info and info-to-table gaps take the rest; type is untouched.