xavierk/Voiced
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 3 Wiki Activity
Files
eddf27629f1c0a6c7e3373ef40359add41f8ebf6
Voiced/docs/templates/05-monogram.md
T

13 KiB
Raw Blame History

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.
Reference in New Issue View Git Blame Copy Permalink