215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Invoice · Sable Studio · INV-2025-0142</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f3f1ec;
|
||
--paper: #ffffff;
|
||
--ink: #15140f;
|
||
--muted: #6e6a5d;
|
||
--line: #ddd6c4;
|
||
--accent: #1f4d3a;
|
||
--accent-soft: #e3ece8;
|
||
--display: 'Iowan Old Style', 'Charter', Georgia, serif;
|
||
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
|
||
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.55; }
|
||
.sheet { max-width: 820px; margin: 32px auto; background: var(--paper); padding: 64px 72px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 60px rgba(28,27,26,0.06); }
|
||
|
||
header.brandbar { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: flex-start; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }
|
||
.brand { display: flex; align-items: center; gap: 14px; }
|
||
.brand-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; font-weight: 700; }
|
||
.brand-name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.005em; }
|
||
.brand-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
|
||
.invoice-block { text-align: right; }
|
||
.invoice-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||
.invoice-num { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; font-weight: 700; margin: 6px 0 4px; }
|
||
.invoice-dates { font-size: 13px; color: var(--muted); }
|
||
.invoice-dates strong { color: var(--ink); }
|
||
|
||
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; }
|
||
.party h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 8px; font-weight: 500; }
|
||
.party .name { font-family: var(--display); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||
.party .lines { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
|
||
.party .lines a { color: var(--accent); text-decoration: none; }
|
||
|
||
.ref-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 16px 22px; background: var(--accent-soft); border-radius: 6px; margin-bottom: 32px; }
|
||
.ref-strip .label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 4px; font-weight: 500; }
|
||
.ref-strip .value { font-size: 14px; }
|
||
|
||
table { width: 100%; border-collapse: collapse; }
|
||
thead th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; }
|
||
tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
|
||
td.desc strong { display: block; font-weight: 600; margin-bottom: 4px; }
|
||
td.desc small { display: block; color: var(--muted); font-size: 12.5px; }
|
||
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13.5px; }
|
||
th.num { text-align: right; }
|
||
|
||
.totals { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 28px; align-items: flex-start; }
|
||
.terms { font-size: 12.5px; color: var(--muted); padding: 18px 20px; background: var(--bg); border-radius: 6px; }
|
||
.terms h5 { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin: 0 0 6px; font-weight: 500; }
|
||
.totals-block { display: flex; flex-direction: column; gap: 8px; }
|
||
.total-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
|
||
.total-row.subtotal { border-top: 1px solid var(--line); padding-top: 14px; }
|
||
.total-row.discount { color: var(--accent); }
|
||
.total-row.tax { color: var(--muted); }
|
||
.total-row.grand { padding: 14px 18px; background: var(--ink); color: var(--paper); border-radius: 6px; margin-top: 6px; font-family: var(--display); font-size: 20px; font-weight: 700; align-items: center; }
|
||
|
||
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
|
||
.pay h4 { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 500; }
|
||
.pay .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
|
||
.pay .row span { font-family: var(--mono); }
|
||
|
||
.signoff { margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
|
||
.signoff p { margin: 0; font-family: var(--display); font-size: 16px; font-style: italic; color: var(--muted); }
|
||
.signature { text-align: right; }
|
||
.signature .scribble { font-family: 'Brush Script MT', 'Snell Roundhand', cursive; font-size: 28px; color: var(--accent); }
|
||
.signature .name { font-size: 12.5px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
|
||
|
||
@media print {
|
||
body { background: white; }
|
||
.sheet { box-shadow: none; border: none; margin: 0; padding: 32px 36px; }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.sheet { padding: 32px 24px; margin: 0; border-radius: 0; }
|
||
.parties, .pay, .signoff { grid-template-columns: 1fr; }
|
||
.totals { grid-template-columns: 1fr; }
|
||
.ref-strip { grid-template-columns: 1fr; }
|
||
header.brandbar { grid-template-columns: 1fr; }
|
||
.invoice-block { text-align: left; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sheet">
|
||
<header class="brandbar">
|
||
<div>
|
||
<div class="brand">
|
||
<div class="brand-mark">S</div>
|
||
<div>
|
||
<div class="brand-name">Sable Studio</div>
|
||
<div class="brand-meta">Brand & product design · est. 2018</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="invoice-block">
|
||
<div class="invoice-label">Invoice</div>
|
||
<div class="invoice-num">INV-2025-0142</div>
|
||
<div class="invoice-dates"><strong>Issued</strong> 14 October 2025 · <strong>Due</strong> 13 November 2025</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="parties">
|
||
<div class="party">
|
||
<h4>From</h4>
|
||
<div class="name">Sable Studio LLC</div>
|
||
<div class="lines">
|
||
221 Cooper Street, 4F<br>
|
||
Brooklyn, NY 11211 · USA<br>
|
||
EIN 87-1234567<br>
|
||
<a href="mailto:billing@sable.studio">billing@sable.studio</a>
|
||
</div>
|
||
</div>
|
||
<div class="party">
|
||
<h4>Bill to</h4>
|
||
<div class="name">Northwind Trading Co.</div>
|
||
<div class="lines">
|
||
Attn: Mira Okafor, CFO<br>
|
||
500 Howard Street, Floor 9<br>
|
||
San Francisco, CA 94103 · USA<br>
|
||
AP: <a href="mailto:ap@northwind.com">ap@northwind.com</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="ref-strip">
|
||
<div><div class="label">Project</div><div class="value">Northwind brand identity refresh</div></div>
|
||
<div><div class="label">PO Number</div><div class="value">NW-PO-2025-3387</div></div>
|
||
<div><div class="label">Terms</div><div class="value">Net 30 · USD</div></div>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Description</th>
|
||
<th class="num">Qty</th>
|
||
<th class="num">Rate</th>
|
||
<th class="num">Amount</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="desc"><strong>Discovery & strategy</strong><small>Stakeholder interviews, competitive audit, brand audit, written strategy doc.</small></td>
|
||
<td class="num">1</td>
|
||
<td class="num">$8,500.00</td>
|
||
<td class="num">$8,500.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="desc"><strong>Identity system design</strong><small>Wordmark, monogram, palette, typography, motion principles, two production rounds.</small></td>
|
||
<td class="num">1</td>
|
||
<td class="num">$22,000.00</td>
|
||
<td class="num">$22,000.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="desc"><strong>Brand guidelines & handoff</strong><small>Brand book PDF, Figma library, asset pack, two team handoff sessions.</small></td>
|
||
<td class="num">1</td>
|
||
<td class="num">$6,500.00</td>
|
||
<td class="num">$6,500.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="desc"><strong>Senior design hours · overage</strong><small>Additional rounds requested between 12 Sep and 28 Sep beyond the original SOW.</small></td>
|
||
<td class="num">14</td>
|
||
<td class="num">$220.00</td>
|
||
<td class="num">$3,080.00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="totals">
|
||
<div class="terms">
|
||
<h5>Payment terms</h5>
|
||
Payment is due within 30 days of issue. Late payments incur a 1.5% monthly service charge per the master services agreement signed 14 February 2025. The 10% retainer paid 12 August 2025 has been applied below.
|
||
</div>
|
||
<div class="totals-block">
|
||
<div class="total-row"><span>Subtotal</span><span>$40,080.00</span></div>
|
||
<div class="total-row discount"><span>Retainer applied (10%)</span><span>−$4,008.00</span></div>
|
||
<div class="total-row tax"><span>Sales tax · NY (9%)</span><span>$3,246.48</span></div>
|
||
<div class="total-row subtotal"><span>Net before tax</span><span>$36,072.00</span></div>
|
||
<div class="total-row grand"><span>Total due</span><span>$39,318.48</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pay">
|
||
<div>
|
||
<h4>Wire / ACH (USD)</h4>
|
||
<div class="row"><span>Bank</span><span>Mercury Bank</span></div>
|
||
<div class="row"><span>Routing (ACH)</span><span>084-001-122</span></div>
|
||
<div class="row"><span>Routing (Wire)</span><span>026-073-150</span></div>
|
||
<div class="row"><span>Account</span><span>9847-2210-3318</span></div>
|
||
<div class="row"><span>Memo</span><span>INV-2025-0142</span></div>
|
||
</div>
|
||
<div>
|
||
<h4>Online payment</h4>
|
||
<div class="row"><span>Pay link</span><span>sable.studio/p/inv-0142</span></div>
|
||
<div class="row"><span>Stripe / card / ACH</span><span>Yes</span></div>
|
||
<div class="row"><span>Wise / SEPA / FX</span><span>On request</span></div>
|
||
<div class="row"><span>Receipt</span><span>Auto-emailed</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="signoff">
|
||
<p>Thank you, Northwind. It's been a privilege to work on this rebrand.</p>
|
||
<div class="signature">
|
||
<div class="scribble">Lila Vega</div>
|
||
<div class="name">Lila Vega · Founder, Sable Studio</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|