# 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.