Colour

Iconography

Icons communicate ideas to users at a glance, so they should be used sparingly, since an icon's intended meaning may not translate across cultural backgrounds.

General icons

All icons are sourced from lucide.dev to maintain consistency. If you need a custom icon, or one that isn't available in the chosen library, please reach out to the designer or design team.

Browse the full icon set at lucide.dev/icons.

Logos Work in progress

Official paths, always monochrome — never blue or a status colour. App bar lockup: 24px target mark beside the title; dev builds add the black dev badge.

Typography

Google Sans Flex is the typeface used for Trackore's mobile and web applications. The following settings are for mobile.

Writing Work in progress

These are content guidelines that allow information to be easily found, understood, used and adapted to the needs of all people, and that keep our experience consistent.

Sentence case

All of our content uses sentence case, including headers. Sentence case is when we capitalize the first word and all proper nouns in a phrase. We do this to improve readability and make consistency easier.

App bars & headers Work in progress

Two header patterns, never both on one screen: content title (app-bar row + 700/22 title in the content) and compact sub-page header (back + 600/18 in the bar, optional Muted caption labelling an ID).

Buttons

Buttons allow users to take action and complete tasks needed to achieve a goal.

General specs

Primary

One primary button per screen state.

Secondary

Used alongside a primary button, or on its own for a lower-emphasis action.

Tertiary

An inline, text-only action for lower-emphasis or supplementary actions, such as "Edit details" or "Retake". Default colour is the brand accent; on hover it darkens and underlines.

Danger

A destructive action that doesn't need a confirmation step, such as removing a single item from a list.

Danger secondary

A destructive action that has an additional step after this button, like a confirmation dialog.

Cards Work in progress

Reusable containers for grouping related content, from a single tile to a list of rows.

General specs

Tile card

A square action tile, like the ones on Home. A lone final tile spans both columns.

Stat tile

A group of key figures side by side, tabular, with an em dash when a value isn't known.

List card

A card that groups rows, like a settings list. The destructive row is red with no chevron.

Load card

Shows a single load's identity and its shipment detail, side by side.

Loading

Shown while actively adding to a load. A check confirms the item, and its weight sits on the right.

Capture card

Prompts a photo, then shows the thumbnails added so far with a dashed tile to add more.

Dropdown menus

A field that opens a list of options for the user to choose from, styled to match the height and shape of a text input.

General specs

Filter dropdowns

Lets a user narrow what they're looking at, like a station or a material, without leaving the page.

Default

The resting state for a trigger with a value selected or a placeholder shown.

Focus

Same as default, except the border is 2px and switches to the brand accent colour.

Disabled

A trigger that can't be opened or focused in its current context.

Options list

The list that opens when the trigger is clicked. Selection is shown with a tint fill and ink text; the trigger's current value is checked.

Input fields

Inputs let users enter and edit information needed to complete a task.

General specs

Default

The resting state for an empty or editable field.

Focus

Same as default, except the border is 2px and switches to the brand accent colour.

Disabled / Readonly

A field that can't be edited, whether it's turned off entirely or just showing a value the user can view and select but not change.

Error

Shown after validation fails, with a message explaining what to fix. The message is set at 13px, the same size as the field's label.

Text area

For multi-line text. Same fill, border and radius as a text input, with room to grow.

Numerical input

For entering a number. The value is set in tabular figures so digits don't shift width as they change, and the unit rides inside the field as a suffix.

Search

A search field is a text input with a leading search icon and no label, since the placeholder states what it searches.

Menus & overlays Work in progress

Menus open ≈5px below their trigger over an 18% scrim, radius 14px; selection = tint + ink + check. Dialogs: radius 18px, 32% scrim + blur. Bottom sheets: radius 22px top, grab handle. Every overlay: Esc, focus trap, aria-modal. Click a launcher below to open the real thing.

Notice Work in progress

A reassuring, low-priority message shown inline on a page, not tied to an action.

General specs

Pills

Pills are small, rounded labels for tagging content or showing status at a glance.

General specs

Default

Tags a piece of content with its type, role, or build, like a material name or a dev build marker.

Status

Shows where a load or bag is in its lifecycle.

Radio buttons

Lets a user pick one option from a small set, shown as full-width cards rather than a plain dot and label.

General specs

Default

Selected

With endonym

A sub-line under the main label, like a language's name in itself.

Tabs

Timeline Work in progress

Tracks the history of a load or bag as a vertical sequence of events, from creation to its latest status.

General specs

Journey card & lifecycle bar Work in progress

The detail-hub hero: status badges, origin → destination with a static arrow, labelled lifecycle bar (the screen's one progress indicator). ETD/ETA in Blue tabular 600.

Screen templates — 390×844 on canvas, no OS chrome Work in progress

Full screens assembled from the components above. Tab bar on section roots only. Login is the one unique page — included for reference, not a source of shared components.

Change log