Add per-template specifications measured from the Canva PDFs
This commit is contained in:
Vendored
+147
@@ -0,0 +1,147 @@
|
||||
# Template 5: Monogram (`monogram`)
|
||||
|
||||
Source: `templates/Modern Neutral Invoice Template/5.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
|
||||
|
||||
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).
|
||||
- **Canva-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:** <Svg width={120} height={120} viewBox='-60 -60 120 120'><Path d='M -45.9 -32.6 A 56.33 56.33 0 1 1 -37.0 42.5' stroke='#3D3B3A' strokeWidth={3.75} fill='none'/></Svg>, 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 Canva design and grid as 4.pdf.** It is page 5 of design DAHW-lfqmdE 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
Block a user