A design pass: the type ladder from the logo, and one name per thing

Archived

TYPOGRAPHY, taken from the lockup and walked down to something you can read a paragraph in. "The Vine" in
LeJour Script over COFFEEHOUSE + BAKERY in AdBhashitha is the whole brand voice, so: the script stays in
the wordmark and nowhere else (it is unreadable at length); AdBhashitha carries h1–h4 and the price, and
keeps the wordmark's 0.01em letter-spacing so a heading sits on the same rhythm as the logo above it;
`eyebrow` and `label` are the hinge — sans, but letterspaced like the tagline — and then plain Raleway.
Sizes are declared once in type.css instead of being re-chosen per template, and none of the type classes
set a colour, because the same heading appears in sage on cream and in cream on sage.

BUTTONS AND SURFACES have names now. `panel` is the white box that was "bg-white rounded-3xl shadow-xs"
written out in nine places (which is how two of them end up with different corners); `panel-lift` is one
that reacts. `pill` is one shape in four colourways, which exist because this site puts buttons on cream
AND on sage and they cannot be the same colour on both. `chip`/`chip-on` are the products filter.

RHYTHM: `section` (py-16 md:py-24) and `band` (py-14 md:py-20, tighter because a coloured strip is already
doing the separating) replace nine hand-picked paddings.

FOCUS: one visible ring for everything reachable by keyboard, as an outline rather than a shadow so it
works on cream, on white and on the sage bands, at zero specificity so a utility can still win.

Z-INDEX: written down in base.css, all two of it — 40 the sticky header, 30 the mobile panel, which is a
child of the header and so can only ever sit under the bar. Everything else stacks in document order. The
point of the comment is that a third layer doesn't get invented at 9999.

DROPDOWNS: the admin's category selects were drawing the platform's own arrow in the platform's grey; they
get the site's chevron and room for it.

53 tests green. Every class used across all nine pages — five public, four admin — resolves in the
compiled stylesheet, so nothing here is styled by a name that doesn't exist.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

This commit is contained in:

austin

2026-07-26 18:10:47 -05:00

co-authored by

Claude Opus 5

parent 8d54db7c30

commit 6b6ddcea42

14 changed files with 266 additions and 76 deletions

									
										src/main/resources/templates/error.html
									
		+2
		-2
	
												View File
												
				@@ -14,13 +14,13 @@

				<body>

				<div th:fragment="content" class="bg-bakery-50">

				  <div class="container mx-auto px-4 py-24 md:py-32 text-center">

				    <h1 class="font-adbhashitha text-4xl md:text-5xl text-bakery-900 mb-6">Something went wrong</h1>

				    <h1 class="h1 text-bakery-900 mb-6">Something went wrong</h1>

				    <p class="text-bakery-800 mb-10">

				      That is our fault, not yours. Try again in a moment, or call us on

				      <a href="tel:+13097010660" class="underline underline-offset-4">(309) 701-0660</a>.

				    </p>

				    <a href="/"

				       class="bg-bakery-600 hover:bg-bakery-700 text-white px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition">

				       class="pill-sage">

				      Back home

				    </a>

				  </div>