xavierk/Voiced
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 3 Wiki Activity

Add per-template specifications measured from the Canva PDFs

Browse Source
This commit is contained in:
xavierk
2026-10-04 06:17:43 +05:30
parent aec24be680
commit afd07071c3
14 changed files with 2254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/08-cobalt-stripe.md
Vendored
+142
View File
@@ -0,0 +1,142 @@
# Template 8: Cobalt Stripe (`cobalt-stripe`)
Source: `templates/Modern Neutral Invoice Template/8.pdf`. All coordinates are in points from the top-left of the Canva 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 Canva, 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. Canva 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 <Svg><Path/></Svg>. 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.