Logo
The Tetrac mark on dark and light. Pick the variant that contrasts with your background.
Which one? Use the white mark on dark canvases and the black mark on light ones — always maximize contrast. Both are transparent PNGs, so they drop onto any brand-colored surface.
App icon
The mark inside a rounded square — for favicons, PWA install tiles, and avatars.
Sizing scale
The mark stays legible from favicon to hero. Below ~24px, prefer the app icon for contrast.
162432486496128
162432486496128Clear space & minimum size
Give the mark room to breathe and never render it too small to read.
Keep clear space of at least 25% of the mark’s height on all sides. Don’t crowd it with text or other logos.
16px24pxMinimum 16px for the standalone mark (favicon). For UI chrome, don’t go below 24px.
Color palette
Click any swatch to copy its hex. Purple is never used in the Tetrac brand.
Brand
Semantic
Dark surfaces
Gradients
The three approved brand gradients. Click to copy the CSS.
Typography
Inter Tight for the wordmark and display; a system sans stack for body.
Wordmark, hero titles, and display headings. Tight tracking (-0.03em) on the wordmark.
Body copy, UI labels, and data. Arial / Helvetica system stack — no custom font load required.
Do & Don't
Keep the mark recognizable and on-brand wherever it appears.
- Use the white mark on dark and the black mark on light.
- Preserve the mark’s aspect ratio when scaling.
- Give it at least 25% clear space on every side.
- Use the exact brand hex values from this page.
- Don’t recolor the mark purple — it’s never a brand color.
- Don’t stretch, skew, rotate, or add drop shadows.
- Don’t place the mark on a low-contrast background.
- Don’t render the standalone mark below 16px.