One brand.
Every touchpoint.

Design consistency across the website

Clear hierarchy, controlled color, consistent components, purposeful imagery, comfortable spacing, and visible customer evidence guide the homepage and all seven service pages. Shared patterns refine the existing compositions while preserving each page family’s typography and artwork.

Original typography—including responsive sizes, weights, uppercase headings, and hero emphasis—and section compositions remain intact. Preserve connected grids, image placement, artwork, and responsive stacking. Original responsive widths remain shared with navigation, reaching 1612px on large screens. White and neutral surfaces carry the content; blue anchors the brand and yellow identifies primary actions.

See DESIGN_CONSISTENCY.md for the full implementation and acceptance rules.

Consultation forms

Consultation panels pair the original editorial copy with a white bordered form card. Blue intent tiles, visible field labels, and a yellow action provide a clear hierarchy. Paired desktop fields stack on mobile, with visible keyboard focus and compact security verification spacing.

Newsletter signup

Article pages use visible name and email labels, an explicit email consent choice, and the shared yellow action. Signup uses the confirmed provider form with double opt-in; no subscription is claimed before email confirmation.

Privacy controls

Cookie preferences use the shared paper surface, blue details and equally prominent accept/reject choices. Forms remain available when optional cookies are declined.

Colors

Change the base values in src/styles/theme.css. Related shades and component colors derive from those values automatically.

Typography

--font-heading controls headings. --font-body controls copy, navigation, buttons, and labels. Both are defined once in the theme.

Blog template

Code examples use monospace type and build-time syntax highlighting. Tables use compact 14px text, subtle row shading, and keyboard-accessible horizontal scrolling.

Article headings use the shared --text-blog-title token: 56px on desktop and 36px on mobile. Preserve the original uppercase treatment, featured-image crop, three-column article layout, takeaways, and local artwork.

Posts share one template and a validated content collection. Content changes belong in Zion; additional imported posts stay in a separate staging collection until reviewed. Archives reuse shared cards and pagination. Layouts belong in the blog components. Preview drafts with npm run dev:review. See BLOG_MIGRATION.md for importing, reviewing, and publishing.

Company pages

Resource pages share an original blue geometric hero, neutral cover cards, and white download panels. Preview forms clearly link to the existing download workflow until delivery is connected.

The region hub uses a600ms source illustration/form swap with a1second delay. Reduced motion shows the form immediately. Country portraits and comparison icons retain their original artwork.

Press assets use a750px reading column and responsive three/two-column grid. Download links serve original PNG files; optimized thumbnails are only previews.

Story and process share a750px editorial hero and narrative sections while retaining distinct timeline, illustration and process-flow layouts. Native step controls support keyboard navigation and reduced motion.

Culture and values preserve their own source layouts. Company highlight controllers select the card nearest the viewport center, with original 400ms culture and 300ms values transitions. The ETHIC color cycle takes eight seconds. All motion respects reduced-motion preferences; CSS colors use the shared theme.

Consultation and pricing

Forms share one implementation and preserve the source logo pulse with a reduced-motion fallback. Comparison tables stay within the page and scroll horizontally on small screens. Contact sections accept copy overrides without duplicating markup.

Case-study template

Case studies share source artwork, paired brand and accent panels, light section headings, and an impact grid. Original narratives and technology lists remain in typed records.

Document templates

FAQ and legal pages share a narrow reading column and semantic text rendering, while retaining their own source hero typography and artwork. FAQ questions use native links and disclosure controls.

Developer template

Technology and specialist hiring pages share a dedicated template, source illustrations, centered talent introductions, and the pale developer hero token. Content stays in typed page records; overview lists use semantic rich text.

Location template

Country pages share one template with pale yellow hero and introduction surfaces, original country artwork, and reusable consultation forms. Use the compact desktop header and stack content on mobile.

Logo

Use the supplied Trio mark. Keep its proportions, preserve clear space, and choose a contrasting background. The vector mark inherits the surrounding text color.

Shared components

Service pages use the light header variant and a shared template. Their hero headings use --text-service-hero, preserving the original responsive scale. Overview and article titles use --text-service-overview; benefits and consultation headings use --text-service-section to retain the reference hierarchy. On mobile, benefits and consultation headings use the 38px--text-service-mobile-section token. View the service page reference →

Use these components instead of creating one-off buttons, labels, or navigation styles.

Links navigate. Buttons perform actions. Keep labels specific, preserve visible keyboard focus, and avoid unnecessary motion. Section labels use a 600ms icon flip and delayed text rise; reduced motion disables these effects.

Spacing & layout

Use the shared spacing scale. Page containers use --content-width and --page-gutter. Components reflow at the documented 767px and 1024px boundaries.

Rules for every page