steid

docs: one design language, hierarchy without scale

Corrects the profile design committed an hour ago. That version gave the lead
item large type and justified it by splitting the product into a "portfolio
surface" and a "tool surface" with different rules.

That was wrong on the user's push-back, and the push-back was better than the
proposal: two design languages in one product is how a product stops feeling
like one thing, and it contradicted ui.md's own stated philosophy of quiet
confidence and small type.

Nothing now exceeds 14px except the page title. The lead is distinguished by
weight, colour, space, an eyebrow label and a hairline — everything except size.
The cost is recorded rather than hidden: the distinction is subtle, one weight
step, so the eyebrow copy is load-bearing because it is the clearest signal that
the item is different.

The general rule that falls out, and the reason this is worth a commit of its
own: hierarchy comes from weight, colour and space. Reach for size last, and
outside a page title, probably not at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JZwc7URWKVhkAuRTWiDmjA

JamesPatrickGill authored 7 days agoparentf0afae5Browse files30ba4507571381c13f7520aca02cba3360e656c6

1 file changed+26 −10

plans/ui.md+26 −10View file

		@@ -72,16 +72,32 @@ dotfiles 2w
72	72	- Sections with nothing in them are hidden from visitors and shown to the owner as
73	73	an affordance.
74	74
75		−### This deliberately breaks the density rules above
76		−
77		−[Philosophy](#philosophy) says small type and nothing large outside page titles. That
78		−still holds — for the tool surfaces, where code is the hero and density wins:
79		−browsing a tree, reading a blob, the log, settings. The profile is the portfolio
80		−surface, and it is the one page whose job is to make an impression rather than to be
81		−operated. The lead item gets editorial weight there and nowhere else.
82		−
83		−If a third kind of surface appears, decide which of the two it is rather than
84		−splitting the difference.
	75	+### One vibe. Hierarchy without scale.
	76	+
	77	+The first version of this design gave the lead item large type and justified it by
	78	+splitting the product into a "portfolio surface" and a "tool surface" with different
	79	+rules. That was wrong and is not what ships. Two design languages in one product is
	80	+how a product stops feeling like one thing, and it contradicted this file's own
	81	+philosophy — quiet confidence, the UI disappears, small type throughout.
	82	+
	83	+Nothing exceeds 14px except the page title. The lead item is distinguished by
	84	+everything except size:
	85	+
	86	+\| Device \| Lead \| List row \|
	87	+\|---\|---\|---\|
	88	+\| Eyebrow label \| yes \| no \|
	89	+\| Weight \| 600 \| 500 \|
	90	+\| Description \| full width, roomy \| compact \|
	91	+\| Space around it \| generous \| tight \|
	92	+\| Separator \| hairline below \| none \|
	93	+
	94	+The cost, stated plainly: the distinction is subtle. One weight step is not much,
	95	+and the eyebrow and whitespace carry most of it. That is the right trade for a developer
	96	+tool — but it means the copy in the eyebrow is load-bearing, because it is the clearest
	97	+signal that this item is different.
	98	+
	99	+The general rule this sets: **hierarchy comes from weight, colour and space. Reach for
	100	+size last, and outside a page title, probably not at all.**
85	101
86	102	### What it needs that does not exist yet
87	103