# relationshipss production guide

Release: 12 October 2026. The live `/brand` page is the identity reference. This guide explains how to use and rebuild the files without losing the brand's typography, proportions or meaning.

## Start here

Open `website/public/brand/kit/overview.png` for the contact sheet and `identity-sheet.pdf` for the printable A4 identity reference. Download `relationshipss-brand-kit.zip` for the complete handoff. `website/public/brand/manifest.json` and the copy inside the kit list actual files, SHA-256 hashes, byte sizes, media types, raster dimensions and production status.

Use the lowercase wordmark **relationshipss** with two final s characters. In prose, use **Relationshipss**. The name, wordmark lettering, headline and core product copy remain intact. The symbol is the junction of the r, in ripples: a soft tile of equal-weight lines, the stem's verticals meeting the arm's arcs. It comes in three cuts with fewer lines as the size drops. It is one colour, one line weight, never a gradient or an illustration pretending to be a logo.

## Public description and contact

Approved one-sentence description: **Stay in touch with the people who matter, without having to remember to.** Headline: **Don't let people drift off.** Website: [relationshipss.com](https://relationshipss.com). Contact: [hello@relationshipss.com](mailto:hello@relationshipss.com). These come directly from the existing brand configuration. `press/boilerplate.txt` provides a plain-text copy for partners; it does not add launch-date, funding, customer or shipped-feature claims.

## Identity files

- `logos/mark-{ink,paper,ember,black,white}.svg` and transparent PNGs at 64, 128 and 512px.
- `logos/wordmark-{ink,paper,ember,black,white}.svg` and transparent PNGs at 600 and 1200px.
- `logos/lockup-{ink,paper,ember,black,white}.svg` and transparent PNGs at 720 and 1440px.
- `logos/mark-mid-{ink,paper,ember,black,white}.svg` and transparent PNGs at 32, 48 and 128px: the middle cut, five lines, for 24–47px.
- `logos/mark-micro-{ink,paper,ember,black,white}.svg` and transparent PNGs at 16, 24 and 64px: the small cut, four lines, for 16–23px; `logos/lockup-micro-{ink,paper,ember,black,white}.svg` and transparent PNGs at 288 and 720px.
- Production SVG text is outlined. Black and white are true single-ink production variants; ink and paper are the warm display variants. Do not place a paper/white logo on a light surface.
- Use the full mark at 48px and above, or at least 12mm in print; the middle cut at 24–47px or at least 8mm; the small cut at 16–23px or at least 5mm. The lines get fewer and heavier between cuts; nothing else changes. Full lockup minimum: 214px / 72mm (it carries the middle cut). Small lockup minimum: 144px / 45mm. Wordmark alone minimum: 120px / 32mm. Allow 8u clear space around the 32u mark (one quarter of the mark width) on every side. The wordmark remains Figtree semibold; do not recreate it with an approximate system font.

Use `system/tokens.json` and `tokens.css` for implementation values, and `system/icons/` for the existing product icons. The launch kit does not replace the meaning of those interface icons. The centre-of-picture indicator remains a product indicator; it is not the new identity symbol.

## Browser and mobile

| Touchpoint | File in `kit/` | Production note |
| --- | --- | --- |
| Browser | `icons/favicon.svg`, `favicon.ico`, `favicon-{16,32,48}.png` | ICO contains real 16/32/48px PNG frames. Tiny artwork is the micro master. |
| Apple web clip | `icons/apple-touch-icon-180.png` | Opaque square artwork, without a baked corner mask. |
| PWA | `icons/pwa-192.png`, `pwa-512.png` | Ordinary icon use is separate from maskable use. |
| PWA maskable | `icons/pwa-maskable-512.png` | Opaque background; complete symbol fits within the central radius-40% safe circle. |
| iOS | `icons/ios-app-icon-1024.png`, `ios-app-icon-dark-1024.png` | Static default/dark artwork. Import into the app's asset pipeline. A native layered Icon Composer package is not included. |
| Google Play | `icons/google-play-icon-512.png` | Square, no pre-rounded corners or external shadow. |
| Android | `icons/android-adaptive-foreground-432.png`, `android-monochrome-432.png` | Transparent 432px layers; central mark corresponds to 60dp inside a 108dp canvas. |
| Android vectors | `icons/android/res/` | Foreground/background/monochrome vector resources and v26/v33 adaptive-icon XML. Integrate with the native resource names and manifest. |
| Splash | `icons/splash-mark.png` | Transparent mark. Apply the brand paper background in the app configuration. |

Apple and Android apply their own corner masks. Do not manually round exported store icons. `icons/web-manifest.example.json` is an integration example; the application's live manifest remains the deployment source of truth.

Safe-area sources: [Android adaptive icons](https://developer.android.com/develop/ui/compose/system/icon_design_adaptive), [PWA maskable icons](https://web.dev/articles/maskable-icon), [Apple app icons](https://developer.apple.com/design/human-interface-guidelines/app-icons). Platform interfaces and display crops change; verify the upload preview on the target account before publication.

## Social, stores and email

All campaign layouts have outlined SVG masters, text-editable `-editable.svg` companions, PNG and JPEG outputs. Editable campaign sources link to the bundled `../illustrations/pond.png`; keep those folders together. Their original fonts are embedded, and are also supplied separately in `fonts/`. The illustration remains the project's original pond. Avatar/thumbnail files use the ripple symbol alone.

| File in `social/` | Pixels | Intended use |
| --- | ---: | --- |
| `opengraph-1200x630` | 1200 x 630 | Website link preview |
| `avatar-400` | 400 x 400 | Profile avatar with circular-crop clearance |
| `x-header-1500x500` | 1500 x 500 | X profile header |
| `linkedin-profile-1584x396` | 1584 x 396 | Personal LinkedIn profile cover |
| `linkedin-company-1512x256` | 1512 x 256 | LinkedIn company Page cover; distinct from a personal profile |
| `instagram-square-1080x1080` | 1080 x 1080 | Square launch post |
| `instagram-post-1080x1350` | 1080 x 1350 | Portrait launch post |
| `instagram-story-1080x1920` | 1080 x 1920 | Story; key copy kept away from the top/bottom 250px |
| `product-hunt-01-1270x760` | 1270 x 760 | Introductory campaign gallery image |
| `product-hunt-02-1270x760` | 1270 x 760 | Second gallery image explaining the daily flow |
| `product-hunt-thumbnail-240` | 240 x 240 | Product thumbnail |
| `google-play-feature-1024x500` | 1024 x 500 | Store feature campaign graphic; no fictional product screen |

The Product Hunt gallery images are campaign art, not UI screenshots. Populate any store's product-screenshot fields from the real shipped app on target devices. App-store descriptions, privacy declarations and claims require the actual release details, so they are not fabricated here.

`email/header-1200x400.jpg` is a double-density 600 x 200 CSS-pixel header. `email/signature.html` uses an email-safe table, a PNG lockup at double density, explicit alt text, ordinary links and a system-font fallback. The lockup image carries its own paper background so the ink remains legible against a dark email canvas. Replace every bracketed personal field before use. The signature image uses an absolute `relationshipss.com` URL; deploy it before sending. `signature.txt` is the plain-text counterpart. Test the final email in the actual sending clients, including dark mode and images disabled.

The earlier `website/public/brand/launch/` files were pre-existing work and remain preserved. They contain the retired dot-in-circle identity. Use this new kit for fresh publication and regenerate any film or external placements that still display the retired mark.

## Print

Print deliverables are **RGB production proofs**. They contain real vector paths and physical dimensions, but they are not certified CMYK, PDF/X, spot-colour separations or printer-approved press files. No arbitrary CMYK numbers or ICC profile have been invented.

| Print layout | Trim size | Bleed | Files |
| --- | --- | --- | --- |
| Business card | 85 x 55mm | 3mm each edge | `business-card-front/back.svg`, text-editable companions and 300dpi PNGs; two-page `business-card-duplex.pdf` |
| Letterhead A4 | 210 x 297mm | 3mm each edge | `letterhead-a4.svg`, editable SVG, PNG and PDF |
| Letterhead US Letter | 215.9 x 279.4mm | 3mm each edge | `letterhead-us-letter.svg`, editable SVG, PNG and PDF |
| Launch poster A3 | 297 x 420mm | 3mm each edge | `poster-a3.svg`, editable SVG, PNG and PDF |
| Postcard A6 | 148 x 105mm | 3mm each edge | `postcard-a6-front/back.svg`, editable companions and PNGs; two-page `postcard-a6-duplex.pdf` |
| Identity reference A4 | 210 x 297mm | None | `identity-sheet.svg`, editable SVG, PNG and PDF |

Artwork canvas includes the bleed, so an 85 x 55mm card is delivered on a 91 x 61mm page. PDF `TrimBox` is inset 3mm and `BleedBox` reaches the media edge. Keep essential information at least 5mm inside the trim; templates leave more space. Crop marks are intentionally omitted: the print provider can impose them outside the bleed. PNGs carry 300dpi metadata and are proofs, while SVG/PDF remain vector masters. Duplex PDFs are supplied front first, back second; printer imposition and duplex orientation require a provider proof.

Use the `-editable.svg` file for text changes, with the original bundled fonts installed in the editor when necessary. The embedded font data makes browser editing previews consistent, but individual design apps differ in support. Re-run the build after changing source copy, or outline fonts in the design editor before handing off. The normal `.svg` and PDF versions already contain type outlines. No system-font substitution is accepted in the production output.

Bracketed names, roles, recipient addresses, email and letter copy are visible template fields. The public domain and `hello@relationshipss.com` are taken from the project's brand configuration. No street address, person, job title or telephone number is invented.

Before press, the provider must confirm paper stock, print process, bleed, ICC profile, total ink limits and any PDF/X requirement; convert a copy to that profile and supply a colour proof. Warm paper can be achieved by stock choice or ink; choose deliberately rather than printing an unplanned cream flood. Keep the original RGB masters unchanged for digital use.

## Rights and source handoff

`fonts/` contains the unmodified Figtree and Fraunces variable font binaries and both original SIL Open Font License texts. The manifest records their exact hashes. Production lettering is shaped using HarfBuzz with kerning and outlined using fontTools: Figtree weights 400/600; Fraunces weight 400, optical size 72, SOFT 0, WONK 1. The retained wordmark is the original outlined Figtree semibold drawing.

`illustrations/` retains useful supplied PNG compositions; `source/masters/` contains the canonical identity SVGs; `source/` contains exact production scripts; `docs/` contains the audit, research and production guidance. Any `motion/` deliverable present at build time is preserved and inventoried.

`models/` contains the supporting relief of the mark as GLB, OBJ with its MTL material, and a 1600 x 1200 WebGL macro render. The original flat silhouette remains the corporate mark. Model units are metres: one brand unit is 0.01m; extrusion is 0.8 units / 8mm. These are visualisation sources, not manufacturing-certified meshes. Rebuild with `website/scripts/brand-logo-relief.mjs` in the project before repackaging.

The pond art was already in the project. Its creator, source license and release history have not been established in this session. Assets containing it are flagged `existing-project-illustration-review` in the manifest. Resolve provenance before public advertising or commercial print use. Mark-only identity, app icons and print templates do not depend on that illustration. See `LICENSES.md` for details. Logo originality is a design assessment; trademark legal clearance remains a separate process.

## Rebuild and verify

From `website/`, run:

```powershell
npm run brand:build
```

Or invoke `node scripts/brand-kit.mjs` directly. The existing workspace supplies Node `sharp` and `playwright`. Python needs `fonttools`, `uharfbuzz`, `pypdf`, `pymupdf` and `pillow`. First build downloads original font binaries/licenses from the Google Fonts source repository; subsequent builds are offline. No Google Fonts browser request is needed. The builder preserves the user's previous launch files and shared source code. To refresh documentation, sources, hashes and the archive without changing rendered assets, run `node scripts/brand-kit.mjs --package-only`.

The builder reads canonical `mark.svg`, `wordmark.svg`, `lockup.svg`, `mark-mid.svg` and `mark-micro.svg` (all generated by `website/scripts/brand-mark.mjs`), shapes all live copy, writes raster/vector assets, exports six PDFs and assigns their trim/bleed boxes. It renders every PDF page with MuPDF and rejects PDFs without vector drawing content or with embedded raster images. `print/preflight-report.json` records every page's physical boxes, vector count, font count and raster image count. Painted PDF preview PNGs accompany each PDF. This is a structural and visual proof workflow, not a PDF/X preflight certificate.

After rebuilding, inspect `overview.png` plus each PDF proof at readable scale. The inventory is calculated from the files actually on disk and the ZIP excludes itself to avoid recursive packaging. The external and internal manifest contents match. Production SVGs and PDFs should contain no live fonts; editable templates intentionally retain text. Re-check clipping, spelling, small-size legibility, circular crops, header/profile overlap and contrast whenever copy or the logo geometry changes.

The builder runs `brand-kit-verify.py` after packaging. This independently validates indexed hashes, byte sizes, raster dimensions, exact PDF trim/media dimensions, Android safe-circle alpha and XML paint, iOS PNGs without alpha, the PWA minimum safe circle, all ICO frame sizes, relative documentation links and byte agreement between the archive and on-disk assets. The verifier does not certify printer colour conversion, legal rights or platform submission acceptance.
