Skip to content
Signal

Components

Components

Every web component in the CSS system and every cross-platform component contract.

Signal has three kinds of component. Web components are CSS classes in chitransit.css, styled only from tokens. Contracts are the cross-platform transit components specified in components/*.yaml and implemented natively on web and iOS. iOS app components are specified in the v3 spec and rendered here as mockups.

Web components

The shared CSS system in /site/chitransit.css: tokens and base in cascade layers (any page rule overrides them), then component and utility classes. Every value comes from tokens.json or components.tokens.json; go test ./... fails on a raw colour or size in a component file.

Classes use the ct- prefix and --modifier variants; state comes from aria-pressed, aria-current, [disabled] and :focus-visible. Each component reads var(--button-radius, var(--ct-button-radius)): change the token to restyle every instance, or set --button-radius on one element to override it. Utilities: .ct-m-* .ct-p-* .ct-gap-* (space scale), .ct-text-* .ct-weight-* .ct-color-* .ct-bg-* .ct-radius-* .ct-shadow-* (generated from the tokens), .ct-flex, .ct-grid-*, .ct-visually-hidden.

Each sample shows light (left) and dark (right).

ButtonText actions. Default is the Brand-tint secondary; --primary fills with Brand; --ghost is a text link; --sm is the compact size.BadgePill-shaped labels with an optional glyph, e.g. a page's status.CardThe grey card on white, the layout unit. --empty centres a muted message.ChipSmall labels: route type, change type, metadata. Variants: --muted, --accent, --solid, --outline, --good, --warn, --alert.Icon buttonRound 44pt glyph buttons (live track, favorite, close). aria-pressed=true fills it.InputText inputs, selects and the search field (.ct-search with a leading glyph). Pair with .ct-field for a label.Route toggleRoute filters: a line-colour circle (set --route) or a Brand bus capsule. aria-pressed=true shows the selection ring.Segmented controlMutually exclusive choices. The current segment carries aria-pressed=true, aria-current or aria-selected=true.SpinnerIndeterminate loading ring; .ct-icon-spin turns a glyph once (refresh).StatusA status word first, colour second (Due, Delayed, alerts). --pill adds a tinted background.TableData tables with a muted header row; wrap in .ct-table-wrap to scroll sideways.ToastTransient confirmation on the live surface. Add .is-visible (or data-visible) to show it.TooltipA short hint on hover or focus: add data-tooltip to any element with .ct-tooltip.

Contracts

Each contract page draws every state live on the web, in light and dark, beside the iOS screenshot of the same state, with anatomy, tokens, accessibility and platform differences from the YAML.

Route iconA route's identity mark. Train lines are solid circles in the line colour; bus routes are numbered Brand capsules. One family in three size roles.Station markerA train station on the map: a neutral capsule with a train glyph and one bar per line, in a white keyline. Zoomed out it collapses to a compact form.Bus markerA live bus (vehicle) on the map: a Brand body with a bus glyph, a heading indicator and the route number in a tag above or below. Trains share the structure with a line-colour disc.Line barThe lines serving a station, as one rounded vertical bar per CTA line in contrast order. Used in stop rows, stop cards and search results.Stop cardA saved or nearby stop as a card: name, subtitle and routes on the left, the next two arrivals in a ruled column on the right.Arrival rowOne predicted arrival in a stop sheet: route icon, destination, the time as a word or minutes with the clock time under it, and a chevron that expands the upcoming-stops timeline.

iOS app components

Route filterSingle select. All first; tapping a route shows only it, tapping All or the selected route resets.Mode shortcut cardSecondary navigation from the Search empty state to the Trains and Buses route roots. Same grey Card row as a search result, with a Brand lead and one-line description.Direction controlNative segmented Picker for short direction sets; accessibility sizes and longer sets use the native menu style.List rowRoutes, stations and bus stops. Optional lead icon, title with an optional subtitle, optional trailing line bar or route capsules, chevron.Stop detail overlayStation and stop detail stack over the current Home, Nearby or Search page inside the core sheet. The top-right xmark restores that page and its prior sheet position. Same order for train stations and bus stops; shown here at full.Core sheetOne inset, rounded floating sheet is always present above the full-screen map. Home and Nearby are its base pages; Search and stop detail stack over them.Map controlsRider-facing controls use standard MapKit controls. The system owns their material (Liquid Glass on iOS 26), size, stacking and placement; the developer-only tuner is the sole custom map control.AlertOrange triangle leading the stop sheet’s metadata row. Tap opens a dialog; no alert, no glyph.Core tab barThe system Liquid Glass tab bar switches Home, Nearby and Search inside the floating sheet. It floats over the sheet bottom at every position.Core-sheet headerHome and Nearby use a sheet-owned title row below the grabber. Transit identity stays in route and stop content.Inputs and actionsNative searchable fields, Form rows, toggles, pickers, toolbar actions, and bordered buttons.