Welcome to
our brand.
This manual documents how Swanmakers looks, sounds and behaves — for the two of us, and for anyone we bring in to help tell a client's story. Everything here is drawn directly from the live site and its tokens; nothing is aspirational.
Section 01
Who We Are
Who we are
A collective of experienced designers, strategists, engineers and ex-VC operators.
Swanmakers is not a single company. We are an informal collective of independent, senior brand and communications practitioners — currently Giulia Piu and Chris Verbick, based in Cagliari, Italy. Each of us operates independently; client mandates are contracted directly with the member managing them.
We help venture funds, private equity firms and family offices evolve into the most elegant, credible and magnetic version of themselves. Built by people who have sat inside the venture ecosystem, not just observed it from an agency desk.
What we do
Branding & brand refresh
Identity systems, wordmarks, voice, naming. For a first close or the next fund.
Websites
The front door of your brand: your portfolio, your thesis. A full design-to-development process, from wireframes to live sites.
Pitch decks
LP and GP-facing decks. Building the narrative, crafting the page-by-page, landing in the data room.
Impact reports
ESG and impact reporting that earns the read: editorial discipline, not a compliance exercise.
Financial reports
Annual reports, quarterly reports. Designing and publishing the communication that lands on the LP's desk.
Who we work with
Venture Capital
Early- and growth-stage funds raising on a sharpened thesis, refreshing for a new vintage, or going through a step-change in the institution.
Private Equity
Mid-market and platform firms whose institutional surface needs to match the scale and discipline of the capital under management.
Family Offices
Single- and multi-family offices building a deliberate public voice for direct deals, philanthropy, or the next generation of stewardship.
Section 02
Story & Manifesto
Where the name comes from
Outstanding perception is engineered.
Swans are symbols of elegance and quiet power. We chose the swan because it mirrors what every ambitious company eventually needs: transformation.
Your team evolved. Your ambition evolved. Your market evolved. Your product evolved. But your brand stayed behind.
Swanmakers crafts a new version of your brand today that reflects the scale and value of what you've already built.
The philosophy
Great design makes the world pay attention.
We work with established funds, founders and purpose-driven companies whose visual and digital footprint no longer reflects the quality of their work. We don't invent your edge — we reveal it. That's the work we love most: revealing the value already there, and helping the world see it too.
We're always looking for ambitious projects where branding, storytelling and design can elevate how a company is seen, and help the world pay attention to what deserves it.
Section 03
Voice & Tone
How we sound
Confident. Understated. Specific.
That's the stated policy, not a stylistic preference: no SaaS hype language, anywhere. We write for people who already sit across from hype all day — LPs, founders, operators — and can smell it instantly.
We address the reader directly, in second person. We choose verbs that do the work (reveal, engineer, command, evolve) over adjectives that just assert it. And most sections close on a short, declarative sentence after a longer one that set it up.
| Attribute | What it means | Do | Don't |
|---|---|---|---|
| Second person, direct | We speak to "your fund," "your brand" — never an abstract market. | "Your fund evolved. Your brand should too." | ✕ Third-person case-study voice: "clients," "users," "stakeholders." |
| Verbs over adjectives | Reveal, engineer, command, evolve — action carries the claim, not decoration. | “We don't invent your edge, we reveal it.” | ✕ "World-class," "cutting-edge," "innovative solutions." |
| Short sentences land it | A longer, explanatory sentence, then a short one that closes it. | "But your brand stayed behind." | ✕ Hedged, qualifier-stacked closings that trail off. |
| Specific over generic | Name the actual stakeholder — the LP, the founder, the competitor. | Every touchpoint is tuned to the stakeholder: the LP, the founder, the competitor. | ✕ "Diverse audiences," "various stakeholders." |
| No SaaS hype | Confident, understated, specific — stated policy, not just a preference. | "We craft brands worthy of the businesses behind them." | ✕ "Supercharge," "unlock," "game-changing," exclamation points. |
Section 04
The Logo
One swan, one lockup
Never re-typeset. Never redrawn.
The primary lockup is a live construction, not a flattened image: the swan mark (/logo-swan.svg) sits beside "SWANMAKERS" set in real Strawford Bold text, sized off one variable — --logo-w — so type stays sharp and accessible at every size.
A combined master file (/logo.svg) exists for contexts where live text isn't possible: partner decks, avatars, exports. A single-tone icon variant (/favicon.svg) exists for small, square contexts — browser tabs, app icons — where the mark's two-tone linework would turn to mud.
Size & spacing
In production the lockup is fluid: clamp(115.2px, 9.22vw, 207.4px). It never renders below 115px wide in the header — below that, the wordmark stops being legible at any weight. Above 207px (a cover, a deck, this manual), scale up freely, keeping the ratios below fixed.
Keep clear space equal to one wordmark cap-height on every side. No rule, card edge, or text should enter that zone. Never rebuild the lockup from scratch — every dimension below is that geometry divided by the lockup's own width.
What not to do
Section 05
Colour
Three neutrals, one accent
Colour is chosen by role, never by hex.
Every colour has a semantic role — page, text, surface, accent, border — and lives as a CSS custom property in src/styles/global.css. Tints are opacity steps over Ink or over white, never separate hex values: --color-text-muted is black at 50%, --color-text-subtle is black at 70%, and so on.
The accent went through a real process before it was chosen — a dozen-plus candidates, each traced to something in Swanmakers' own world, are kept on record rather than deleted (see § 11).
How the page actually breathes
The real page alternates light and dark bands in sequence — not a percentage split, a literal rhythm. Reading down the homepage:
Never run two dark or two identical bands back to back — the alternation is what makes the accent land when it appears.
Section 06
Typography
The typeface
Strawford does everything — that's the point.
Strawford is the single brand typeface, self-hosted, carrying every role from a 115px hero to a 12px label. One family across all sizes is deliberate: the brand's presence comes from scale, tracking and colour — the type itself stays quiet.
Body copy runs deliberately Light (300), not Regular — a considered contrast against the heavier, tightly-tracked headings. Headings run Semibold/Bold; eyebrows and CTAs run Semibold or Bold, always uppercase and tracked.
Aa Bb Gg
The size scale
Named steps, not raw pixels — every component references the token. Sizes below step from mobile to the 768px breakpoint; there is deliberately no tablet or large-desktop tier.
Tracking & leading
Tracking: --tracking-section 0.3em (eyebrows), --tracking-nav 0.25em (nav, tagline), --tracking-hero 0.2em (buttons), --tracking-label 0.1em (form labels), --tracking-heading −0.02em (all headings, tightened).
Leading: --leading-display 0.9 (hero), --leading-headline 0.95 (section headings), --leading-relaxed 1.625 (body copy). Tight above, generous below — never in between.
The hierarchy recipe
Nearly every section on the site is built from the same three moves, in order:
Our Work
Brands built to be looked at twice.
We help venture funds evolve into the most elegant, credible and magnetic version of themselves.
1 · Eyebrow. Small, Semibold, uppercase, 0.3em tracking, Upping Red on light bands, same red on dark.
2 · Heading. Semibold Strawford at the size the band deserves, 0.95 leading, −0.02em tracking. 3 · Body. Light weight, 1.625 leading, measure under ~46 characters.
Section 07
Structural System
Borders, radius, rhythm
Sharp corners everywhere. Round is earned.
Radius is deliberately binary: fully round (--radius-full) for anything interactive and small — buttons, pills, tags, calendar days — or fully square for everything else. Content cards, service tiles and work cards stay sharp on purpose; only the booking card and calendar soften to --radius-lg because they're a utility tool, not a brand statement.
A single 1px black border (--border) is the universal divider — between sections, around cards, under inputs. There is no second border colour or width; contrast comes from opacity (12–20% black) when a hairline needs to be quieter.
The numbered row
One content pattern repeats verbatim across Services, Audience and Work: a tracked index number, a name, a one-line description, separated by hairline rules. Codify it once here rather than reinventing it per section.
Index row
Number in muted Ink, name in Semibold, description in Light — the same three-part rhythm, every time it appears.
Section 08
Motion
Functional, not decorative
Quiet by default. One deliberate exception.
Almost everything on the site is motion-still: sections appear instantly on load, and the only animation is a 150–250ms hover transition on buttons, links and form fields (--transition-btn, --transition-input). No page-load choreography, no ambient loops.
Our Work is the one deliberate exception: cards fade up and rise 40px on scroll via IntersectionObserver, and the two columns drift against each other in a gentle two-speed parallax tied to scroll position. It exists because entrance is part of that section's storytelling — not because motion is the house style.
Buttons scale 1.02× and swap fill/border colour. Applies to every .btn and link on the site.
Work cards only: opacity 0→1, translateY 40px→0, triggered once on scroll intersection.
Work cards drift a fraction of their distance from viewport centre — opposite signs per column.
Section 09
Photography
Real people, real marks
No stock. Not once, not yet, not ever.
Every photograph on the site today is a real headshot of an actual member of the collective. As we add more photography — process shots, events — it has to clear the same bar: real, specific, ours.
Team portraits render in grayscale by default, easing to full colour on hover over 0.5s. It's a literal enactment of the brand's own story — dormant and monochrome until activated — not just a stylistic filter.
Partner marks on dark cards
Client logos arrive in mixed formats and original colours (SVG, PNG, black, full-colour). On the dark Our Work cards, every one of them runs through a single filter recipe so they read as one consistent system rather than a patchwork:
filter: brightness(0) invert(0.96) sepia(0.06);
Section 10
In Practice
Component specimens
The recipes, assembled and live.
Every specimen below is a real component already on the site, not a mockup. If new work can't be assembled from these parts, question the new work before questioning the parts.
Swanmakers
The next era of your fund deserves a better story.
We craft brands worthy of the businesses behind them.
Section 11
Assets & Stewardship
Where everything lives
Single sources of truth.
Master files live in this repository. Code is the source of truth — if a value in this manual ever disagrees with global.css, the code wins and this page gets fixed.
| Asset | Location | Notes |
|---|---|---|
| Colour & type tokens | src/styles/global.css | CSS custom properties under :root. The single source of truth — if this manual ever disagrees with the tokens, the tokens win. |
| Wordmark + swan lockup | public/logo.svg | Combined master file: swan mark and "SWANMAKERS" wordmark as static vector paths. Use where live text isn’t possible — exports, avatars, partner decks. |
| Swan mark only | public/logo-swan.svg | The two-tone mark alone, as rendered live in the header lockup alongside real Strawford text. |
| Icon / favicon mark | public/favicon.svg | Single-tone white swan on black, built for square, small contexts — browser tabs, app icons. |
| Strawford (full family) | public/fonts/strawford/ | Self-hosted woff2/woff. Thin 100 – Black 900, roman + italic. @font-face declared in global.css. |
| Team photography | public/team/*.jpg | Real headshots only. Rendered through the grayscale-to-colour treatment in TeamSection.astro. |
| Brand work marks | public/brands/<brand>/ | Client logos shown in Our Work, normalised through one filter recipe (§ 09). |
| Accent colour rationale | src/pages/accent-preview.astro | Internal, noindex. The full set of candidates considered before Upping Red — kept as a record, not deleted. |
| Booking emails | worker/src/email.ts | The brand in production: black header band, cream body, Upping Red eyebrow, tracked uppercase CTA — sent on every booking. |
| Legal & Privacy | src/pages/legal-privacy.astro | Plain-English summary before the statutory text — the voice holds even in compliance copy. |
| This manual | src/pages/brand-manual.astro | Linked from the site footer, next to Legal & Privacy. |
When the rules run out
New surface, weird constraint, a client asking for "just a small tweak"? Don't improvise solo — check with each other first. Two people can drift into two brands faster than a whole department can. This manual is what keeps Swanmakers looking like one thing.