248.AI

Brand Design & Website

A minimalist, type-led brand design for a San Francisco AI startup — anchored in a Game of Life metaphor and expressed through a dot-based visual language that extends from logo to live, interactive web.

Client

248.AI

Industry

Artificial Intelligence

Timeline

3 weeks

Role

Brand Designer

248.AI Hero Image

Overview

248.AI is a San Francisco-based startup that builds production AI applications for enterprise customers, with deep integration into Salesforce. Their approach centers on composability — reusable AI agent building blocks that can be combined to solve complex business problems, rather than rigid point solutions.

My role was to develop the full brand expression around their existing dot-based logo: concept, visual language, color, typography, and its first major applied execution as a live website.


The Brief

Take a minimalist dot-based logo and build a brand around it that feels as intelligent and understated as the product it represents.

Minimal, Not Empty

The client wanted restraint — no heavy illustration systems, no stock imagery, no visual flourish. But minimalism without substance reads as unfinished. The brand needed a conceptual anchor strong enough to carry a quiet visual language.

Logo as Starting Point

The dot-grid wordmark was distinctive but isolated. The system around it needed to extend the logo's own logic, not contradict it.

Intelligence as a Feeling

AI brands default to dark mode, neon gradients, and techno-futurist language. The client wanted the opposite — something quieter, more confident, more literate. The brand had to signal intelligence without announcing it.


The Core Concept

The brand should behave like the product it represents.

248.AI's whole philosophy is composability — small, reusable AI agents that combine to produce systems more intelligent than the sum of their parts. The founders describe their work as building "lemonade factories" rather than selling lemonade — infrastructure that lets enterprises produce their own AI capabilities at scale.

Conway's Game of Life is the cleanest possible visual metaphor for this idea. A grid where simple, local rules produce emergent, surprising, living patterns. It's one of the most elegant illustrations of how complex intelligence emerges from simple foundations — exactly what 248.AI's product does, and exactly what their dot-grid logo visually suggests.

The logo's dot-grid wasn't just decoration — it was the substrate the Game of Life runs on. So the brand became an expression of that principle: dots as the atomic unit, arranged and rearranged to produce meaning.

The brand is literally a Game of Life. The logo is the rule set; everything else is what happens when you run it.


Brand Direction

Directions Explored

Before committing, I sketched three possible visual languages the brand could inhabit — each a different answer to "what does intelligent minimalism feel like?"

Direction A

Technical & Editorial

Monospace typography, structured grids, dense information hierarchy. A brand that reads like a well-designed research paper — all substance, no ornament. Precise, but potentially cold and inaccessible for a broad audience.

Direction B

Quiet & Literate

Clean sans-serif typography, generous whitespace, a restrained grayscale palette, and a conceptual anchor that rewards close attention. Understated by default; confident enough not to need to shout.

Direction C

Futurist & Expressive

Dark-mode aesthetics, gradients, glowing accents — the visual language typical of AI startups in this category. Familiar, attention-grabbing, but exactly the convention the client wanted to avoid.

The Decision

We landed on Direction B — Quiet & Literate. It rejected AI-category clichés without sliding into academic austerity, gave the brand room to be recognized for its substance, and made the Game of Life concept legible — a quiet brand could surprise you with an interactive hero; a loud brand would drown it out.


Exploration

Choosing Direction B was a strategic call — but the execution still had to be found. I pushed a wide range of visual routes through layout and hero studies: different relationships between headline and grid, alternate type scales, warmer vs cooler neutrals, and how aggressively the dot system should read as "tech" versus "editorial."

The studies below are a slice of that iteration — the working material that made the final site feel inevitable instead of guessed.

248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment 248.AI brand exploration study — alternate layout and hero treatment

Visual Language

The Dot System

The logo establishes the visual alphabet: dots arranged on a grid. That alphabet extends across the entire brand.

  • At logo scale, dots form the wordmark itself.
  • At hero scale, dots populate the full viewport as a live Game of Life — simple rules producing emergent patterns that evolve in real time.
  • At interface scale, dots become loading indicators, iconographic elements, and structural marks throughout the site.
  • At content scale, whitespace and grid logic echo the dot-system's underlying geometry — nothing is arbitrary, everything sits on a common substrate.

One visual element, scaling from brand mark to ambient texture. The brand feels coherent because every surface is speaking the same language.

Color System

Obsidian

#1C1B20

Graphite

#40404D

Stone

#787E8E

Mist

#B8B8C1

Canvas

#EEEEEE

A five-stop grayscale — no accent colors, no primary hue, no "brand color" in the conventional sense. The brand's meaning lives in pattern and rhythm, not color. Removing hue forces the viewer to pay attention to composition, density, and the movement of elements — the same things that make the Game of Life interesting in the first place.

The five tones also provide a precise structural hierarchy: Obsidian carries primary text and critical marks. Graphite and Stone handle secondary information. Mist and Canvas define ambient structure and rest states. Every shade has a role.

Typography

Aa
Inter
Light 300 Regular 400 Medium 500

Inter was chosen for its optical precision and neutrality. Most AI brands reach for geometric display faces (Söhne, GT America, Neue Haas) or eccentric serifs trying to signal sophistication. Inter steps back and lets the content lead — readable at any size, designed for screens, quietly opinionated in its details.

Weight usage is restrained: Light for display moments where elegance matters, Regular for body copy, Medium for emphasis. Hierarchy comes from size and color, not from weight acrobatics.


Key Design Decisions

The Game of Life as the Brand's Living Signature

Rather than a static hero image, the brand's first impression is a live Conway's Game of Life simulation — cells being born, surviving, dying, migrating across the viewport in real time. It's not decoration. It's the brand's conceptual foundation rendered literally. Visitors hovering on cells can seed new patterns, turning passive viewing into participation. The brand's first interaction is playful, intelligent, and exactly on-concept.

Grayscale as a Positioning Statement

Choosing no hue in a category drowning in gradients is itself a statement. It signals confidence — the brand doesn't need color to be interesting. It rewards attention — the viewer's eye is drawn to structure and rhythm instead of surface. And it ages well — a brand without a trendy accent color doesn't date itself.

Type-Only, No Imagery

I proposed eliminating photography and illustration entirely. AI brands that rely on stock imagery (server rooms, abstract neural networks, humanoid robots) signal exactly the wrong thing: derivativeness. By restricting the brand to typography and the dot system, every visual element becomes intentional. The brand's surface is small, but every square inch of it is earned.

Logo System as Modular Set

The logo includes full-color, two-tone, and dynamic variants. Rather than treat them as interchangeable, I assigned each a role: full-color for primary brand moments, two-tone for contexts requiring maximum contrast, and dynamic for placement over photography or colored backgrounds.


Applied Execution: Website

The website was the brand's first and primary application — where every decision had to cohere into a single, continuous experience.

The Interactive Hero

The hero is a fully-functional Conway's Game of Life running live in the browser — the same implementation powering the brand's homepage, embedded here so the concept speaks for itself.

Live Embed — Hover to Seed New Patterns

I custom-built this in JavaScript and tuned it specifically to the brand. The grid self-calculates optimal cell size and count for any viewport, so the simulation always fills the screen without breaking rhythm. Cells inherit the brand palette — born cells pick from the three mid-tone grays at random, creating subtle chromatic variation as patterns evolve. Hovering seeds new patterns (gliders, blocks, blinkers) at the cursor, turning passive viewing into participation. Generations tick at 2.4-second intervals — slow enough to be contemplative, fast enough to feel alive.

The initial cell distribution is weighted: sparse on the left to keep space for the headline, denser on the right where the simulation takes visual priority. The text sits inside the brand's own living logic, not next to it.

Key pages

248.AI homepage with live Game of Life hero and typographic headline

Homepage

248.AI technology page with structured content and restrained layout

Technology

248.AI Work With Us page showing typographic hierarchy and content sections

Work With Us

Typographic Hierarchy in Practice

Below the fold, the site runs on the restraint the brand demands. Display type uses Inter Light at large sizes. Body copy sits in Regular. Emphasis is earned through size and color, not weight. Whitespace is generous — every block of content gets room to land.


Outcome

The brand launched with the website as its first surface. The Game of Life hero became the brand's signature moment — instantly recognizable, conceptually anchored, and active in a way most brand hero sections aren't.

A Brand That Behaves Like Its Name

A company whose product builds emergent intelligence from simple rules opens every visit with the Game of Life itself — conceptual consistency all the way down.

Visual System That Scales

A brand built on three principles — dots, grayscale, restraint — that extend cleanly from the logo mark to any future surface the company needs.


Reflection

248.AI is the project where I saw most clearly how much of brand design is about restraint. The brand could have had a color, photography, or a standard AI-category look. Each of those would have made it louder and weaker. The strongest move was to take things away — hue, imagery, weight variation, visual noise — until what remained was just enough to carry the concept. A grid, some dots, a typeface, and one living idea.