← Build log · Part 7 of 8

A brand you can rebuild from code

Tokens, a vector K drawn in a script, an outlined wordmark and a mistake that looked like a Q.

BrandDesign systems

A brand kit is usually a folder of files nobody can regenerate. We wanted the opposite: change one number and rebuild everything.

A logo that read as the wrong letter

The first direction put a K inside a ring, with the leg of the K breaking out through it. Rendered large, it looked like a Q. We opened a gap in the ring where the leg exits and the problem went away. Rendering before approving mattered more than the drawing itself.

Then a new direction

A written brand guide replaced it: a bold rounded K, Manrope ExtraBold for headlines, Inter for body, and a palette of ink, ivory, blue, coral, green and lavender. The K is now one master vector, a rounded stem plus a rounded chevron, defined in a script that writes every logo file.

Outlined text

The wordmark is converted from Manrope's glyph outlines into SVG paths, so it looks the same on a machine without the font. Along the way we found that an unquoted font-family containing a digit, like Source Sans 3, is invalid CSS, and the browser silently fell back to a serif.

Measure the contrast

We computed the ratios instead of eyeballing them. Ink on the coral is 7.1:1, so coral buttons carry dark text. Ivory on coral is only 2.2:1. Blue on ivory is 4.45:1, a hair under the AA line for small text, so small blue links get underlined. Those numbers are written into the brand guide.

PNGs and the favicon file are rebuilt by a script that uses tools built into macOS. The result is public at brand.kulkarniinc.com.

Kulkarni Inc.
Notes from building the Kulkarni Inc. stack. See all