A personal brand, on purpose.
This is one person's name, not a company's. Everything below serves one mantra, one mission, and one instinct. If a design choice doesn't serve them, cut it.
The name is the logo.
Ashley Tomblin. Set in Fraunces (weight 600, soft & wonky axes on), tight tracking, always with the full stop. The dot always takes the iris. The period is the whole brand.
The wink.
An illustrated portrait: winking, laughing, mid-thought. Use it wherever a face softens the page: bylines, blog headers, chat avatars. It never replaces the wordmark; it keeps the wordmark company.
Cream, ink, and an oil slick.
Three quiet neutrals do all the work. The color lives in one place: the iris: the four facets of the Refract bird (rose, amber, leaf, sky), refracted through darker glass. Same hands, different light. Muted, never candy. It's an accent: clip it into text, run it as a thin bar, tint the dot. Never flood a background with it. And the sweep needs room: on any accent shorter than a third of the canvas, use a single facet instead, lifted on dark grounds. A short gradient only shows its middle.
Fraunces speaks. Inter explains.
Two typefaces, cleanly divided. Fraunces carries every headline at weight 900 with the optical size cranked to 144, and every italic turn of phrase. Inter (400/500/600) carries the body. Nothing else, ever. One hard rule: when the voice turns italic, break first. The turn never runs inline after the black type; it always opens its own line.
font-variation-settings: "opsz" 144 · tracking −0.02emEtched, not printed.
Two figures, the flower of life and the sri yantra, appear as faint line etches behind content: 7–10% opacity, bleeding off an edge, never centered, never on top of text. They're there for texture, and they stay quiet.
One face, two moods.
The finished photo library, downloadable. These are the edited versions; the raw shoot files stay out of circulation. Two sets, two jobs: the studio set (warm gray, black leather) for press and anything on cream, and the neon set (pink/blue on black) for dark grounds and moments with more voltage. No filters on top of the edits, crops generous enough to keep the face and the neckline in frame (Cody's name lives there), and on light grounds soften the corners with a hairline border.
Ready-made banners.
Cover photos for the profiles, in both grounds. Light runs the studio set, dark runs the neon set, and every crop keeps the neckline in frame. The photo sits on the right and the type sits center, so the profile-photo circle (which overlaps the banner's lower-left) never cuts either one, on desktop or mobile. All at 2× resolution; upload as-is.
Warm, specific, honest about herself.
A builder thinking out loud: a little messy, and specific enough that nobody else could
have written it. There is no house structure. Some pieces are an argument, some are a
story about the birds at 5am. Real names, real numbers, and the thing she got wrong, said plainly.
No em-dashes. No slogan at the end; a post can just stop. The full guide is
WRITING-GUIDE.md in the site repo.
Go to bed. Even when it feels like you're thisclose. Especially then.
Fair warning: I don't fully know what I'm doing yet. Nobody does.
Do & don't.
Do
- End the wordmark with the full stop, and give the dot the iris.
- Start every layout on cream; let ink do the talking.
- Clip the iris into text or run it as a thin bar; a 10px top edge is the house move.
- Bleed the geometry off an edge at etch opacity.
- Pair the avatar with the wordmark, sized like a signature.
- Give the turn its own line. Black type ends, line breaks, the cursive begins.
Don't
- Set the name in any face but Fraunces, or drop the period.
- Flood a background with the iris, or brighten it into a rainbow.
- Stretch, outline, or shadow the wordmark.
- Run the geometry at full opacity or center it under text.
- Add a third typeface. There is no third typeface.
The whole kit.
- Wordmark · light groundSVG · ink on transparent, iris dotDownload ↓
- Wordmark · dark groundSVG · cream on transparent, iris liftedDownload ↓
- Avatar · fullSVG · illustrated portraitDownload ↓
- Avatar · tight cropSVG · for small sizesDownload ↓
- Favicon tileSVG · avatar on cream, roundedDownload ↓
- HeadshotPNG · profile portraitDownload ↓
- Flower of lifeSVG · line etchDownload ↓
- Sri yantraSVG · line etchDownload ↓
- LinkedIn coversPNG @2x · light + darkLight ↓ Dark ↓
- X headersPNG @2x · light + darkLight ↓ Dark ↓
- Design tokensCSS · colors, gradient, type stack, iris utilitiesDownload ↓
Fonts are open source: Fraunces and Inter, both on Google Fonts.