Design teardown
Substack
A white notes column. Orange marks the action, a display serif marks the insert, and the writing itself stays a plain sans.
substack.com
Design character
A reading column with the selling tucked in
The logged-out home is a reader, not a long marketing page. A fixed icon rail sits on the left, a narrow notes feed scrolls in the center, and a search field plus a short signup card stay pinned on the right. Notes are one to a few spoken sentences, with a name, a relative time, and a quiet row of counts. Between them, short promo cards use a large sentence-case title, one muted sentence, and a pair of buttons. Rail labels are single words. Button labels are one to three words. The voice in the feed is informal and specific. The chrome stays plain so the writing carries the tone.
Typography
Three faces share the screen. Insert titles use Cahuenga, a display serif, at medium weight with open leading and no tracking. The signup heading alone uses SF Pro Display at a heavy weight. Everything in the feed and the controls is system-ui: 15px for notes and names, 13px for times and supporting lines. The page root declares Spectral at 19px regular, and that face does not paint the text on this home feed. Hierarchy in a note comes from weight and gray, then from size only when a promo card opens.
Color system
A white canvas and charcoal text. One orange does the actions. A deep green is reserved for the top banner, and image cards drop to a near-black charcoal. Hairlines are black at about ten percent, which reads as a light gray on white.
Spacing and geometry
An 8px module. The rail is compact, the feed is looser, and insert cards take the most padding. Controls are 40px tall.
Layout
Three fixed columns on a wide desktop. The side rails stay put while the center feed scrolls. On a 2227px-wide window the columns do not stretch, so wide gutters open on both sides of the notes.
Motion
The feed sits still. Controls carry a quarter-second ease-out on color, background, shadow, border, radius, opacity, and transform. The curve is cubic-bezier(0.19, 1, 0.22, 1), which arrives quickly and settles without a bounce.
UI fingerprint
- Orange is scarce, and it always means you can do something. Primary buttons, the active rail icon, and the short subscribe word are #ff6719. Notes, names, and surfaces stay white, charcoal, and gray. The green banner is the only other large color, and it frames a title rather than the whole page.
- The display serif is for inserts. The notes stay in a plain sans. Cahuenga at 24px and 32px opens the promo cards. system-ui at 15px carries the writing, the names, and the buttons. SF Pro Display at 20px heavy is used once, for the signup title. Mixing those jobs would flatten the difference between a post and a pitch.
- A hairline and a 12px corner do the structure. Shadow is for what floats. Notes divide with 1px of #e6e6e6. Search, image cards, and insert cards share a 12px radius. The soft drop appears on the banner, the insert cards, and the small app chip, and it stays off the notes themselves.
- The page is a fixed-width reading column between two quiet rails. The feed is 568px and the lines inside it are about 520px, even on a very wide window. Navigation and the signup card stay put while the notes scroll. Copy stays short at every level: one word in the rail, a sentence or three in a note, a title plus one sentence in a card.