Voiced/docs/templates/10-teal-swoosh.md

Template 10: Teal Swoosh (teal-swoosh)

Source: templates/reference/10.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 clean corporate Montserrat layout. Headings are wide-tracked caps, the table sits on a full-bleed pale-grey band with soft row rules, and teal, gunmetal and silver swooshes fill the top-right and bottom-left corners (the two corners are 180° rotations of each other).

Fonts

Only Montserrat is used (SIL OFL). Bundle static TTFs at weights 400, 700 and 800.

• ExtraBold 800:
  • Title 'INVOICE': 30pt, letterSpacing 7.83pt (about 0.26em, reference setting 260).
  • Field labels 'Date:', 'Billed to:', 'From:', 'Payment method:', 'Note:' and 'Contact:': 12pt, letterSpacing 0.30pt (0.025em).
• Bold 700:
  • Table header 'SERVICE QTY PRICE TOTAL': 14pt uppercase, letterSpacing 2.8pt (0.2em).
  • 'TOTAL' label: 14pt, letterSpacing 2.8.
  • Total amount: 14pt, letterSpacing 0.7 (0.05em).
  • Brand name: 10.75pt, no tracking.
• Regular 400:
  • Party and footer lines: 12pt, letterSpacing 0.30, line pitch 16.5pt (lineHeight 1.375).
  • Date value: 13pt, letterSpacing 0.65.
  • Table body: 12pt (12.03), letterSpacing 0.36.
  • Tagline: 7.26pt. All text is one colour, #333132. ₹: use fontFamily ['Montserrat','IBM Plex Sans']. Montserrat's U+20B9 still needs checking. IBM Plex Sans has the glyph (confirmed with fc-list).

Colours

• Page: #FFFFFF. All text: #333132 (charcoal).
• Accent teal #32B3C7: logo triangle, 3pt accent bar beside TOTAL, corner fills.
• Logo dark triangle: #282829.
• Table header band: #DEE2E5 at 50% opacity, which is flat #EFF1F2 on white.
• Row rules: #8B95A4 at 53% opacity, flat #C2C7CF, 2.25pt thick.
• Swoosh gunmetal: raster gradient #343233 to #747474 in diagonal metallic stripes. Approximate stops: #3F3E3F, #747474, #343233, #6A6A6A.
• Swoosh silver: raster gradient #BEBCBE to #D8D7D7 in vertical stripes. Stops: #D5D4D4, #C3C0C0, #D6D5D5, #C5C2C2, #D8D7D7, #BEBCBE.
• Teal edge shade: #333132 at 32% opacity over teal, flat ≈#328997.

Layout

Units are pt with the origin at the top-left of the 595.5 × 842.25 page. For text, y is the baseline.

Margins: the header and parties run from x 59.5 to 536. The table and footer are inset further, x 69.5 to 526.

#	Region	Position / content
1	Brand row	Logo mark 41×27 at (59.6, 59.5). Brand name Bold 10.75 at x 107, baseline 77.8. Tagline Regular 7.26, baseline 87.2
2	Title	'INVOICE' ExtraBold 30, letterSpacing 7.83, at x 59.5, baseline 144.0 (cap top ≈122.5), 182 wide
3	Meta row	'Date:' ExtraBold 12 at x 59.5, baseline 193.5. Value Regular 13 at x 109.2. 'NO. 000001' Regular 12 at x 342.0, baseline 193.8
4	Parties (2 columns)	Left column x 59.5–330 'Billed to:'. Right column x 342–536 'From:'. Labels at baseline 216.6. Three lines at 237.8 / 254.3 / 270.8 (16.5 pitch)
5	Table header band	Full bleed, x 0–595.5, y 302.1–360.4 (58.3 tall). Labels at baseline 337.3
6	Item rows	5 rows, 52.5–54 rule to rule. Baselines 394.0, 446.0, 498.5, 552.7, 605.2. Rules at y 415.2, 469.3, 521.8, 575.9, 628.4, spanning x 69–525
7	Total row	Teal bar x 69.7–111.5 at y 668.5 (3pt). 'TOTAL' centred on the PRICE column (x 371.9–431.5), baseline 670.0. Amount right-aligned to 525.9
8	Footer info	Left at x 69.4: 'Payment method:' baseline 704.4 with its value at x 196.6; 'Note:' baseline 726.0 with its value at x 113.8. Right at x 359.9: 'Contact:' baseline 704.4, then 3 lines at 723.2 / 739.7 / 756.2
9	Decor	Top-right swoosh cluster at x ≥ 253.6, y ≤ 188.1. Bottom-left cluster at x ≤ 342, y ≥ 654.1

Vertical rhythm:

• Title baseline to meta: 50.
• Meta to party label: 23.
• Last party line to band: 31.
• Band bottom to first row baseline: 33.6.
• Last rule to TOTAL: 41.6.
• TOTAL to footer: 34.4.

Items table

Columns (A4):

• SERVICE: left-aligned at x≈70. Reference varies between 69.0 and 71.7; normalise to 70.
• QTY: centred at ≈309.5.
• PRICE: centred at ≈400.5.
• TOTAL: right-aligned to 526. The header label's tracked right edge is also at 526.

Header: a full-bleed band, running edge to edge rather than just the table width. Colour #EFF1F2, 58.3 tall. Text is Montserrat Bold 14, uppercase, letterSpacing 2.8, #333132, baseline vertically centred at 337.3.

Rows:

• Montserrat Regular 12, letterSpacing 0.36, #333132.
• Very airy: about 53pt per row, which is ≈20pt of padding above and below a single line.
• A rule sits under every row, including the last: 2.25pt, #C2C7CF, x 69–525.
• No zebra striping, vertical lines or outer border.

Voiced adaptation:

• Right-align PRICE and TOTAL. A ₹ amount like '₹12,34,567.00' is about 95pt wide at 12pt.
• Suggested widths inside x 69.5–526: description flex 1 (at least 200), optional SAC column 50, QTY 50 centred, RATE 100 right, AMOUNT 100 right.
• Put the rate unit on a second line under the rate in 8.5pt.
• Body text 11pt with row padding of about 10, giving 34–38pt rows, so 10–12 items fit on page 1.
• Row heights must grow for multi-line descriptions.

Totals and payment

Source:

• There is no subtotal or tax row, only TOTAL. The row has a teal 3pt accent bar at the left (x 69.7–111.5, y 668.5), a 'TOTAL' label (Bold 14, letterSpacing 2.8, centred at ≈400 over the PRICE column) and the amount (Bold 14, letterSpacing 0.7, right edge 525.9), all on baseline 670.
• The footer has 'Payment method:' with an inline value and 'Note:' with an inline value at left. Labels are ExtraBold 12, values Regular 12, with about an 8pt gap.
• At right is 'Contact:' followed by phone, email and address.
• There is no signature.

Voiced:

• Above TOTAL, in a right-hand block at x 345–526, add rows for SUBTOTAL, an optional DISCOUNT, then CGST @ x% plus SGST @ x%, or IGST @ x%.
  • Labels: Montserrat Bold 10.5, letterSpacing 1.6, uppercase.
  • Values: Regular 12, right-aligned at 526, 18–20 pitch.
• Then a 0.75pt #C2C7CF rule and the original TOTAL row, with the accent bar kept on that baseline.
• Amount in words: one line under TOTAL across x 69.5–526, Montserrat Regular 10, for example 'Amount in words: Rupees … Only'.
• Bottom-right ('Contact:' slot): bank details headed 'Payment details:'. Lines are bank, A/c name, A/c no., IFSC, branch and UPI, at 10.5pt with 15 pitch. This area stays clear of the swoosh all the way to the page bottom.
• Bottom-left: 'Note:' for notes, at most 3 lines.
• Signature or computer-generated note: place it in the right column below the bank details. Signature image up to 140×48, then the vendor name and 'Authorised signatory'.

Decoration and images

Raster images: 4 Flate ICC-RGB images, each just a gradient clipped by a vector path. obj137 and obj159 are 310×282 px (gunmetal); obj140 and obj156 are 428×217 px (silver). There are no photos. All of it can be redrawn as vector with react-pdf Svg and LinearGradient.

Bottom-left cluster. Page pt, y down. The paths run past the page edge to y 866 and are clipped. Draw in this order:

1. Gunmetal band: M207.7,866.4 C95.8,813.0 21.1,726.7 -25.4,654.1 L-25.4,866.4 Z. Fill with a diagonal gradient (0,0 to 1,1): #3F3E3F at 0, #747474 at .35, #343233 at .7, #6A6A6A at 1.
2. Silver crescent (curve fit, max error 0.6pt): M20,703 C78.8,780.4 163.7,834.8 255,866 L342,866 C220.8,849.9 100.9,796.5 20,703 Z. Fill with a horizontal multi-stop silver gradient. It sits outside the gunmetal band with a white gap between them and is 8–15pt thick where visible.
3. Teal corner: M132.2,866.4 L-25.4,866.4 L-25.4,672.7 C2.0,727.2 56.2,808.8 153.5,866.4 Z, #32B3C7.
4. Teal edge shade: M153.5,866.4 C56.2,808.8 2.0,727.2 -25.4,672.7 L-25.4,676.7 C-0.1,730.4 48.2,808.5 132.2,866.4 Z, #333132 at fillOpacity .32.

Top-right cluster: the same four paths rotated 180° about the page centre, so (x, y) becomes (595.5 − x, 842.25 − y). For example:

• Gunmetal: M387.8,-24.2 C499.7,29.2 574.4,115.5 620.9,188.1 L620.9,-24.2 Z.
• Teal: M463.3,-24.2 L620.9,-24.2 L620.9,169.5 C593.5,115.0 539.3,33.5 441.9,-24.2 Z.

On-page footprints:

• Bottom-left: about x 0–236, y 690–842. At the bottom edge the gunmetal reaches x≈157 and the crescent x≈236.
• Top-right: the mirror of that.

Other elements:

• Logo mark (59.6–100.5 × 59.5–86.4): two overlapping triangles, #282829 and #32B3C7. Reference placeholder; replace with the vendor logo.
• Rules and the accent bar are plain strokes with butt caps.

Mapping to Voiced fields

• Logo mark → vendor logo. Image with maxHeight 40, maxWidth 120, objectFit contain, at (59.5, ≈55).
• 'LICERIA & CO.' → vendorName, Bold, enlarged to 12–14pt. The 'Travel Agency' tagline slot is optional: leave it empty or use a trade line.
• 'INVOICE' → 'INVOICE', or 'TAX INVOICE' when taxType ≠ none. At 30pt with letterSpacing 7.83, 'TAX INVOICE' is about 330 wide and ends at x≈390. That fits, because the swoosh is at x ≥ 540 on the title line.
• 'Date:' → invoiceDate. 'NO.' → number.
• Due date (no slot): add a second meta line 'Due:' at baseline ≈210, with 'PO:' to its right when present. Shift everything below down by 16.5.
• 'Billed to:' → clientName and clientAddress (multi-line). Add 'GSTIN: …' and 'Place of supply: 19 – West Bengal' (no slot) as extra lines.
• 'From:' → vendorName, vendorAddress, vendorPhone, vendorEmail. Add 'PAN: …' and 'GSTIN: …' (no slot) as extra lines; the block grows to 6–8 lines.
• Table → items. Description in SERVICE, quantity in QTY (1 for fixed lines), rate plus unit in PRICE ('—' for fixed lines), amount in TOTAL.
• HSN/SAC (no slot): optional 50pt column, or a 9pt grey line under the description.
• Subtotal, discount, CGST/SGST/IGST (no slot): stacked above TOTAL.
• Total → the TOTAL row. Amount in words (no slot): under TOTAL.
• Bank details (no slot for most lines) → the bottom-right 'Contact:' area (bank, A/c name, A/c no., IFSC, branch, UPI); vendor phone/email are already in 'From:'.
• 'Payment method:' / 'Note:' → notes stay bottom-left; 'Payment method:' is dropped or reduced to one inline value such as 'Bank transfer / UPI'.
• Signature (no slot) → right column, below the bank details.

Overflow risks

• Header vs top-right swoosh. The silver crescent's inner edge crosses y 0 at x≈360, sits at x≈478–523 for y 56–88, and at x≈550–575 for y 112–139. The gunmetal band starts at x≈432 at y 0 and is at x≈505–540 for y 53–86. Keep brand-row content within x ≈440, so the vendor name is at most about 320 wide and wraps to 2 lines. Keep the title within x 520.
• Header overlap bug. Vendor contact details sit in 'From:', away from the title, so the address/INVOICE overlap only stays fixed if the two party columns are fixed-width flex children (270.5 and 194) that wrap.
• 'From:' column is only ~194 wide. Long emails and addresses wrap, and with PAN/GSTIN the block is 6–8 lines. It must push the table down rather than use an absolute y.
• Table. The description column is about 210 wide and wraps. With 53pt rows only about 5 items fit before the totals on page 1. Centred PRICE and TOTAL collide for long ₹ values.
• Bottom-left swoosh.
  • Content at x 69 must stay above y ≈745, at x 150 above ≈800, and at x ≥ 250 it is clear to about 835.
  • The source's left footer ends at baseline 726.
  • A 6-line bank block plus notes on the left would run into the crescent and gunmetal. That is why the bank block moves to the right (x ≥ 345 is clear to the bottom).
  • Alternatively, give this template paddingBottom ≈110.
• Existing app footer. The fixed footer at bottom 24, left 40 would land on the bottom-left teal. Move its text to x ≥ 300 for this template.
• Multi-page. The band header must repeat on continuation pages, and both swoosh clusters must repeat (fixed).

US Letter adaptation

US Letter is 612 × 792: 16.5pt wider and 50.25pt shorter than the source.

• Width. Keep margins of 59.5 (header) and 69.5 (table), so content widens to 493 and 473. Give the extra width to the description column and the right party column. The header band stays full-bleed: marginHorizontal = −page paddingX.
• Decorations. Anchor them to the page corners, not to A4 coordinates:
  • Top-right: Svg with top 0, right 0, width 342, height 188.1, viewBox '253.5 0 342 188.1'.
  • Bottom-left: Svg with left 0, bottom 0, width 342, height 188.2, viewBox '0 654.1 342 188.2'.
  • Both keep their size on Letter.
• Height. Recover the 50pt by shrinking the band from 58 to 46, the row pitch from 53 to 40, and the title-to-meta gap from 50 to 36.
• Configurable margins. Map them to Page padding. This template needs a bottom margin of at least about 100 so flowing text never enters the bottom-left swoosh. Decorations ignore the margins.

react-pdf notes

Page: <Page size={'A4'|'LETTER'} style={{paddingTop:55, paddingHorizontal:59.5, paddingBottom:110, fontFamily:['Montserrat','IBM Plex Sans'], color:'#333132'}}>.

Decorations: the first children are two <Svg fixed style={{position:'absolute', …}}> clusters. Check that react-pdf measures absolute offsets from the page edge rather than from inside the padding; the current footer relies on this. If it doesn't, offset by −padding.

Flow, top to bottom:

• Header: a row with Image plus a View holding name and tagline, maxWidth 370.
• Title: Text with fontWeight 800, fontSize 30, letterSpacing 7.83.
• Meta rows: justify space-between. The left cell is 282.5 wide, so the right cell starts at x 342.
• Parties: a row of two Views, 270.5 and 194 wide; Text wraps.
• Table header band: a View with marginHorizontal −59.5, paddingHorizontal 69.5, paddingVertical ≈20 and backgroundColor '#EFF1F2'. For continuation pages, repeat it with a fixed View whose render function returns it only when pageNumber > 1.
• Rows: each row a View with wrap={false}, borderBottomWidth 2.25, borderBottomColor '#C2C7CF', paddingVertical 12–20.
• Totals: a View with wrap={false} and minPresenceAhead 80.
• Footer: a row with the left part flex 1 and the right part 181 wide.

Details:

• react-pdf's letterSpacing adds space after every glyph, including the last. the reference design's measurements here do the same, so right-aligned tracked labels already line up.
• No raster assets are needed. Gradients go in <Defs><LinearGradient id='gun'>…</LinearGradient></Defs> with fill='url(#gun)'.
• Fonts: Font.register({family:'Montserrat', fonts:[{src:'…/Montserrat-Regular.ttf', fontWeight:400}, {src:'…/Montserrat-Bold.ttf', fontWeight:700}, {src:'…/Montserrat-ExtraBold.ttf', fontWeight:800}]}). Use static TTFs.

Similarity to other templates

Near-duplicate of 9.pdf. Both use the same Montserrat type scale, and these elements sit in the same positions:

• Date and NO.
• Billed to and From.
• The full-bleed table band, 52.5pt rows with 2.25pt rules, and the accent bar with TOTAL.
• Payment method and Note.

9.pdf swaps the swooshes for a slate top bar (logo plus NO.), a blue full-width 'INVOICE' band and an icon contact footer. 10.pdf has a logo/brand row, swoosh corners and a 'Contact:' block. Build 9 and 10 as one layout component with a header/decor variant. Not related to format.pdf or the current IBM Plex in-app template.