Specs

Button

Three sizes, eight intents. Every size guarantees a 44×44 hit area on coarse pointers even when its visual box is smaller.

Intents

Sizes

States

Icon-only

A square whose side is the size's control height, or a circle. Always carries an aria-label. --floating adds the lift for a control that sits over media.

Press

Press and hold. Each squeezes by the scale for its width, so the edge travels about the same distance: icon buttons 0.92, text buttons 0.97, full-width buttons 0.985.

Prefer aria-disabled over disabled on form submits — a disabled button leaves the tab order, so a keyboard user reaches the end of a form and finds nothing there. (D-32)

Menu

Commands, not a value. Arrows move focus only and nothing happens until Enter, Space or a click, so a menu is safe to wire to navigation. Escape closes and returns focus to the trigger. A menu that reflects a state names it in the trigger and checks the current item.

Input

The signup form's fields are native browser defaults today — border: 2px inset #767676, no focus state, no error state.

Search bar

Live's search bar, segment for segment: a search-type picker — All, Books/Documents, Text Contents, TV, Radio and the rest — that sets what is searched before the search runs, the query field with its clear button, and the search button. Two sizes, as live: the default 30px bar in the topnav and on the search page, and the 50px bar on the homepage.

Default — topnav, search page

Large — homepage

With a query, and a different search type

Dropdown

Live's ia-dropdown — a bold label and a caret that open a dark panel — built on a native <select>, so the keyboard, screen reader and touch behavior are the platform's. Where the browser supports customizable select the panel is styled to match; elsewhere its own picker opens. The selected option carries a check as well as the fill.

Segmented control

One choice from two to four options that fit on screen. A radio group: one tab stop, arrows and Home/End move the choice. The chosen option takes the soft selected look. The sort bar's view switch is one.

Checkbox and radio

20px controls in 44px rows. Live renders these at 13×13 on mobile, inside a list of about seventy.

Switch

A binary setting that takes effect the moment it changes. A form value that is submitted later is a checkbox.

Tabs

Page tabs that swap a panel are a tablist. Tabs that change the URL are links. The search page's search-type strip is presented as tabs too, over a single results panel, with manual activation because choosing one re-runs the search (D-28).

Page tabs

Search-type tabs

Sort bar

Above every result grid: sort direction, sort field, and the result view. The view switch is a radio group — exactly one view is always chosen. The direction glyph's two arrows show the order: the current one in ink, the other faded.

Direction unavailable

Relevance has no direction. The toggle stays in place, so the bar does not shift, and says why it is unavailable.

Letter bar

Sorting by Title or Creator adds a letter bar beneath. Each letter toggles a filter to results starting with it; a letter with no results is disabled. Two rows of 13 below md.

Facet rail

The filter rail on search, collection and profile pages: the Year Published histogram, then Media Type, Year, Subject, Collection, Creator and Language, six values each. Each group is a fieldset; each row is a checkbox, the eye that hides the value, then the label and count. The eye rests at 30% and closes on hover. Collection values link to their collection. "Clear All Filters" heads the rail once anything is applied; there are no chips.

Narrow

Narrower than lg, the rail is a Filters accordion above the results, closed until opened, each group closed under its own caret.

Signed out

Signed out, the rail stays behind the same Filters disclosure at every width, and loads its values only when opened.

More

"Show More" opens every value of one facet in a modal. Sort by count or name, filter the list, and see what is chosen as removable chips. The values run in columns of twelve that scroll sideways a page at a time. Nothing applies until Apply Filters.

Tile

The most-repeated component on the site — fifty per page of results. Four kinds, chosen per result by content type — item, collection, account and saved search — on one skeleton. Titles clamp at three lines (four for a search).

Item

Collection

Account and search

An account: its avatar in a circle, the screen name, "Archivist since", and uploads in place of views. A saved search: the search glyph on a light well in a dark card, the query as its title, no footer.

What a tile can carry

Sorted by a date, that date replaces the byline ("published 1926"). Sorted by weekly views, the views stat counts the week. A serial adds its volume and issue; a full-text search adds the matching passages with the terms marked. A restricted result blurs its thumbnail under a banner saying why.

Parts

The two parts the site builds as components of their own: the thumbnail well (image-block) — a fixed 170px, image contained, square top corners rounded to match the card — and the item stat row (tile-stats).

Hover pane

With a pointer that can hover, resting on a grid or compact result for 300ms opens its list-view row beside the pointer; keyboard focus opens it too, and Down Arrow moves into it. Where a pointer cannot hover, the ⓘ button on the thumbnail opens it instead — this page shows that button only on a touch screen.

List view

Compact view

Carousel

A native scroll container with scroll snapping. A fling moves one page, as the arrows do, and each arrow drops out at its end. The viewport is clipped to its container, so the document never scrolls sideways.

Read more

Collapses long prose to six lines. The toggle appears only when at least four lines are hidden — a short description shows whole, with no control.

Chips, badges, avatars, pagination

Item page

The parts of offshoot's details page that no other page uses. The whole page is on the Screens page.

Actions

The glyph over the label in a 2px ink frame. Add to List shows when signed in, Borrow only on TV and radio items. Pressed, open, or holding a choice, an action takes the soft selected tier. Below lg each shows its short label.

Lending bar

Across the top of the theater over a lendable book: the loan's state, then its actions — the first a split button whose caret lists the rest.

Sidebar states

A stream-only item says so under its stats. An item that needs a login replaces its downloads with the way in.

Flag panel and list picker

Flag opens a panel in the danger modal's dress; each flag is a checkbox item. Add to List opens a menu of the patron's lists, each checked when the item is in it.

Not found

Messages

Every intent carries an icon. Color alone fails WCAG 1.4.1 — and fails outright for the success/danger distinction, which is exactly red vs green.

Banner

The same message about the whole site, above the topnav and edge to edge like it: the tint spans the window and the text lines up with the page. Up to three stack, under the donation banner when a fundraiser is on. A dismissible banner fires an event and leaves remembering the dismissal to the page.

Tooltip

Names an icon-only control for pointer users, on hover and on focus. Escape hides it without moving focus. Never essential information, never anything interactive — the control's aria-label is still its name.

Modal

Loading

Skeletons match the shape of what is coming. A grid never gets a spinner.

Empty state

No results, or a failed search, replaces the whole browser — rail and sort bar included — with the message over a large illustration. A failure adds the search engine's own message under "Error details:".

Topnav

The dark bar across every page. Wide, it carries the brand, the media types, search, account links and upload, with the subnav (About … Volunteer) in a row beneath. Narrower than the lg breakpoint, the subnav goes, the media types move into a drawer of full-width rows and search and account become icons. It responds to its own width, so the preview switch above shows the narrow form. The logo is the live mark and wordmark, lifted as a brand asset.

Signed in, Texts open

The account area is the avatar and, from 990px, the screen name; it opens the account menu, staff groups included. The open media type takes its color on the #333 fill. From 1200px each glyph carries its label.

Environment badge

On a development or staging host only, beside the logo, so a tab is never mistaken for production.

Narrow, menu open

Loading

While a page or its results load, a 3px bar sweeps under the header in the link color, over the page's first 3px. Under reduced motion it holds still.

Footer

One line on the chrome surface: fixed to the viewport's foot on the homepage, at the end of the page on an item page, absent elsewhere.

Dark chrome

Everything inside .ia-inverse re-points its text, border and focus tokens. The focus ring switches to #9aa8ff automatically.