meet your coach

jane

pak

typography & design elements

Type, spacing, and alignment are the main focus in this visual brand. The fonts give an elevated, clean presentation while the alignment creates interest.

elegance · clarity · openness

01 · type

two fonts,

seven ways

Fraunces carries the voice and announces— headlines, the wordmark, pull-quotes. It's an old-style serif with two variable axes doing brand work: WONK swaps in alternate letterforms that sit slightly off-kilter, and SOFT rounds the terminals. Wonk on, soft up: warm, and a little crooked on purpose. Classic, but outside the box.

Inter stays out of the way — body copy, labels, buttons, captions. It's a neutral workhorse with no personality of its own, which is the point. Only Fraunces gets to have an opinion.

H1
288px max
lh .82 · ls −.022em

stop auditioning

H2
178px max
lh .92 · ls −.014em

find the belief underneath

H3
110px max

the excavation

Lede
20px · Inter 400 · lh 1.55

root-cause work for high-achieving women.

Body
16px · Inter 400 · lh 1.65 · 62ch

we go beneath the pattern to the thing installing it.

Eyebrow
13px · Inter 800 · .16em

the excavation

Caption
11px · Inter 800 · .16em

jane pak · iki advisors

the italic rule

Italic on the verb, roman on the completion. This signature move creates distinction and opportunites to emphasise and it repeats everywhere including the wordmark.

  • Two lines maximum on the H1. At 288px a third forces a wrap that breaks the split.
  • Line-height tightens as size grows. .82 at 288, .92 at 178, 1.65 at 16.
  • Letter-spacing goes negative at display size. Fraunces opens up and needs pulling back.
  • 62ch cap on body. Set max-width on the text element, never the container.

02 · hanging

orderly,

but not in line

Every H1 is a hanging paragraph. So is every H2, and every body paragraph. First line flush, everything after it hangs. The block keeps a hard left edge — it just isn't where you expect it.

At 62ch the eye needs a reset point per paragraph, and the hang provides one without a blank line. It is the layout doing the same job the italic rule does in type: hold the classical thing, break it in exactly one place.

Headings use an em-based indent so it scales with the type. Body uses 40px, dropping to 20px on mobile.

/* headings — em-based, scales with type size */
.h1 { text-indent:-.14em; padding-left:.14em; }
.h2 { text-indent:-.12em; padding-left:.12em; }

/* body — fixed, first line flush */
.hang p { text-indent:-40px; padding-left:40px; }
.hang p:first-child { text-indent:0; padding-left:0; }
@media (max-width:640px){ .hang p { text-indent:-20px; padding-left:20px; } }

Indent headings in em, never px — a 40px hang is invisible at 288px and enormous at 42px.

03 · color

neutrals

first

the base

Ground

#F6F3F2

Panel

#FFFFFF

Taupe

#CEBBB6

Slate

#6A5C58

Charcoal

#2C2530

the warm · shapes and motion only

Gold

#CE7E2E

Copper

#B65C28

Clay

#9D3D2E

Wine

#5D1430

  • Charcoal for headings, slate for body. Never swap them.
  • Wine is the only interactive colour. Button hover, rules, focus rings.
  • The warm values live inside shapes and the motion background. Never as a flat fill, button, badge, or border.
  • Charcoal never sits on a warm value. It fails from copper down — type over a shape is ground colour.

04 · photography

presence

over performance

With no illustration and no icon set, photography carries the warmth this system does not get from colour. It is the highest-leverage asset in the identity and the only part a competitor cannot copy.

portrait
environment
texture

the frame

  • Two ratios only. 4:5 for people, 3:2 for rooms and environments. Nothing square, nothing 16:9.
  • 2px radius. No shadow. The near-square corner keeps this print rather than product UI, and a shadow makes the photo float above the composition instead of sitting in it.
  • Overlap the type onto the image. Letting a headline cross the edge binds them into one composition. Two objects sitting near each other is not a layout.
  • Never symmetrically inset. Equal air on four sides is the fastest way to look generic — same rule as every other element.

the shot

  • Warm natural light. Real and unposed. No cool or clinical stock, no heavy filters.
  • Expression is not always serene. Mid-laugh, mid-sentence, mid-argument. Calm is a fraction of who she is.
  • Black and white is on-brand for founder portraits — it keeps the warm values exclusive to the painted shapes.
  • Crop tight enough that she fills the frame. Dead grey to one side reads as a snapshot.
  • Pale studio backgrounds work on plain ground but punch a visible rectangle over a painted shape. Mask the background out, or keep the photo on ground.

type over a photo

  • Check contrast every time. Charcoal needs 4.5:1 against whatever sits behind it, and a photo's value shifts across the frame.
  • Put the type where the image is quiet. Never over her face, never over high-frequency detail like hair.
  • No scrims, no dark overlays. If the type will not sit legibly on the photo as shot, move the type — do not dim the photograph.

The test: does it feel elevated and unhurried — something you would keep rather than scroll past?

05 · buttons

three

levels

Primary
charcoal fill
one per screen

Committed actions — apply, buy, enroll. Hovers to wine.

Secondary
2px wine rule
repeatable

Lower commitment — join the list, get the replay. May repeat.

Editorial
Fraunces italic
after story only

Ends a narrative section. Never inside a card or form.

  • 2px radius on everything. Not 8. The near-square corner keeps this print rather than product UI.
  • Lowercase labels, matching the display type.
  • Active voice — the button says what happens.

06 · shapes

painted,

not generated

Hand-painted at low opacity in many passes. That process produces the desaturated transitions between hot and deep — real light loses chroma before it loses value, and stacked flat colour does not.

01 · Bean

Gold core held inside a deep rim. The most contained of the six — good inside a card.

02 · Ellipse

Gold sweeping the right edge, plum weighting the upper left. Light from behind and below.

03 · Sway

Broad gold body, tight dark rim all the way around. The most solid of the set.

04 · Crescent

Gold arc curling over a deep hollow. The hero shape — strongest at large scale.

05 · Hover

Two lobes, gold pooling low and right. The most irregular silhouette — hardest to read as generated.

06 · Drift

Long and low, gold running the upper edge. Best cropped wide for section breaks and email headers.

07 · motion background

quiet

or not at all

A fullscreen fragment shader in raw WebGL — no library, about 3 KB. Wine ridges on ground, moving slowly enough that you notice only if you stop and look. It is running behind the hero above.

uniforms
  u_amp    0.130
  u_scale  3.2
  u_sharp  1.6
  u_warp   0.45
  u_width  1.00
  u_ground #F6F3F2
  u_ink    #5D1430

js
  speed    0.16