Branding
Web Design
Frontend
AI

Arsenal AI Branding & Public Website

A launched brand expressed through a public web system connecting identity, editorial communication, reusable interface patterns, and frontend implementation.

Timeframe: Dec 2025–present
Role: UX Design Engineer
Contribution: Owned end-to-end brand and public-site design, defined reusable visual and interface systems, and implemented most of the UI in the frontend codebase.

Chapter 01 Public destination

Give an early-stage AI company a public identity that works as a product surface.

Arsenal AI needed more than a mark. The public experience had to explain the company, separate venture-studio and consulting paths, support editorial publishing, and still feel like one brand.

As UX Design Engineer, I owned the end-to-end brand and public-site design, defined reusable visual and interface systems, and implemented most of the frontend UI.

The homepage also names the venture studio's founding-cohort companies it has built alongside its consulting practice.

Arsenal AI public homepage hero reading 'We build with you. For founders and enterprises.' — The redesigned public homepage hero, captured August 28, 2026.

Arsenal AI's founding-cohort grid listing four venture-studio portfolio companies — The homepage's founding-cohort grid, naming the venture-studio companies Arsenal AI has built with.

Chapter 02 Identity anchor

The wordmark set up a restrained system instead of a loud startup skin.

The visible identity uses a black foundation, warm whites, and Vegas gold accents. That choice gave the site enough recognition without turning every surface into a decorative brand moment.

The logo, section labels, CTA states, card borders, and muted body copy repeat across the visitor-facing site. The useful output is a brand grammar that can be reused by the interface.

The public site uses a compact system: dark surfaces, Vegas gold accents, light editorial pages, and repeated interface rules.

Chapter 03 Surface map

The system had to hold together several public jobs.

The site spans a homepage, blog, careers, consulting, contact, privacy, and cookie-policy pages. These pages ask different things of the brand: fast positioning, long-form explanation, service selection, hiring, and operational trust.

That scope shaped the design problem. A single hero treatment would not be enough; the system needed route-level consistency, reusable navigation, shared footer behavior, and enough tonal range for both marketing and editorial content. The consulting page here runs the same navigation, card, and tag patterns as the rest of the site to sell a service instead of explain one.

Reconstruction mapping Arsenal AI public surfaces across home, editorial, consulting, careers, policy, and contact routes — The brand had to work across homepage, editorial, consulting, careers, contact, and policy surfaces.

Arsenal AI consulting page hero reading 'Where AI strategy becomes working software,' with a three-step value diagram — The redesigned consulting page's hero and value diagram: your team, Arsenal AI's engineers, a new capability.

Chapter 04 Homepage architecture

The homepage turns company positioning into choices.

The hero introduces the core offer, then immediately splits visitors into service paths. Venture studio services and consulting services are not buried in a long page; they become two large navigational cards with concrete rows underneath.

Further down, the venture-studio section breaks that offer into phases, each pairing third-party tools with Arsenal AI's own accelerators — the same navigational grammar carried one level deeper.

Reconstruction of the homepage service architecture with venture studio and consulting entry paths — The homepage separates venture-studio and consulting entry points while keeping one shared interface language.

Arsenal AI's venture-studio services section: an expandable phase accordion listing third-party tools and Arsenal AI accelerators for each step — The venture-studio services section: each phase pairs third-party tools with Arsenal AI's own accelerators in the same card grammar as the rest of the site.

Chapter 05 Responsive behavior

The mobile page keeps the same priority without shrinking the desktop.

The mobile capture keeps the identity, main offer, and primary service choices in sequence. The design does not depend on a desktop-only two-column composition to make sense.

Responsive rules stack service cards, collapse ecosystem tables, and move navigation into a mobile drawer. The result is a narrower page that keeps the same decision order as desktop.

Arsenal AI homepage at mobile width, showing the hero, bulleted offer, founder callout, and both service cards in full — The same visual system adapted to a narrow mobile viewport, through both service cards.

Reconstruction comparing Arsenal AI desktop and mobile hierarchy — Responsive behavior preserves the hierarchy while changing the layout from horizontal scanning to stacked choices.

Chapter 06 Editorial system

The brand also needed a reading mode.

The blog and editorial pages use a light paper surface, serif headlines, hairline dividers, gold emphasis, and quieter navigation. This gives long-form writing a calmer rhythm without abandoning the Arsenal identity.

The split matters because an AI company public site often has to do two things at once: orient visitors quickly and explain carefully. The editorial surface gives the brand space for argument, not only service cards.

That same visual restraint extends into the blog index: gold marks orientation and action, while spacing and type hierarchy carry most of the scanning work.

Arsenal AI editorial article page with a large serif headline, gold emphasis, author credit, and long-form layout — A visitor-facing editorial surface showing the brand extending beyond marketing modules.

Arsenal AI blog index showing a structured set of articles across design, product, and company perspectives — The launched editorial system organizing multiple content types within the same brand grammar.

Chapter 07 Design engineering

The brand decisions were implemented as reusable frontend behavior.

The codebase defines CSS variables for surfaces, gold accents, typography, radius, focus states, z-index, and reduced-motion behavior. Shared components handle navigation, mobile menus, buttons, cards, editorial layout, and route-level presentation.

The work connects design judgment to implementation. The visual system is expressed as production code that governs the public pages.

Brand decisions become CSS variables, components, routes, and public pages.