Work

2026

CE28: Bilingual Foreign Trade Advisory Site

DesignDevFrontendBranding

A bilingual (ES/EN) marketing site for CE28, a foreign trade advisory firm in Buenos Aires, built with Astro and bespoke CSS around a "trade instrument" visual identity, with all copy centralised in a single typed content module.

Visit site

Technologies

  • Astro 7 Static output with no UI framework; the only runtime dependency in the project.
  • TypeScript Typed content dictionary that mirrors Spanish and English structurally.
  • Bespoke CSS Design tokens and primitives in one stylesheet, no Tailwind or component library.
  • astro:assets Photography imported and processed through the Astro image pipeline.
  • Inline SVG Engraved seal medallion and country flags drawn as components, no image requests.
  • Google Fonts (Spectral, Hanken Grotesk, IBM Plex Mono) Serif display, grotesque body and monospaced form-label voice.
CE28 homepage hero with the serif headline "El comercio exterior, pensado como estrategia", a duotone port photo with the CE seal, and flags for Argentina, United States and China.

Project Overview

CE28 (ce-28.com) is a foreign trade advisory firm in CABA, Argentina, helping companies that import and export, with purchases and shipments from Miami and China as a dedicated service line. The site has to present strategic advisory with authority, in two languages, while staying deliberately light on content.

The brief carried two editorial constraints that shaped the build: the copy must stay truthful (no invented figures, clients or testimonials), and it must not rule out any branch of work the firm might take on.

Objectives

  • Strategy-led positioning - Lead with advisory (“we understand the operation, order the decision and reduce risk before the goods move”) without excluding any kind of work.
  • Two languages, one structure - Serve Spanish by default and English as a full counterpart, with a working toggle between equivalent pages.
  • A distinct identity - Move away from generic consultancy templates toward a visual language that feels like trade paperwork.
  • Truthful content only - Describe what the service is, never a track record that cannot be backed.

Project Workflow

  • Stack choice - Astro 7 with static output, no UI framework and no CSS framework. The project has a single dependency.
  • Single content module - All copy for both languages lives in src/data/content.ts, structurally mirrored, along with contact constants, offices and the route map used by the language toggle. Components never hardcode text.
  • Bilingual routing - Four pages per language (home, services, about, contact) at / and /en/, thin route files that pick a layout and a shared page component, so adding a page means adding one route and one ALT entry.
  • “Trade instrument” design system - Ink, paper, brass and oxblood-stamp palette as CSS tokens, with Spectral for display, Hanken Grotesk for body and IBM Plex Mono as the “form label” voice. A committed single look, no dark-mode toggle.
  • Photographic plates - A .plate primitive pushes every photo through the same ink and brass duotone, so stock trade photography sits inside the palette. A lighter variant is reserved for the one image carrying the CE28 mark.
  • Seal and flags - An engraved seal medallion and Argentina, United States and China flags are inline SVG components, shown in the header, hero and footer.
  • China / Miami section - A dedicated service block, reused on the home and services pages, for the purchase and shipment lines, with both office addresses (Buenos Aires and Aventura, FL) in the footer.
  • Scoped-style decision - Component styles are global on purpose, so Astro emits no data-astro-cid-* attributes and the markup stays clean, relying on unique class names.
  • Accessibility and motion - Reduced-motion media query, ARIA labels on the markets strip, and lang set per page.

Results and Impact

  • Live on a custom domain - The site is deployed and served at ce-28.com in Spanish and English.
  • Single source of truth for copy - Editing text means editing one typed file, and both languages stay structurally in sync.
  • Minimal footprint - One runtime dependency, one global stylesheet, no client-side framework, static HTML output.
  • Consistent visual identity - One duotone primitive and one token set unify photography, typography and the seal across all eight pages.
  • Content rules enforced in the codebase - The positioning and no-fabrication rules are documented in the repo’s project context, so future edits keep the same constraints.