TACOMANESS / THE WORKING LIBRARY / V1.0

Good design.
Local character.

The ingredients for a city guide that feels like Tacoma. A living collection of foundations, components, and real-world patterns.

12 SECTIONSINTERACTIVE SPECIMENSDESKTOP → MOBILEDEMO DATA ONLY
01

Color with a purpose.

Printed-poster energy. Strong contrast. Categories that stay recognizable across every view.

TEXT / INK OR PAPER
AaInkINK TEXT
AaPaperINK TEXT
AaSignalWHITE TEXT
AaFamilyINK TEXT
AaFood & drinkINK TEXT
AaMusicINK TEXT
AaOutdoorsWHITE TEXT
AaArts & cultureINK TEXT

Light theme colors take ink text; ink, signal, and outdoors take white. When in doubt, pair any category color with ink.

BRAND / A FLEXIBLE WORDMARK
tacomaness

Keep the wordmark in ink. The signal asterisk adds character without becoming a status indicator.

SEMANTIC / NEVER COLOR ALONE
ConfirmedCheck detailsCancelledNote

Category colors identify interests. Status labels carry separate meanings.

SIGNAL STRIP / ALL TEN

The header strip always shows all ten in this order, from Grape to Harbor. Decorative only — it carries no status or category meaning, so it never substitutes for a label.

02

Big personality. Clear details.

System sans for the story. Monospace for the practical bits. Tight headlines, comfortable reading.

DISPLAY / 64–86
Go find your thing.
HEADING / 32–40

A little grit. A lot going on.

SUBHEADING / 24

Your next good Saturday

BODY / 16

A morning by the water. Something good for lunch. Music that keeps you out a little later. There’s more than one way to make a day of it.

LABEL / 14 · METADATA / 12
Find an event

SAT, SEP 26 · 11:00 AM · PACIFIC TIME

Use one H1 per page. Keep body copy at 16px or above, routine controls at 14px, and secondary metadata at 12px. Avoid all caps for long passages.

03

A grid that holds it together.

Hard edges, generous breathing room, and a rhythm built on four pixels.

SPACE / 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
4
8
12
16
24
32
48
64
STRUCTURE / 12 COLUMNS
8 / Main content4 / Details

Wide screens pair content with a supporting rail. On small screens, stack the important facts before secondary content.

SURFACES / RULING & TEXTURE
1px
Divider
1.5px
Structure
Print
Texture

Flat surfaces and square corners. Reserve circles for small accents and compact icon actions.

SmallUnder 640px · single columnMedium640–1000px · two columnsWideOver 1000px · full grid
RESPONSIVE / LIVE MOBILE PREVIEW

The same page, less room.

This is the working page in a narrow frame. Try its navigation, filters, and details.

Desktop grids stack. Navigation stays visible. A list view offers an alternative to the wide calendar.

Open full page
04

Make the next step obvious.

One primary action per task. Quiet alternatives. Visible hover, focus, disabled, and loading states.

BUTTONS / TRY THEM
ICON BUTTONS / TOOLTIPS

Every icon-only action has an accessible label. Touch targets are at least 44 × 44px.

ICONS / LUCIDE, 1.5PX STROKE
05

Ask for what matters.

Persistent labels, useful hints, and errors beside the field. This form validates locally; it sends nothing.

SUBMISSION / VALIDATION DEMO

Demo only. This address will not be sent or stored.

CHOICES / SELECT, CHECKBOX, RADIO, SWITCH

Example preference; does not filter the listings.

06

Less friction. Better plans.

Combine interests, a neighborhood, and a price preference. Results update from the same event collection.

DISCOVERY / LIVE FILTERING

145 results

Category filters carry their color backgrounds at all times; the selected filter adds an inset ring, and Everything stays ink. Color never works alone — selected filters also set aria-pressed.

07

One story, a few shapes.

Shared event cards and compact listings keep time, place, price, and category in a predictable order.

VENUE / FUTURE PATTERN
NORTH TACOMA

Point Defiance

Forest paths, waterfront views, and room to wander.

Park visitor information
ORGANIZER TOOLS / TABLE PATTERN
ListingCategoryDateStatus
Little explorers, forest editionFamilySEP 21Draft
A very good lunch breakFood & drinkSEP 22Draft
Turn it up: local live musicMusicSEP 23Draft
08

A date is an invitation.

Color, category text, and a real link make every calendar entry usable beyond its visual treatment.

DATE & TIME / EXPLICIT

Saturday, September 26, 2026

11:00 AM · Pacific time

Use a named month to avoid ambiguous numeric dates. Show the timezone on event details.

PRICE & AVAILABILITY
FreeFrom $15Few tickets leftSold out

Examples only. Real availability needs a current organizer source.

10

A little context, right here.

Use dialogs for focused tasks, a side panel for supporting detail, and disclosure for secondary questions.

OVERLAYS / OPEN EACH EXAMPLE
DISCLOSURE / FREQUENT QUESTIONS

11

Never leave people guessing.

Show what happened, what is still happening, and what someone can do next.

MESSAGES / SUCCESS, WARNING, ERROR
You’re all set.

The example was saved on this page.

Details may change.

Check the organizer’s listing before heading out.

We couldn’t load these events.

Your filters are still here.

TOASTS / TRANSIENT FEEDBACK

Use a short toast for a completed action. Keep important failures inline.

Static progress specimen.
EMPTY / GIVE A WAY FORWARD
No plans here just yet.
Try fewer filters or explore another day.
Explore the calendar
LOADING / MATCH THE CONTENT
Loading specimen — no request is running.
DraftPending reviewPublishedCancelledPast event
12

Useful is a design choice.

A voice that is local, direct, and welcoming. An interface that works with a keyboard, a screen reader, or a thumb.

VOICE / SPECIFIC, HUMAN, HONEST
WRITE

Free entry. Food sold separately.

INSTEAD OF

An unmissable and unforgettable experience.

Lead with what people need: the day, the place, the cost, and who it suits. Label outdated and unverified information.

ACCESSIBILITY / WORKING RULES
  • Visible focus rings and a skip-to-content link.
  • 44px touch targets for common controls.
  • Labels and icons alongside meaningful colors.
  • Keyboard-operable tabs, menus, and dialogs.
  • Reduced motion and readable text at 200% zoom.
  • Unknown venue access is never presented as confirmed.
EVENT CONTENT / REQUIRED & OPTIONAL
EssentialHelpful when verifiedTrust signals
Title, category, descriptionAge range, durationOrganizer and original source
Date, time, timezoneTransit, parking, arrivalLast checked date
Venue, address, priceAccessibility, sensory detailsCancellation / sold-out state
Booking or entry instructionsIndoor / outdoor, rain planCorrection path

A shared language for the 253.

Use these patterns across event discovery, venue guides, saved plans, newsletters, and organizer tools as the product grows.