Haven Smith & Company
Design Language
The rules this brand is built on, and the reasoning underneath each one. Everything here is a decision somebody had to make. Where the reason matters, it is written down, because a rule without its reason gets broken by the next person who meets an edge case.
Brand identity
Haven Smith & Company is the imprint. It publishes the books and the guides, and it is the name on a copyright page, a cover byline and a product page. The legal entity behind it is Haven Smith LLC, which is the name that appears in a disclaimer or a terms page and nowhere else.
The site is mine. I am a human factors engineer and product designer, and the work on this site is my work. Keeping those two apart matters: a reader who buys a guide is buying from a publisher, and an organization that hires me is hiring a person. The design carries both without either one pretending to be a company it is not.
What the brand is
- SubjectThe systems people's lives run on, and where they leave people exposed. Fraud prevention, security, compliance, privacy and estate planning, rather than lifestyle or minimalism.
- ReaderSomeone arriving with zero context, who should never need to look a word up to follow a sentence.
- PromiseNot safety. Everybody gets targeted. You become a harder target, and when you do get hit the damage is contained.
- Short formOrganizing is loving.
- ReferenceVogue Business and Apple. Editorial restraint with the engineering showing through.
Do
- Let typography, grid and white space carry the page
- Name the thing: passwords, photographs, subscriptions, the inbox
- Write the reason next to the rule
- State the format plainly and let the reader draw the conclusion
Do not
- Make a claim that a later page could fail
- Decorate. A texture or a shape with no job comes out
- Grade the reader, or imply anybody is targeted for who they are
- Use my surname anywhere on this site outside a cover byline
Voice and tone
Calm, specific, editorial. Plain complete sentences. No hype, no exclamation marks, no emoji, no clever fragments and no abstract noun standing where a concrete one belongs. Humor and wit stay. Anything that reads as a judgment about the reader goes.
The measure is 80 per cent Ivy City Co for sentence shape and warmth, 20 per cent Jenna Kutcher for direct address and naming what the reader wants. Nothing else in the blend.
Who is speaking
- Company pagesShop, product, checkout, legal, FAQs, gift cards, pages written for professionals and organizations: we, us, our.
- First personBlog posts, emails, social posts, the book, Our Story, Start Here, freebie introductions, and this page: I to you. "We" there means all of us, never the company.
- SignatureEmails are signed Ashley.
The hook
Every important page opens on a moment the reader recognizes from their own life, above the fold. The test: it should read like a card somebody left lying around, with a small surprise in it. A hook that names nothing concrete from digital life is a hook about nothing.
Lands
- Your subscriptions cost more than you think they do
- Help is a good present
- When someone dies, their accounts do not
Missed, and why
- Set a timer and sort out one thing. Reads as housework
- Sit down with someone and work through it together. Reads as marriage counseling
Constructions that are out
- False contrast"X is not Y, it is Z" rewards a surprising second half over a true one. Both halves have to be literally true and the contrast has to do work, or the sentence goes.
- SuperlativesNo ranking one part of my own work against another. Extremely valuable instead of most important.
- GradingNothing saying most people fail, skip or forget.
- Bare wordsNever "address" alone. Email address, web address, home address.
- Bannedactually · bother · quiet and anything built on it · figurative "it costs" · newsletter · em dashes in running text
Typography
Three faces, and the only variation between uses is case, weight and roman against italic. The set was cut down from six because six near-identical editorial serifs and tech-forward sans faces read as indecision rather than range.
Playfair Display sets every heading and title, and it is the link to fashion editorial. Montserrat sets everything else on screen: body, labels, eyebrows, captions and buttons, one sans face with no second eyebrow style. EB Garamond sets body text inside the guides, the PDFs and the EPUB, where a reader is reading for a long time and a serif does that better. Cormorant Garamond, Lato and IBM Plex Mono are retired. The one permitted exception is a face Squarespace forces where CSS cannot override it.
The scale
Rules
- MeasureBody text stops at 68 characters. A line longer than that loses the reader on the return sweep.
- TrackingPlayfair tightens as it grows, from −.012em at heading size to −.03em at display. Montserrat never tightens.
- CapsOnly Montserrat sets in caps, and caps always carry letter-spacing of at least .14em.
- ItalicPlayfair italic is for a pull quote or a line carrying weight. It is not an emphasis style inside body text.
Color
Two colors do the work: shades of white and shades of black. Mocha is the accent, and it stays an accent. This is the correction that matters most, because mocha used across every eyebrow, rule and small mark on a page stops reading as warmth and starts reading as a corporate investment site.
The working test is the budget below. If mocha covers more than roughly one part in twenty of a page, something that should be ink or a hairline has been painted.
The whites
The blacks
The accent
Mocha Light fails contrast on white. It is for type and marks sitting on charcoal or ink, never on paper or ground.
The accent budget
Where mocha is allowed
- YesA link. The active state in navigation. One section mark or rule per band. The Display button. A single number or figure being pointed at.
- NoEvery eyebrow on a page. Every hairline. Body text. Large filled areas. Two mocha bands in one page.
- Dark bandsCharcoal #2E2B28, not mocha. A full mocha band is reserved for one moment on a page and most pages do not get one.
Contrast, measured
Muted is the floor, and nothing on this site sits below it. It was #7A716A, which measured 4.50 to 1, passing by a hundredth. Darkening it to #746B64 buys real headroom and changes nothing anyone will notice.