Brand Standards

Last updated: May 23, 2026

This page documents the GrokTechGadgets brand system: wordmark, colors, typography, icon family, and how each asset is used across the site, social previews, and partner contexts. It exists to keep the brand consistent across surfaces and to prevent the kind of drift catalogued in the May 2026 logo audit (four divergent brand treatments, including a typo on the home OG image).

The wordmark

The unified wordmark is a 32×32 ink tile containing the caps "GT", followed by the full brand name "GrokTechGadgets" set in JetBrains Mono SemiBold. The tile is rendered as a 4 px rounded square at 32 px scale; at smaller sizes the corner radius scales proportionally.

This is the canonical mark. It appears in the site header on every page, in the mobile navigation drawer (inverted for dark backgrounds), in social preview images, and as the basis for the icon family. There are no other approved wordmarks.

Asset files:

/assets/images/brand/gtg-logo.svg — dark on light (header default)
/assets/images/brand/gtg-logo-mono-white.svg — light on dark (mobile drawer, dark hero overlays)
/assets/images/brand/gtg-logo-mono-dark.svg — explicit dark variant (identical to gtg-logo.svg; provided for templates that distinguish the two)
/assets/images/brand/gtg-icon.svg — tile only (favicon source, badge contexts)

Colors

The brand has two primary colors. There is no secondary palette in the wordmark itself; the cyan accent is reserved for in-page UI elements (links, "is-better" cells in comparison tables, the home hero's italic emphasis).

Ink

#0a0e14 — site CSS token --gtg-ink. Used for the wordmark tile, body text, and dark surface backgrounds. This is the single source of truth; the previous #0b1b2b appearing in the PWA manifest and SVG :root color declarations has been retired.

Cream

#fbfaf7 — site CSS token --gtg-bg. Used for page background, the "GT" caps inside the wordmark tile, and the wordmark on dark surfaces.

Accent cyan (light)

#00b3c8 — site CSS token --v107-accent. Used for links, callouts, and the editorial divider. Not used in the wordmark itself.

Accent cyan (dark)

#4dd6e6 — the lifted variant used on dark backgrounds (home hero, social preview, dark callouts). Not used in the wordmark itself.

Typography

Two typefaces. Both are loaded from Google Fonts in the site head with display=swap so the visible content paints before the fonts arrive.

Newsreader — serif display face. Used for H1 page titles, the home hero headline, and the headline in OG image templates. Italic variant is the only emphasis treatment.
JetBrains Mono — monospace face. Used for the wordmark, eyebrow labels (uppercase, letterspaced 0.08–0.14em), data callouts (RTX 4060 Ti, 42 GB, $3,400–4,200), nav items, and any "engineering data" inline element.

Body copy inherits the legacy stack (Inter Tight / system-ui) from the v107 overlay. Headings always use Newsreader; eyebrows always use JetBrains Mono.

The icon family

The PNG icon family is generated from gtg-icon.svg (the tile-only variant). Sizes:

favicon-16x16.png — 16×16 (browser tab favicon, retina-aware browsers also use this at 1x)
favicon-32x32.png — 32×32 (browser tab favicon at 2x, bookmark icons)
favicon.ico — multi-resolution ICO containing 16×16 and 32×32
apple-touch-icon.png — 180×180 (iOS home-screen, Safari pinned tab)
android-chrome-192x192.png — 192×192 (Android home-screen, PWA install)
android-chrome-512x512.png — 512×512 (PWA splash, app store listings)

All six PNGs share the same "GT" tile composition. None of them contain the wordmark — the icon family is the mark-only form. When horizontal space allows a wordmark, use gtg-logo.svg instead.

Open Graph / social preview

Every page sets og:image to a 1200×630 PNG. The home page uses /images/social-preview.png; section pages use /images/og/{slug}.png following the URL hierarchy.

Two OG image templates are part of the brand system:

Dark template — ink background, cream wordmark, Newsreader headline in cream with italic-cyan emphasis, JetBrains Mono tagline. Used for the home preview.
Light template — cream background, ink wordmark, Newsreader headline in ink, cyan eyebrow with a short divider line, JetBrains Mono tagline in muted ink. Used for editorial, methodology, and similar utility pages.

The wordmark always sits in the top-left of the OG image. The canonical URL always sits in the bottom-right. The brand name is always spelled GrokTechGadgets — the May 2026 audit caught a misspelled "Groktehgadgets" in the previous home OG image; that asset has been retired and the spelling is now part of this brand standards document explicitly to prevent recurrence.

What not to do

Do not render the wordmark via CSS pseudo-elements. The brand is an SVG asset; the HTML markup is <img src="/assets/images/brand/gtg-logo.svg">. The v107 overlay previously hid the SVG and rebuilt the brand from ::before and ::after pseudo-elements; that pattern has been removed.
Do not introduce alternate wordmarks or logomarks. The mobile drawer previously used a different SVG with a circular outline "G" and stacked Sora wordmark; that asset has been replaced with the unified gtg-logo-mono-white.svg.
Do not use the #0b1b2b ink color. It appeared in earlier brand assets but is not the canonical site ink.
Do not use the bright Tailwind cyan #06b6d4 in brand contexts. The accent cyan is #00b3c8 on light surfaces and #4dd6e6 on dark surfaces.
Do not use the brand to imply endorsement of vendors or products. Affiliate disclosure is handled in copy, not in the mark.