Logo Design — Phuong Tran

01 · Three Directions

A · Wordmark + dot

B · Stacked editorial

C · Mark + wordmark

Recommendation: Direction C — the geometric P mark combined with the full name. The mark (left) works independently as icon/favicon; the full lockup works for nav/header. The angular P bowl references design grids and product thinking.

02 · Primary Logo — Dark & Light

03 · Icon Mark — Standalone

On dark

On light

On lime

96px

64px

48px

32px

24px

16px

The geometric P mark reads clearly down to 16px. Angular bowl references product design grids.

04 · Favicon

256px

128px

64px

32px ← favicon

16px

Alt — dark bg

Alt — violet bg

05 · In Context — Nav Preview

Phuong Tran

Works Now Writings ↗

Have a chat

Phuong Tran

Works Now Writings ↗

Have a chat

Phuong.Tran

Works Now Writings ↗

Have a chat

↑ Minimal variant: dot accent on name, no separate icon mark

06 · SVG Code — Ready to Use

Nav Logo — Dark Mode

<!-- Nav logo: P mark + name -->
<a href="index.html" class="nav__logo"
   style="display:flex;align-items:center;gap:10px;">
  <svg width="18" height="20"
       viewBox="0 0 64 72">
    <path d="M12 8 L12 64
             M12 8 L36 8
             Q54 8 54 26
             Q54 44 36 44
             L12 44"
      stroke="#C2F542"
      stroke-width="6" fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"/>
  </svg>
  Phuong Tran
</a>

Nav Logo — Light Mode

<!-- Same SVG, different stroke -->
<a href="index.html" class="nav__logo"
   style="display:flex;align-items:center;gap:10px;">
  <svg width="18" height="20"
       viewBox="0 0 64 72">
    <path d="M12 8 L12 64
             M12 8 L36 8
             Q54 8 54 26
             Q54 44 36 44
             L12 44"
      stroke="var(--accent)"
      stroke-width="6" fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"/>
  </svg>
  Phuong Tran
</a>

favicon.svg (32×32)

<!-- Save as assets/favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="32" height="32"
     viewBox="0 0 32 32">
  <rect width="32" height="32"
        rx="7" fill="#C2F542"/>
  <path d="M7 5 L7 27
           M7 5 L17 5
           Q24 5 24 12
           Q24 19 17 19
           L7 19"
    stroke="#080808"
    stroke-width="2.5" fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"/>
</svg>

<head> — Favicon link tags

<!-- Add to <head> in all HTML files -->
<link rel="icon"
      href="assets/favicon.svg"
      type="image/svg+xml"/>

<link rel="apple-touch-icon"
      href="assets/favicon-180.png"/>

<meta name="theme-color"
      content="#C2F542"
      media="(prefers-color-scheme: dark)"/>

<meta name="theme-color"
      content="#3B0D9E"
      media="(prefers-color-scheme: light)"/>

CSS — Nav logo icon adaptive color

/* Add to style.css — icon inherits accent token */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.nav__logo svg path {
  stroke: var(--accent); /* adapts to dark/light automatically */
  transition: stroke var(--dur) var(--ease);
}

Logo Design System