Corners: 12px, and named once

24px (Tailwind's rounded-3xl) was the roundest thing on the page and read as a phone app. A printed card
has a corner you can see.

Two tokens rather than a find-and-replace, so this is answered once and not per template:
`--radius-panel` (12px) for anything with an edge — cards, photos mounted on them, the admin's boxes — and
`--radius-field` (8px) for inputs, which were three different radii across the public form and the admin.
Buttons stay fully round: the pill is the brand's button shape and always was.

53 tests green, every class on all seven checked pages still resolves.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
2026-07-26 18:32:29 -05:00
co-authored by Claude Opus 5
parent 5448cbded1
commit c4cd19e175
7 changed files with 23 additions and 13 deletions
+1 -1
View File
@@ -70,7 +70,7 @@
* `panel-lift` is one you can click, and it rises rather than just darkening.
*/
@utility panel {
@apply bg-white rounded-3xl border border-bakery-200/70;
@apply bg-white rounded-panel border border-bakery-200/70;
box-shadow: var(--shadow-card);
}