Hugo Tavares — Brand Guide 2026

01 Logo System

The mark and its uses.

A circular double-bolt glyph paired with the logotype in Azeret Mono. Three variants serve every production context: full lockup on dark, full lockup on light, and the mark alone for constrained spaces.

Reverse · On Dark

Primary in-context. Logotype in Silver (#E8E9E9) on dark surfaces. Bolt mark retains the iridescent gradient at all times.

Primary · On Light

Used on white and off-white surfaces. Logotype: near-black (#232828). The gradient mark is unchanged — the one constant across both themes.

Mark · Icon / Avatar

Isolated bolt for favicons, social avatars, and space-constrained contexts. Minimum 24px digital / 8mm print.

Clear Space

Equal to bolt mark
height on all sides

Minimum (Lockup)

160px digital
44mm print

Minimum (Mark)

24px digital
8mm print

Preferred Format

SVG (scalable)
PNG (raster)

Logo Don'ts

✕Recolor the logotype outside near-black or white

✕Separate the mark from the lockup without intent

✕Apply drop shadows, glows, or any filter effects

✕Stretch, distort, rotate, or skew the lockup

✕Place dark-version on light surface (or vice versa)

✕Reproduce below the minimum size guidelines

02 Color Palette

Two canvases. One accent.

A neutral canvas (dark by default, light as alternate) paired with a single iridescent gradient as the only color accent. No other hues enter the system.

Dark Mode · Primary Canvas

Void --bg

#07070C

Deep --bg2

#0D0D14

Cream --text

#EEEAE2

Fog --mid

#9A97B0

Dusk --muted

#54526A

Iridescent Gradient · Signature Accent

Silver#E8E9E9 · 0%

Tavares Green#2E7562 · 22%

Crimson#B5242A · 55%

Teal#295954 · 78%

Hugo Orange#C27D32 · 100%

          CSS  —  --irid (dark mode)
          
        
--irid: linear-gradient(135deg,
  #e8e9e9 0%,
  #2e7562 22%,
  #b5242a 55%,
  #295954 78%,
  #c27d32 100%);
background-size: 200% 200%;
animation: iS 6s ease-in-out infinite;

Gradient Colors · Individual Swatches

Silver --os-silver

#E8E9E9

Tavares Green --os1

#2E7562

Crimson --os3

#B5242A

Teal --os2

#295954

Hugo Orange --os4

#C27D32

Light Mode · Secondary Canvas

White --bg

#FFFFFF

Off-White --bg2

#F0F0EE

Near-Black --text

#0A0A0A

Stone --mid

#666666

Surface & Border Tokens

--border (dark)rgba(255, 255, 255, 0.06)

--border2 (dark)rgba(255, 255, 255, 0.11)

--border (light)rgba(0, 0, 0, 0.10)

--border2 (light)rgba(0, 0, 0, 0.20)

Nav backdroprgba(7, 7, 12, 0.85) + blur(22px)

Mobile menurgba(7, 7, 12, 0.97) + blur(18px)

Modal overlayrgba(7, 7, 12, 0.88) + blur(9px)

03 Typography

One typeface. Built on contrast.

Azeret Mono — a monospaced Google Font. No secondary or display face. Hierarchy is built entirely through size, weight, color, and letter-spacing.

Azeret Mono

300 Light 400 Regular 500 Medium 600 SemiBold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & .,;:!?'"-+=()[]{}

Google Fonts · Variable font-family: 'Azeret Mono', monospace

Type Scale

RoleSizeWeightTrackingNotes

Hero Displayclamp(42–94px)300 Light−2.5pxLine-height 1.08; last bold

Section Titleclamp(28–52px)500 Medium−1.5pxLine-height 0.97

CTA Headlineclamp(44–100px)500 Medium−2.5pxLine-height 0.92

Project Titleclamp(30–68px)500 Medium−2pxLine-height 0.95

Body Copy14–16px300 LightdefaultLine-height 1.9–1.95

Stats / Numbers44px500 Medium−2pxNumeric display

Eyebrow9–11px600 SemiBold+0.22emALL CAPS always

Nav Links12px400 Regular+0.07emSubtle tracking

Caption / Label9–10px500–600+0.15–0.20emALL CAPS

Mobile Menu17px300 Light−0.01emSingle weight

Footer11px400 Regular+0.04emQuiet baseline

Typographic Rules

Negative tracking applies only to large display type — never to body or small text

Positive tracking exclusively on eyebrows and ALL CAPS labels

Body copy is always weight 300 — never bold for extended reading passages

Italic em within headlines uses weight 300 for rhythmic contrast against 500 surroundings

Apply -webkit-font-smoothing: antialiased on all type elements

Avoid em dashes in copy — rephrase or use a period instead

04 Layout & Spacing

A system of precise intervals.

Spacing follows a repeating set of values pulled directly from the live portfolio. Generous breathing room around content. Tight rhythms within components.

Side Padding (Desktop)

52px

Side Padding (Mobile)

24px

Navigation Height

60px

Section Top Padding

nav-h + 40px

Section Bottom Padding

60–84px

Section Vertical

84px / 112px (CTA)

Component Gap

24–48px

Work Grid Gap

3px (full-bleed)

Max Body Width

50ch

Border-Radius (Pill)

100px

Border-Radius (Card)

4–8px

Box-Shadow (Modal)

0 12px 40px rgba(0,0,0,.55)

Spacing Scale · Visualized

xs4px

sm8px

md16px

lg24px

xl32px

2xl48px

3xl52px

4xl84px

5xl112px

05 Motion & Effects

Slow. Organic. Intentional.

Every motion is purposeful. The gradient breathes on a 6-second loop. The grain adds tactile depth. The cursor responds with physics, not jitter.

Iridescent Animation

Background-position loop on all gradient elements. Slow, organic shimmer that reads as alive without being distracting.

animation: iS 6s ease-in-out infinite;

Grain Overlay

SVG fractalNoise filter at opacity 0.03 over the full viewport. Active in dark mode only — killed in light mode via CSS.

baseFrequency: 0.75 · opacity: 0.03

Gooey Cursor

Physics-based blob following the pointer with spring ease. ~80–100px diameter, softens on press, mix-blend-mode difference.

filter: url(#goo-filter)

Animation Timing Tokens

Iridescent shimmer6s ease-in-out infinite

Hero slide-up0.85s cubic-bezier(.16,1,.3,1)

Fade-up entrance0.65s ease

Hover transitions0.2–0.3s ease

Work card hover0.75s cubic-bezier(.25,.46,.45,.94)

Avail badge pulse2s ease-in-out infinite

Wave animation2.5s ease-in-out infinite

Marquee scroll28s linear infinite

Backdrop Blur Values

Navigation barrgba(7,7,12,0.85) + blur(22px)

Mobile menurgba(7,7,12,0.97) + blur(18px)

Modal overlayrgba(7,7,12,0.88) + blur(9px)

06 Components

Reusable parts. Consistent behavior.

A small set of components used across the system. Each one follows the same color, motion, and typography rules — built once, applied everywhere.

Buttons

Primary Button Outline Button

Get in touch

Primary (.btn-p)

Iridescent gradient bg · white text · 100px radius · animated · lift on hover

Learn more

Outline (.btn-o)

Transparent bg · --mid text · border: rgba(255,255,255,.11) · border becomes forest on hover

Labels & Badges

Section eyebrow

Eyebrow Label

9–10px · 600 weight · +0.22em tracking · ALL CAPS · --muted color · precedes section titles

Open for work 👋

Availability Badge

Pulsing dot · wave emoji · 100px radius pill · rgba(255,255,255,.03) · status signaling

Surfaces

Card surface

Card (.bg2)

--bg2 background · 1px --border · 4–8px radius · used for elevated content blocks

Top irid line

Accented Surface

Card surface with iridescent top border · used for tool grids and key callouts

07 Voice & Copy

Direct, confident, warm.

Speaks like a senior creative with nothing to prove. Precise without being cold. Opinionated without being arrogant. Copy leans spare — short sentences, active verbs, no filler.

No Em Dashes

Rephrase or use a period. The character — never appears in running copy. This is a hard rule.

First-Person Singular

I / my throughout. Never we unless referring explicitly to a client collaboration.

Sentence Case

Body copy in sentence case. ALL CAPS is reserved exclusively for eyebrow labels and small captions.

Quantify

Years of experience, client names, output counts wherever possible. Specifics build credibility.

CTA Verbs

Action verb + implied reward: Let's talk. See the work. Get in touch.

Italic for Emphasis

Italic em within headlines uses weight 300 against 500 surroundings — creates rhythmic contrast.

08 Asset Files

All assets. Organized.

Six logo files cover every production context. SVG preferred for scalable use; PNG provided for raster contexts where vector support is limited.

HTlogo-1.png

Full lockup, light background

PNGRaster

HTlogo-2.svg

Full lockup, dark background

SVGVector

HTlogo-3.png

Full lockup, dark background

Mark only — favicon / avatar / icon

PNGRaster

HTlogo-6.svg

Full lockup, light background

SVGVector

Complete CSS Tokens

          brand-tokens.css
          
        
:root {
  /* ── Dark Mode (default) ───────────────────────── */
  --bg:      #07070C;     /* Void — deepest background */
  --bg2:     #0D0D14;     /* Deep — card & section bg */
  --text:    #EEEAE2;     /* Cream — primary text */
  --muted:   #54526A;     /* Dusk — tertiary text */
  --mid:     #9A97B0;     /* Fog — secondary text */
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.11);

  /* ── Iridescent Gradient ───────────────────────── */
  --os1: #2E7562;   /* Forest    */
  --os2: #295954;   /* Deep Teal */
  --os3: #B5242A;   /* Crimson   */
  --os4: #C27D32;   /* Amber     */
  --irid: linear-gradient(135deg,
    #e8e9e9 0%, #2e7562 22%,
    #b5242a 55%, #295954 78%,
    #c27d32 100%);

  /* ── Type & Layout ─────────────────────────────── */
  --f:     'Azeret Mono', monospace;
  --nav-h: 60px;
}