BRAND · COMPONENTS

Components.

A live catalogue of the building blocks in src/components/haralt. IDs follow the design handover; on conflict the newest section wins (m over n over k).

Update 3 – map, errors and feedback

Map – MapLibre + OpenFreeMap Positron

haralt/LockerMap.tsx

Radius 26, height min(520px, 70vw), lazy-loaded. Markers: 34 px green circle for lockers, 40 px yellow with the symbol for the main warehouse, 3 px white edge. Legend pills bottom left. Fallback when tiles fail: “The map didn't load” + “Try again” / “Show as list”.

LockerMain warehouse

The map didn't load

Error

See the map on Our lockers

Error box

haralt/ErrorBox.tsx

Red is only used here. Placed right above the button it concerns. Text = what happened + what did not happen + at least one way out as a link.

We don't recognise that email and password together. Try again, or get a new link by email.

The bank declined the card (•••• 4421). Nothing has been charged. Try another card, or pay with Vipps.

DECLINED

Toast

haralt/toast.tsx · ui/sonner.tsx

Dark pill bottom centre, 2.8 s, a new toast replaces the last. Only for actions without their own screen – never for anything the user must read carefully.

Modal – confirm and settings

haralt/Modal.tsx · ui/dialog.tsx

Ink overlay at 55 %, click outside closes. Card min(460px, 92vw), radius 26, padding 30. Filled red primary only when the action is actually available; a block is shown as an error box with a way out.

Empty state and search line

haralt/EmptyState.tsx

Never a dead end: 56 px “?” circle, title with the search term in quotes, one secondary + one primary action.

You searched “popcorn machine” · 0 results

We don't have “popcorn machine” on the shelves yet

But we can get most things. Tell us what you need and when, and we'll reply within 48 hours.

See everything Ask us about it

Receipt and confirmation

haralt/StatusBanner.tsx · haralt/PriceBox.tsx

Confirmation = full-width green banner with a timestamp eyebrow and a personal title. Receipt: white card max 520 with a price box.

SENT · TUESDAY 22 SEP AT 14:36

Thanks, Kari. We're reading it now.

You'll get a reply by email – usually the same day, within 48 hours at the latest.

RECEIPT · #4788

Dyson V8 Absolute

Saturday 12 Sep · Sogn Studentby, locker 2

Unlock10 kr

Use · 1 h 30 min at 40 kr/hour60 kr

Paid70 kr

Status labels

haralt/StatusLabel.tsx

Green = active/available (dot only on “ongoing”), amber + clock = waiting on someone, red = declined/error, grey = done. Brand yellow = delivery method, not state. Fact labels follow the status label.

STATE

ONGOINGAVAILABLE NOWAWAITING REPLYRENTED · BACK 18:00DECLINEDRETURNEDDELIVERY

FACT LABELS

1 h 12 min40 kr so farSogn

PROMISE LABEL

We usually reply the same day

Update 2 – new and changed components

Pill bar – menu, toggle, language

haralt/PillBar.tsx

White pill bar, 4 px padding. Active = ink with white text (stays black on hover), inactive hover = cream. Same pattern for the menu, Map/List and NO/EN.

Things to rent Our lockers About Contact

My page

Form fields – cream fill

haralt/Field.tsx · ui/input.tsx

No border: cream 96 %, radius 14. Focus = 1.5 px green + white. Error = 1.5 px red. Disabled = same fill, muted text. The placeholder is always an example.

Name

Email – we send the price and confirmation here

Error

Email locked

Disabled

Message

SENTENCE FORM (CONTACT)

Hi! My name is and you can reach me at .

Input (shadcn) and Switch

Get tips and offers by emailGet tips and offers by email · Disabled

Chips

haralt/Chip.tsx

Selected = ink/white. Unselected = cream 96 %, hover 92 %. Green is no longer “selected”. White chips are suggestions under the search field.

Selected

Unselected

Disabled

Icon rows – light and dark

haralt/IconRow.tsx

38 px icon box radius 12, Lucide 18 px, title 14/700, subtitle 12.5. Always three points. Dark card: yellow eyebrow, inverted icon.

HOW IT WORKS

UnlockGo to the locker and tap “Unlock”

Take it and close the doorThe rental starts when the door closes

Return itTo the same locker when you're done

GOOD TO KNOW

Wear and tear is coveredNormal use costs nothing extra

Something went wrong?Tell us and we'll sort it

Around the clockReturn it when it suits you

Settings card

haralt/SettingsCard.tsx

Same skeleton for all: icon box + title 17/800 + subtitle, content, footer row with a divider – note left, action right. “Delete” is always its own card at the bottom.

Payment

Charged when you return.

VISA •••• 4421

Delete account

Your account and history are removed for good.

You must have returned everything first.

Status banner, radio choice, stat tiles

haralt/StatusBanner.tsx · RadioCard.tsx · StatTile.tsx

Banner: green = confirmed, dark = needs action. Always its own card, never inside a white one. Radio: selected = ink edge + 5 px ring. Stat tiles 18/900 and a 6 px progress bar.

Your booking is binding

Order confirmation sent to kari@epost.no

ORDER #4821

All set – accept within 24 hours

We've checked the warehouse: everything you asked for is free on Friday 11 Sep.

ORDER #4821

PICK UP FROM A LOCKERSogn StudentbyRolf E. Stenersens allé 34 · 1.2 kmAvailableKringsjåRented out right nowRented · 18:00Get it deliveredTo your door anywhere in Oslo · from 99 kr1–2 days

40 h

battery

IP67

rainproof

40 h

battery

IP67

rainproof

Daily cap reached in 4 h 58 min

Foundation

Buttons

ui/button.tsx · ui/button-link.tsx

Radius 999, weight 700. Heights lg 52 · md 48 · default 44 · sm 38 · xs 32. Arrow only on step buttons. Disabled: opacity .45.

VARIANTS

STATES

Disabled

Loading state

SIZES

Dark

k11

Product card and “Missing something?”

haralt/ProductTile.tsx

White, radius 22, 1:1 image with object-fit: contain and no background. Hover: lift 2 px + shadow. The last tile in a grid is always the dashed “Missing something?”.

AVAILABLE NOW