Voiced/docs/templates/13-citrus-split.md

Template 13: Citrus Split (citrus-split)

Source: templates/reference/13.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

A modern split layout on blush pink: a heavy 'INVOICE' wordmark, a light-grey right column, an orange SERVICE header cell and TOTAL bar, orange labels, an icon contact list and faint orange halftone-dot chevrons.

Fonts

• Now Bold: 'INVOICE' at 48pt (47.94), letterSpacing −3.89pt (−0.081em), #060605.
• DM Sans Bold:
  • Vendor name 17.13pt in 2 lines, lineHeight 1.0.
  • Meta labels 12pt #F96300: 'Invoice No :', 'Invoice Date :', 'Due Date :', 'Amount Due:'.
  • Amount-due value 12.36pt.
  • 'BILLED TO:' 12.4pt.
  • Client name 14.87pt #F96300, caps.
  • 'PAYMENT METHOD' and 'PAYMENT TERMS' 12pt #F96300.
  • Tagline 13.23pt, right-aligned.
• DM Sans Regular: meta values 12pt.
• Gotham Bold: 'SERVICE' 15.17pt, white, letterSpacing 2.25pt (0.15em). 'QTY RATE AMOUNT' 14.17pt. 'SUBTOTAL', 'TAX', 'TOTAL' and the total value 14.7pt #231F20.
• Gotham Book:
  • Item rows 12pt.
  • Subtotal value 12.7pt, tax value 12.07pt.
  • Client lines 10.5pt (17.75 pitch).
  • Bank lines 13.77pt (21 pitch).
  • Terms 12pt: 16.5 pitch within a bullet, 20.8 between bullets.
  • Contact list 12.77pt, about 23–27 pitch.

Bundling: DM Sans 400/700 (OFL). Gotham becomes Montserrat 400/700 or DM Sans. Check the licence for 'Now' (Alfredo Marco Pradil) before shipping; otherwise substitute Montserrat ExtraBold or Black at −0.08em. ₹ falls back to IBM Plex Sans.

Colours

• Page: #FFF7F7 (blush). Right column panel: #F1F1F1. Zebra row: #F1F1F1. Numeric header band: #FFFFFF.
• Orange fill #FF9220: SERVICE header cell, TOTAL bar, phone icon.
• Orange text #F96300: labels and client name. Icon orange: #F39322.
• Text: #060605, #231F20, and #000000 for client lines. 'SERVICE' is white on orange.
• Separator: #FFF7F7, 1.5pt, drawn over the grey panel.
• Logo placeholder: #231F20, #E63631, #FF9220.
• Halftone dots: gradient #FF9220 to #F2F2F2 (switching at 14%), at 9% opacity. On the blush page that is ≈#FFEEE4 fading to invisible.
• Reference shadow images (not reproduced): coral #FF524B and black at 30%.

Layout

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

Two zones: a left column at x ≈73–298.8, and a grey right column at x 298.8–535.6 (236.8 wide, right margin 59.9).

#	Region	Position / content
1	Grey panel	#F1F1F1 at x 298.8–535.6, from y 0 to 547.0. A second grey block at x 297.7–534.5, y 773.2–842.25
2	Header	'INVOICE' Now Bold 48 at x 73.3, baseline 109.7 (cap top ≈75.6). Logo 35×33 at (337.4, 74.5). Vendor name DM Sans Bold 17.13 at x 405.8, baselines 85.8 / 102.9
3	Meta row (4 cells)	Labels at baseline ≈197: x 87.9 'Invoice No :', x 174.1 'Invoice Date :', x 315.5 'Due Date :', x 423.7 'Amount Due:'. Values at baseline ≈219 (source 217.5–222.3) at the same x
4	Table header	y 240.3–287.5 (47.2 tall). Orange cell x 84.2–298.6 with 'SERVICE' at x 115.9, baseline 269.1. White band x 298.6–536.0 with 'QTY' / 'RATE' / 'AMOUNT' centred at 347.5 / 405.8 / 479.2, baseline 269.9
5	Rows	Pitch ≈39.3–40. Baselines ≈321, 360, 400.5. Row 2 band #F1F1F1 at x 84.0–536.0, y 337.9–377.2. Descriptions at x ≈100
6	Separator	x 293.4–533.9, y 420.4, 1.5pt #FFF7F7
7	Totals (in panel)	'SUBTOTAL' at x 320.9, baseline 447.7, value right-aligned at ≈505. 'TAX' at baseline 477.7. TOTAL bar #FF9220 at x 299.8–534.4, y 496.5–543.7; 'TOTAL' at x 316.5, baseline 524.4; value right-aligned at 505.0
8	Left column under table	'BILLED TO:' at x 85.6, baseline 459.7. Name at baseline 483.1. Lines at 508.6 / 526.3 / 544.1. 'PAYMENT METHOD' at x 81.7, baseline 585.6. Bank lines at x 83.2, baselines 618.2 / 639.2. 'PAYMENT TERMS' at baseline 684.3. Bullet dots at x 89.2–93.0, text at x 102.1, baselines 711.2 / 732.0 / 748.5
9	Right column under panel	Tagline right-aligned to 522.5, baselines 576.6 / 594.6. Contact list text right-aligned to 495.4, icons at x 507–524, baselines 655.7, 678.9, 705.7, 728.9
10	Halftone chevrons	Bottom-left (−126 to 172.5 × 516 to 842), bottom-centre (142.5 to 412 × 572 to 842), top-right (477 to 595.5 × 0 to 178)

Items table

Header (split):

• The 'SERVICE' cell is filled #FF9220 (x 84.2–298.6, 47.2 tall). Text is Gotham Bold 15.17, white, letterSpacing 2.25, left at x 115.9 (inset ≈31.7).
• The numeric headers sit on a white band (x 298.6–536) in Gotham Bold 14.17 #060605.

Body:

• The description column (x 84–298.6) sits on the blush page, text at x ≈100 in Gotham Book 12 #060605.
• QTY, RATE and AMOUNT sit inside the grey panel, centred at 346.4 / 404.7 / 478.7.
• Rows are about 40 pitch with no borders.
• Zebra: every second row gets a #F1F1F1 band across x 84–536. It only shows on the left part, since the panel is already grey.
• After the last row, a 1.5pt #FFF7F7 separator runs across the panel.

Voiced adaptation:

• Right-align RATE and AMOUNT at ≈522; the source centres both the values and the AMOUNT header.
• The panel's 236.8 width splits as qty 45, rate 90, amount 100.
• Put the unit under the rate in 8.5pt.
• Descriptions wrap within 214.
• HSN/SAC goes on a 9pt grey line under the description.

Totals and payment

Source:

• Totals are in the grey panel: SUBTOTAL and TAX label/value pairs. Labels Gotham Bold 14.7 at x 320.9; values Gotham Book ≈12.7, right-aligned at ≈505; 30 pitch.
• Then the orange TOTAL bar (234.6 × 47.2) with dark #231F20 text: 'TOTAL' at left (316.5) and the amount at right (505).
• Below the panel: a decorative tagline 'PROFESSIONAL SERVICES / BILLING SUMMARY.' and the icon contact list (phone, email, web, address).
• Left column: BILLED TO, PAYMENT METHOD (bank and account number), PAYMENT TERMS bullets.
• The bottom-right grey block (297.7–534.5 × 773.2–842.25) is empty.

Voiced:

• Rows SUBTOTAL, optional DISCOUNT, then CGST x% plus SGST x% (or IGST x%). Use 12.5pt labels and values so 4–5 rows fit. The TOTAL bar is unchanged.
• Amount in words replaces the tagline: DM Sans Bold 11, right-aligned, max width 222.
• PAYMENT METHOD: bank name, A/c name, A/c no., IFSC, branch, UPI. Use 11pt with 15 pitch instead of 13.77 with 21.
• PAYMENT TERMS come from notes.
• Signature goes in the bottom-right grey block: image up to 150×40 plus 'Authorised Signatory' in DM Sans 9, or the computer-generated note.

Decoration and images

Plain rectangles: the grey column panel and the bottom grey block.

Logo placeholder: 3 arcs (a #231F20 crescent and #E63631 and #FF9220 arcs), 35×33 at (337.4, 74.5). Replace with the vendor logo.

Contact icons (orange, about 14–17pt, right of the text at x 507–524), drawn with Carbon icon paths in Svg:

• Phone: solid #FF9220 disc with a knocked-out handset, 15.5pt.
• Email: ring plus envelope, #F39322, 17pt.
• Web: globe glyph, 14.3pt.
• Address: ring plus pin, 13.9pt.

Bullets: 3.8pt #060605 dots.

Halftone chevrons:

• Each field is 76 circles on a staggered lattice: 19 rows of 4 dots, with rows shifting diagonally to form a '>' chevron.
• Diameters grow from 9.8 to 22.5 local units towards the middle row, then shrink again.
• Scale per field:
  • Bottom-left: 0.842 pt per unit; row pitch 19, in-row spacing 38, diameters 8.3–19.
  • Bottom-centre: 0.761 pt per unit; diameters 7.5–17.
  • Top-right: 0.478 pt per unit, rotated 180°; diameters 4.7–10.8.
• Fill is a linear gradient #FF9220 to #F2F2F2 at opacity 0.09.
• Optional decoration: draw 228 Svg Circles, or omit.

Raster images: 15 RGB images with soft masks (141×77 to 590×202 px). They are the reference design's shadow effect: coral under the header labels and totals, black under the client and bank text. Do not reproduce them; the same strings also have an invisible duplicate text copy underneath.

Mapping to Voiced fields

• Logo slot (35×33; allow up to 60×40) → vendor logo.
• Vendor name → 2-line DM Sans Bold 17.13 at x 405.8, at most 130 wide.
• 'INVOICE' → INVOICE. For TAX INVOICE, 48pt would need about 300, but only 225 is free before the panel. Either stack a DM Sans Bold 14 #F96300 'TAX' above it, or auto-fit to about 34pt.
• Meta row → number, invoiceDate, dueDate, and total as Amount Due.
• PO (no slot): under the meta row on the left, or under BILLED TO.
• BILLED TO block → clientName and clientAddress. Add 'GSTIN' and 'Place of supply' (no slot) as extra lines. Recommend moving the block above the table, as a band at y ≈230, so it stays on page 1.
• Contact list (right, with icons) → vendorPhone and vendorEmail. Add vendorAddress, right-aligned and multi-line. GSTIN/PAN (otherwise no slot) replace the web line, or go under the vendor name in 9pt.
• Table → items. HSN/SAC (no slot): 9pt under the description.
• Totals → subtotal, discount, CGST/SGST/IGST as extra rows, and total. Amount in words takes the tagline slot.
• PAYMENT METHOD → bank details. IFSC, branch and UPI become extra lines.
• PAYMENT TERMS → notes.
• Signature → bottom-right grey block.

Overflow risks

• BILLED TO below the table. Structurally, BILLED TO sits below the items table (baseline 459.7). With more than about 3 items it drifts down or onto page 2. Move it above the table for Voiced.
• Grey panel height. In the source the panel stops at y 547, just under TOTAL. With a variable number of items it must become a full-height stripe (x 298.8–535.6) fixed on every page, instead of a fixed-height rectangle. The separate bottom block can then go, since the stripe covers it.
• Vendor name area. Only about 130 wide (405.8–535.6). Long names run to 3 or more lines; shrink to 14pt. The logo and name share x 337–535.
• Meta cells. Each cell is 86–112 wide. A series number like 'BB/2025-26/0012' at 12pt is about 95 wide and overflows cell 1 (87.9–174.1). Use 10.5pt or widen cell 1.
• Numeric columns. They are confined to the 236.8-wide panel. ₹ amounts of '₹12,34,567.00' or more at 12pt (≈85 wide) are close to the 100 limit.
• Left column under the table. Six bank lines at 13.77pt with 21 pitch take 126, plus notes. The left stack (billed-to, payment, terms) can exceed the page; reduce to 11pt.
• Contact list. Text is right-aligned with icons, so long email or address lines grow leftward (fine to about x 300). A multi-line address needs textAlign right with the icon on the first line.
• App footer. It would sit over the bottom-left dot chevron (visually fine) and under the grey block on the right.

US Letter adaptation

US Letter is 612 × 792.

• Width. Keep the grey column anchored to the right margin (59.9), which puts it at x 315.3–552.1 on Letter. Give the extra 16.5 to the left column (description, BILLED TO).
• Halftone chevrons: anchor them to their corners and edges.
• Height (−50pt).
  • Shrink the header-to-meta gap (≈88) to 65.
  • Shrink rows from 40 to 34.
  • Move the signature from the bottom grey block into the flow above the bottom margin; on Letter that block would be only 19 tall.
• Configurable margins. Page padding drives the flow. Derive the stripe's x from the right margin (left = page width − right margin − 236.8), never from fixed A4 numbers.

react-pdf notes

Page: style {backgroundColor:'#FFF7F7', paddingTop:70, paddingLeft:73, paddingRight:59.9, paddingBottom:40}.

Stripe: <View fixed style={{position:'absolute', top:0, bottom:0, right:59.9, width:236.8, backgroundColor:'#F1F1F1'}}/> as the first child. Check how absolute offsets interact with page padding.

Table rows:

• Each row is flexDirection 'row'. The first column's width is stripe-left minus content-left (≈214.6 including 16 of padding). The three numeric columns total 236.8, so numbers always sit inside the stripe.
• Zebra rows get backgroundColor '#F1F1F1' across the whole row.
• Header row: the SERVICE View has backgroundColor '#FF9220', the numeric part '#FFFFFF', height 47.2.

After the table: a two-column row, each block with wrap={false}.

• Left: BILLED TO (if not moved above), PAYMENT METHOD, PAYMENT TERMS.
• Right, 236.8 wide: totals; the TOTAL bar (a View 47.2 tall, backgroundColor '#FF9220'); amount in words; contact list; signature.

Icons: a 16×16 Svg with a Circle of radius 8, fill '#FF9220', plus a white Carbon glyph path.

Halftone (optional): a fixed Svg of Circles filled '#FFEEE4' (pre-blended). Skip it for flattened exports to keep files small.

Fonts: DM Sans 400/700, Montserrat 400/700 (the Gotham substitute), and Now Bold or its substitute. Use fontFamily arrays with IBM Plex Sans as the ₹ fallback.

Similarity to other templates

Sibling of 12.pdf: the same reference family, data and type system with a different layout. It is distinct from everything else in the set and from format.pdf and the in-app template; the split grey column is unique to it. It can share the 12/13 data-mapping code, though its pill and label components differ.

Implementation notes

Built as src/pdf/templates/northline/ (the family component shared with Purple Pop: Layout.tsx dispatches to CitrusLayout.tsx, the plans live in plan.ts, tokens in citrus.tsx and variant.ts) on the decor primitives in src/pdf/decor/ (Underlay, Halftone, CircledIcon). Measured against 13.pdf with npm run templates:compare -- citrus-split (/tmp/invoice-c5/compare-citrus-split.png, left reference, right ours).

Matches the design (measured, A4): INVOICE at x 73.3 with its baseline at 109.3 (reference 109.7); the stripe at x 298.8..535.6; meta labels at x 87.9 / 174.1 / 315.5 / 423.7; table header 47.2 pt, orange SERVICE cell x 84.2..298.6 with the text at 115.9, numeric headings on white; description text at x 99.9 (reference 100.1); SUBTOTAL / TAX labels at x 320.9 with values ending at 505; TOTAL bar 235 x 47.2 with TOTAL at 316.5 and its value ending at 505; BILLED TO block at x 85.6 beside the totals; PAYMENT METHOD / TERMS at x 81.7, bullets at 89.2 / 102.1.

Intentional deviations, and why:

• Fonts. Now Bold is drawn in Jost 700 at -0.081 em (Jost has no rupee sign and is used for that one word only; 'INVOICE' comes out 176 pt wide against the reference design's 189.7). Gotham is Montserrat at 0.96 of the design size (gotham()); DM Sans for labels, names and the words line.
• The stripe. A full-height fixed underlay on every page (not the reference design's 547 pt rectangle plus a bottom block), anchored to the right margin: x = page width - right margin - 236.8. On Letter the extra 16.5 pt go to the left column; Narrow and Normal margins move it with the margin. The three halftone fields are anchored to their page corners and edges, drawn as Svg circles over the stripe, each dot already in the gradient's colour at its x (no gradient object), at 9% opacity.
• Table. The three numeric columns add up to exactly 236.8 pt (66.8 / 80 / 90), so every number is printed on the grey whatever the data; the description column takes the rest (214.6 on A4, 231 on Letter). RATE and AMOUNT are right-aligned (the design centres them), the rate's unit goes under it when the short form does not fit, HSN/SAC is a 9 pt line under the description. Zebra rows span the full row width and only show on the left.
• BILLED TO. Beside the totals (the design) when the whole invoice fits one page; above the table, under the title, when it does not, so page 1 always names the client. planCitrus decides from the nominal height against the page and the gaps' slack.
• Totals. 12.5 pt labels (Gotham 700, drawn 0.96) and values; each row is one line (the value column takes only the width the amounts need, so 'TAXABLE VALUE' and 'UTGST @ 14%' never wrap). Amount in words sits under the TOTAL bar in the design's tagline slot, right-aligned; the reverse-charge line follows it.
• Contacts. Phone, e-mail and address with icons (a solid orange disc for the phone, rings for e-mail and address), right-aligned with the icons at the stripe's right edge; GSTIN and PAN replace the web line, without an icon. The signature goes under them in the panel column (the design's empty bottom block).
• Row pitch. 12.15 pt padding gives the design's 39.3 pt row; on Letter (and when an invoice is a little over a page) the row padding is the elastic part, down to 8 pt, together with the gaps.
• Header. Logo in the measured slot (a mark keeps the name, a wordmark replaces the lockup), the name 2+ lines at 17.13 pt; with no logo the name stands at the logo's x, vertically centred on the title. A tax invoice puts a tracked orange "TAX" above the wordmark.
• Margins. Top 58, bottom 40 plus the footer reserve, 73.3 left, 59.68 right; floors 36 / 36 / 24 / 36. The standard footer sits over the bottom-left halftone and the stripe.
• Terms. Beside the bank lines in the closing block; more than 110 pt of them flow as their own block across the width, each bullet unbreakable.