Kusiima.com

The problem

The failure mode of a personal site isn't ugliness, it's drift. A second typeface arrives for a headline, an accent gets nudged lighter to fix one piece of small text, and six months later nothing quite matches anything and no one decision is to blame. Every choice here is made once and then made structural, so drift has nowhere to enter.

What got decided

One typeface, every job

One family sets headings, body, labels and data — on the site, on the social cards, in email. There is no second face to choose between, which takes the "which font goes here?" question off every new surface before it can be asked. It is a variable face, so the whole weight range costs one file.

One accent, three roles

The accent is strong enough to carry the mark, the rules and display type, and not quite strong enough for text at body size. Rather than dilute the identity to suit its weakest case, it splits into three named roles: the identity colour, a darkened variant for small text, and a deeper fill for buttons carrying a label. Every pairing is measured against WCAG AA in both themes.

Tokens with a Tailwind bridge

Raw brand ramp and semantic roles on :root, exposed to Tailwind as utilities. A colour changes in one place and propagates to both themes, the OG cards and the emails — which is what makes the single-accent rule survive contact with a deadline.

Uppercase labels instead of a second face

The wide-tracked eyebrow carries the job a monospace face usually does. It costs no extra font file and works identically on a social graphic and a web page, which a second family would not.