Branding

jfa.dev

Weekend groceries

⌘⇧U

Shared components for the toolbox. Theme toggle is in the header.

Typography

IBM Plex Sans for UI. Zilla Slab for user-editable titles. Google Sans Code for shortcuts and tokens. Served once for every app from /shared/fonts/.

Families

IBM Plex Sans

UI, body, and page titles.

Zilla Slab

List titles the user can edit.

Google Sans Code

Kbd, class names, token names.

Scale

Branding

Weekend groceries

Body in IBM Plex Sans. Inputs inherit Zilla Slab.

Muted copy stays on the same measure.

⌘⇧U

Titles

Keweke list titles are Zilla Slab, uppercase, tight tracking. The editor keeps that size so Save and Cancel sit beside it.

Display

Weekend groceries

Edit

Colors

CSS variables in common/src/styles.css. Toggle the header theme to see light and dark.

Tokens
  • background
  • foreground
  • card
  • popover
  • primary
  • secondary
  • muted
  • accent
  • destructive
  • success
  • border
  • input
  • ring
Pairings
primarysecondarymutedaccentdestructivesuccess

Layout

SiteHeader stays viewport-wide. Page body sits in a max-w-screen-2xl frame with border-x. Gutters are px-4 sm:px-6 lg:px-8. Do not nest the header inside the frame.

Header
SiteHeader full-bleed, outside the shell
Frame
max-w-screen-2xl border-x border-border
Gutters
px-4 sm:px-6 lg:px-8

Button

Variants and sizes from buttonVariants. Focus uses the ring token. data-icon tightens padding around inline icons.

Variants
Sizes
With icons
States

Input

Aria Input. Invalid uses aria-invalid. File inputs keep the built-in file:: styles. Typed fields use Zilla Slab.

Basic
States
File

Checkbox

Aria Checkbox. Supports selected, indeterminate, and disabled. Used for shopping list items.

States
With notes

Dialog

Aria Modal. DialogTrigger wraps the opener and the Dialog. Close with Esc, the overlay, or a footer action.

Confirm
No close button

Table

Plain table primitives with overflow on the container. Header, body, footer, and caption slots.

Shopping list
Weekend groceries
ItemQtyUnitCategory
Oat milk2lDairy
Sourdough1loafBakery
Blood oranges6eaProduce
Items3
With checkboxes
ItemQty
Oat milk2
Sourdough1

Kbd

Kbd and KbdGroup from react-aria-components. Muted chip by default for hints beside controls; keycap for prose where the key is the subject. Adapts inside tooltips via data-slot.

Keys
⌘⇧⌥↵EscU
Groups
⌘⇧U⌘KCtrlShiftU
Keycap, in a sentence
Press⌘⇧Uto switch apps.

Toaster

Sonner toaster from common/ui. Follows the header theme.

Variants
With action