<brand> VisualBoston </brand>
How VisualBoston looks and sounds.
The logo, colours, type and voice at a glance, and a styleguide with every component on the site, built from the same code that runs it.
One brand
Every resource, in one place
Everything you need to work with the VisualBoston brand — the guidelines, the live design system, and the logo. Point any project here.
- Brand guidelines
The logo, colour, type and voice — the rules for using the VisualBoston brand.
Read the basics - Design system
Live tokens, type styles and every component on the site, with the real code behind them.
Open the styleguide - Logo & assets
The wordmark and mark on every band, ready to drop into a deck or a new project.
See the logo
Logo
The wordmark
The mark and VisualBoston, set as one. It takes the colour of the text around it, so it works on every band.
Colour
Ink, paper and Azure
Mostly black and white with one loud accent. The canvas colours belong to the live design board in the homepage hero.
- InkText, outlines and dark bands
- PaperLight bands and cards
- AzureThe accent: highlights, arrows and shadows on dark
- CyanThe second accent, for gradients and depth
- CanvasThe design board in the hero
- Riff pinkThe human-riff note on the design canvas
Type
Tall headings, mono everything else
- OswaldHeadingsBring us the idea.
- JetBrains MonoBody, buttons and labelsWe’ll build it.
- CaveatHandwriting on sticky notesCan we start small?
Voice
How we write
- 01VisualBoston is one word.
Always, in every case: VISUALBOSTON, visualboston. A space in it is a misspelling.
- 02Plain and direct.
Short sentences, real verbs. Say what we do and what it costs, not how innovative it is.
- 03People first, AI second.
Our designers and developers make the calls; AI makes them faster. “Designed by creatives, sped up by AI.”
Every component, live
The styleguide shows each part of the site on its own, with real content: buttons, cards, bands, the header and footer, and every homepage section down to the hero’s design canvas.
Open the styleguide