161 lines
14 KiB
Markdown
161 lines
14 KiB
Markdown
# Template 6: Serenity (`serenity`)
|
||
|
||
Source: `templates/reference/6.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 boutique-stationery look. A warm cream paper texture, with a giant handwritten 'invoice' running up the left edge into a long swash. A circular-text stamp logo sits top-right, and a narrow Open Sans content column has hairline rules.
|
||
|
||
## Fonts
|
||
|
||
- **Open Sans Bold**, 10pt, letterSpacing 1pt (0.1em): 'ISSUED TO:', 'INVOICE NO:' and its value, the table header 'DESCRIPTION/UNIT PRICE/QTY/TOTAL', 'SUBTOTAL' and its value, 'TOTAL' and its value, 'BANK DETAILS', 'THANK YOU'.
|
||
- **Open Sans Medium**, 10pt, letterSpacing 1pt: client lines and bank lines.
|
||
- **Open Sans Regular**, 10pt, letterSpacing 1pt: DATE/DUE DATE labels and values, the table body, and 'Tax' with its rate. Line pitch 13.5 (lineHeight 1.35).
|
||
- **SimpleSerenityScript**, 279.48pt: the lowercase 'invoice', rotated 90° counter-clockwise. A reference-licensed decorative script; ascent 767, descent -454 per 1000.
|
||
- **Poppins Regular**, 7.98pt, uppercase, tracked about 0.17em: the circular stamp text 'DESIGN BY NATALIE • DESIGN BY NATALIE •'.
|
||
- **Montserrat Regular**, 16.61pt: the stamp's centre letter 'N'.
|
||
- **No signature font:** the signature is vector artwork.
|
||
- **Bundling:**
|
||
- Open Sans, Poppins and Montserrat are OFL. Bundle Open Sans 400/500/700; Poppins and Montserrat only if the stamp is recreated.
|
||
- SimpleSerenityScript can't be redistributed. Ship the 'invoice' lettering as an SVG asset (outlines), or reset it in an OFL script such as Ms Madi, Allison or Great Vibes.
|
||
|
||
## Colours
|
||
|
||
- **Ink:** text, rules, the script word, the flourish, the stamp and the signature are all #3D3B3A (rgb 61,59,58).
|
||
- **Background:** a full-bleed paper texture. Its measured average is #ECE8E1 (sRGB about 236,232,225), from decoding the JPEG's DC coefficients (Y 232.4 / Cb 123.9 / Cr 130.7).
|
||
- The grain is only in brightness: 8x8 block means range Y 228-236, with darker fibres down to about 203.
|
||
- No gradient or vignette: 12 page regions match within ±1.
|
||
- The image dictionary says /ColorTransform 0, but that is a producer quirk; the data is YCbCr. The ICC profile is a 536-byte Google/Skia profile, close to sRGB.
|
||
- **Page fill:** #FFFFFF underneath, fully covered.
|
||
|
||
## Layout
|
||
|
||
Page is 595.5x842.25. Two zones:
|
||
- A decorative band on the left (x about 55-155).
|
||
- A content column: rules x 162.91-531.39 (368.5pt); text from x 171.8 to a right edge of 524.7; money right edge 519.9.
|
||
Implied margins: left 162.9 (rules) / 171.8 (text); right 64.1 / 70.8; top about 128 (stamp); bottom about 59.
|
||
1. **Background:** the texture covers the page; the image bleeds to x -9.2..604.5, y -72.8..915.3.
|
||
2. **Left band:** script 'invoice' rotated 90° counter-clockwise, reading bottom to top.
|
||
- Baseline at about x 150, tilted 1.1°. The first glyph is at y 771.7; the last glyph ends at y about 409.8. Ink extends left to x about 60.
|
||
- A swash flourish continues upward from y about 411 to y about 142.5 (x 56-82).
|
||
- Band bounding box about x 55-155, y 142-772.
|
||
3. **Stamp**, top-right: centre (485.5, 172.7), bounding box about x 441-531, y 128-218.
|
||
- Ring text on radius 35.3pt (to the glyph baselines). Letters are upright at the top and read clockwise.
|
||
- Two round dots of 1.96pt diameter at (454.0,194.1) and (516.3,151.2) separate the two repeats.
|
||
- Inner ring: 30.9pt diameter, 0.75pt line, at (486.0,172.4).
|
||
- 'N' at baseline 178.53, x 478.8-492.3.
|
||
4. **Empty space**, y 218-313.
|
||
5. **Info row**, first baseline about 320.3/321.0.
|
||
- Left: 'ISSUED TO:' at x 172.0, baseline 320.29, plus Medium lines at 336.25 / 349.76 / 363.26.
|
||
- Right, meta block. Labels right-aligned at about 451.8: 'INVOICE NO:' 379.0-451.7, 'DATE:' 420.5-451.8, 'DUE DATE:' 394.1-452.0. Values right-aligned at 524.7: '01234' 492.1-524.7, dates 464.8-524.8. Baselines 321.04 / 335.75 / 350.47.
|
||
6. **Table:** header baseline 443.63; rule at y 456.09; rows at baseline 479.94 + n × 25.09 (5 rows, last at 580.32); closing rule at y 597.20.
|
||
7. **Totals:**
|
||
- SUBTOTAL at 616.33: label x 173.8, value right-aligned at 519.9.
|
||
- Tax at 636.86: label right-aligned at 465.9.
|
||
- TOTAL at 653.54.
|
||
8. **Empty space**, y 654-730.
|
||
9. **Bottom row**, baseline 736.98.
|
||
- Left: 'BANK DETAILS' at x 182.7, an 11pt inset from the column, plus Medium lines at 753.24 / 766.74 / 780.25.
|
||
- Right: 'THANK YOU' right-aligned at 532.4 (x 464.9-532.4), with the drawn signature below it (x 441.9-542.7, y 749.8-783.0).
|
||
10. About 59pt empty at the bottom.
|
||
|
||
## Items table
|
||
|
||
- **Columns:**
|
||
- DESCRIPTION: left at x 171.8 for both header and cells. It is only about 160pt wide (171.8 to about 335).
|
||
- UNIT PRICE: centred on 370.4 (header 338.1-402.6; cell '100' 360.8-379.9).
|
||
- QTY: centred on 441.8 (header 430.8-452.8).
|
||
- TOTAL: right-aligned; header right edge 524.8, cells right edge 519.9.
|
||
- **Header:** Open Sans Bold 10pt, caps, letterSpacing 1pt, no fill. A single 0.75pt #3D3B3A rule 12.5pt below (y 456.09), x 162.91-531.39.
|
||
- **Body:** Open Sans Regular 10pt, letterSpacing 1pt. The sample text is lowercase, but that is content, not a style rule.
|
||
- First baseline is 23.85pt below the rule.
|
||
- Pitch is 25.09, about 5.8pt padding top and bottom.
|
||
- No dividers or zebra striping.
|
||
- A closing rule sits 16.9pt below the last baseline (y 597.20).
|
||
- **Alignment:** unit price and qty centred, amount right-aligned.
|
||
- **Suggested Voiced widths** (352.9pt text column): description flex:1 (about 149pt); rate 84 centred (centre about 363); qty 40 centred (about 425); amount 80 right. Centres stay within about 17pt of the design.
|
||
|
||
## Totals and payment
|
||
|
||
- **Totals** (no rules or boxes):
|
||
- SUBTOTAL: Bold, label x 173.8, value right-aligned at 519.9, baseline 616.33.
|
||
- 'Tax': Regular label right-aligned at 465.9, '10%' right-aligned at 519.9, baseline 636.86.
|
||
- 'TOTAL': Bold label right-aligned at 465.9, Bold value right-aligned at 519.9, baseline 653.54.
|
||
- **Payment:** a 'BANK DETAILS' block bottom-left, with bank name, Account Name and Account No. in Medium.
|
||
- **Thank-you:** 'THANK YOU' in Bold caps, right-aligned on the same baseline as 'BANK DETAILS' (736.98), with a hand-drawn signature under it.
|
||
- No notes, terms or footer.
|
||
|
||
## Decoration and images
|
||
|
||
- **Background raster:** one JPEG, 2304x1384px (DCTDecode, ICC-based RGB, 988,001 bytes, 94% of the file). Its placement matrix rotates it 90° and stretches it unevenly to 613.7x988.1pt (about 165-168 dpi), bleeding past every edge.
|
||
- Recommendation: don't ship it. Use Page backgroundColor '#ECE8E1', optionally plus a downsampled or tiled texture (at most 150 KB, objectFit cover, fixed).
|
||
- **Vertical script word:** live text (SimpleSerenityScript 279.5pt, rotated +91.1° in PDF space).
|
||
- **Flourish:** 2 filled vector paths (142 and 40 points), x 56.1-82.1, y 142.5-411.0, clipped to x -66.8..188.3 / y 142.4..411.5. They live inside Form X23 (object 16), right after 'X9 Do'.
|
||
- **Stamp:** 39 individually rotated Poppins glyphs on a circle (r 35.3), plus two 1.96pt round dots (squares clipped to circles), an inner ring (1.5pt stroke clipped inside, so 0.75pt visible) and the 'N'.
|
||
- **Signature:** 6 filled vector subpaths (Form X15), x 441.9-542.7, y 749.8-783.0.
|
||
- **Rules:** two 0.75pt rules, x 162.91-531.39, at y 456.09 and 597.20.
|
||
- **Reproducibility in react-pdf:**
|
||
- Rules, the texture colour, rotated text and SVG paths are all possible.
|
||
- Circular text is not native, since Svg has no textPath; it would need 39 absolutely positioned, rotated Text glyphs. Best to treat the stamp as the logo slot.
|
||
- The simplest faithful route for the band is one static SVG of 'invoice' plus the flourish. Convert the text to paths at implementation time (e.g. with mutool or Inkscape). viewBox about x 50-160 / y 138-776, drawn with react-pdf <Svg><Path/>.
|
||
|
||
## Mapping to Voiced fields
|
||
|
||
- **Decorative 'invoice' script:** static art, never data.
|
||
- Always add a real-text 'INVOICE' or 'TAX INVOICE' label so the document is searchable and compliant.
|
||
- Place it above the meta block: Open Sans Bold 10pt, letterSpacing 1pt, right-aligned at 524.7, baseline about 300.
|
||
- **Stamp slot** (about 90x90pt, centre 485.5/172.7): the vendor logo Image, objectFit contain. A circular vendor-name ring around it (per-glyph rotated Text) is a nice-to-have only.
|
||
- **Vendor name, address, phone, email, GSTIN, PAN: no slot.** Put a FROM block in the space between the stamp and ISSUED TO (y about 225-305).
|
||
- Right-aligned at 524.7 under the stamp, maxWidth about 250pt; or left at 171.8 if the address is long.
|
||
- Open Sans Bold name plus Medium lines.
|
||
- **ISSUED TO:** clientName, clientAddress, GSTIN (optional), Place of Supply.
|
||
- **Meta:** INVOICE NO / DATE / DUE DATE, plus an optional PO NO.
|
||
- **Table:** description; UNIT PRICE (money(rate) plus '/hr', '—' for fixed lines); QTY; TOTAL.
|
||
- **Totals:** SUBTOTAL, DISCOUNT, CGST+SGST or IGST rows with amounts, TOTAL.
|
||
- **BANK DETAILS:** bank name, Account Name, Account No., IFSC, Branch, UPI.
|
||
- **THANK YOU and drawn signature:** keep 'THANK YOU' (or 'FOR {VENDOR}'). Put the signature image under it (box about 100x40pt, right-aligned at 532); otherwise the computer-generated note at 8pt.
|
||
- **Fields with no slot:**
|
||
- Amount in words: left part of the totals block beside Tax/TOTAL (x 171.8, at most 200pt wide), or full width under TOTAL.
|
||
- Notes: full width between the totals and the bottom row.
|
||
- HSN/SAC: an 8pt sub-line under the description.
|
||
- Footer and page numbers: fixed, 7pt, at y about 818, left edge 171.8.
|
||
|
||
## Overflow risks
|
||
|
||
- **Narrowest of the three:** 352.9pt of text width, so the description column is only about 150pt (about 25 characters per line at Open Sans 10pt with 1pt tracking). Most real descriptions will wrap to 2-3 lines. Consider letterSpacing 0.5 for the body in this template.
|
||
- **ISSUED TO column:** about 200pt (171.8 to the meta block at about 379), so long client names and addresses wrap heavily.
|
||
- **Meta block:** only 146pt (379-524.7). Long invoice numbers need it to grow leftwards; cap the client column with flex:1 and a 20pt gap.
|
||
- **Totals:** only 54pt between the labels (465.9) and the money edge (519.9). Use a 90pt value column.
|
||
- **Stamp slot:** square, about 90pt, so wide wordmark logos come out tiny. Offer a 140x60 landscape box variant.
|
||
- **Bottom row:** BANK DETAILS grows to 6 lines (+40pt) next to the signature box. With many items, the bottom row (about 90pt) and the totals move to page 2.
|
||
- **Decorative band:** 630pt tall. On continuation pages it should repeat (fixed); either way the content must keep its 162.9pt left offset.
|
||
- **Hyphenation:** same as the other templates.
|
||
|
||
## US Letter adaptation
|
||
|
||
- **Width (+16.5pt):** keep the band anchored to the page's left edge (x about 55-155). The content column becomes [max(marginLeft, 162.9) … pageWidth - marginRight (about 64)], i.e. 162.9-548 on Letter (385pt, 16.5pt wider).
|
||
- **Height (-50pt):** the band (y 142-772) would end only 20pt from the Letter bottom edge. Shift it up about 32pt (to y 110-740) or scale it by 0.94. Move the stamp up to top about 96, and cut the stamp-to-ISSUED TO gap from about 95 to about 70.
|
||
- **Texture:** a background colour, or an image with objectFit 'cover', adapts automatically.
|
||
- **Configurable margins:** the band is decoration anchored to the page edge, outside the margin system. Even so, the content column's left padding must stay at least the band's right edge + 8pt (about 163), whatever the user's left margin. Right, top and bottom margins apply normally.
|
||
|
||
## react-pdf notes
|
||
|
||
- **Page style:** {backgroundColor:'#ECE8E1', paddingLeft:171.8, paddingRight:70.8, paddingTop:≈128, paddingBottom:≈60, fontFamily:['Open Sans','IBM Plex Sans'], fontSize:10, letterSpacing:1, lineHeight:1.35, color:'#3D3B3A'}. Rules use marginLeft -8.9 and marginRight -6.7 to span 162.9-531.4.
|
||
- **Optional texture:** <Image fixed src={paperTexture} style={{position:'absolute', top:0, left:0, width:'100%', height:'100%', objectFit:'cover'}}/> as the FIRST child. Absolute children are placed against the page box, ignoring padding.
|
||
- **Band:** <View fixed style={{position:'absolute', left:50, top:138, width:110, height:640}}><Svg viewBox='…'><Path d=…/></Svg></View>.
|
||
- If you reset the word in a font instead, use Text {position:'absolute', fontFamily:<OFL script>, fontSize:≈280, transform:'rotate(-90deg)', transformOrigin:'left top'}. Place it so its baseline lies on x about 150, starting at y about 772. react-pdf's rotate() is positive clockwise, so -90 reads bottom to top. Tune visually, and draw the flourish as an Svg Path.
|
||
- **Stamp → logo:** View {position:'absolute', top:128, right:64, width:90, height:90} with an Image, objectFit contain. Alternatively keep it in flow at the top of the column (alignSelf flex-end).
|
||
- **Everything else:** Monogram's components with the narrower column.
|
||
- **Bottom row:** View {flexDirection:'row', justifyContent:'space-between', alignItems:'flex-start'}, wrap={false}.
|
||
- Left: bank block, with paddingLeft 10.9 to match the design's 182.7 inset, or 0 to align with the column.
|
||
- Right: a column {alignItems:'flex-end'} holding 'THANK YOU' and the signature Image (about 100x40).
|
||
- **Print-friendly toggle:** drop the background colour and texture, since beige floods toner.
|
||
|
||
## Similarity to other templates
|
||
|
||
- **Same reference design** (ID, page 6).
|
||
- **Typography identical to 5.pdf:** Open Sans 10pt, 1pt tracking, Bold labels, Medium address lines. The table and totals spacing also matches: header to rule 12.5, rule to first row 23.85, last row to rule 16.9, rule to SUBTOTAL 19.1.
|
||
- **Same internal grid as 4 and 5, shifted right:** rules 162.91-531.39 instead of 69.64-525.86 (left edge +93.3, right edge +5.5).
|
||
- **Unique within the trio:** the paper texture, vertical script title, circular-text stamp, drawn signature, and the 'BANK DETAILS' / 'THANK YOU' bottom row.
|
||
- **No resemblance to the in-app template.**
|