Nasrul Hazim

Posted on Aug 19

Brand Your Terminal: An Isometric ASCII Banner with a True-Color Gradient

#productivity #zsh #tutorial #terminal

TL;DR — Every new terminal I open now greets me with my company's logo in isometric ASCII art, colored with our exact brand gradient (blue #2563eb → cyan #06b6d4). It takes one Homebrew package (figlet), one small zsh script, and zero extra dependencies — the gradient is computed in pure zsh with true-color ANSI escapes. Full script below; copy, swap in your own brand name and colors, done.

Why bother?

It's a small thing, but opening a terminal that says your name in your colors makes the shell feel like home. It's also a nice touch on screen shares and conference demos — people ask about it.

I wanted three things:

Isometric ASCII art of the brand name — not the usual flat figlet look.
The actual brand gradient from our website, not "close enough" 256-color approximations.
No dependency soup — no lolcat, no Ruby, no Node. Just zsh.

Step 1: figlet with an isometric font

brew install figlet

figlet ships four isometric fonts (isometric1 through isometric4), each extruding the letters in a different direction. Try them all with your text and pick the perspective you like:

for f in isometric1 isometric2 isometric3 isometric4; do
  echo "=== $f ==="
  figlet -f $f -w 120 "DEVHUB"
done

One gotcha: figlet wraps at 80 columns by default, which splits your word into two stacked blocks. Pass -w 100 (or wider) to keep it on one row.

Step 2: the gradient, in pure zsh

Modern terminals support 24-bit color with the escape sequence \e[38;2;R;G;Bm. So a gradient is just linear interpolation between two RGB endpoints across the lines of the art:

r = from_r + (to_r - from_r) * (i - 1) / (total - 1)

I pulled the exact endpoints from our website's Tailwind classes (from-blue-600 to-cyan-500):

#2563eb → (37, 99, 235)
#06b6d4 → (6, 182, 212)

The art gets a vertical gradient (top blue, bottom cyan), and the wordmark line under it gets a horizontal one, per character. The tagline is dimmed italic so it doesn't compete with the art.

Step 3: the script

Save this as ~/.config/devhub/banner.sh:

#!/bin/zsh
# Isometric terminal banner with a true-color gradient
# blue-600 (#2563eb) -> cyan-500 (#06b6d4)

command -v figlet >/dev/null 2>&1 || return 0

# Brand gradient endpoints (RGB)
local -a from to
from=(37 99 235)   # #2563eb
to=(6 182 212)     # #06b6d4

local -a lines
local i r g b
lines=("${(@f)$(figlet -f isometric3 -w 100 "DEVHUB")}")
local total=${#lines}

# Vertical gradient over the art (top -> bottom)
for (( i = 1; i <= total; i++ )); do
  r=$(( from[1] + ( (to[1] - from[1]) * (i - 1) ) / (total - 1) ))
  g=$(( from[2] + ( (to[2] - from[2]) * (i - 1) ) / (total - 1) ))
  b=$(( from[3] + ( (to[3] - from[3]) * (i - 1) ) / (total - 1) ))
  printf '  \e[38;2;%d;%d;%dm%s\e[0m\n' $r $g $b "${lines[i]}"
done

# Wordmark + tagline, horizontal gradient per character
local tagline="Empowering Businesses Through Technology"
local wordmark="D E V E L O P E R S   H U B"

_banner_hgrad() {
  local text="$1" n=${#1} j ch
  printf '  '
  for (( j = 1; j <= n; j++ )); do
    ch="${text[j]}"
    r=$(( from[1] + ( (to[1] - from[1]) * (j - 1) ) / (n - 1) ))
    g=$(( from[2] + ( (to[2] - from[2]) * (j - 1) ) / (n - 1) ))
    b=$(( from[3] + ( (to[3] - from[3]) * (j - 1) ) / (n - 1) ))
    printf '\e[38;2;%d;%d;%dm%s' $r $g $b "$ch"
  done
  printf '\e[0m\n'
}

printf '\n'
_banner_hgrad "$wordmark"
printf '  \e[2;3;38;2;148;163;184m%s\e[0m\n\n' "$tagline"

unfunction _banner_hgrad

Step 4: hook it into your shell

Append to ~/.zshrc:

# Terminal banner
if [[ -o interactive ]] && [[ -t 1 ]]; then
  source "$HOME/.config/devhub/banner.sh"
fi

The two guards matter: [[ -o interactive ]] skips scripts, and [[ -t 1 ]] skips anything without a real TTY — so scp, IDE background shells, and piped commands never see the banner.

Gotchas I hit along the way

figlet's 80-column wrap splits your word in two. Fix with -w 100.
zsh's local prints values on re-declaration. Declaring local i r g b twice in the same sourced script made zsh print i=12 on every shell startup. Declare once.
Pick your perspective. isometric1 reads like you're looking at the letters from below; isometric3 is its mirror and reads like the text is tilting up toward you. Taste thing — render all four and choose.

Result

Every new tab: the logo in brand colors, the full name in a horizontal gradient, and the tagline in quiet italics. Costs a few milliseconds of shell startup and zero dependencies beyond figlet.

Swap in your own name, your own two hex colors, and you've got a branded terminal in five minutes.

DEV Community