Greenfield per-brand marketing for the family-office brand. ONE design family intended to serve BOTH www.BOCapital.xyz AND www.TerraMareCapital.com (both consume the shared family-office brand; ES primary). Directions stage — a gallery for JC to pick. Not a restyle of the live sites. 2026-06-08.
Open index.html to compare all three on real B&O Capital ES sections (hero · filosofía · tres pilares · marco de gestión · acceso para inversores calificados).
private banking and qualified investors. Voice: capital strategy — multi-asset (real estate, private equity, alternatives), institutional governance, qualified-investor gating, SMV regulatory framing. Dark navy + gold today.
portfolio of luxury coastal rental apartments (Coco del Mar, Buenaventura, Playa Caracol). Voice: real-asset / hospitality — coastal lifestyle, "where the city meets the sea," property portfolio, premium guest experience.
The shared challenge: one visual family that reads institutional + discreet for B&O's qualified-investor audience while flexing warm + coastal-premium for TerraMare's guest audience — without a separate design per site.
Solera — for a private fund speaking to family offices, Solera is the most credible default: the canonical navy + gold brand executed at private-bank grade, with the most reusable cross-site mark. Meridiano is the distinctive differentiator (light prospectus register that stands apart from every dark fund site). Litoral is the boldest, purpose-built cross-brand statement (teal coastal counter-signal so ONE family serves both sites). All three inherit the family-office tokens (navy #0a1628 + gold #d4a853), are WCAG-AA verified, and reduced-motion-guarded.
solera.html — ⭐ suggestedRefs: Brevan Howard / private-bank class · Addepar. Type: Cormorant Garamond × Inter × IBM Plex Mono.
Solera is the canonical family-office palette (navy + gold) executed at the standard of a private bank rather than a template. It keeps the existing brand promise — institutional, discreet, dollar-denominated Panama — but replaces decorative serif-everywhere with a disciplined system: Cormorant Garamond reserved for headings and figures, Inter for body, IBM Plex Mono for the technical register (eyebrows, captions, regulatory ticks). The hero emblem (concentric gold rings + a slow-orbiting tick) is an ownable mark that works as a favicon, watermark, B&O seal and a TerraMare crest alike. One gold accent, earned on the CTA, the emblem core and section rules; nothing else glows. The safest, most-credible default.
meridiano.htmlRefs: Addepar · Stripe (institutional register) · printed prospectus. Type: Cormorant Garamond × Inter × IBM Plex Mono.
Meridiano inverts the default. Instead of a dark fund site it presents a calm ivory document — the digital register of a private-bank prospectus. Deep-navy ink on warm paper maximises legibility for dense investment copy; the gold is darkened to #a67c1f so it clears AA on the light ground and reads as ink-on-paper rather than neon. The materiality is earned through real institutional artefacts: a target-allocation report panel (animated bars), a numbered governance ledger, and a dark-navy inset band for jurisdiction figures that gives rhythm without dimming the page. The distinctive differentiator — premium, trustworthy, unmistakably not a SaaS dark theme — while still inheriting the exact family-office navy + gold tokens.
litoral.htmlRefs: Man Group / Brevan Howard (dark + single accent) · coastal real-asset funds. Type: Fraunces × Inter × IBM Plex Mono.
Litoral is the only direction designed from the start to serve both sites as one family. It keeps gold as the institutional primary (CTA, emblem, brand) but introduces a single restrained teal — the colour of the Pacific — as the secondary signal (eyebrows, focus rings, the live "en gestión" pulse, the tide divider). On B&O it reads as capital strategy anchored in Panama's coastal economy; swap the copy and shift the palette weighting and the same system becomes TerraMare's luxury-coastal voice without a re-design. The coastal-horizon hero panel (a portfolio value-curve rising over an animated tide line) and the Fraunces serif give it a slightly warmer character than Solera while staying unmistakably institutional. The boldest, most ownable cross-brand statement.
Whichever direction wins becomes the family-office look for both consumers. Mapping notes:
| Family element (built on B&O canvas) | B&O Capital | TerraMare Capital |
|---|---|---|
| Hero (eyebrow · serif headline · lead · dual CTA · metric row) | Capital estratégico / Retornos sostenibles + value-proposition metrics | "Vida de Lujo en Panamá" + locations row (Coco del Mar · Buenaventura · Playa Caracol) |
| Right-hand hero art | Emblem (Solera) / allocation report (Meridiano) / value-curve horizon (Litoral) | Property hero image or the same horizon/emblem motif as a crest |
| Three pillar cards (I/II/III) | Bienes raíces · Capital privado · Activos alternativos | The three properties: Dovle Cincuentenario · Puntarena · Playa Escondida |
| Philosophy + side panel | "Disciplina. Diversificación. Desempeño." + governance ledger | "Donde la Ciudad Encuentra el Mar" + the four about-stats |
| Metric strip | Comité / Auditoría / Reporte (governance) | Locations / Beach & City / Premium / Stays |
| Qualified-investor CTA | "Solicitar información" + FIP qualified-investor notice | "Reserva Tu Estadía" + Private-Interest-Foundation legal note |
| Footer legal block | FIP / SMV disclaimer | Foundation / no-securities-offer disclaimer |
The token base (navy + gold) and the type pairing carry across unchanged; only the accent weighting flexes per site — most explicit in Litoral, where gold leads for B&O and the teal coastal signal leads for TerraMare. Solera and Meridiano apply to TerraMare by swapping copy + hero art only (no token change).
Google CSS2 CDN for preview convenience only; the shipped Astro sites self-host the chosen pairing per the AS5 anti-slop rule (tools/fetch-<brand>-fonts.py → public/fonts/*.woff2).
animation in @media (prefers-reduced-motion: no-preference) with a reduce kill-switch.
family-office per .claude/rules/frontend-design.md (covers BOCapital.xyz + TerraMareCapital.com); tokens from @cloudingenium/design-tokens/css/family-office.css.