Add per-template specifications measured from the reference PDFs
This commit is contained in:
Vendored
+184
@@ -0,0 +1,184 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user