Voiced/docs/templates/08-cobalt-stripe.md

Template 8: Cobalt Stripe (cobalt-stripe)

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

Friendly cobalt-blue business style. Swoosh logo and bold name on the left, a large cobalt INVOICE on the right, and a grey rule with sky-blue accent ends. A cobalt header bar sits over light-blue zebra rows. Cobalt label bars mark PAYMENT METHOD and GRAND TOTAL. Script signature; footer of icon contacts.

Fonts

Families: Open Sans 400/700 for body text; Poppins 400/700 for name, title and footer; BD Script for the placeholder signature. Metrics per 1000 units: Open Sans ascent 1068.85, descent -292.97, cap 714; Poppins 1050/-350.

• Poppins Bold: vendor name 17.38pt #1B1B1B, tracking -0.49pt (-0.028em). 'INVOICE' 31.45pt #3871C1, tracking +1.35pt (+0.043em).
• Poppins Regular: footer contact text 10pt #1B1B1B.
• Open Sans Regular: tagline 10pt uppercase #1B1B1B; website text beside the header rule 10pt uppercase #000000; 'Invoice to :' 11pt; client contact lines 10pt #595A5A; date 12pt; table body 10pt; 'Sub Total :'/'Tax 15% :' and their values 11pt; bank lines 11pt; terms body 10pt #595A5A.
• Open Sans Bold: client name 15pt; 'Invoice no : 12345' 12pt; table header 11pt #FFFFFF uppercase; bar labels and values 11pt #FFFFFF; 'Thank you for business with us!' 11pt; 'Term and Conditions :' 11pt; signer name 13pt; signer title 11pt.
• BD Script Regular: signature 25pt #1B1B1B. Licensed by reference, so do not bundle it; this slot becomes the signature image.
• Pitches: name to tagline baseline 15.66. Client contact lines 10pt at ~19pt (lineHeight ~1.9, airy). Right-hand meta 19.2. Bank lines 11pt at 15.76 (1.43). Terms 10pt at 14.25 (1.425). Table rows 17.82. Totals rows 20.76.
• All other tracking is ~0.

Colours

Exact fill operators:

• #3871C1 (0.2196 0.4431 0.7569), cobalt: INVOICE, table header bar, PAYMENT METHOD bar, GRAND TOTAL bar, middle logo swoosh.
• #BEDEF1 (0.7451 0.8706 0.9451), light blue: even zebra rows and the 1.5pt column separators.
• #51ADE5 (0.3176 0.6784 0.898), sky: 3pt rule accents, footer icons, one logo swoosh.
• #2C3892 (0.1725 0.2196 0.5725), navy: logo swoosh only.
• #1B1B1B (0.1059 grey), near-black: primary text.
• #595A5A (0.349 0.3529 0.3529): secondary text (client contact lines, terms body).
• #A6A6A6 (0.651 grey): 1.5pt grey rules.
• #000000: website text beside the header rule.
• #FFFFFF: page background, odd rows, text on bars. No transparency.

Layout

A4, y measured from the top. Content x 59.55-535.95 (476.4 wide).

Region	Geometry (pt)
Logo	x 59.5-93.8, y 59.5-93.7 (34x34)
Vendor name	x 102.25 (8.5 right of logo), baseline 74.56
Tagline	x 102.25, baseline 90.22
INVOICE	right-aligned to 535.94, baseline 87.26 (starts at x 395.65; cap top ~65.1)
Header rule	y 113.77: grey 1.5pt round-cap line x 60.3-414.9, with a sky 3pt accent x 61.0-96.7 over its left end
Rule text	right-aligned to 535.94, baseline 117.07 (vertically centred on the rule), starts at 425.85 (11pt after the rule ends)
Bill-to (left)	'Invoice to :' baseline 173.83; name 195.91; lines 219.92/239.49/257.94
Meta (right)	'Invoice no : ...' baseline 175.18; date 194.41; right edge 535.94
Table	header bar 292.18-312.95; rows 312.95-455.54 (8 x 17.82)
Sub/Tax	baselines 477.03/497.79; labels' right edge 417.36; values' right edge 532.82
Bars	y 514.00-534.76: PAYMENT METHOD x 59.46-193.28; GRAND TOTAL x 321.46-535.98
Bank lines	x 60.95, baselines 561.79/577.55
Divider	y ~600.5, x 60.2-236.8, grey 1.5 round caps (drawn with a 0.75pt slope; treat as horizontal)
Thank-you	x 60.95, baseline 624.52
Terms	heading baseline 666.91; body 684.63/698.88/713.14/727.39; box ~185 wide
Signature (right)	script baseline 688.52; name 710.57; title 728.14; right edge 530.45
Footer rule	y 747.02: grey 1.5 x 74.9-520.6; sky 3pt accents x 61.05-96.75 and 498.75-534.45
Footer contacts	icons y ~760-783 at x 59.55 (phone 21x21), 186.57 (mail 21x16), 376.15 (pin 18x23); text baseline 774.49 at x 85.17/212.41/398.09
Whitespace below the footer is ~59.6, equal to the side margin. Gaps: header rule to 'Invoice to' cap top 52.2; last client line to table 34.2.

Items table

5 columns across the full content width 59.55-535.95. Boundaries at x 59.55 | 84.42 | 256.25 | 341.19 | 446.62 | 535.95, giving NO 24.9 (5.2%), DESCRIPTION 171.8 (36.1%), QTY 84.9 (17.8%), PRICE 105.4 (22.1%), TOTAL 89.3 (18.8%).

• Header bar: #3871C1, 20.76 tall, no border. Open Sans Bold 11 #FFFFFF uppercase. NO, DESCRIPTION, QTY and TOTAL centred; PRICE right-aligned to ~415 so it lines up with the price values.
• Body rows: 17.82 tall, single line. Zebra: odd rows #FFFFFF, even rows #BEDEF1. No horizontal rules and no outer border. Vertical separators 1.5pt #BEDEF1 at the 4 inner boundaries (visible only on white rows).
• Body text Open Sans Regular 10 #1B1B1B. NO centred. Description left-aligned at 91.23 (6.8 inset). QTY centred (~298.5). PRICE right-aligned at 414.9, which is 31.7 short of the column edge. TOTAL right-aligned at 532.82 (3.1 inset).
• Vertical: baseline is 12.29 below the row top. The react-pdf natural line is 13.6 at 10pt, so paddingTop ~1.6 and paddingBottom ~2.6. For wrapping text use paddingVertical 3 with minHeight 17.82.
• Recommendation: right-align PRICE and TOTAL with an even 6-8pt inset. Set the zebra colour as a row backgroundColor by index. Draw separators as cell borderRight, not absolute lines, so they grow with wrapped rows.

Totals and payment

• Sub-totals (right side, no box): 'Sub Total :' and 'Tax 15% :' in Open Sans 11 #1B1B1B. Labels' right edge 417.36, values' right edge 532.82, pitch 20.76.
• GRAND TOTAL bar: #3871C1, x 321.46-535.98 (214.5 wide = 45% of content), 20.76 tall. Label Open Sans Bold 11 white, right-aligned to 417.36 (starts at 333.33). Value bold white, right-aligned at 532.82. Reference sets the value baseline 1.2pt higher; use one baseline.
• PAYMENT METHOD bar: #3871C1, x 59.46-193.28 (133.8 wide), same row as GRAND TOTAL. Bold white label at x 60.95 (only 1.5 inset; use ~6). Bank lines below: 'Bank Name : ...' and 'Account Number : ...' in Open Sans 11.
• Grey divider (176.6 long), then 'Thank you for business with us!' bold 11.
• 'Term and Conditions :' bold 11, then the grey 10pt body.
• Signature block right-aligned at 530.45: BD Script 25 signature, Open Sans Bold 13 name, Bold 11 title.
• Footer: rule with sky accent ends, then 3 icon-and-text contact items.
• Missing from the template: amount in words, due date, GST/PAN, page number.

Decoration and images

No raster XObjects. Everything is vector shapes plus live text.

• Placeholder logo: 3 bezier swooshes (#2C3892, #3871C1, #51ADE5) plus 2 tiny #1B1B1B specks, 34x34. Replace with a vendor logo Image.
• Rules: grey 1.5pt round-cap lines with sky 3pt round-cap accent segments 35.7 long, at the left end (header) and at both ends (footer).
• Bars: plain cobalt rectangles (table header, PAYMENT METHOD, GRAND TOTAL).
• Zebra rectangles and 1.5pt light-blue vertical separators.
• Icons: outline-style phone (with signal arcs), envelope and map pin, #51ADE5, 16-23pt. Render with react-pdf . Copy the path data of Carbon 'Phone', 'Email' and 'Location' (32px viewBox) from @carbon/icons-react, which is already a dependency, and draw them at 14-16pt.
• Many invisible (ca=0) rectangles tagged 'Image' are accessibility tags. Ignore them.

Mapping to Voiced fields

• Logo: vendor logo (height <= 34-40, width <= 120, contain).
• Vendor name: vendorName (Poppins Bold 17.4, tracking -0.5).
• Tagline 'CREATIVE AGENCY': 'GSTIN {vendorGstin}' in Open Sans 10 uppercase.
• 'INVOICE': 'TAX INVOICE' or 'INVOICE'.
• Rule text 'REALLYGREATSITE.COM': 'PAN {vendorPan}' or vendorEmail in uppercase (Voiced has no website field).
• 'Invoice to :' becomes 'Billed to :'. Name: clientName (bold 15). Grey lines: clientAddress (wrapping), 'GSTIN {clientGstin}', 'Place of supply: {state} ({code})'.
• Right-hand meta: 'Invoice no : {number}' and invoiceDate, NEW 'Due date : {dueDate}' (12pt, 19.2 pitch), optional 'PO : {poNumber}'.
• Table: NO = row index; DESCRIPTION = description; QTY = quantity (with unit in rate mode); PRICE = rate (e.g. '/hr'); TOTAL = amount. HSN/SAC (no slot): split the 84.9-wide QTY column into HSN/SAC ~50 + QTY ~35, or use a grey sub-line under the description.
• Sub/Tax rows: Subtotal, Discount, then CGST x% and SGST x%, or IGST x%.
• GRAND TOTAL bar: total.
• Amount in words (no slot): 1-2 right-aligned lines directly under the GRAND TOTAL bar, Open Sans 9.5 #595A5A, 214.5 wide.
• PAYMENT METHOD bar and lines: bank fields Bank Name, Account Name, Account No, IFSC, Branch, UPI.
• Thank-you line: keep it static, or make it configurable.
• Terms: notes, plus 'Payment due within {paymentTermsDays} days'.
• Signature: the script text becomes the signature Image (height <= 36, right-aligned). Name = vendorName. Title = 'Authorised Signatory'. With no signature, show 'Computer-generated invoice; no signature required.' in Open Sans 9 #595A5A, right-aligned.
• Footer: phone = vendorPhone; email = vendorEmail; address = vendorAddress (short form, or 2 lines).

Overflow risks

• Header (same class as the reported overlap bug): the name starts at 102.25 and the right-aligned INVOICE starts at 395.65, leaving ~290pt (~20 chars at 17.4pt). 'TAX INVOICE' is ~230pt wide and starts at ~306, leaving ~200pt (~14 chars). Use a flex row: brand View flex 1 with minWidth 0 so it wraps, title flexShrink 0, gap >= 16.
• The header rule has a fixed length of 354.6. Rule text wider than ~110pt (e.g. 'GSTIN 19ABCDE1234F1Z5' is ~115pt) collides. Make the rule a flex 1 View and the text flexShrink 0 with marginLeft 11.
• The bill-to and meta columns have no explicit widths; use 55% left and 45% right. Long client addresses wrap at 10pt, and the ~19pt pitch uses height quickly, so use a 14-15 pitch for addresses.
• Table rows are drawn single-line at 17.82. Wrapped descriptions make rows taller, so zebra colours and separators must be per-row and per-cell styles.
• TOTAL column inner width is ~83pt. '₹12,34,567.00' at 10pt Open Sans is ~65pt and fits; amounts in crores (~85pt) are borderline. PRICE column is fine.
• On A4 the bottom area is laid out by fixed positions: bank 561-578, divider 600, thank-you 625, terms 667-727, signature 670-728, footer rule 747. Six bank lines (+63pt) or long notes push into the footer, so the content must flow above a fixed footer.
• The footer address slot is only ~138pt (398 to 536) at 10pt, ~27 chars. Indian addresses will overflow. Use a flex row with space-between, the address item flex 1 and maxLines 2.
• More than ~20 items spill to page 2, which must repeat the header bar.

US Letter adaptation

• Letter: content width = 612 - 2M (492.9 at M = 59.55). The description column takes the extra 16.5 (flex). Bars keep their proportions (PAYMENT 28%, GRAND TOTAL 45%) or keep fixed widths anchored left/right.
• Height is 50.25 shorter. The footer (rule 95pt above the bottom, plus contacts) stays anchored to the bottom (rule at y 697 on Letter). To recover ~50pt: header rule to 'Invoice to' cap top 52 -> 36; client line pitch 19 -> 15; client block to table 34 -> 24; bank to divider 22 -> 14; thank-you to terms 42 -> 28.
• Configurable margins: top = logo top (59.5 by default, = M). The footer block's bottom offset = M. Rules span the content width; accent segments stay 35.7.

react-pdf notes

• Register Poppins 400/700 and Open Sans 400/700 as static TTFs. Set the page fontFamily to 'Open Sans'.
• Page: paddingTop M, paddingBottom ~110 (room for the footer), paddingHorizontal M.
• Header: View row, alignItems center: [Image 34x34] [View marginLeft 8.5, flex 1, minWidth 0, containing the name Text and tagline Text] [Text INVOICE, flexShrink 0, textAlign right, letterSpacing 1.35, marginRight -1.35].
• Rule row: View row, alignItems center. Rule = View flex 1, height 1.5, bg #A6A6A6, borderRadius .75, containing an absolute accent child (left 0, top -0.75, width 35.7, height 3, bg #51ADE5, borderRadius 1.5). Absolute positioning is fine here because it is decoration inside a relative box. Then the Text with marginLeft 11.
• Table: header row <View fixed style={{flexDirection:'row', backgroundColor:'#3871C1', height:20.76, alignItems:'center'}}>. Body rows <View wrap={false} style={{flexDirection:'row', minHeight:17.82, alignItems:'center', backgroundColor: i%2 ? '#BEDEF1' : '#FFFFFF'}}>. Cells use % widths with borderRightWidth 1.5 and borderRightColor '#BEDEF1' (except the last cell).
• Totals: View alignSelf flex-end, width 214.5. Label/value rows use row + space-between. GRAND TOTAL bar is a View of the same width, bg #3871C1, paddingHorizontal 12/3.
• Bars and bottom area: use two columns that flow independently. Left column flex 1: PAYMENT bar (width 133.8), bank lines, divider, thank-you, terms. Right column width 214.5: GRAND TOTAL bar, amount in words, then the signature (alignItems flex-end, wrap={false}).
• Footer: <View fixed style={{position:'absolute', left:M, right:M, bottom:M}}> holding the rule (accents at both ends) and a row of 3 items (Svg icon 14pt + Poppins 10 Text).
• Baselines: Text top = baseline - 1.069 x size for Open Sans, baseline - 1.05 x size for Poppins.
• Right-aligned tracked text: textkit 7.0.1 also adds letterSpacing after the last glyph, so add marginRight equal to minus the letterSpacing.

Similarity to other templates

• No near-duplicate in the set. It is the only template with cobalt bars, zebra rows and a swoosh logo. It shares the 'Studio Shodwe' placeholder copy with 7 and 11, but the layout is unrelated.
• Shared-component candidate: the icon contact footer (phone/email/address) also appears in 2, 9 (circled icons) and 12/13. The zebra rows loosely echo 1 (grey zebra) and 12/13 (pill rows).
• Does not resemble the in-app InvoiceDocument.tsx (closest in the set is 3.pdf), or format.pdf / 4.pdf.

Implementation notes

Built as src/pdf/templates/cobalt/: a standalone template (tokens.ts the type roles, palette and reference distances, plan.ts the pure planner, Layout.tsx the body, cobalt.tsx the definition) on the shared blocks, the CapRule decor primitive (a grey round-capped rule with accent segments, one static Svg) and the Carbon icon paths. Measured against 8.pdf with npm run templates:compare -- cobalt-stripe (/tmp/invoice-c6a/compare-cobalt-stripe.png and -nologo.png, left reference, right ours; --numbers prints the baselines).

Matches the design (measured, A4, the 8-row sample without GST data): vendor name baseline 74.5 (reference 74.6) at x 59.5; INVOICE origin x 395.4 and baseline 87.2 (395.6 / 87.3), tracked +0.043 em with its ink ending on the right edge; the rule text baseline 117.1 and the header rule centred on y 113.8 with its sky accent at the left; "Billed to :" 173.8, the client name 195.8 and the first contact line 219.8 (173.8 / 195.9 / 219.9); "Invoice no" and the date at 174.8 / 194.0 (175.2 / 194.4); the table bar 20.76 pt tall at y 292 with its heading baseline at 304.6 (304.7), the five columns at 24.9 / 84.9 / 105.4 / 89.3 pt and rows of 17.82 pt, the first row baseline 325.7 (325.2); the price ends 31.7 pt inside its column (x 414.7, reference 414.9) and the total 3.1 pt inside the edge; Sub Total at 477.0 with its label at x 363.5 (477.0 / 363.7); the GRAND TOTAL bar 214.5 x 20.76 beside the PAYMENT METHOD bar 133.8 wide, both cobalt; the bank lines 541.0 (reference 561.8 less its second tax row); every colour is one of the design's (a test scans the sources).

Intentional deviations, and why:

• Script signature. Not reproduced (BD Script is licensed by reference). The signature slot is the user's image (up to 36 pt tall, right-aligned, 5.5 pt inside the edge) or, without one, the signatory name and designation plus "Computer-generated invoice; no signature is required."
• Header content. The tagline under the name is the supplier's GSTIN (through Slot.Gstin, in caps) and the text at the end of the rule is the PAN. A logo goes in the measured slot: a mark (at most 34.25 pt square) keeps the name and tagline beside it; a wordmark (at most 181.5 x 34.25 pt, left-anchored) replaces the name and the tagline moves under it, which makes the header 13 pt taller. With no logo the name starts at the margin. The rule row follows the header, so it is never nearer than 6 pt to it.
• Right-hand column. "Invoice no : N" and the date as in the design, plus "Due date" and "PO" lines; a red CANCELLED line on a cancelled invoice. The client's GSTIN and place of supply follow the address in the grey 10 pt lines, whose pitch is 17.5 pt (reference 19.2) so longer blocks fit.
• Table. HSN/SAC is an 8.5 pt grey sub-line under the description (no slot in the design), which makes a row 11.5 pt taller; wrapped descriptions grow the row, and the zebra fill and the 1.5 pt light-blue separators are per cell, so they grow with it. The rate's unit is /hr or a second line. TableRows gained two additive options for this template: innerRules (separators between the columns only, no outer edge and no top rule) and headAlign (the heading centred over a left-aligned column).
• Totals. "Sub Total :", Discount, Taxable Value and the CGST / SGST / IGST rows (labelled "CGST 9% :") end at the label column's right edge (x 417.4 of the design); the amount in words and the reverse-charge line sit under the GRAND TOTAL bar, right-aligned in 9.5 pt grey. The PAYMENT METHOD bar is level with the GRAND TOTAL bar as in the design whenever the invoice still fits its page that way; with a longer stack (a GST invoice has up to five rows against the design's two) it moves up beside the first row, which gives back up to the stack's height (104 pt for five rows), and the bank lines follow it.
• Closing. The divider, "Thank you for business with us!" and the terms (the notes; taller than 110 pt they flow as a block of their own before the closing) at the left, the signature at the right, then the icon footer: the footer rule with accents at both ends, and phone, e-mail and address with Carbon icons (26 pt boxes, sky). The footer is part of the closing block, so it is on the last page only, not on every page, and everything in it is audited. The contacts keep their natural width at 32.5 pt apart; when they do not fit, the address wraps into what is left and the phone and e-mail shrink only if the address would get under 120 pt.
• Elastic gaps (Letter, and A4 when a one-page invoice overflows by less than the slack): header to client (42 to 26 pt), client to table (30.5 to 16), last row to the totals (9.8 to 4), thank-you to terms (26 to 14) and terms to the footer rule (16 to 8). Type is never scaled.
• Margins. 54.2 pt at the top (the INVOICE line box starts there so its baseline lands at 87.2), 59.55 at the sides and 35.5 plus the 24 pt footer reserve at the foot, which puts the icons' bottom 59.5 pt above the page foot as in the design.