Personal brand
Jon Arteaga
Neutral field. Skin is the accent. One mark, one family, a small icon hand.
Mark
The portrait is the logo. Paper field in the light file; ink field for inverse. Circle crop when it sits next to type or in a favicon. Do not stretch. Do not add a drop shadow.
192 · display6440 · circle32 · avatarJon
JonColor
Paper and ink do the work. Accent is the skin from the portrait — chips and fills, not body text. Do not wash the page in it.
Paper
#F5F5F5 · background
Ink
#2C2C2C · text / hair / jacket
12.8:1 on paper · AA
Gray
#5C5C5C · secondary text (AA)
6.1:1 on paper · AA
Line
#E5E5E5 · border
1.2:1 on paper · not text
Accent
#FCDCB8 · skin — chips and fills, not body
1.2:1 on paper · not text
Ink on paper
Default reading surface.
Paper on ink
Inverse lockup, footer, night.
Ink on accent
Skin as fill. Never a page wash.
Type
IBM Plex Sans. Weight and tracking do the hierarchy — not a second face. Plex Mono for code.
Display3.5rem · 500
The details are the design.
Title1.75rem · 500
The details are the design.
Lead1.25rem · 400
The details are the design.
Body1rem · 400
The details are the design.
Caption0.8125rem · 500
The details are the design.
Icons
First-cut UI hand. 16 / 1.25 and 24 / 1.5. Same ink as the jacket. Not the brand mark — that is the portrait.
16
24
arrow · 24 / 1.5