Website Guide

The visual system, implementation choices, asset sources, and practical instructions behind the refreshed LocallyX site.

Creative direction

Familiar LocallyX, carefully rebuilt.

The refresh preserves the original information architecture and blue/green identity while giving the interface a cleaner, more dimensional finish.

The brief

Evolution instead of reinvention

Keep the recognizable light/dark color system, centered hero, client marquee, service cards, portfolio, process, reviews, pricing, contact map, booking experience, and time-driven theme. Improve hierarchy, spacing, materials, motion, and mobile behavior.

UX reference

Büro Otto, adapted—not copied

The Büro Otto example from Fable 25 was selected for its disciplined grid, numbered project index, direct studio positioning, and restrained interaction. LocallyX borrows that clarity and pacing while retaining its own blue/green palette, rounded interface, typography, content, and client imagery.

Design constitution

  • Preserve every useful route, form, filter, theme behavior, FAQ, and booking path.
  • Use LocallyX blue and green as the only expressive accents.
  • Prioritize verified client work and remove unlabeled template projects.
  • Make content visible without JavaScript and motion optional.
  • Prioritize phone layouts because much of the audience arrives from social media.
  • Do not add claims, reviews, or client outcomes that cannot be supported.

Design system

The original palette, with more depth.

Color

Blue for action. Green for growth.

The original warm off-white, ink, blue, and green remain intact. The refresh adds only transparent tints, shadows, and gradients derived from those same colors.

#fafaf7 · canvas
#15151a · ink
#1d4ed8 · action
#15795c · growth

Type & shape

Geist, refined—not replaced.

Geist and Geist Mono stay because they are already part of the brand. Larger optical scale, tighter display tracking, calmer body widths, 18–32px corner radii, and thin borders create the new hierarchy.

Signature interaction

A curtain wipe between routes.

Every internal link closes with a one-color wipe—an editorial page turn instead of a hard reload—then opens the next route the same way. Numbered section labels and portfolio indices carry the same rhythm, and each route closes with an oversized “LocallyX” wordmark as a studio-style signoff. Everything here is CSS transforms and opacity, and it disables instantly for prefers-reduced-motion.

Implementation

Static, fast, and easy to own.

Stack

No framework or build step

  • Semantic HTML for every route.
  • style.css for the base system.
  • refresh.css for the final UI layer.
  • script.js for theme, reveals, navigation, FAQs, and motion.
  • Calendly, Web3Forms, and MapLibre remain isolated to the routes that need them.

Assets

Real client-site previews

Portfolio thumbnails are screenshots of the linked client websites. Niyyah Coffee’s preview was captured from niyyahcoffee.com; its logo is the official transparent PNG served by that site. Other client logos and screenshots were already stored in the project.

Responsive & accessible

The polish does not block the content.

Interaction

  • Content remains visible when JavaScript is unavailable.
  • Reduced-motion preferences disable non-essential animation.
  • Menu controls expose expanded state and close with Escape.
  • Focus rings remain visible on links, buttons, and fields.

Responsive behavior

  • Cards and portfolio grids collapse cleanly.
  • Buttons become thumb-friendly on phones.
  • Comparison tables retain horizontal scrolling.
  • Decorative preview layers simplify on small screens.

Content editing

Everything important is plain HTML.

Common updates

  • Edit homepage content in index.html.
  • Edit plans in services.html and keep the comparison table synchronized.
  • Add portfolio cards in work.html; previews live in images/.
  • Shared visual changes belong in refresh.css.

Adding a client

Capture a 1440×960 homepage screenshot, save the official logo under images/logos/, add a linked card to work.html, and add both visible and duplicated logo entries to the homepage marquee so its animation loops without a seam.

Run & deploy

Any static host works.

Run locally

python -m http.server 8123
# open http://localhost:8123

Deploy

The repository root is the publish directory and there is no build command. The existing LocallyX hosting can continue serving the same files and routes.

# Vercel
vercel --prod

# Netlify
netlify deploy --prod --dir .