Tabgrid brand kit

A practical guide to the Tabgrid visual identity.

Use the official wordmarks and icon consistently across the website, product UI, favicons, and shared materials.

Light backgrounds

The charcoal-and-green wordmark is intended for white, pale gray, or other light surfaces.

/brand/tabgrid-logo-light.png

Dark backgrounds

The light wordmark keeps its contrast on graphite surfaces. Do not recolor or add effects.

/brand/tabgrid-logo-dark.png

Core palette

Green, graphite, and generous space.

The product UI's near-black surfaces, restrained gray dividers, and vivid green action color inform the marketing site. Keep green for emphasis and actions; let neutral surfaces carry most content.

Tabgrid green: #22D852
Graphite: #0B0F12
Slate: #202A2E
Soft white: #EDF3EC

Original vector illustration of a Tabgrid catalog workbench in dark mode — Original, hand-authored vector illustration for the website hero. It is an illustration, not a screenshot of live product data.

How to use

Use the checked-in public assets directly.

In a Nuxt component

<img
  src="/brand/tabgrid-logo-light-sm.png"
  alt="Tabgrid"
  width="320"
  height="94"
>

Choose the light or dark wordmark to match its background. The -sm files are 320 px wide and suit headers, footers, and other small placements; use the full-resolution files for large or downloadable artwork. Use the icon, not a wordmark, in compact square spaces.

Favicon and touch icon

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/brand/favicon-white-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/brand/favicon-white-180.png" sizes="180x180">

These are the same favicon assets used by tabgrid-ui. The web app switches between the white mark in dark mode and the green mark in light mode; favicon.ico is the browser fallback.

The PNG wordmarks are source artwork copied from tabgrid_logo_assets. The favicon assets come directly from tabgrid-ui/public/. The catalog preview is an original illustration for this website. Keep images in public/ so they are served at their documented root-relative URLs.