00.00
Harry Chang
|Design System
About
Updates
Projects
Gallery
Blog

Design System

01

Ethos & Identity

The Tower of Babel is usually read as a warning against hubris. I read it as a record of curiosity: we build not to challenge the divine, but to measure our own reach. Every language, system, and frame is another course of brick laid between the ground we stand on and the things we can almost hear.

I climb knowing gravity keeps its own counsel. To code, to capture, to create is to work at a height where failure is always in the weather. But the tower was never meant to be finished — only to be built with full attention, stone by stone, by hands that stay. The view from an unfinished height is still a view no one else has stood at.

Loading
Harry Chang Portfolio Identity — The Tower of Babel
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
02

Color Palette

Background

—

Foreground

—

Primary

—

Secondary

—

Muted

—

Accent

—

Border

—

Gradient

—

03

Type Scale

The Tower

Display

Audacity in Creation

Heading

Every pixel is a decision, every whitespace a breath.

Large body

Code. Camera. Curiosity. The intersection of craft and intention drives every decision.

Body

Building highways when lanes feel too narrow.

Small

HARRY CHANG · PORTFOLIO · 2026

Caption
04

IBM Plex Sans

Packing new knowledge, I vex, judge, quiz, from bytes.

Light · 300

Packing new knowledge, I vex, judge, quiz, from bytes.

Regular · 400

Packing new knowledge, I vex, judge, quiz, from bytes.

Medium · 500

Packing new knowledge, I vex, judge, quiz, from bytes.

Semi Bold · 600

Packing new knowledge, I vex, judge, quiz, from bytes.

Bold · 700

Character Set

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
^
&
*
(
)
_
+
-
=
↗
↙
[
]
{
}
05

Artific

Packing new knowledge, I vex, judge, quiz, from bytes.

Light · 300

Packing new knowledge, I vex, judge, quiz, from bytes.

Regular · 400

Packing new knowledge, I vex, judge, quiz, from bytes.

Medium · 500

Packing new knowledge, I vex, judge, quiz, from bytes.

Semi Bold · 600

Packing new knowledge, I vex, judge, quiz, from bytes.

Bold · 700

Packing new knowledge, I vex, judge, quiz, from bytes.

Extra Bold · 800

Packing new knowledge, I vex, judge, quiz, from bytes.

Black · 900

Character Set

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
^
&
*
(
)
_
+
-
=
↗
↙
[
]
{
}
06

Spacing & Layout

1800px max-width
Container
12-column, responsive
Grid
64px fixed offset
Header
py-12 → md:py-16 → lg:py-24
Section
0.5rem → 4rem scale
Gap
07

Motion & Interaction

motion/react (Framer Motion)
Library
Zoom-out reveal · count-up timer
Transitions
Rangefinder split-image focus
404
Canvas pixelation → progressive depixelation
Images
Live Spotify dynamic tooltip
Now Playing
Stable hash-based anchor alignment
Scroll
08

Knowledge Graph

Every page on this site is a node. Every shared tag, category, or conceptual link is an edge. The graph is generated at build time from the content CMS, spanning projects, blog posts, gallery entries, and hub pages, then rendered via a force-directed physics simulation.

Nodes are sized by connection degree. Edges encode semantic similarity via vector embeddings. On mobile, a crosshair pans the canvas and surfaces the center node. Click any node to navigate directly.

Knowledge Graph
Full Graph →
Next Up

Harry Chang

Loading
Harry Chang/Chi-Wei Chang 張祺煒 LogoHarry Chang/Chi-Wei Chang 張祺煒

Building highways when lanes feel too narrow. Sometimes it's sharp, sometimes it's f/1.5 blur.

Curious? So am I. — chiwei@harrychang.me

Guestbook

Did something connect? Or break? Leave a note.

Socials

  • Email
  • Discord
  • LinkedIn
  • GitHub
  • Telegram
  • Instagram
  • Medium
  • Schedule
  • Book a Meeting

Resources

  • Links
  • Spotify
  • Letterboxd
  • Résumé
  • Setup
  • Reading List
  • Design System
  • Knowledge Graph
  • RSS Feed

Site Map

  • About
  • Updates
  • Projects
  • Gallery
  • Blog
  • Privacy
  • Manifesto
  • Source Code
  • Report an Issue