UI components

Fonts

Barlow and Lato are the SPEND typefaces. Arial, Georgia, and system mono are browser defaults so you can compare.

Barlow

SPEND headings and buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 0123456789

Lato

SPEND body copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 0123456789

Arial

Default sans (browser)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 0123456789

Georgia

Default serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 0123456789

System mono

Default monospace

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 0123456789

Button

Variants, sizes, loading, and disabled. Default type is button so it won’t submit a form by accident.

Variants

Sizes

States

Link

Internal routes use Next.js. http(s), mailto, and tel open in a new tab. Button variants are available for calls to action.

Text

Inline (home)Muted Underline External

As buttons

Primary Secondary Outline

Nav

Landmark with an accessible name. Items are a list of links; set current for aria-current.

Focus

Interactive primitives share a 2px ring via --focus-ring. Tab through the controls to confirm it is visible.

Keyboard

Ring appearance

Modal

Native dialog with focus trap. Closes on Escape, backdrop click, and ModalClose.

Forms

Field wraps a label, control, hint, and error. Controls share the same height, radius, and focus ring.

Email

We’ll never share this.

Role

School name

This field is required.

Notes

I agree to the termsDisabled option

Card

Bordered surface for grouping related content.

Budget snapshot

A quiet container for summary content or settings groups.

Cards are layout-only. Put buttons, fields, or lists inside as needed.

With action

Compose with Button and Badge.

Active

Badge

Compact status labels.

Variants

defaultmutedsuccesswarningdanger

Spinner

Inline loading indicator with a screen-reader label.

On its own

Loading posts

Container

Centered max-width wrapper. This page uses size lg (max-w-4xl). Home and posts use the default md.

smmax-w-xl

mdmax-w-2xl (default)

lgmax-w-4xl

xlmax-w-6xl

fullmax-w-none