Voiced/docs/templates/11-tangerine-ledger.md

Template 11: Tangerine Ledger (tangerine-ledger)

Source: templates/Modern Neutral Invoice Template/11.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

A crisp business ledger with Poppins Bold display text and Inter body. The header row and total cell are filled #FF5F2F, items and totals sit in a fully ruled black 0.75pt grid, and orange pennant tabs bleed off the top-right and bottom-left edges.

Fonts

• Poppins Bold 700: brand 'Rimberio' 18pt; 'INVOICE' 33pt; letterSpacing ≈0.
• Inter SemiBold 600:
  • Section labels 12pt, caps as typed: 'STUDIO SHODWE', 'BILL TO', 'NOTES / TERMS:', 'PAYMENT METHOD:', 'PREPARED BY:'.
  • Table header 11pt, white.
• Inter Regular 400:
  • Meta and party lines 12pt, line pitch 16.5 (lineHeight 1.375). The two meta lines use a pitch of 18.7.
  • Table body, totals labels and totals values 11pt.
• Inter Bold 700: Total row 12pt, white.

Inter text everywhere carries +0.01em tracking (0.11–0.12pt), which can be omitted.

Bundle Inter 400/600/700 and Poppins 700 as static TTFs (OFL). For ₹, Poppins is Devanagari-capable and has U+20B9; check the Inter build, and use the fallback ['Inter','IBM Plex Sans'] anyway.

Colours

• Page: #FFFFFF. Text: #000000.
• Accent #FF5F2F: table header fill and its 0.75pt outline, Total row fill, both edge tabs.
• On accent: text #FFFFFF; column separators inside the header and Total row are #FFFFFF 0.75pt.
• Grid lines: #000000 0.75pt, for item rows and the totals box.
• A white-on-white leaf shape at 60–90 × 69–111 is an invisible Canva logo placeholder. Ignore it.

Layout

Units are pt with the origin at the top-left. For text, y is the baseline.

Margins: left 59.5, right 58.8, so content runs x 59.5–536.7 (477.2 wide). Top ≈60, bottom ≈62.

#	Region	Position / content
1	Header	'Rimberio' Poppins Bold 18 at x 59.5, baseline 84.3. 'INVOICE' Poppins Bold 33, right-aligned to 536.7 (starts x 399.4), baseline 80.6
2	Meta	'Invoice Number: #123456' Inter 12 at x 59.5, baseline 168.7. 'Invoice Date: 24/05/2030' at baseline 187.4
3	Parties	Left column x 59.5–272: vendor name as label 'STUDIO SHODWE', SemiBold 12, baseline 224.7, then lines at 247.9 / 264.5 / 281.0 / 297.5. Right column x 284.1–536.7: 'BILL TO' plus lines on the same baselines
4	Items table	x 59.5–536.7. Header y 327.8–365.7 (37.9 tall). 3 rows of 37.5 (365.8 to 478.0)
5	Notes (left)	'NOTES / TERMS:' SemiBold 12 at x 59.5, baseline 511.8. Text 12pt at 536.2 / 552.7, about 180–280 wide
6	Totals box (right)	x 353.6–536.7 (183 wide), split at x 447.6. Rows 501.3–538.9 and 538.9–576.4; Total row 576.6–615.9
7	Bottom	'PAYMENT METHOD:' SemiBold 12 at x 60.1, baseline 722.3, with 3 lines at 746.3 / 762.8 / 779.4. 'PREPARED BY:' at x 316.8, baseline 722.3, with 2 lines at 746.3 / 762.8
8	Edge tabs	Top-right x 560.4–595.5 (bleeds), y 0–230.5. Bottom-left x 0–35.3, y 623.7–842.25

Gaps:

• Header to meta: 84.
• Parties to table: 30.
• Table to notes/totals: 23–34.
• Totals to bottom block: about 106. This is generous and can absorb the extra tax rows.

Items table

A grid table with every cell ruled.

Columns (A4):

• 'Item & Description': x 59.5–308.6 (249.1 wide). Left-aligned with 9.8 padding, so text starts at x 69.3.
• 'Unit Price': 308.6–406.1 (97.5 wide). Right-aligned, text ends at 397.4.
• 'Qty': 406.1–448.2 (42.1 wide). Right-aligned, text ends at 438.5.
• 'Amount': 448.2–536.7 (88.5 wide). Right-aligned, text ends at 526.9.

Header row: 37.9 tall, fill #FF5F2F, Inter SemiBold 11 white, baseline vertically centred at 350.1. Vertical separators are white 0.75pt and the outline is #FF5F2F.

Body rows: minimum height 37.5. Inter Regular 11 #000, baseline about 21.8 below the row top (vertically centred). Black 0.75pt lines on every row and column boundary plus the outer frame. No zebra striping.

Voiced adaptation:

• Widen the money columns: Unit Price to at least 100, with the unit on a second line ('₹2,000.00' over 'per hour' at 8.5pt); Qty to 45; Amount to at least 100. The description column shrinks to about 232.
• Optional 'HSN/SAC' column, 50 wide.
• Use paddingVertical 11–12 instead of a fixed 37.5 height so rows grow with wrapped descriptions.

Totals and payment

Source:

• The totals box is a bordered 2-column grid. 'Sub-Total' and 'Tax (6%)' rows use Inter Regular 11, with labels at x 363.3, values right-aligned to 526.9, and rows 37.5 tall.
• The Total row is filled #FF5F2F, with Inter Bold 12 white text and a white separator (39.3 tall).
• Notes sit to the left of the totals. The bottom block has 'PAYMENT METHOD:' (Bank, Account Name, Account Number) and 'PREPARED BY:' (name and title).
• There is no signature image and no footer.

Voiced:

• Totals rows: Sub-Total, optional Discount, CGST @ 9% plus SGST @ 9% (or IGST @ 18%), then Total in orange.
• Widen the box to about x 316–536.7, with label and value columns of 110 each, to fit ₹ strings. Use 26–30pt rows so 5 rows fit.
• Amount in words: below the box, either the box's width or across x 59.5–536.7, Inter Regular 10.
• PAYMENT METHOD: Bank, Account Name, Account Number, IFSC, Branch, UPI ID. That is 6 lines at 10.5pt with 14.5–15 pitch.
• PREPARED BY becomes the signature: an image (at most 140×48), then the vendor name and 'Authorised Signatory'. Without an image, show the vendor name and 'Computer-generated invoice; no signature required.' in Inter 9, #555.

Decoration and images

There are no raster images; everything is vector.

Top-right pennant tab, #FF5F2F. The full source path is mostly off-page: M560.4,-6.7 L560.4,172.8 C560.4,177.7 561.9,182.5 564.7,186.5 L605.5,244.8 C606.5,246.2 608.1,247.0 609.8,247.0 C611.5,247.0 613.1,246.2 614.1,244.8 L655.0,186.5 C657.8,182.5 659.3,177.7 659.3,172.8 L659.3,-6.7 C659.3,-10.8 655.9,-14.2 651.8,-14.2 L567.9,-14.2 C563.8,-14.2 560.4,-10.8 560.4,-6.7 Z The visible part is a 35.1-wide strip from the top down to y≈172.8, ending in a diagonal edge that meets the page edge at y≈230.5. Simplified visible path: M560.4,0 H595.5 V230.5 L564.7,186.5 Q560.4,180.2 560.4,172.8 Z

Bottom-left pennant tab, #FF5F2F. It points up, with its apex off-page at (−11.9, 610.9): M35.2,846.4 L34.5,680.1 C34.5,675.2 33.0,670.5 30.2,666.5 L-7.5,613.1 C-8.5,611.7 -10.1,610.9 -11.9,610.9 C-13.6,610.9 -15.2,611.7 -16.1,613.1 L-53.4,666.8 C-56.2,670.9 -57.7,675.6 -57.7,680.5 L-56.9,846.8 C-56.9,850.9 -53.6,854.3 -49.4,854.3 L27.8,853.9 C31.9,853.9 35.3,850.5 35.2,846.4 Z Simplified visible path: M0,623.7 L30.2,666.5 Q34.5,672.6 34.5,680.1 L35.3,842.25 H0 Z

Other elements:

• Grid lines and fills are plain rectangles, drawn as View borders and backgrounds.
• The white leaf placeholder is not reproduced.

Mapping to Voiced fields

• 'Rimberio' → vendor logo (maxHeight 36, at x 59.5, y ≈62) with vendorName beside it in Poppins Bold 18. Use the name alone when there is no logo.
• 'INVOICE' → INVOICE or TAX INVOICE. At 33pt, 'TAX INVOICE' is about 216 wide and spans x 320–536.7. That works as long as the brand block is capped at 240 wide.
• 'Invoice Number:' → number. 'Invoice Date:' → invoiceDate.
• Due date (no slot): a third meta line 'Due Date:' at baseline ≈206.1.
• PO number (no slot): a fourth line 'PO No.:' when present. Shift the parties down accordingly.
• Left party column (its label is the vendor name in caps) → vendorName, vendorAddress, vendorPhone, vendorEmail. Add 'PAN: …' and 'GSTIN: …' (no slot) as extra lines.
• 'BILL TO' → clientName and clientAddress. Add 'GSTIN: …' and 'Place of supply: 19 – West Bengal' (no slot) as extra lines.
• Table → items: description / rate plus unit / qty / amount. Fixed-price lines show qty 1 and rate '—'.
• HSN/SAC (no slot): optional column.
• Totals → subtotal, discount, CGST/SGST/IGST and total. The tax split has no slot, so it becomes extra rows.
• Amount in words (no slot): under the totals box.
• 'NOTES / TERMS:' → notes, plus 'Payment due within N days' from paymentTermsDays.
• 'PAYMENT METHOD:' → bank details. IFSC, branch and UPI have no slot and become extra lines.
• 'PREPARED BY:' → signature image, or the computer-generated note.

Overflow risks

• Header. A logo plus a long vendor name can collide with 'INVOICE' (starts x 399) or 'TAX INVOICE' (starts x 320). Cap the brand block at about 240 and let it wrap.
• Party columns. The left column is only about 212 wide (59.5 to 272); the right is about 252. Long addresses and emails wrap, and 6–7 vendor lines push the table down, so this must be flow layout rather than fixed y.
• Description cell. 249 wide, or about 232 after widening the money columns. Rows with wrapped text grow, so use paddingVertical instead of a fixed 37.5 height.
• Amount cells. '₹12,34,567.00' at Inter 11 is about 78 wide; with 19.6 of padding it exceeds 88.5. Widen to at least 100. The totals value cell has the same problem: widen from 89 to at least 105.
• Totals box. 5 rows at 37.5 would be 188 tall; keep rows at 30 or less.
• Bottom block. Six bank lines at 16.5 pitch from baseline 746 end around 829, past the A4 safe area of about 806. Use 10.5pt with 14.5 pitch or a 2-column bank grid, and place the block in flow after the totals with marginTop ≥30 instead of at the fixed 722 baseline.
• Grid across page breaks. Each row draws its own bottom, left and right borders, and the header row repeats on continuation pages.
• Edge tabs never touch content:
  • The right tab is at x ≥ 560.4 while content ends at 536.7 (for y ≤ 230.5).
  • The left tab is at x ≤ 35.3 while content starts at 59.5 (for y ≥ 623.7).
  • The app footer at left 40 clears the left tab by 4.7pt.

US Letter adaptation

US Letter is 612 × 792.

• Width. Keep margins of 59.5 and 58.8, so content becomes 493.7 wide (16.5 more). Give the extra to the description column, and widen the party columns proportionally (left 220, right 262).
• Tabs. Anchor them to the page edges:
  • Right tab: Svg with top 0, right 0, width 35.1, height 230.5.
  • Left tab: left 0, bottom 0, width 35.3, height 218.6. On Letter it then starts at y ≈573.
  • Both keep their size.
• Height. To recover the 50pt, shrink the header-to-meta gap from 84 to 60 and the totals-to-bottom gap from 106 to about 40, or let the bottom block flow.
• Configurable margins. Map them to Page padding. The tabs ignore margins. Enforce side margins of at least 45 so text never meets the 35pt-wide tabs.

react-pdf notes

Page: padding top 60, left 59.5, right 58.8, bottom 60. fontFamily ['Inter','IBM Plex Sans'], fontSize 12, lineHeight 1.375.

Tabs: two <Svg fixed style={{position:'absolute', top:0, right:0}} width={35.1} height={230.5}> elements, using the simplified paths translated into local coordinates.

Header: a row with justifyContent space-between and alignItems flex-end. The two baselines (84.3 and 80.6) differ by 3.7.

Parties: a row of two Views, 212 and 252.6 wide, with a 12.6 gap. Labels use Inter 600.

Table:

• Container View: borderTopWidth 0.75, borderLeftWidth 0.75, borderColor '#000'.
• Header row: backgroundColor '#FF5F2F'; each cell has borderRightWidth 0.75 with borderColor '#FFF'.
• Body rows: wrap={false}. Each cell has borderRightWidth 0.75 and each row borderBottomWidth 0.75. Numeric cells use textAlign 'right', paddingHorizontal 9.8, paddingVertical 12.
• Continuation pages: repeat the header with <View fixed render={({pageNumber}) => pageNumber > 1 ? <TableHeader/> : null}/>.

Notes and totals: a row with notes at flex 1 and totals 220 wide, wrap={false}.

Bottom: a row holding payment and signature, wrap={false}, minPresenceAhead 100.

Similarity to other templates

Near-duplicate of 7.pdf. Both carry the same 'Studio Shodwe' content and the same geometry: big INVOICE title, meta lines, vendor and BILL TO columns, a 4-column ruled grid with a filled header, a 2-column totals box, and PAYMENT METHOD / PREPARED BY.

Differences: 7.pdf uses Poppins for body text, a dark-red accent, a flame logo at top-right, a red rule under the header and a full-width red contact footer band. 11.pdf uses Inter body, #FF5F2F, brand text at left and edge tabs.

Build one 'Ledger Grid' component with an accent colour and a decor variant (tabs or footer band). Of 10–13, this is structurally closest to the current in-app template. Unrelated to format.pdf.

Implementation notes

Built as src/pdf/templates/ledger/ (the family component shared with Crimson Grid; tokens in tangerine.tsx) on the decor primitives in src/pdf/decor/ (Pennant). Measured against 11.pdf with npm run templates:compare (/tmp/invoice-c4/compare-tangerine-ledger.png, left Canva, right ours).

Matches the design (measured, A4): INVOICE baseline 80.6 pt, right edge on the content edge (536.7), Poppins Bold 33; 'Invoice Number' / 'Invoice Date' baselines 168.6 / 187.3 (Canva 168.7 / 187.4); party headings at x 59.5 and 284.1, 23.9 pt above the first line; table header and row pitch (header 41.5 pt single-line incl. rules, rows 37.5); accent #FF5F2F header, filled Total row with white separators; both pennant tabs at the design's coordinates.

Intentional deviations, and why:

• Margins. Top 46 pt: Poppins's tall ascent puts the 33 pt title's box top 11.5 pt above the cap top, so the box (not the ink) starts at the margin. Sides 59.55 with a floor of 45 on every preset, so Narrow (36) never puts text under the 35 pt tabs. Bottom 60 + 16 footer reserve.
• Header. The brand zone is the measured 220 x 36 allowance at y 62-98. A wordmark logo replaces the 'Rimberio' text; a mark logo sits left of the vendor name in Poppins Bold 18; without a logo the name stands in. The brand block is at most half the content width, the title shrinks to at most 60 % before it would meet it.
• Tabs. Two static Svg paths anchored to the page corners (top right 35.1 x 230.5, bottom left 35.3 x 218.6), fixed on every page; the Canva paths are simplified to their visible part with the same curves. They keep their size on Letter.
• Meta, parties, table, totals, notes, closing, elastic gaps: as for Crimson Grid (docs/templates/07-crimson-grid.md), with Tangerine's own numbers: meta gap 59 to 32, party 20.8 to 12, table 25.4 to 14, totals 23.3 to 10 (64 pt of slack on Letter), cell padX 9.8, padY 10.8, totals box at least 205 pt. The Total row is filled with the accent (white 12 pt Inter Bold, white separator).
• Type. Poppins 700 for brand and title, Inter 400/600/700 for the rest (static TTFs; Inter and Poppins both carry U+20B9, Plex still ends every stack). Inter's strongly kerned pairs ('7,', '7.') make pdf.js report an amount as two text items; the text is unchanged and the harness joins such fragments before checking the rupee sign.
• Footer. The standard footer (supplier name, 'Generated with Voiced', Page n of N) at 7 pt in grey; the design has none. The left tab (x 0-35.3) clears the footer at x 59.5 by 24 pt.