# Antz components (for AI agents and developers)
Generated from the same content as the Antz Design website on 26 Oct 2026. Do not edit by hand; edit site-src/content and run `node site-src/build.mjs`.
How to use: load `tokens.css` and `antz.css`, use the Material Symbols Rounded font for icons (`icon_name`), and copy the HTML examples below. Examples use the Antz classes where they exist and exact Figma values inline where they don't. Anything marked **temporary** is not designed in Figma yet: use it, but report it as a departure.
## Index
- [Text field](#text-field) · Inputs · A single-line input for short free text.
- [Dropdown](#dropdown) · Inputs · A field that opens a list so people choose one option from a known set.
- [Date field](#date-field) · Inputs · A field for entering a date, a time, or both, chosen from a picker.
- [Picker field](#picker-field) · Inputs · A field that opens a chooser for people, sites or other records, and lists what was picked below it.
- [Checkbox](#checkbox) · Inputs · Lets people tick any number of options from a list, or confirm a single yes.
- [Switch](#switch) · Inputs · Turns one thing on or off, such as making a record active or inactive.
- [Search and filter](#search-and-filter) · Inputs · A search field and a filter button that sit above a list to narrow what it shows.
- [Segmented control](#segmented-control) · Inputs · Switches between two to four views of the same content.
- [Button](#button) · Actions · Starts the one main action on a screen, or records a decision.
- [Add button](#add-button) · Actions · Creates a new record from a list screen.
- [Menu](#menu) · Actions · Holds the second and later actions for a screen, record or card, behind the more icon.
- [Top bar](#top-bar) · Navigation · Names the screen and holds the way back, plus up to two screen-wide actions.
- [Record header](#record-header) · Navigation · Opens a record detail screen: the record name, the way back, its menu and who it belongs to.
- [Primary tabs](#primary-tabs) · Navigation · Splits a screen into its main views, one at a time.
- [Secondary tab](#secondary-tab) · Navigation · Switches between two or three ways of looking at the same content.
- [Chips](#chips) · Navigation · Narrows a list to one group at a time, with the count in each label.
- [Bottom navigation](#bottom-navigation) · Navigation · Moves between the main parts of a module.
- [List card](#list-card) · Display · A white card that stands for one record in a list: who it is about, its status when it has one, and a meta line.
- [Request card](#request-card) · Display · A lifted card for a request or an approval: category, priority, who asked, what for, and the status in a strip along the bottom.
- [Animal card](#animal-card) · Display · Shows one animal with its photo and the lines people use to tell it apart.
- [Site card](#site-card) · Display · Shows one site with a thumbnail, either as a choice in a list or as a site already picked into a form.
- [Status label](#status-label) · Display · A small tinted label that says the status of a record in one or two words.
- [History](#history) · Display · A timeline of what happened to a record: who did what, and when.
- [Stat tile](#stat-tile) · Display · A count people check at a glance at the top of a screen. It shows a number, not an action.
- [Bottom sheet](#bottom-sheet) · Overlays · A panel that slides up over the screen for a short choice or a small task, without leaving the page.
- [Confirm](#confirm) · Overlays · A small centred popup that asks people to confirm an action before it happens.
- [Filter screen](#filter-screen) · Overlays · A full screen for narrowing a list by several categories at once.
- [Toast](#toast) · Overlays · A short message that tells people an action failed or worked.
---
## Text field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7770)
A single-line input for short free text.
**When to use**
- The answer is short free text: a name, a number, a reference.
- One answer per field.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose one of a known set | Dropdown |
| Enter a date or time | Date field |
| Choose people, sites or items | Picker field |
| Switch something on or off | Switch |
**Anatomy**
1. Label · required
2. Required mark · when the field must be filled
3. Container · required
4. Value or hint text · required
5. Icon · optional, right side only
6. Helper or error message · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Default | Any short text | yes |
| With icon | An icon on the right that shows the kind of value or opens a picker | yes |
| With prefix | A fixed part before the value, such as a country code | yes |
| Multi-line | Descriptions and longer answers; starts 112 tall | yes |
| Notes | A free note on a record, such as notes on a training session: Notes yellow fill, otherwise the same as multi-line | yes |
| With unit | A number with one fixed unit: the unit sits at the right end of the field | temporary |
| With unit choice | A number that can be entered in more than one unit: the unit at the right end opens a small list of units | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing typed yet | Hint text in Hint grey | yes |
| Filled | A value is entered | Value in Ink | yes |
| Focus | The field is being typed in | Border turns Hint grey | temporary |
| Error | The value can't be accepted | Red border and a red message below | temporary |
| Disabled | The field can't be changed now | Disabled fill, text in Hint grey | temporary |
**Behaviour**
- Tapping anywhere on the container focuses the field and opens the keyboard.
- Errors show after the person leaves the field or presses the main action, never while typing.
- The field keeps its height when an error appears; the message pushes content below it down.
- A number with a unit keeps the unit inside the field, never in the label or a separate field. Tapping the unit, when there is a choice, opens the units as a dropdown sheet; the number stays.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Field width | Full width of the section | Two fields side by side when they belong together |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon, two or three words |
| Hint text | An example of the expected value, not an instruction |
| Error message | Says what to fix in one line, starting with a verb |
| Units | Only the units the measure allows, the most used first (kg before g); switching the unit converts the number |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Value | Type | 16 Regular | 16 Regular |
| Value | Colour | Ink #44544A | Ink #44544A |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Icon | Size | 24 | 24 |
| Helper text | Type | 12 Regular | 12 Regular |
| Helper text | Colour | Muted #7A8684 | Muted #7A8684 |
| Multi-line | Starting height | 112 | 112 |
| Notes | Fill | Notes #FCF4AE | Notes #FCF4AE |
| Unit | Type | 14 Medium | 14 Medium |
| Unit | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Unit | Gap to number | 8 | 8 |
| Unit choice | Chevron | 20, gap 2 | 20, gap 2 |
**Accessibility**
- Every field has a visible label; hint text never replaces it.
- The whole container is the touch area, 56 tall.
- Errors are written out, not shown by the red border alone.
- Value text on the Field fill scores 9.0 for readability. Hint text scores 3.1, so it never carries required information.
**Examples**
Default
```html
Hint text
Helper text
```
Variant: With icon
```html
Hint textbadge
Helper text
```
Variant: With prefix
```html
+91keyboard_arrow_downHint text
Helper text
```
Variant: With unit
```html
Hint textkg
Helper text
```
Variant: With unit choice
```html
Hint textkgkeyboard_arrow_down
Helper text
```
Variant: Multi-line
```html
Hint text
Helper text
```
Variant: Notes
```html
Hint text
Helper text
```
State: Filled
```html
Value
Helper text
```
State: Focus (temporary)
```html
Value
Helper text
```
State: Error (temporary)
```html
Value
Error message
```
State: Disabled (temporary)
```html
Value
Helper text
```
Device: Tablet
```html
Hint text
Helper text
```
---
## Dropdown
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7780)
A field that opens a list so people choose one option from a known set.
**When to use**
- People choose exactly one option from a list the app already knows: a type, a category, a department.
- Any number of options inside a form, even two or three: the form keeps one shape of field.
**When not to use**
| If people need to | Use |
| --- | --- |
| Type free text | Text field |
| Choose several options | Checkbox, or a picker field for people, sites and animals |
| Pick a date or a time | Date field |
| Choose people, sites or animals | Picker field |
| Filter a list | Search and filter |
| Run an action on a record | Menu |
**Anatomy**
1. Label · required
2. Required mark · when a choice must be made
3. Container · required
4. Chosen option or hint text · required
5. Chevron · required, always on the right
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Field | Inside forms. Same size and border as the text field | yes |
| Compact | 40 tall white box with no border, in tablet list toolbars beside the filter button | yes |
| Inline | No box: the chosen option and a chevron in the screen header, for screen-wide choices such as a month or a site | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing chosen yet | Hint text "Select" in Hint grey | yes |
| Filled | An option is chosen | Chosen option in Teal ink | yes |
| Open | The list is showing | A bottom sheet rises with one option row per choice; the chosen row has a green border, Field fill and a filled radio | temporary |
| Error | A required choice is missing | Red border and a red message 4 below | temporary |
| Disabled | The choice can't be changed now | Disabled fill; text and chevron in Hint grey | temporary |
**Behaviour**
- Tapping anywhere on the container opens the list as a bottom sheet titled with the field label.
- Tapping an option chooses it and closes the sheet at once. There is no Save button for a single choice.
- Closing the sheet with × or by tapping the dimmed area keeps the previous choice.
- With more than seven options, a search sits at the top of the sheet body.
- A dropdown never holds actions. Edit, delete and other actions go in a menu.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Field width | Full width of the section | Two fields side by side when they belong together, gap 16 |
| Compact variant | Allowed in list toolbars; the field is preferred | In list toolbars, right side, gap 8 to the filter button |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon: what is being chosen |
| Hint text | "Select" on its own. The label already names the thing |
| Options | Sentence case, short, no ending punctuation; ordered as people expect (by size, time or alphabet), never at random |
| Error message | Says what to do in one line, starting with a verb: "Choose an option" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Chosen option | Type | 16 Regular | 16 Regular |
| Chosen option | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Chevron | Size | 24 | 24 |
| Chevron | Colour | Ink #44544A | Ink #44544A |
| Error message | Type | 12 Regular | 12 Regular |
| Error message | Colour | Red #E93353 | Red #E93353 |
| Error message | Space above | 4 | 4 |
| Compact | Height | — | 40 |
| Compact | Fill | — | White #FFFFFF |
| Compact | Padding left and right | — | 12 |
| Compact | Text | — | 14 Medium, Teal ink #1F515B |
| Compact | Chevron | — | 20, gap 2 |
| Inline | Text | 16 Medium, Teal ink #1F515B | 16 Medium, Teal ink #1F515B |
| Inline | Chevron | 20, gap 4 | 20, gap 4 |
| Option row | Fill | White #FFFFFF | White #FFFFFF |
| Option row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Option row | Corners | 8 | 8 |
| Option row | Padding | 12 | 12 |
| Option row | Type | 16 Medium | 16 Medium |
| Option row | Gap between rows | 12 | 12 |
| Option row, chosen | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Option row, chosen | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Option row, chosen | Radio | 24, filled, Antz green #37BD69 | 24, filled, Antz green #37BD69 |
**Accessibility**
- The field is announced as a button that opens a list, read with its label and the chosen option.
- Options in the sheet are a radio group; the chosen one is marked by a filled radio, not by colour alone.
- The whole container is the touch area, 56 tall; each option row is at least 48 tall.
- Focus moves into the sheet when it opens and back to the field when it closes.
- Teal ink on the Field fill scores 8.6 for readability. Hint text scores 3.1, so it never carries required information.
**Examples**
Default
```html
Selectkeyboard_arrow_down
```
Variant: Compact
```html
Allkeyboard_arrow_down
```
Variant: Inline
```html
TitleAllkeyboard_arrow_down
```
State: Filled
```html
Option 2keyboard_arrow_down
```
State: Open (temporary)
```html
Option 2keyboard_arrow_down
Labelclose
Option 1radio_button_unchecked
Option 2radio_button_checked
Option 3radio_button_unchecked
Option 4radio_button_unchecked
```
State: Error (temporary)
```html
Option 2keyboard_arrow_down
Choose an option
```
State: Disabled (temporary)
```html
Option 2keyboard_arrow_down
```
Device: Tablet
```html
Selectkeyboard_arrow_down
Selectkeyboard_arrow_down
```
---
## Date field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7790)
A field for entering a date, a time, or both, chosen from a picker.
**When to use**
- The answer is a calendar date, a time of day, or both.
- A period needs a start and an end: use a pair of fields side by side.
**When not to use**
| If people need to | Use |
| --- | --- |
| Type a number of days or hours | Text field |
| Choose a month or a year for a whole screen | Dropdown, inline variant |
| Choose from a fixed set of periods | Dropdown |
**Anatomy**
1. Label · required
2. Required mark · when the field must be filled
3. Container · required
4. Date, time or hint text · required
5. Calendar or clock icon · required, right side
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Date | A single day. Calendar icon | yes |
| Time | A time of day. Clock icon | yes |
| Pair | Two fields side by side with gap 16: start and end, or date and time | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing chosen yet | Hint text shows the format in Hint grey | yes |
| Filled | A date or time is chosen | Value in Ink, in the standard format | yes |
| Open | The picker is showing | A bottom sheet with a month grid (date) or hour, minute and AM/PM rows (time), the chosen one filled Antz green; Cancel and Done in the footer | temporary |
| Error | The value is missing or out of range | Red border and a red message 4 below | temporary |
| Disabled | The value can't be changed now | Disabled fill; text and icon in Hint grey | temporary |
**Behaviour**
- Tapping anywhere on the container opens the picker as a bottom sheet titled with the field label. The keyboard never opens.
- The sheet opens on the current value, or on today when the field is empty.
- Done writes the value and closes the sheet; Cancel or × closes it and keeps the old value.
- Days outside the allowed range are not shown as choosable, so a wrong date can't be picked.
- In a pair, the end date can't be before the start date; the end field shows the error, not the start.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Pair | Two fields side by side, gap 16 | Two fields side by side, gap 16; a date and its time sit on one line |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon: "Start date", "Time" |
| Date format | D Mon YYYY: 10 Aug 2026 |
| Time format | h:mm AM: 09:14 AM |
| Hint text | The format, not an instruction: "DD Mon YYYY" |
| Error message | Says what to fix in one line: "End date is before start" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Value | Type | 16 Regular | 16 Regular |
| Value | Colour | Ink #44544A | Ink #44544A |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Icon | Size | 24 | 24 |
| Icon | Colour | Ink #44544A | Ink #44544A |
| Pair | Gap between fields | 16 | 16 |
| Pair | Padding left and right | 12 | 16 |
| Error message | Type | 12 Regular | 12 Regular |
| Error message | Colour | Red #E93353 | Red #E93353 |
| Error message | Space above | 4 | 4 |
| Picker sheet | Top corners | 16 | 16 |
| Picker sheet | Body fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Picker sheet | Month panel | White, corners 8, padding 12 | White, corners 8, padding 12 |
| Day | Size | 36 round | 36 round |
| Day | Type | 14 Regular, Ink #44544A | 14 Regular, Ink #44544A |
| Day, chosen | Fill | Antz green #37BD69, white 14 Semibold | Antz green #37BD69, white 14 Semibold |
| Weekday | Type | 12 Regular, Muted #7A8684 | 12 Regular, Muted #7A8684 |
| Picker footer | Buttons | Cancel outline and Done green, 48 tall, 50/50, gap 16 | Cancel outline and Done green, 48 tall, 50/50, gap 16 |
**Accessibility**
- Every field has a visible label; the format in the hint text never replaces it.
- The field is announced as a button that opens a date picker, read with its label and value.
- Each day is read in full ("Monday 10 August 2026"); the chosen day is marked by its filled circle and as selected, not by colour alone.
- Day cells are 36 round inside a row at least 44 tall to keep touch areas usable.
- Errors are written out, not shown by the red border alone.
**Examples**
Default
```html
```
---
## Picker field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6237)
A field that opens a chooser for people, sites or other records, and lists what was picked below it.
**When to use**
- People choose one or more records the app already holds: people, sites, sections, animals.
- Each choice needs more than a name to be told apart: a photo, a role, an area.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose one option from a short fixed list | Dropdown |
| Tick a few plain options | Checkbox |
| Type free text | Text field |
| Filter a list | Search and filter |
**Anatomy**
1. Label · required
2. Container · required
3. Hint text · required; says what will be chosen
4. Add icon · required, Add blue, right side
5. Picked row · one per chosen record, below the field
6. Photo or initials · required in a picked row; thumbnail for sites
7. Name and detail · name required, detail optional
8. Remove icon · required, Coral
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| People | Picked rows with a 36 round photo or initials, name and role | yes |
| Sites | Picked rows use the site card: 56 tall, thumbnail 40, Page light fill | yes |
| Single pick | The field is replaced by its one picked row; tapping the row opens the chooser again | temporary |
| Animal | A bottom sheet with search and full animal cards, a filled radio on the chosen one; the picked animal shows as its animal card with a remove icon | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing picked yet | Hint text in Hint grey, add icon in Add blue | yes |
| Picked | One or more records chosen | Picked rows stack below the field, gap 8; the field stays so more can be added | yes |
| Choosing | The chooser is open | A bottom sheet with search, "Selected n/total", Select all and rows with checkboxes; Cancel and Save in the footer | yes |
| Error | A required pick is missing | Red border and a red message 4 below | temporary |
| Disabled | Picks can't be changed now | Disabled fill, add icon in Hint grey; picked rows lose their remove icon | temporary |
**Behaviour**
- Tapping anywhere on the field opens the chooser as a bottom sheet titled with what is being chosen.
- Rows already picked open ticked. Tapping a row ticks or unticks it; the count updates at once.
- Picks are kept only on Save. Cancel, × or tapping the dimmed area drops the unsaved changes.
- The remove icon on a picked row takes it out at once, with no confirm. Removing the last one returns the field to empty.
- Sites are always picked and shown with the site card, never as plain text.
- Animals are always picked and shown with the full animal card. One animal: radios and Select; several animals: check boxes and Save.
- Choosing exactly one shows filled radios; choosing several shows check boxes. A green tick is never the chosen mark.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Picked rows | One per line, gap 8 | Two per line, gap 8 |
| Chooser | Bottom sheet | Bottom sheet |
**Content**
| Part | Rule |
| --- | --- |
| Label | A plural noun in sentence case: "Trainers", "Sites" |
| Hint text | "Choose" plus the noun: "Choose sites" |
| Picked row | Name on the first line; one detail on the second (role, area). No IDs unless people search by them |
| Error message | Says what to do in one line: "Choose at least one" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Hint text | Type | 16 Regular | 16 Regular |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Add icon | Size | 24 | 24 |
| Add icon | Colour | Add blue #00AFD6 | Add blue #00AFD6 |
| Picked row | Fill | Page #DDEBE9 | Page #DDEBE9 |
| Picked row | Corners | 8 | 8 |
| Picked row | Padding | 12 | 12 |
| Picked row | Gap inside | 12 | 12 |
| Picked row | Gap between rows | 8 | 8 |
| Photo or initials | Size | 36 round | 36 round |
| Initials | Fill | Turquoise #00D6C9, white 14 Medium | Turquoise #00D6C9, white 14 Medium |
| Name | Type | 16 Medium | 16 Medium |
| Name | Colour | Ink #44544A | Ink #44544A |
| Detail | Type | 14 Regular | 14 Regular |
| Detail | Space above | 4 | 4 |
| Remove icon | Size | 24 | 24 |
| Remove icon | Colour | Coral #FA6140 | Coral #FA6140 |
| Picked site | Height | 56 | 56 |
| Picked site | Fill | Page light #E8F4F2 | Page light #E8F4F2 |
| Picked site | Border | 1px white | 1px white |
| Picked site | Padding | 8 | 8 |
| Picked site | Thumbnail | 40, corners 4 | 40, corners 4 |
| Chooser row | Fill | White, corners 8, padding 12 | White, corners 8, padding 12 |
| Chooser row | Box | 24; ticked in Antz green #37BD69 | 24; ticked in Antz green #37BD69 |
| Chooser row, ticked | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Chooser footer | Buttons | Cancel outline and Save green, 48 tall, 50/50 | Cancel outline and Save green, 48 tall, 50/50 |
**Accessibility**
- The field is announced as a button that opens a chooser, read with its label and the number picked.
- Each remove icon has its own label: "Remove" plus the name, and a touch area of at least 44.
- Ticked rows in the chooser use a different glyph (filled box with a tick), never colour alone.
- Initials are read as the full name; photos carry the name as their text alternative.
- Focus returns to the field when the chooser closes.
**Examples**
Default
```html
Choose peopleadd_circle
```
Variant: Sites
```html
Choose sitesadd_circle
```
Variant: Animal
```html
Choose animaladd_circle
```
State: Picked
```html
Choose peopleadd_circle
AB
Name 1
Detail
cancel
CD
Name 2
Detail
cancel
```
State: Choosing
```html
Choose peopleadd_circle
Choose peopleclose
searchSearch
Selected 1/3Select allselect_all
AB
Name 1
Detail
check_box
CD
Name 2
Detail
check_box_outline_blank
EF
Name 3
Detail
check_box_outline_blank
```
State: Error (temporary)
```html
Choose peopleadd_circle
Choose at least one
```
State: Disabled (temporary)
```html
Choose peopleadd_circle
```
Device: Tablet
```html
Choose peopleadd_circle
```
Animal: picked (temporary)
```html
M
Animal IDCommon nameScientific nameEnclosure
cancel
```
Animal: choosing (temporary)
```html
Choose animaladd_circle
Choose animalclose
searchSearch
M
Animal IDCommon nameScientific nameEnclosure
radio_button_checked
M
Animal IDCommon nameScientific nameEnclosure
radio_button_unchecked
M
Animal IDCommon nameScientific nameEnclosure
radio_button_unchecked
```
---
## Checkbox
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6250)
Lets people tick any number of options from a list, or confirm a single yes.
**When to use**
- People can choose any number of options, including none.
- A single statement needs a yes, such as marking a field as mandatory.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose exactly one option | Dropdown |
| Turn a setting on or off with an instant effect | Switch |
| Choose people, sites or animals | Picker field |
| Narrow a list | Filter screen |
**Anatomy**
1. Row · required in the row variant; the whole row is the touch area
2. Box · required, 24
3. Label · required
4. Hint text · optional, one line
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Row | Each option in its own bordered row. The default in forms | yes |
| Row with hint | A second line in Muted grey when the option needs one fact more | yes |
| Plain | Box and label with no row border, for a single yes inside a card or a short list in a filter | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Unticked | Not chosen | Outline box in Ink | yes |
| Ticked | Chosen | Filled box with a white tick, in Antz green | yes |
| Partly ticked | A "Select all" box when only some of its options are ticked | Filled box with a dash, in Antz green | temporary |
| Disabled | The option can't be changed now | Disabled fill, box in Line grey, label in Hint grey; the glyph still shows ticked or unticked | temporary |
**Behaviour**
- Tapping anywhere on the row ticks or unticks it, not only the box.
- Ticking does nothing on its own; the choice is kept when the form is saved.
- "Select all" ticks every option; when all are ticked it unticks them all. When only some are ticked it shows the partly ticked glyph.
- Options are never pre-ticked unless most people would tick them anyway.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to list | 8 | 12 |
| Rows | One per line, gap 8 | Two per line when labels are short, gap 8 |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon, naming the group |
| Option | Short, in sentence case, phrased so that ticking means yes. No "Don't…" |
| Hint text | One fact that tells similar options apart; not a sentence |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Row | Corners | 8 | 8 |
| Row | Padding | 9 left, 16 right, 9 top and bottom | 9 left, 16 right, 9 top and bottom |
| Row | Gap between rows | 8 | 8 |
| Row | Gap box to label | 4 | 4 |
| Box | Size | 24, in a 40 touch wrapper | 24, in a 40 touch wrapper |
| Box, unticked | Glyph | Outline box, Ink #44544A | Outline box, Ink #44544A |
| Box, ticked | Glyph | Filled box with tick, Antz green #37BD69 | Filled box with tick, Antz green #37BD69 |
| Box, partly ticked | Glyph | Filled box with dash, Antz green #37BD69 | Filled box with dash, Antz green #37BD69 |
| Label | Type | 16 Regular | 16 Regular |
| Label | Colour | Ink #44544A | Ink #44544A |
| Hint text | Type | 14 Regular | 14 Regular |
| Hint text | Colour | Muted #7A8684 | Muted #7A8684 |
| Hint text | Space above | 4 | 4 |
| Group label | Type | 14 Medium | 14 Medium |
| Group label | Space below | 8 | 12 |
| Plain | Gap box to label | 8 | 8 |
| Plain | Gap between options | 12 | 12 |
| Disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Disabled | Box colour | Line #C3CEC7 | Line #C3CEC7 |
| Disabled | Label colour | Hint #839D8D | Hint #839D8D |
**Accessibility**
- Each row is announced as a checkbox with its label and its state: ticked, not ticked or partly ticked.
- States are different glyphs (outline box, box with tick, box with dash), never colour alone.
- The whole row is the touch area, at least 42 tall; the box alone is never the only target.
- The group label is read before the first option so people know what they are choosing.
- Antz green on white scores 2.4 for readability, so the glyph shape carries the state, not its colour.
**Examples**
Default
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
Variant: Row with hint
```html
Select allindeterminate_check_box
check_box
Option 1Hint text
check_box_outline_blank
Option 2Hint text
check_box
Option 3Hint text
```
Variant: Plain
```html
Select allindeterminate_check_box
check_boxOption 1
check_box_outline_blankOption 2
check_boxOption 3
```
State: None ticked
```html
Select allcheck_box_outline_blank
check_box_outline_blank
Option 1
check_box_outline_blank
Option 2
check_box_outline_blank
Option 3
```
State: All ticked
```html
Select allcheck_box
check_box
Option 1
check_box
Option 2
check_box
Option 3
```
State: Disabled (temporary)
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
Device: Tablet
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
---
## Switch
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=309-9693)
Turns one thing on or off, such as making a record active or inactive.
**When to use**
- One setting has two states and the change takes effect at once: Active or Inactive, Mandatory or not.
- The record or setting stays listed in both states.
**When not to use**
| If people need to | Use |
| --- | --- |
| Tick several options in a list | Checkbox |
| Choose between more than two states | Dropdown or Secondary tab |
| Confirm something that needs a Save | Checkbox |
| Switch between views on a screen | Secondary tab |
**Anatomy**
1. State label · recommended; names the current state in words
2. Switch · required
3. Track, on · Antz green; knob on the right
4. Track, off · Line grey; knob on the left
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| With state label | "Active" or "Inactive" before the switch, in a card or section header | yes |
| Setting row | A 56 white row: setting name on the left, switch on the right | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| On | The thing is active | Antz green track, knob on the right, label "Active" | yes |
| Off | The thing is inactive | Line grey track, knob on the left, label "Inactive"; an inactive card fades to 75% | yes |
| Disabled | The setting can't be changed now | Disabled track, label in Hint grey; the knob keeps its side | temporary |
**Behaviour**
- Tapping the switch or its label flips it at once; there is no Save for a switch.
- The knob slides in 180ms; with reduced motion it jumps.
- Turning something inactive never hides it. Inactive records stay listed and fade to 75%.
- A switch never hides fields people still need to fill.
- If turning off has a cost people can't undo, ask first with a confirm.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Size | 39 × 24 | 39 × 24 |
| Placement | Right end of the row or header | Right end of the row or header |
**Content**
| Part | Rule |
| --- | --- |
| State label | "Active" / "Inactive", or another pair that names the state, not the action |
| Setting row label | A noun phrase in sentence case: what is switched, not "Turn on…" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Track | Size | 39 × 24 | 39 × 24 |
| Track | Corners | Fully round | Fully round |
| Track, on | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Track, off | Fill | Line #C3CEC7 | Line #C3CEC7 |
| Track, disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Knob | Size | 18 round | 18 round |
| Knob | Fill | White #FFFFFF | White #FFFFFF |
| Knob | Inset | 3 | 3 |
| State label | Type | 14 Medium | 14 Medium |
| State label | Colour | Ink #44544A | Ink #44544A |
| State label | Gap to switch | 8 | 8 |
| Setting row | Height | 56 | 56 |
| Setting row | Fill | White #FFFFFF | White #FFFFFF |
| Setting row | Corners | 8 | 8 |
| Setting row | Padding | 16 top and bottom, 12 left and right | 16 top and bottom, 12 left and right |
| Setting row | Label | 16 Medium, Ink #44544A | 16 Medium, Ink #44544A |
| Inactive card | Opacity | 75% | 75% |
| Motion | Knob slide | 180ms | 180ms |
**Accessibility**
- Announced as a switch with its name and state: "Status, Active, on".
- The state is shown by the knob position and the state label, not by the track colour alone.
- The touch area is at least 44 × 44 around the 39 × 24 track; in a setting row the whole row flips it.
- White knob on the off track scores 1.6 for readability, so the knob side and the label carry the state.
**Examples**
Default
```html
TitleActive
Value
```
Variant: Setting row
```html
Label
```
State: Off
```html
TitleInactive
Value
```
State: Disabled (temporary)
```html
TitleActive
Value
```
---
## Search and filter
Inputs · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=230-7268)
A search field and a filter button that sit above a list to narrow what it shows.
**When to use**
- A list is long enough that people look for one item by name or ID.
- The list can be narrowed by fields such as status, site or date.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between a few fixed groups of the list | Primary tabs or chips |
| Choose a value inside a form | Dropdown or picker field |
| Set many filters at once | Filter screen (opened by the filter button) |
**Anatomy**
1. Row · required; white, sits in the white top block of a list screen
2. Search field · required
3. Search icon · required, left
4. Hint text · required; "Search"
5. Filter button · optional; only when the list has filters
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Standard | Search 40 tall in Light grey, corners 8, and a 40 × 40 filter button, gap 8. Use by default | yes |
| Outlined | White with a Line border, 44 to 48 tall, 14 Regular text; when the search needs more weight, as on tablet list headers | yes |
| Raised | White with a soft shadow, 56 tall; when search is the main task of the screen, on a tinted page | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing typed, no filters on | Hint text "Search"; filter button in Light grey | yes |
| Typing | A search term is entered | Term in Ink, a close icon appears on the right to clear it; the count line reads "Results (n)" | temporary |
| Filters on | One or more filters are applied | Filter button turns Teal ink with a white icon and a Coral badge with the number of filters | temporary |
**Behaviour**
- Results update as people type, after a short pause; no Search button.
- The close icon clears the term and puts the full list back; the keyboard stays open.
- The filter button opens the filter screen. Applying filters returns to the list with the badge showing how many are on.
- Search and filters combine: the list shows items that match the term and every filter.
- The row stays at the top of the list when the list scrolls.
- When nothing matches, the list area says so in one line; the filters stay visible so people can clear them.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Search width | Fills the row | Fills the list panel; in a list and detail split it sits on top of the list |
| Variant used most | Standard | Standard or Outlined |
**Content**
| Part | Rule |
| --- | --- |
| Hint text | "Search" on its own, or "Search" plus the noun when the screen holds more than one list |
| Count line | Noun (n) above the list: "Results (6)" |
| Badge | The number of filters on, never the number of results |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Fill | White #FFFFFF | White #FFFFFF |
| Row | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Row | Gap | 8 | 8 |
| Search | Height | 40 | 40 |
| Search | Fill | Light grey (5% black) | Light grey (5% black) |
| Search | Corners | 8 | 8 |
| Search | Padding | 6 top and bottom, 12 sides | 6 top and bottom, 12 sides |
| Search | Gap icon to text | 8 | 8 |
| Search icon | Size | 18 | 18 |
| Hint and term | Type | 12 Regular | 12 Regular |
| Hint and term | Colour | Ink #44544A | Ink #44544A |
| Filter button | Size | 40 × 40 | 40 × 40 |
| Filter button | Fill | Light grey (5% black) | Light grey (5% black) |
| Filter button | Corners | 8 | 8 |
| Filter icon | Size | 18 | 18 |
| Filter button, on | Fill | Teal ink #1F515B, white icon | Teal ink #1F515B, white icon |
| Badge | Fill | Coral #FA6140 | Coral #FA6140 |
| Badge | Type | 10 Medium, white | 10 Medium, white |
| Badge | Size | 16 round | 16 round |
| Outlined | Height | 44 to 48 | 44 to 48 |
| Outlined | Fill | White, 1px Line #C3CEC7 | White, 1px Line #C3CEC7 |
| Outlined | Padding | 12 | 12 |
| Outlined | Text | 14 Regular, Muted #7A8684 | 14 Regular, Muted #7A8684 |
| Outlined | Icon | 20 to 24 | 20 to 24 |
| Raised | Height | 56 | 56 |
| Raised | Fill | White | White |
| Raised | Shadow | 0 2 1, black 10% | 0 2 1, black 10% |
| Raised | Padding left and right | 16 | 16 |
| Raised | Text | 14 Regular, Muted #7A8684 | 14 Regular, Muted #7A8684 |
| Raised | Icon | 20 | 20 |
| Count line | Type | 14 Semibold, Ink #44544A | 14 Semibold, Ink #44544A |
**Accessibility**
- The search field has a label "Search" for screen readers even though only hint text shows.
- The filter button is announced as "Filters", plus "2 on" when the badge shows.
- The close icon is labelled "Clear search".
- The 40 search and filter button keep a 44 touch area through the row padding.
- Hint text in Ink on Light grey scores 7.2 for readability; the 12 size is the floor, so keep the term short.
**Examples**
Default
```html
searchSearch
tune
Items (14)
```
Variant: Outlined
```html
searchSearch
tune
Items (14)
```
Variant: Raised
```html
searchSearch
tune
Items (14)
```
State: Typing (temporary)
```html
searchValueclose
tune
Results (2)
```
State: Filters on (temporary)
```html
searchSearch
tune2
Items (6)
```
Device: Tablet
```html
searchSearch
tune
Items (14)
```
---
## Segmented control
Inputs · Partial
Switches between two to four views of the same content.
**When to use**
- The same records shown another way: table or list, by animal or by species.
- A period for a chart: 7 days, 30 days, 3 months.
- Two to four options, each one or two words.
**When not to use**
| If people need to | Use |
| --- | --- |
| Split records by status with counts | Primary tabs |
| Filter a list by a value | Chips |
| Choose a value in a form | Dropdown |
| Turn something on or off | Switch |
**Anatomy**
1. Track · required, pale green
2. Chosen segment · required, Antz green
3. Other segments · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Two to four options | Equal widths across the track | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Chosen | The view on screen | Antz green fill, white semibold text | temporary |
| Not chosen | Other views | No fill, Ink text | temporary |
**Behaviour**
- Tapping a segment switches the view at once; there is no Apply.
- The green fill slides to the new segment in 180 ms; a light haptic tick confirms.
- The choice is kept when people come back to the screen.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width of the content | Up to 480, left aligned with the content |
**Content**
| Part | Rule |
| --- | --- |
| Labels | One or two words, sentence case; the same length where possible |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Track | Height | 45 | 45 |
| Track | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Track | Corners | 8 | 8 |
| Track | Padding | 4 | 4 |
| Track | Gap | 4 | 4 |
| Segment | Corners | 5 | 5 |
| Segment | Text | 14 Medium | 14 Medium |
| Segment | Text colour | Ink #44544A | Ink #44544A |
| Chosen segment | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Chosen segment | Text | 14 Semibold white | 14 Semibold white |
**Accessibility**
- The control is a group of tabs; the chosen one is announced as selected.
- Each segment is at least 37 tall inside the 45 track; the tap area extends to 44.
- White on Antz green scores 2.4 for readability, so labels stay semibold and short.
**Examples**
Default
```html
Table viewList view
```
Options: Three
```html
DayWeekMonth
```
Options: Four
```html
7d30D3M6M
```
State: Last chosen
```html
Table viewList view
```
Device: Tablet
```html
Table viewList view
```
---
## Button
Actions · Ready · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=355-107528)
Starts the one main action on a screen, or records a decision.
**When to use**
- The screen has one main thing to do: save, submit, continue, confirm.
- A person must decide on a request: Approve and Reject together.
- A pair of equal choices at the foot of a filter or sheet: Outline beside Main, both compact.
**When not to use**
| If people need to | Use |
| --- | --- |
| Add a new record from a list | Add button |
| Reach second and later actions | Menu |
| Switch between views of the same list | Secondary tab |
| Confirm something that can't be undone | Confirm |
**Anatomy**
1. Container · required
2. Icon · optional, before the label, 24
3. Label · required
4. Outline container · for the quieter of two choices
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Main | The one main action on a screen. Antz green, 56 tall, full width of the action bar | yes |
| Navy | A call to action that is not the main step of the flow, such as Add results beside a status. Teal ink fill | yes |
| Approve and reject | The decision pair on a request, 48 tall. Stacked on phone, side by side on tablet | yes |
| Outline | The quieter of two choices, such as Cancel or Clear all | yes |
| Compact | Buttons 40 tall in tight footers, such as a filter screen | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Ready to use | As specified | yes |
| Pressed | Finger is down | A 10% black layer over the fill | temporary |
| Focus | Reached with a keyboard on tablet | 2px Teal ink ring, 2 outside the edge | temporary |
| Disabled | The action can't be taken yet | Disabled fill #DAE7DF, label in Hint #839D8D; outline keeps its white fill and grey border | temporary |
**Behaviour**
- One main action per screen. Every other action goes in the menu behind the more icon.
- The main action sits in a white bar fixed to the bottom of the screen, 16 padding on phone and 20 on tablet.
- Reject always asks for a reason before it completes.
- A button that can't be used yet shows as disabled rather than disappearing, so the layout does not jump.
- Delete never sits in red beside Edit; it lives in the menu and asks for confirmation.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Main button width | Full width of the action bar | Full width of the action bar or panel |
| Approve and reject | Stacked, Approve on top, gap 12, in a white bar with corners 16 on top | Side by side, equal widths, Reject left, gap 24 |
| Action bar padding | 16 | 20 |
**Content**
| Part | Rule |
| --- | --- |
| Label | A verb, or verb and noun, in sentence case: "Save", "Submit request" |
| Length | One to three words; never wraps to a second line |
| Decision pair | Always "Approve" and "Reject" |
| Avoid | "OK", "Yes", "Click here", all capitals |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Main | Height | 56 | 56 |
| Main | Corners | 8 | 8 |
| Main | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Main | Label | 16 Semibold | 16 Semibold |
| Main | Label colour | White #FFFFFF | White #FFFFFF |
| Main | Icon | 24, white, gap 8 | 24, white, gap 8 |
| Navy | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Navy | Height | 56 | 56 |
| Approve | Height | 48 | 48 |
| Approve | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Approve | Label | 16 Medium | 16 Medium |
| Reject | Height | 48 | 48 |
| Reject | Fill | Red #E93353 | Red #E93353 |
| Reject | Label | 16 Medium | 16 Medium |
| Decision pair | Gap | 12 | 24 |
| Decision pair | Bar | White, corners 16 on top, padding 24 / 16 | White, padding 20 |
| Outline | Fill | White #FFFFFF | White #FFFFFF |
| Outline | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Outline | Label | 16 Medium | 16 Medium |
| Outline | Label colour | Teal ink #1F515B | Teal ink #1F515B |
| Compact | Height | 40 | 40 |
| Compact | Padding left and right | 16 | 16 |
| Compact outline | Label | 14 Medium | 14 Medium |
| Disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Disabled | Label colour | Hint #839D8D | Hint #839D8D |
| Confirm buttons | Height | 56 | 56 |
**Accessibility**
- Every button is at least 44 tall; Main and Navy are 56, decisions 48, compact 40 in an 80 footer, with the tap area extended to 44 above and below.
- The label says what happens; an icon never stands alone in a button.
- White on Antz green scores 2.4 for readability, so labels are 16 Semibold and never smaller. White on Teal ink scores 8.8.
- White on Red scores 4.1; Reject is always written out, not shown by colour alone.
- Disabled buttons are announced as unavailable, and the reason appears near the field that blocks them.
**Examples**
Default
```html
```
Variant: Navy
```html
```
Variant: Approve and reject
```html
```
Variant: Outline
```html
```
Variant: Compact
```html
```
State: Pressed (temporary)
```html
```
State: Focus (temporary)
```html
```
State: Disabled (temporary)
```html
```
---
## Add button
Actions · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17772)
Creates a new record from a list screen.
**When to use**
- A list screen whose main job is adding new records.
- Inline: adding another item inside a form or panel, such as one more row in a list being built.
**When not to use**
| If people need to | Use |
| --- | --- |
| Save or submit what is on the screen | Button |
| Reach more than one kind of action | Menu |
| Choose people, sites or items into a field | Picker field |
**Anatomy**
1. Phone container · square, gradient fill
2. Icon · required
3. Tablet container · pill, Add blue
4. Label · tablet and inline only
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Floating, phone | Square, green-to-turquoise gradient, icon only. Floats above the bottom navigation | yes |
| Floating, tablet | Pill in Add blue with icon and label, when the page has one action | yes |
| Inline | Full-width Add blue button inside a form or panel | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Ready to use | As specified | yes |
| Pressed | Finger is down | A 10% black layer over the fill | temporary |
**Behaviour**
- Tapping opens the new-record form full screen.
- The floating button stays in place while the list scrolls; the last card keeps enough space below it to be read.
- One floating button per screen, and only for adding.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Shape | Square 56, corners 12, icon only | Pill 48 tall, corners 24, icon and label |
| Fill | Gradient Turquoise #00D6C9 to Antz green #37BD69 | Add blue #00AFD6 |
| Position | Right 24, 16 above the bottom navigation | Right 36 inside the gutter, 26 above the bottom navigation |
| When the page has more than one action | Floating button for adding; the rest in the menu | Not designed yet: ask |
**Content**
| Part | Rule |
| --- | --- |
| Label (tablet, inline) | "Add" and the record noun: "Add item" |
| Icon | Add circle on phone and inline, plain add on the tablet pill |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Phone button | Size | 56 × 56 | — |
| Phone button | Corners | 12 | — |
| Phone button | Fill | Turquoise #00D6C9 to Antz green #37BD69, angled 116.5° | — |
| Phone button | Shadow | 0 4 4, black 15% | — |
| Phone button | Icon | Add circle 24, white | — |
| Phone button | Position | Right 24, above the bottom navigation | — |
| Tablet pill | Height | — | 48 |
| Tablet pill | Corners | — | 24 |
| Tablet pill | Fill | — | Add blue #00AFD6 |
| Tablet pill | Border | — | 1px white at 40% |
| Tablet pill | Padding | — | Left 10, right 12 |
| Tablet pill | Icon to label | — | 6 |
| Tablet pill | Icon | — | 20, white |
| Tablet pill | Label | — | 16 Medium white |
| Tablet pill | Shadow | — | 0 4 6, black 15% |
| Inline | Height | 48 | 48 |
| Inline | Corners | 8 | 8 |
| Inline | Fill | Add blue #00AFD6 | Add blue #00AFD6 |
| Inline | Icon | 20, white, gap 8 | 20, white, gap 8 |
| Inline | Label | 16 Medium white | 16 Medium white |
**Accessibility**
- The phone button is icon only, so it carries a spoken label: "Add" and the record noun.
- Touch area 56 on phone and 48 on tablet.
- White on Add blue scores 2.6 and white on the gradient as low as 1.8; the icon is large and the tablet label is 16 Medium, but no small text goes on these fills.
**Examples**
Default
```html
```
---
## Menu
Actions · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=304-4618)
Holds the second and later actions for a screen, record or card, behind the more icon.
**When to use**
- A screen or record has more actions than its one main action.
- A card needs actions that would clutter it if shown as buttons.
- Destructive actions such as Delete or Deactivate, which should take a deliberate tap to reach.
**When not to use**
| If people need to | Use |
| --- | --- |
| Do the one main thing on a screen | Button |
| Choose a value for a field | Dropdown |
| Pick from a long list with search | Bottom sheet |
| Switch between views | Secondary tab |
**Anatomy**
1. More icon · required, opens the menu
2. Container · required; the pale fill shows as 1px lines between items
3. Item icon · optional; all items have one or none do
4. Item label · required
5. Destructive item · optional, always last
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Actions only | Icon and label per item | yes |
| With a destructive action | Delete, Deactivate or Cancel last, in Red | yes |
| Text only | Labels without icons when no icon reads clearly | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Closed | Default | Only the more icon shows | yes |
| Open | After tapping the more icon | Menu drops below the icon, right edges aligned | yes |
| Item pressed | Finger is down on an item | A 10% black layer over the item | temporary |
**Behaviour**
- Opens below the more icon, its right edge lined up with the icon. If there is no room below, it opens above.
- Tapping an item runs it and closes the menu. Tapping outside closes it with nothing done.
- Destructive items ask for confirmation before they run.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Size and look | Same on both | Same on both |
| Width | Fits the longest label, at least 180 | Fits the longest label, at least 180 |
**Content**
| Part | Rule |
| --- | --- |
| Item label | A verb or verb and noun in sentence case: "Edit", "Download report" |
| Order | Most used first; destructive last |
| Number of items | Two to six. One item means it should be a button |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Fill between items | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Container | Corners | 8 | 8 |
| Container | Shadow | 0 4 14, black 15% | 0 4 14, black 15% |
| Container | Gap between items | 1 | 1 |
| Container | Minimum width | 180 | 180 |
| Item | Fill | White #FFFFFF | White #FFFFFF |
| Item | Padding | 12 top and bottom, 16 left and right | 12 top and bottom, 16 left and right |
| Item | Icon to label | 8 | 8 |
| Icon | Size | 24 | 24 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Destructive item | Label and icon colour | Red #E93353 | Red #E93353 |
| More icon | Button | 36, icon 24, Ink #44544A | 36, icon 24, Ink #44544A |
**Accessibility**
- Each item is 48 tall, above the 44 minimum.
- The more icon has a spoken label, "More actions".
- Teal ink on white scores 8.8; Red on white scores 4.1, and the label still says what the action does.
- Focus moves into the menu when it opens and back to the more icon when it closes.
**Examples**
Default
```html
```
---
## Top bar
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17741)
Names the screen and holds the way back, plus up to two screen-wide actions.
**When to use**
- Every list, form and settings screen that is not a record detail.
- The screen needs a way back or a way to close.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show one record with its owner | Record header |
| Move between the main parts of a module | Bottom navigation |
| Title a bottom sheet | Bottom sheet |
**Anatomy**
1. Back or close · optional; back for drill-in screens, close for forms
2. Title · required, one line
3. Action icon · optional, up to two
4. More icon · optional, opens the menu
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Back | Drill-in screens | yes |
| Back and actions | Screens with search or a menu of screen-wide actions | yes |
| Close | Forms that open on top of a list | yes |
| Title only | The first screen of a module | yes |
| With site switch | Screens whose whole content belongs to one site: the site name and a chevron sit on the right | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | As specified | yes |
| Icon pressed | Finger is down on an icon | A 10% black circle behind the icon | temporary |
**Behaviour**
- Stays at the top while the page scrolls.
- Back returns to the previous screen; Close leaves the form.
- A long title cuts off with "…" on one line; it never wraps.
- A screen-wide choice, such as the site, sits on the right of the top bar as the site name with a chevron. Tapping it opens the choices as a bottom sheet with filled radios; choosing one reloads the screen for that site.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Height | 72 | 72 |
| Padding | 26 top, 22 bottom, 16 sides | 20 all round |
| Title | 20 Medium, left | 20 Medium, left |
**Content**
| Part | Rule |
| --- | --- |
| Title | The screen name in sentence case, two or three words: "New request", "Settings" |
| Avoid | Repeating the title in the page body; module names already shown on the home screen |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Site switch | Type | 16 Medium | 16 Medium |
| Site switch | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Site switch | Chevron | 20, gap 4 | 20, gap 4 |
| Bar | Height | 72 | 72 |
| Bar | Fill | White #FFFFFF | White #FFFFFF |
| Bar | Bottom line | 1px black at 5% | 1px black at 5% |
| Bar | Padding | 26 top, 22 bottom, 16 sides | 20 all round |
| Bar | Gap | 4 | 4 |
| Back or close | Slot | 30 × 48 | 30 × 48 |
| Back or close | Icon | 24, Ink #44544A | 24, Ink #44544A |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Action icon | Button | 36, round | 36, round |
| Action icon | Icon | 24, Ink #44544A | 24, Ink #44544A |
**Accessibility**
- Back, close and every icon button carry a spoken label ("Back", "Close", "Search", "More actions").
- The back slot is drawn 30 × 48; its tap area extends to 44 wide into the gap. The 36 icon buttons extend to 44 inside the 72 bar.
- The title is the screen's main heading for screen readers.
- Ink on white scores 8.0.
**Examples**
Default
```html
arrow_backTitle
```
Variant: Back and actions
```html
arrow_backTitlesearchmore_vert
```
Variant: Close
```html
closeTitle
```
Variant: Title only
```html
Title
```
Variant: With site switch
```html
arrow_backTitleSitekeyboard_arrow_down
```
Device: Tablet
```html
arrow_backTitle
```
---
## Record header
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-23313)
Opens a record detail screen: the record name, the way back, its menu and who it belongs to.
**When to use**
- A record screen where the brief asks for the navy header.
- The record has an owner worth naming at the top.
**When not to use**
| If people need to | Use |
| --- | --- |
| Any other record screen | Record layout, default version |
| Show a list, a form or settings | Top bar |
| Show the outcome of a check | Result layout |
**Anatomy**
1. Back · required
2. Title · required; centred, or left with a subtitle
3. More icon · optional, opens the menu
4. Initials avatar · with the person row
5. Person row · optional: name and one secondary line
6. Content sheet · required, overlaps the header with round top corners
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Centred title | Short titles such as a record number | yes |
| Left title with subtitle | When the record needs a second line, such as its type | yes |
| With person row | Shows who raised or owns the record | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | As specified | yes |
| Icon pressed | Finger is down on back or more | A 20% black circle behind the icon | temporary |
**Behaviour**
- The header scrolls away with the content; the sheet slides up over it.
- Back returns to the list the record was opened from.
- Centred or left title is chosen per screen, and the same choice is kept across one module.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Bar padding | 32 top, 12 bottom, 16 sides | 24 top, 12 bottom, 20 sides |
| Gap in the bar | 8 | 12 |
| Title | Centred or left | Usually left with a subtitle |
**Content**
| Part | Rule |
| --- | --- |
| Title | The record ID or name; never the screen type ("Details") |
| Subtitle | One fact that tells records apart, such as the type |
| Person row | Name, then one line such as the organisation; no labels like "Requested by" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Header | Fill | Navy #1F415B | Navy #1F415B |
| Bar | Padding | 32 top, 12 bottom, 16 sides | 24 top, 12 bottom, 20 sides |
| Bar | Gap | 8 | 12 |
| Back and more | Icon | 24, white | 24, white |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | White #FFFFFF | White #FFFFFF |
| Subtitle | Type | 14 Regular, white | 14 Regular, white |
| Person row | Padding | 16 top, 24 bottom, 16 left, 12 right | 16 top, 24 bottom, 16 left, 12 right |
| Person row | Gap | 8 | 8 |
| Avatar | Size | 36, round | 36, round |
| Avatar | Fill | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Avatar | Initials | 14 Medium white | 14 Medium white |
| Name | Type | 16 Medium white | 16 Medium white |
| Secondary line | Type | 14 Regular white | 14 Regular white |
| Content sheet | Fill | White #FFFFFF | White #FFFFFF |
| Content sheet | Top corners | 24 | 24 |
| Content sheet | Overlap | 16 | 16 |
| Content sheet | Padding | 24 top, 16 sides | 24 top, 20 sides |
**Accessibility**
- White on Navy scores 10.7.
- Back and more carry spoken labels; their tap areas are 44.
- The title is the screen's main heading for screen readers.
- Initials on Turquoise score 1.8, so the name beside the avatar always carries the meaning.
**Examples**
Default
```html
arrow_backTitlemore_vert
AB
Name
Secondary line
Section title
```
Title: Left with subtitle
```html
arrow_back
Title
Subtitle
more_vert
AB
Name
Secondary line
Section title
```
Person row: Hidden
```html
arrow_backTitlemore_vert
Section title
```
Device: Tablet
```html
arrow_backTitlemore_vert
AB
Name
Secondary line
Section title
```
---
## Primary tabs
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=370-7146)
Splits a screen into its main views, one at a time.
**When to use**
- A screen has two to five views of the same thing that people switch between often.
- Count: each view is a status bucket and the number matters (waiting, approved, rejected).
- Underline: the views are different kinds of content (overview, list, people).
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between two ways of looking at one list | Secondary tab |
| Narrow a list by a quick filter | Chips |
| Move between parts of a module | Bottom navigation |
**Anatomy**
1. Count · count tabs; green when active
2. Label · required
3. Inactive count tab · Ink count, no bar
4. Active underline tab · green text and 2px bar
5. Inactive underline tab · Ink text, 1px grey line
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Count | Count over label. Tabs hug their content and the row scrolls sideways | yes |
| Underline | Equal widths across the screen, label only | yes |
| Underline with icons | A 16 icon before each label | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The view on screen | Antz green count or text, 2px Antz green bar | yes |
| Inactive | Other views | Ink text; underline tabs keep a 1px Line | yes |
| Pressed | Finger is down | A 5% black layer over the tab | temporary |
**Behaviour**
- Tapping a tab swaps the content below; the top bar and tabs stay put.
- Count tabs scroll sideways when they do not fit; the active tab scrolls into view.
- Counts update when records change status; a tab with 0 stays visible.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Count tabs | Hug content, scroll sideways | Same as phone (no tablet frame yet) |
| Underline tabs | Equal widths, full screen | Equal widths across the panel they sit in |
| Underline tab height | 48 | 48 |
**Content**
| Part | Rule |
| --- | --- |
| Label | One or two words, sentence case: "Pending", "Approved" |
| Count | The number only; no brackets |
| Number of tabs | Underline two to four; count up to six |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Count row | Fill | White #FFFFFF | White #FFFFFF |
| Count row | Bottom line | 1px Pale green #EFF5F2 | 1px Pale green #EFF5F2 |
| Count tab | Padding | 8 top, 2 sides; content 20 sides | 8 top, 2 sides; content 20 sides |
| Count tab | Count to label | 4 | 4 |
| Count | Type | 16 Semibold | 16 Semibold |
| Count | Colour | Ink #44544A; active Antz green #37BD69 | Ink #44544A; active Antz green #37BD69 |
| Count label | Type | 12 Regular | 12 Regular |
| Count label | Colour | Ink #44544A | Ink #44544A |
| Count bar | Height | 2, round top corners | 2, round top corners |
| Count bar | Colour | Antz green #37BD69 | Antz green #37BD69 |
| Underline tab | Width | Equal shares of the row | Equal shares of the row |
| Underline tab | Padding | 16 | 16 |
| Underline tab | Type | 14 Medium | 14 Medium |
| Underline tab | Icon | 16, gap 4 | 16, gap 4 |
| Underline tab | Active | Antz green #37BD69 text and 2px bar | Antz green #37BD69 text and 2px bar |
| Underline tab | Inactive | Ink #44544A text, 1px Line #C3CEC7 | Ink #44544A text, 1px Line #C3CEC7 |
**Accessibility**
- The tab row is announced as tabs, with the selected one marked and its count read out.
- Count tabs are about 52 tall and underline tabs 48, above the 44 minimum.
- Antz green on white scores 2.4, so the active tab is also shown by the bar, not colour alone.
**Examples**
Default
```html
6Tab 1
12Tab 2
3Tab 3
0Tab 4
21Tab 5
```
Variant: Underline
```html
Tab 1
Tab 2
Tab 3
```
Variant: Underline with icons
```html
grid_viewTab 1
listTab 2
personTab 3
```
---
## Secondary tab
Navigation · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=177-4850)
Switches between two or three ways of looking at the same content.
**When to use**
- One list or panel can be seen two or three ways: all and mine, list and calendar.
- The switch sits under the top bar or Primary tabs and changes only what is below it.
**When not to use**
| If people need to | Use |
| --- | --- |
| Move between the main views of a screen | Primary tabs |
| Filter a list by many values | Chips |
| Turn a setting on or off | Switch |
**Anatomy**
1. Track · required
2. Active segment · required, one at a time
3. Inactive segment · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Antz green | The standard active fill | yes |
| Teal ink | When green would clash with a green main action or status nearby | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The view on screen | Filled segment, white text | yes |
| Inactive | Other views | No fill, Ink text | yes |
| Pressed | Finger is down on an inactive segment | 5% black fill on the segment | temporary |
**Behaviour**
- Exactly one segment is active. Tapping another swaps the view straight away; nothing is saved.
- Segments hug their labels; the track hugs the segments and sits at the left of the content.
- The fill moves to the new segment in 180ms; reduced motion turns this off.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 16 sides | 20 sides |
| Size | Same on both | Same on both |
**Content**
| Part | Rule |
| --- | --- |
| Segment label | One or two words, sentence case: "All", "Created by me" |
| Number of segments | Two or three |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Track | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Track | Corners | Round (100) | Round (100) |
| Track | Padding | 4 | 4 |
| Segment | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Segment | Corners | Round (100) | Round (100) |
| Segment | Type | 14 Medium | 14 Medium |
| Active segment | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Active segment | Text | White #FFFFFF | White #FFFFFF |
| Active segment, Teal ink | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Inactive segment | Text | Ink #44544A | Ink #44544A |
**Accessibility**
- Announced as tabs, the active one marked selected.
- Each segment is 38 tall drawn; with the track padding the tap area is 46.
- White on Antz green scores 2.4; the filled shape, not colour alone, shows the active segment. White on Teal ink scores 8.8.
- Ink on Pale green scores 7.3.
**Examples**
Default
```html
```
Variant: Teal ink
```html
```
Segments: Three
```html
```
State: Pressed (temporary)
```html
```
---
## Chips
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17765)
Narrows a list to one group at a time, with the count in each label.
**When to use**
- A list can be cut into a few groups by one property, such as status or type.
- People benefit from seeing how many records are in each group before tapping.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between main views of a screen | Primary tabs |
| Combine several filters at once | Filter screen |
| Choose a value in a form | Dropdown |
**Anatomy**
1. Selected chip · one at a time
2. Default chip · required
3. Label with count · required: label, dash, count
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Fits the row | Three or four chips | yes |
| Scrolls sideways | More chips than fit; the row clips at the screen edge | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Selected | The group on screen | Teal ink fill, white 14 Medium | yes |
| Default | Other groups | Page fill, Teal ink 14 Regular | yes |
| Pressed | Finger is down | A 5% black layer over the chip | temporary |
**Behaviour**
- Exactly one chip is selected; "All" is first and selected when the screen opens.
- Tapping a chip filters the list below at once; the search keeps its text.
- Counts follow the records in each group; a chip with 0 stays in the row.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Chip size | 32 tall | 32 tall |
**Content**
| Part | Rule |
| --- | --- |
| Label | Group name, space, dash, space, count: "All - 22" |
| Order | "All" first, then the order of the workflow |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Fill | White #FFFFFF | White #FFFFFF |
| Row | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Row | Gap | 12 | 12 |
| Row | Shadow | 0 1 1, black 10% | 0 1 1, black 10% |
| Chip | Height | 32 | 32 |
| Chip | Corners | 8 | 8 |
| Chip | Padding | 6 top and bottom, 8 sides | 6 top and bottom, 8 sides |
| Default chip | Fill | Page #DDEBE9 | Page #DDEBE9 |
| Default chip | Text | 14 Regular, Teal ink #1F515B | 14 Regular, Teal ink #1F515B |
| Selected chip | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Selected chip | Text | 14 Medium, white #FFFFFF | 14 Medium, white #FFFFFF |
**Accessibility**
- Chips are drawn 32 tall; the row is 56, so each chip's tap area takes the full row height (44 or more).
- The selected chip is announced as selected and its count is read out.
- Teal ink on Page scores 7.2; white on Teal ink scores 8.8.
**Examples**
Default
```html
```
---
## Bottom navigation
Navigation · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=78-4008)
Moves between the main parts of a module.
**When to use**
- A module has three to five top-level parts that people move between all day.
- The parts are peers; none sits inside another.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch views inside one screen | Primary tabs |
| Go back from a detail screen | Top bar |
| A module with a single main screen | No bottom navigation |
**Anatomy**
1. Active indicator · Turquoise light pill behind the icon
2. Active label · Teal ink
3. Icon · required, 24
4. Label · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Phone, five items | Icon over label; the active icon sits in a Turquoise light pill | yes |
| Tablet, three items | Icon over label; the active icon sits in a white box | yes |
| None | The module designer leaves it out when the module has one main screen | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The part on screen | Phone: Turquoise light pill, Teal ink label. Tablet: white box | yes |
| Inactive | Other parts | No pill or box; Ink label on phone, Teal ink on tablet | yes |
| Pressed | Finger is down | A 5% black pill behind the icon | temporary |
**Behaviour**
- Shows on the top-level screens of a module and hides on detail and form screens.
- Tapping the active item again returns that part to its first screen.
- The add button floats above it, never on it.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Items | 5 | 3 |
| Height | 80 | 97 |
| Active mark | Pill 64 × 32, corners 16, Turquoise light | White box, corners 8, padding 8 |
| Labels | 12 Medium | 14 Regular, Teal ink |
| Item width | Equal shares | 150 each, gap 8, centred |
**Content**
| Part | Rule |
| --- | --- |
| Label | One word, sentence case, the name of the part |
| Icon | Outlined Material Symbols Rounded glyph that matches the label |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Bar | Height | 80 | 97 |
| Bar | Fill | Page light #E8F4F2 | Add blue #00AFD6 at 12% over white |
| Bar | Padding | 0 top and bottom, 8 sides | 20 |
| Bar | Gap | 8 | 8 |
| Item | Padding | 12 top, 16 bottom | — |
| Item | Icon to label | 4 | 4 |
| Item | Width | Equal shares | 150 |
| Icon | Size | 24 | 24 |
| Icon | Colour | Ink #44544A | Teal ink #1F515B |
| Active indicator | Shape | 64 × 32, corners 16 | Box with corners 8, padding 8 |
| Active indicator | Fill | Turquoise light #AFEFEB | White #FFFFFF |
| Label | Type | 12 Medium | 14 Regular |
| Label | Colour | Ink #44544A; active Teal ink #1F515B | Teal ink #1F515B |
**Accessibility**
- Announced as navigation; the active item is marked as the current page.
- Each item is at least 64 wide and the full bar height tall.
- Teal ink on Turquoise light scores 6.9; Ink on Page light scores 7.1.
- The active item is marked by shape (pill or box) as well as colour.
**Examples**
Default
```html
```
Active: Item 2
```html
```
Active: Item 3
```html
```
Device: Tablet
```html
homeLabel
list_altLabel
personLabel
```
---
## List card
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7032)
A white card that stands for one record in a list: who it is about, its status when it has one, and a meta line.
**When to use**
- A list of records where each one is about a person, a request or an item.
- The record may have one status that people scan for; with no status, the label is left out.
- Tapping the card opens the record.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a request or approval that is waiting on someone | Request card |
| Show an animal | Animal card |
| Choose or show a site | Site card |
| Show what happened to a record over time | History |
**Anatomy**
1. Head strip · optional
2. Record number · with the head strip, 16 badge icon
3. Status label · optional: shown once when the record has a status
4. Initials · required when the record is about a person
5. Name · required
6. Detail · optional, one line
7. Meta line · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| With head strip | The record has its own number people look up; the number and status sit in a strip above the body | yes |
| Without head strip | No record number; the status label sits on the right of the name row | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The record is loaded | As drawn | yes |
| Loading | The list is still loading | Same layout; light grey blocks where text will be, no spinner | temporary |
**Behaviour**
- The whole card is one tap target and opens the record.
- Cards sit 12 apart on the page background; there is no divider between them.
- Text that is too long ends in an ellipsis on one line; the card never grows sideways.
- Actions on the record live inside it or in a menu, never as buttons on the card.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Card padding | 12 | 16 |
| Status label type | 12 Semibold | 14 Medium |
| Gap between cards | 12 | 12 |
**Content**
| Part | Rule |
| --- | --- |
| Record number | The ID as people say it, prefix and number |
| Name | The person or thing the record is about |
| Detail | One fact that tells two similar cards apart, such as the organisation |
| Status label | One or two words; the status appears once on the card. Leave it out when the record has no status, never write a placeholder |
| Meta line | Who and when, joined by " • " |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | White #FFFFFF | White #FFFFFF |
| Card | Corners | 8 | 8 |
| Card | Shadow | None | None |
| Card | Width | Full width of the page less the side padding | Full width of the page less the side padding |
| Head strip | Padding | 8 top and bottom, 12 sides | 8 top and bottom, 16 sides |
| Head strip | Divider below | 1px black at 5% | 1px black at 5% |
| Record number | Type | 12 Semibold | 12 Semibold |
| Record number | Colour | Ink #44544A | Ink #44544A |
| Record number | Icon | 16 | 16 |
| Body | Padding | 12 | 16 |
| Body | Gap | 12 | 12 |
| Initials | Size | 36, round | 36, round |
| Initials | Fill | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Initials | Type | 14 Medium white | 14 Medium white |
| Initials | Gap to name | 8 | 8 |
| Name | Type | 16 Medium | 16 Medium |
| Name | Colour | Ink #44544A | Ink #44544A |
| Detail | Type | 14 Regular | 14 Regular |
| Detail | Colour | Muted #7A8684 | Muted #7A8684 |
| Detail | Space above | 4 | 4 |
| Meta line | Type | 12 Regular; the person in 12 Semibold | 12 Regular; the person in 12 Semibold |
| Meta line | Colour | Muted #7A8684; the person in Navy #1F415B | Muted #7A8684; the person in Navy #1F415B |
| Status label | Type | 12 Semibold | 14 Medium |
| List | Gap between cards | 12 | 12 |
**Accessibility**
- The card is read as one item: name, status, then detail, so the status is heard without a colour.
- The whole card is the touch area; it is always taller than 44.
- Name in Ink on white scores 8.0 for readability. Detail in Muted scores 3.8, so it never carries the only copy of something required.
- Loading blocks are hidden from screen readers; the list announces "Loading" once.
**Examples**
Default
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Variant: Without head strip
```html
AB
Name
Detail
Status
Name • Date
```
Status: Pending
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Negative
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Cancelled
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Neutral
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: No status
```html
badgeRecord number
AB
Name
Detail
Name • Date
```
State: Loading (temporary)
```html
```
Device: Tablet
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
---
## Request card
Display · Ready · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=89-129699)
A lifted card for a request or an approval: category, priority, who asked, what for, and the status in a strip along the bottom.
**When to use**
- The record is a request or an approval that waits on someone.
- People scan a list to see what still needs a decision.
- The default item in a list. See List layout.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a record that is not a request | List card |
| Show a status inside a detail screen | Status label |
| Show an animal | Animal card |
**Anatomy**
1. Category tile · required: 32 Navy tile with the category icon
2. Category · required
3. Priority flag · required: Normal, High or Emergency
4. Meta line · required: record number, person who asked and age
5. Description · optional: what is asked for, up to two lines
6. Attachments · optional: a count per kind of file
7. Amount · optional: the cost, in Antz green
8. Status strip · required: icon, status and how long it has been in it
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Awaiting | Waiting for a decision | yes |
| Approved | The request was approved | yes |
| Rejected | The request was turned down | yes |
| Normal priority | Turquoise flag with "!" | yes |
| High priority | Coral flag with "!!!" | yes |
| Emergency | Red flag with a fire icon | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The card is in a list | As drawn | yes |
**Behaviour**
- The whole card opens the request.
- The strip is the only place the status appears on the card; there is no status label as well.
- The description stops at two lines and ends in an ellipsis.
- Attachment kinds with no files are left out; with no files at all the row shows the clip and 0.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Card width | Full width less 16 each side | Column width in the list panel |
| Gap between cards | 16 | 16 |
**Content**
| Part | Rule |
| --- | --- |
| Category | The department or kind of request, one line |
| Meta line | Record number • person • age, such as "REQ 567 • Name • 2 d" |
| Description | What is asked for, in plain words, not the form title |
| Strip label | The status in two or three words |
| Time | "Since n days" for waiting; the date for a decision already made |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | White #FFFFFF | White #FFFFFF |
| Card | Corners | 12 | 12 |
| Card | Shadow | 0 2 2, black at 10% | 0 2 2, black at 10% |
| Card | Gap between rows | 12 | 12 |
| Head | Padding | 16 top, 16 left, flag flush right | 16 top, 16 left, flag flush right |
| Head | Gap | 12 | 12 |
| Category tile | Size | 32, corners 4 | 32, corners 4 |
| Category tile | Fill | Navy #1F415B, white 24 icon | Navy #1F415B, white 24 icon |
| Category | Type | 20 Medium | 20 Medium |
| Category | Colour | Ink #44544A | Ink #44544A |
| Priority flag | Size | 52 × 34 | 52 × 34 |
| Priority flag | Glyph | 24 Semibold white | 24 Semibold white |
| Normal | Fill | Turquoise #00D6C9 | Turquoise #00D6C9 |
| High | Fill | Coral #FA6140 | Coral #FA6140 |
| Emergency | Fill | Red #E93353 | Red #E93353 |
| Body | Padding | 16 left and right | 16 left and right |
| Meta line | Type | 12 Semibold, age in 12 Regular | 12 Semibold, age in 12 Regular |
| Meta line | Colour | Teal ink #1F515B, age in Muted #7A8684 | Teal ink #1F515B, age in Muted #7A8684 |
| Description | Type | 14 Regular, two lines | 14 Regular, two lines |
| Description | Colour | Ink #44544A | Ink #44544A |
| Attachments | Icons | 16, gap 2 to the count, 12 between kinds | 16, gap 2 to the count, 12 between kinds |
| Amount | Type | 14 Semibold, Antz green #37BD69 | 14 Semibold, Antz green #37BD69 |
| Amount | Icon | 20 | 20 |
| Strip | Inset from card edge | 2 at the sides and bottom | 2 at the sides and bottom |
| Strip | Padding | 12 top and bottom, 14 sides | 12 top and bottom, 14 sides |
| Strip | Corners | 10 at the bottom only | 10 at the bottom only |
| Strip | Gap | 4 | 4 |
| Strip icon | Size | 20 | 20 |
| Strip label | Type | 14 Medium | 14 Medium |
| Strip time | Type | 12 Regular | 12 Regular |
| Strip time | Colour | Black at 40% | Black at 40% |
| Awaiting | Fill | Amber #E4B819 at 10% | Amber #E4B819 at 10% |
| Awaiting | Text | Deep brown #250E01 | Deep brown #250E01 |
| Approved | Fill | Positive #E1F9ED | Positive #E1F9ED |
| Approved | Text | Dark green #006D35 | Dark green #006D35 |
| Rejected | Fill | Red #E93353 at 10% | Red #E93353 at 10% |
| Rejected | Text | Red #E93353 | Red #E93353 |
**Accessibility**
- The card is read as one item: category, priority, meta, then the strip label, so the status is never carried by colour alone.
- The priority flag is read as "Normal", "High" or "Emergency" priority, not as its glyph.
- Each strip has its own icon: pace, check_circle or cancel.
- Strip labels score 17.3 (Awaiting), 5.9 (Approved) and 3.6 (Rejected) for readability. Rejected is below 4.5, so the icon and the words carry the meaning, never the red alone.
- The time at 40% black scores 2.8; it is extra, never the only copy of a fact.
**Examples**
Default
```html
categoryCategory!
Record number • Name • 2 d
What is asked for, in plain words, up to two lines
```
---
## Animal card
Display · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=193-9208)
Shows one animal with its photo and the lines people use to tell it apart.
**When to use**
- Any time an animal appears on a screen: in a list, a form, a picker or a record.
- People need to be sure which animal it is before they act.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a person or a record | List card |
| Show a site | Site card |
| Show a section or an enclosure | Not designed yet; ask for the Figma frame |
**Anatomy**
1. Photo · required; a grey block when there is no photo
2. Sex tag · required: M, F or U
3. CITES tag · when the species is CITES listed
4. Expand icon · required; opens the photo full size
5. Identifier · optional: ear tag, name or chip
6. Animal ID · required
7. Common name · required
8. Scientific name · required, italic
9. Enclosure · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Male | Sex tag in Turquoise | yes |
| Female | Sex tag in Coral | yes |
| Unknown | Sex tag in Red | yes |
| With CITES tag | Appendix shown as "C" and its number | yes |
| No identifier | The animal has no ear tag, name or chip | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The animal is shown | As drawn | yes |
**Behaviour**
- Tapping the expand icon opens the photo full size; tapping elsewhere opens the animal or picks it, depending on the screen.
- Every line is one line; long text ends in an ellipsis and the card keeps its height.
- The card stretches to the width it is given: a list column on tablet, the full form width in a form.
- The same card is used for every animal everywhere, so people learn one shape.
- Lists of animals use this full card with its 104 photo, one card per animal. There is no smaller animal row.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | 303 in a list panel, 786 in a form |
| Photo | 104 × 104 | 104 × 104 |
**Content**
| Part | Rule |
| --- | --- |
| Identifier | "Ear tag", "Name" or "Chip" then the value; whichever the zoo uses first |
| Animal ID | The ID as the system gives it |
| Common name | As in the species list, sentence case |
| Scientific name | Genus and species, italic, never shortened |
| Enclosure | The current enclosure name |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Card | Corners | 12 | 12 |
| Card | Padding | 8 | 8 |
| Card | Gap | 8 | 8 |
| Photo | Size | 104 × 104 | 104 × 104 |
| Photo | Corners | 8 | 8 |
| Sex tag | Size | 24 × 24, 4 from the top and left | 24 × 24, 4 from the top and left |
| Sex tag | Corners | 6 | 6 |
| Sex tag | Type | 10 Medium white | 10 Medium white |
| Sex tag | Male | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Sex tag | Female | Coral #FA6140 | Coral #FA6140 |
| Sex tag | Unknown | Red #E93353 | Red #E93353 |
| CITES tag | Height | 24, top right | 24, top right |
| CITES tag | Fill | Black at 40% | Black at 40% |
| CITES tag | Corners | 6 | 6 |
| CITES tag | Type | 10 Medium white | 10 Medium white |
| Expand icon | Size | 16, bottom right, white | 16, bottom right, white |
| Lines | Gap | 4 | 4 |
| Identifier | Type | 14 Semibold | 14 Semibold |
| Identifier | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Animal ID, common name, enclosure | Type | 14 Medium | 14 Medium |
| Animal ID, common name, enclosure | Colour | Ink #44544A | Ink #44544A |
| Scientific name | Type | 14 Regular italic | 14 Regular italic |
| Scientific name | Colour | Muted #7A8684 | Muted #7A8684 |
**Accessibility**
- The photo has a text alternative: common name and animal ID.
- Sex is written as a letter on the tag, never shown by colour alone.
- Lines on Pale green score 8.0 (Identifier), 7.3 (Ink lines) and 3.4 (Scientific name) for readability. The scientific name is never the only way to identify the animal.
- The expand icon has its own label, "View photo", and a touch area of at least 44 around it.
**Examples**
Default
```html
```
---
## Site card
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-10637)
Shows one site with a thumbnail, either as a choice in a list or as a site already picked into a form.
**When to use**
- People choose one or more sites from a list.
- A form shows the sites already picked, each with a way to remove it.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show an animal | Animal card |
| Show a section or an enclosure | Not designed yet; ask for the Figma frame |
| Choose from short text options with no picture | Bottom sheet option rows |
**Anatomy**
1. Choosing card · in a picker list
2. Thumbnail · required; grey when there is no photo
3. Site name · required
4. Area · optional
5. Check · required when choosing
6. Picked card · in a form, after picking
7. Remove · required on a picked card
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Choosing | A row in a picker list, 48 thumbnail and a check on the right | yes |
| Picked | A site already chosen, shown under its field with a remove icon | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Not selected | The site is not chosen | Empty check box | yes |
| Selected | The site is chosen | 1px Antz green border and a ticked check box in Antz green | yes |
**Behaviour**
- Tapping anywhere on a choosing card selects or clears it.
- Picks are saved only when the picker is saved; closing it drops unsaved picks.
- On a picked card only the remove icon acts; it removes the site from the form at once.
- Choosing cards sit 8 apart.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | Width of the sheet or form column |
**Content**
| Part | Rule |
| --- | --- |
| Site name | The name people use on site, sentence case |
| Area | The wider area the site belongs to, one line |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Choosing card | Fill | White #FFFFFF | White #FFFFFF |
| Choosing card | Corners | 8 | 8 |
| Choosing card | Padding | 12 | 12 |
| Choosing card | Gap | 12 | 12 |
| Choosing card | Gap between cards | 8 | 8 |
| Thumbnail | Size | 48 | 48 |
| Thumbnail | Corners | 4 | 4 |
| Thumbnail | Fill behind | Black at 5% | Black at 5% |
| Site name | Type | 16 Medium | 16 Medium |
| Site name | Colour | Ink #44544A | Ink #44544A |
| Area | Type | 14 Regular | 14 Regular |
| Area | Colour | Ink #44544A | Ink #44544A |
| Area | Space above | 4 | 4 |
| Check | Size | 24 | 24 |
| Check | Colour off | Ink #44544A | Ink #44544A |
| Selected | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Selected | Icon | check_box, filled, Antz green #37BD69 | check_box, filled, Antz green #37BD69 |
| Picked card | Height | 56 | 56 |
| Picked card | Fill | Page light #E8F4F2 | Page light #E8F4F2 |
| Picked card | Border | 1px white | 1px white |
| Picked card | Corners | 8 | 8 |
| Picked card | Padding | 8 | 8 |
| Picked card | Gap | 12 | 12 |
| Picked thumbnail | Size | 40 | 40 |
| Picked thumbnail | Corners | 4 | 4 |
| Remove | Icon | cancel, 24 | cancel, 24 |
| Remove | Colour | Coral #FA6140 | Coral #FA6140 |
**Accessibility**
- Each choosing card is a checkbox with the site name as its label, and it reads "selected" or "not selected".
- Selected changes the icon as well as the colour.
- The remove icon is labelled "Remove" plus the site name, with a touch area of at least 44.
- Site name and area in Ink score 8.0 on white and 7.1 on Page light for readability.
**Examples**
Default
```html
Site name
Area
check_box_outline_blank
Site name
Area
check_box_outline_blank
```
Variant: Picked
```html
Site name
Area
cancel
```
State: Selected
```html
Site name
Area
check_box
Site name
Area
check_box_outline_blank
```
---
## Status label
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7044)
A small tinted label that says the status of a record in one or two words.
**When to use**
- A record has a status people scan for: in a list card, a detail screen or a log row.
- The status is one of a known set.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show the status of a request or an approval in a list | Request card (status strip) |
| Filter a list by status | Chips |
| Show what happened over time | History |
**Anatomy**
1. Container · required: tint of the meaning
2. Icon · optional; use it for pending
3. Label · required: the status in one or two words
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Text only | The standard label | yes |
| With icon | Adds a 16 icon before the word; use for pending, where the colour is weak | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Positive | Active, Approved, Entry, Completed | Positive fill, Dark green text | yes |
| Pending | Upcoming, Waiting, Draft | Amber light at 30%, Amber text | yes |
| Negative | Expired, Rejected, Denied, Not authorised | Red tint at 40%, Red text | yes |
| Cancelled | Cancelled | Coral tint at 30%, Coral text | yes |
| Neutral | Exit, Inactive, Auto | Black at 5%, Ink text | yes |
**Behaviour**
- A label is read-only; it never opens anything.
- The status appears once per card or screen. Never repeat it as a colour stripe, a sentence or a second label.
- Pick the meaning from what the status means for the person, not from how it looks.
- A label never wraps; keep the word short enough to fit.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Type | 12 Semibold | 14 Medium |
| Padding | 4 top and bottom, 8 sides | 4 top and bottom, 8 sides |
**Content**
| Part | Rule |
| --- | --- |
| Label | One or two words, sentence case, the same word everywhere for the same status |
| Spelling | "Cancelled", not "Canceled" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Padding | 4 top and bottom, 8 sides | 4 top and bottom, 8 sides |
| Container | Corners | 4 | 4 |
| Label | Type | 12 Semibold | 14 Medium |
| Icon | Size | 16, gap 4 | 16, gap 4 |
| Positive | Fill | Positive #E1F9ED | Positive #E1F9ED |
| Positive | Text | Dark green #006D35 | Dark green #006D35 |
| Pending | Fill | Amber light #FFE86E at 30% | Amber light #FFE86E at 30% |
| Pending | Text | Amber #E4B819 | Amber #E4B819 |
| Negative | Fill | Red tint #FFD3D3 at 40% | Red tint #FFD3D3 at 40% |
| Negative | Text | Red #E93353 | Red #E93353 |
| Cancelled | Fill | Coral tint #FFBDA8 at 30% | Coral tint #FFBDA8 at 30% |
| Cancelled | Text | Coral #FA6140 | Coral #FA6140 |
| Neutral | Fill | Black #000000 at 5% | Black #000000 at 5% |
| Neutral | Text | Ink #44544A | Ink #44544A |
**Accessibility**
- The status is written in words; the colour only supports it.
- Readability scores: Positive 5.9, Neutral 7.2, Negative 3.7, Cancelled 2.7, Pending 1.8. Pending, Cancelled and Negative are below 4.5, so they keep short, known words, and pending adds an icon.
- Screen readers hear "Status:" then the label, after the record name.
**Examples**
Default
```html
Status
```
Meaning: Pending
```html
Status
```
Meaning: Negative
```html
Status
```
Meaning: Cancelled
```html
Status
```
Meaning: Neutral
```html
Status
```
Variant: With icon (temporary)
```html
check_circleStatus
```
Device: Tablet
```html
Status
```
---
## History
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-25863)
A timeline of what happened to a record: who did what, and when.
**When to use**
- A record changes over time and people need to see who changed it and when.
- On phone, a record's history sits at the end of its detail screen.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show the current status only | Status label |
| Show a list of separate records | List card |
| Chat or comments about a record | Not covered here; comments live in the Help Desk activity feed |
**Anatomy**
1. Event dot · required, tinted by the kind of event
2. Event icon · required, 20
3. Title · required: what happened
4. Tag · optional: marks an event the system did
5. Meta line · required: who and when
6. Connector · joins each dot to the one below; none after the last
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Several entries | Newest first, joined by the connector | yes |
| One entry | Only "Created"; no connector | yes |
| With tag | A small neutral tag after the title for automatic events | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | History is loaded | As drawn | yes |
| Loading | History is still loading | Grey dots and grey blocks where text will be | temporary |
**Behaviour**
- Newest event at the top.
- Every change keeps an entry: who, when, and old → new when a value changed.
- Entries are read-only; they never open anything.
- Dot tints: created in Amber light, positive events in Positive, cancelled or expired in Coral at 10%.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Where it lives | At the end of the record's detail screen | In the detail panel, under the record |
**Content**
| Part | Rule |
| --- | --- |
| Title | What happened, past tense, a few words: "Approved", "Site changed" |
| Meta line | Person • date and time, as "22 Apr 2024 • 09:14 AM" |
| Tag | One word, such as "Auto" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Gap between dot and text | 12 | 12 |
| Dot | Size | 36, round | 36, round |
| Dot | Icon | 20 | 20 |
| Dot | Created | Amber light #FFE86E at 40% | Amber light #FFE86E at 40% |
| Dot | Positive event | Positive #E1F9ED | Positive #E1F9ED |
| Dot | Cancelled or expired | Coral #FA6140 at 10% | Coral #FA6140 at 10% |
| Connector | Width | 2 | 2 |
| Connector | Colour | Teal ink #1F515B at 5% | Teal ink #1F515B at 5% |
| Text | Padding | 10 top, 16 bottom | 10 top, 16 bottom |
| Text | Gap | 4 | 4 |
| Title | Type | 14 Medium | 14 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Meta line | Type | 12 Regular | 12 Regular |
| Meta line | Colour | Muted #7A8684 | Muted #7A8684 |
| Tag | Padding | 2 top and bottom, 4 sides | 2 top and bottom, 4 sides |
| Tag | Fill | Black at 5% | Black at 5% |
| Tag | Type | 12 Semibold Ink #44544A | 12 Semibold Ink #44544A |
**Accessibility**
- History is a list; each entry is read as title, then who and when.
- The dot colour is extra; the title says what happened.
- Title in Ink scores 8.0 on white for readability; meta in Muted scores 3.8.
**Examples**
Default
```html
cancel
Event titleName • Date and time
check_circle
Event titleName • Date and time
add_circle
CreatedName • Date and time
```
Entries: One
```html
add_circle
CreatedName • Date and time
```
Tag: With tag
```html
cancel
Event title AutoName • Date and time
check_circle
Event titleName • Date and time
add_circle
CreatedName • Date and time
```
State: Loading (temporary)
```html
```
---
## Stat tile
Display · Ready
A count people check at a glance at the top of a screen. It shows a number, not an action.
**When to use**
- A screen opens with a few counts people check first, such as how many items are in each step.
- Two to four counts that belong together.
**When not to use**
| If people need to | Use |
| --- | --- |
| Split a list by status | Primary tabs (the count sits in the tab) |
| Show the status of one record | Status label |
| Start an action | Button or Add button |
**Anatomy**
1. Tile · required; white, corners 8
2. Number · required
3. Label · required; what is being counted
4. Icon box · required; tinted by tone
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Turquoise | Totals that came in | yes |
| Green | Things in a good or settled state | yes |
| Coral | Things moving on or needing care | yes |
| Amber | Things waiting or about to be removed | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | Number and label shown | yes |
| Loading | The count is being fetched | Light grey block where the number goes | temporary |
| Zero | Nothing to count | Shows 0; the tile stays | yes |
**Behaviour**
- Tiles are not tappable. To act on a count, use the tabs or the list below.
- Phone shows two tiles per row; tablet shows up to four in one row.
- The group sits on the page colour, 16 from the edges, 12 between tiles.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Tiles per row | 2 | Up to 4 |
| Number | 24 Semibold | 28 Semibold |
**Content**
| Part | Rule |
| --- | --- |
| Number | The count only; no units unless the count is not of items |
| Label | What is counted, in two to four words, sentence case |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Group | Columns | 2 | Up to 4 |
| Group | Gap | 12 | 12 |
| Group | Padding | 16 | 16 |
| Group | Sits on | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Tile | Fill | White #FFFFFF | White #FFFFFF |
| Tile | Corners | 8 | 8 |
| Tile | Padding | 12, left 16 | 12, left 16 |
| Tile | Gap | 8 | 8 |
| Number | Type | 24 Semibold | 28 Semibold |
| Number | Colour | Black #000000 | Black #000000 |
| Label | Type | 12 Regular | 12 Regular |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space above | 2 | 2 |
| Icon box | Size | 44 | 44 |
| Icon box | Corners | 8 | 8 |
| Icon | Size | 24 | 24 |
| Turquoise tone | Box · icon | Turquoise light at 40% · Turquoise #00D6C9 | Turquoise light at 40% · Turquoise #00D6C9 |
| Green tone | Box · icon | Antz green at 10% · Antz green #37BD69 | Antz green at 10% · Antz green #37BD69 |
| Coral tone | Box · icon | Coral light at 20% · Coral #FA6140 | Coral light at 20% · Coral #FA6140 |
| Amber tone | Box · icon | Notes at 40% · Amber #E4B819 | Notes at 40% · Amber #E4B819 |
**Accessibility**
- The tile is not a button, so it has no tap target and no pressed state.
- The number and label read together as one item, for example "120 Label".
- Tone is never the only meaning: the label says what is counted.
**Examples**
Default
```html
120Labelegg
10Labelegg_alt
14Labeldevice_thermostat
10Labeldelete
```
Layout: Single
```html
120Labelegg
```
Device: Tablet
```html
120Labelegg
10Labelegg_alt
14Labeldevice_thermostat
10Labeldelete
```
---
## Bottom sheet
Overlays · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-24043)
A panel that slides up over the screen for a short choice or a small task, without leaving the page.
**When to use**
- Choose one option from a short list, or fill in one or two fields, without leaving the screen.
- A dropdown or date field opens its choices.
- Show a short list of facts about something on the screen.
**When not to use**
| If people need to | Use |
| --- | --- |
| Ask people to confirm something that can't be undone | Confirm |
| Narrow a long list by several categories | Filter screen |
| Fill in a long form | A full form screen |
| Pick actions for a record | Menu |
**Anatomy**
1. Handle · only when the sheet can be dragged
2. Title bar · required
3. Title · required, left
4. Close · required unless the sheet has a handle
5. Body · required, Pale green
6. Option row · when the sheet offers a choice
7. Selected mark · on the chosen row
8. Footer · when the sheet needs a decision
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Two buttons | Cancel and the action side by side, half each: the standard | yes |
| One button | A single decision; one full-width action | yes |
| Draggable | A handle on top; the sheet can be pulled up or down | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Nothing chosen | The sheet just opened | Action button is disabled | temporary |
| Option chosen | An option is picked | 1px Antz green border, Field fill and a filled radio on the row; action enabled | yes |
**Behaviour**
- Opens by sliding up, 260 ms. Respects reduced motion.
- Tapping the backdrop, the close icon or Cancel closes it and drops unsaved changes.
- Choices are saved only with the action button.
- The body scrolls inside the sheet; the title bar and footer stay put. The sheet is never taller than 90% of the screen.
- Only one sheet at a time; a sheet never opens another sheet.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full screen width | Full screen width |
| Footer buttons | Side by side, half each | Side by side, half each |
**Content**
| Part | Rule |
| --- | --- |
| Title | Says what is being chosen or done, in two or three words |
| Option | Name in 16 Medium; optional detail in 14 Regular Muted |
| Action button | A verb for the result, such as "Save" or "Apply"; not "OK" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Backdrop | Colour | Navy #1F415B at 50% | Navy #1F415B at 50% |
| Sheet | Fill | White #FFFFFF | White #FFFFFF |
| Sheet | Corners | 16 at the top | 16 at the top |
| Sheet | Height | Fits its content, up to 90% of the screen | Fits its content, up to 90% of the screen |
| Handle | Size | 48 × 4, corners 10 | 48 × 4, corners 10 |
| Handle | Colour | Grey #999999 | Grey #999999 |
| Handle | Space above | 12 | 12 |
| Title bar | Padding | 20 top and bottom, 16 sides | 20 top and bottom, 16 sides |
| Title bar | Shadow | 0 1 1, black at 10% | 0 1 1, black at 10% |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Close | Size | 24 | 24 |
| Body | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Body | Padding | 16 | 16 |
| Body | Gap | 12 | 12 |
| Option row | Fill | White #FFFFFF | White #FFFFFF |
| Option row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Option row | Corners | 8 | 8 |
| Option row | Padding | 12 | 12 |
| Option row | Type | 16 Medium; detail 14 Regular Muted #7A8684 | 16 Medium; detail 14 Regular Muted #7A8684 |
| Selected row | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Selected row | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Selected row | Icon | radio_button_checked 24, filled, Antz green #37BD69 | radio_button_checked 24, filled, Antz green #37BD69 |
| Footer | Fill | White #FFFFFF | White #FFFFFF |
| Footer | Padding | 16 | 16 |
| Footer | Gap | 16 | 16 |
| Footer | Top edge | 1px Page light #E8F4F2 | 1px Page light #E8F4F2 |
| Buttons | Height | 56 | 56 |
| Buttons | Split | Half each; one full-width button for a single decision | Half each; one full-width button for a single decision |
**Accessibility**
- The sheet is a dialog: focus moves to its title when it opens and returns to the control that opened it when it closes.
- Close has the label "Close"; the backdrop is not the only way out.
- Option rows are radio buttons; the selected one changes icon as well as colour.
- Title in Ink scores 8.0 on white for readability.
**Examples**
Default
```html
Screen title
Titleclose
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
Variant: One button
```html
Screen title
Titleclose
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
Variant: Draggable
```html
Screen title
Title
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
State: Option chosen
```html
Screen title
Titleclose
OptionDetail
radio_button_checked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
---
## Confirm
Overlays · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-24315)
A small centred popup that asks people to confirm an action before it happens.
**When to use**
- The action can't be undone, such as delete or cancel.
- The action has a cost people may not expect.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose between several options | Bottom sheet |
| Tell people an action worked or failed | Toast |
| Ask for a reason when rejecting | Bottom sheet with a text field |
**Anatomy**
1. Hero icon · required, 64
2. Title · required: the question
3. Body · optional: what will happen
4. Cancel · required, outline, left
5. Action · required, filled, right
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Destructive | Delete, cancel, remove: Coral icon and Coral action | yes |
| Non-destructive | An action with a cost that is not a loss: Antz green icon and action | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The popup is open | As drawn | yes |
**Behaviour**
- Opens over a Navy backdrop at 50%, centred on the screen.
- Cancel, or tapping the backdrop, closes it and nothing happens.
- The action button does the action and closes the popup; a toast confirms the result.
- Never stack a confirm on another confirm.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | 358 (full width less 16 each side) | 358, centred |
**Content**
| Part | Rule |
| --- | --- |
| Title | A short question naming the action and the thing: "Delete record?" |
| Body | What will happen, in one or two lines |
| Action | The same verb as the title, such as "Delete"; never "Yes" or "OK" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Backdrop | Colour | Navy #1F415B at 50% | Navy #1F415B at 50% |
| Popup | Fill | White #FFFFFF | White #FFFFFF |
| Popup | Corners | 16 | 16 |
| Popup | Width | 358 | 358 |
| Popup | Padding | 16 top, 16 bottom | 16 top, 16 bottom |
| Hero icon | Size | 64 | 64 |
| Hero icon | Colour | Coral #FA6140 for destructive | Coral #FA6140 for destructive |
| Title | Type | 16 Semibold, centred | 16 Semibold, centred |
| Title | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Title | Space | 16 above, 8 below, 24 sides | 16 above, 8 below, 24 sides |
| Body | Type | 14 Regular, line height 20, centred | 14 Regular, line height 20, centred |
| Body | Colour | Ink #44544A | Ink #44544A |
| Body | Sides | 24 | 24 |
| Buttons | Height | 56 | 56 |
| Buttons | Gap | 12 | 12 |
| Buttons | Padding | 24 top, 16 sides | 24 top, 16 sides |
| Buttons | Corners | 8 | 8 |
| Buttons | Type | 16 Medium | 16 Medium |
| Cancel | Style | White, 1px Line #C3CEC7, Ink #44544A text | White, 1px Line #C3CEC7, Ink #44544A text |
| Action | Fill | Coral #FA6140 for destructive | Coral #FA6140 for destructive |
**Accessibility**
- The popup is an alert dialog: focus moves to the title; the screen behind can't be reached until it closes.
- Focus starts on Cancel, so a stray tap or key can't do the destructive action.
- White on Coral scores 3.1 for readability; the label is 16 Medium and one word, and the hero icon repeats the warning.
- Title in Teal ink scores 8.8 on white.
**Examples**
Default
```html
Screen title
gpp_maybe
Title
Body text that says what will happen.
```
Variant: Non-destructive (temporary)
```html
Screen title
check_circle
Title
Body text that says what will happen.
```
---
## Filter screen
Overlays · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=186-8074)
A full screen for narrowing a list by several categories at once.
**When to use**
- A list can be narrowed by more than one category, such as status, site and date.
- Each category has more options than fit in a row of chips.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between a few views of a list | Chips or Primary tabs |
| Find one item by name | Search and filter row |
| Choose one option | Bottom sheet |
**Anatomy**
1. Title with count · required: "Filter - n", the number of options chosen
2. Close · required
3. Category rail · required, 162 wide
4. Active category · white
5. Search · when a category has many options
6. Option · checkbox and label
7. Result count · required: how many records match
8. Clear all · required
9. Apply · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Full screen | The only form; filters never open as a small sheet | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Nothing selected | No options chosen | Title reads "Filter - 0"; result count shows the whole list | yes |
| Some selected | One or more options chosen | Checked boxes; the title count and result count update at once | yes |
**Behaviour**
- Tapping a category in the rail shows its options on the right.
- The result count updates as options change, before Apply.
- Apply closes the screen and filters the list. Close drops changes made since opening.
- Clear all unticks every option in every category but keeps the screen open.
- The filter button on the list shows the number of options in use.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Form | Full screen | Not designed yet; ask before building |
**Content**
| Part | Rule |
| --- | --- |
| Title | "Filter - " and the number chosen |
| Category | A noun, one or two words |
| Option | The value as it appears on the cards |
| Result count | Number and noun: "12 results" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Screen | Fill | White #FFFFFF | White #FFFFFF |
| Screen | Size | Full screen | Full screen |
| Header | Padding | 44 top, 16 bottom, 16 sides | 44 top, 16 bottom, 16 sides |
| Header | Shadow | 0 1 1, black at 10% | 0 1 1, black at 10% |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Close | Size | 24 | 24 |
| Rail | Width | 162 | 162 |
| Rail | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Rail item | Height | 40 | 40 |
| Rail item | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Rail item | Type | 14 Semibold | 14 Semibold |
| Rail item | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Rail item | Active | White #FFFFFF fill | White #FFFFFF fill |
| Options panel | Padding | 16 | 16 |
| Options panel | Gap | 12 | 12 |
| Search | Fill | White #FFFFFF | White #FFFFFF |
| Search | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Search | Corners | 4 | 4 |
| Search | Padding | 11 top and bottom, 12 sides | 11 top and bottom, 12 sides |
| Search | Icon | 18 | 18 |
| Search | Type | 12 Regular | 12 Regular |
| Option | Checkbox | 18 | 18 |
| Option | Gap | 8 | 8 |
| Option | Type | 12 Regular | 12 Regular |
| Option | Rows | 20 apart | 20 apart |
| Footer | Height | 80 | 80 |
| Footer | Padding | 16 sides | 16 sides |
| Footer | Gap | 8 | 8 |
| Footer | Shadow | 0 -1 0, black at 10% | 0 -1 0, black at 10% |
| Result count | Type | 14 Regular | 14 Regular |
| Clear all | Style | Outline, 40 tall, corners 8, 1px Line #C3CEC7 | Outline, 40 tall, corners 8, 1px Line #C3CEC7 |
| Clear all | Type | 14 Medium Teal ink #1F515B | 14 Medium Teal ink #1F515B |
| Apply | Style | Antz green #37BD69, 40 tall, corners 8 | Antz green #37BD69, 40 tall, corners 8 |
| Apply | Type | 16 Semibold white | 16 Semibold white |
**Accessibility**
- The rail is a list of tabs; the active one is announced as selected.
- Each option is a checkbox with its label; ticked and unticked are different icons.
- The result count is announced when it changes.
- White on Antz green scores 2.4 for readability, below 4.5. "Apply" stays one short word at 16 Semibold; this is a known gap in the palette.
- Option rows are 18 tall in Figma; the touch area extends to the full row width and at least 44 tall.
**Examples**
Default
```html
Filter - 0close
Category
Category
Category
Category
Category
searchSearch
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
12 results
```
State: Some selected
```html
Filter - 2close
Category
Category
Category
Category
Category
searchSearch
check_boxOption
check_boxOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
12 results
```
---
## Toast
Overlays · Partial · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=272-37375)
A short message that tells people an action failed or worked.
**When to use**
- An action failed and people need to know, such as a save that did not go through.
- An action worked but the screen does not show it on its own.
**When not to use**
| If people need to | Use |
| --- | --- |
| Ask people to confirm before acting | Confirm |
| Show an error on one field | Text field error message |
| Show the status of a record | Status label |
**Anatomy**
1. Container · required: Red for error, Navy pill for success
2. Title · required
3. Close · required
4. Body · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Error | Something failed | yes |
| Success | Something worked: Navy pill at the bottom with a tick, one line and Undo when the action can be taken back | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Title and body | People need to know what to do next | Body line under the title | yes |
| Title only | The title says it all | No body | temporary |
**Behaviour**
- Appears at the bottom of the screen, 16 from the edges, above any action bar or bottom nav (temporary rule: position not set in Figma).
- Error toasts stay until closed; success toasts close themselves after 4 seconds (temporary rule).
- One toast at a time; a new one replaces the old.
- Failures use a toast, never a banner that stays on the screen.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | Content width, centred, up to 480 (temporary rule) |
**Content**
| Part | Rule |
| --- | --- |
| Title | What happened, in a few words: "Couldn't save" |
| Body | What to do next, one line |
| Tone | Plain and calm; no blame, no exclamation marks |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Width | 358 (full width less 16 each side) | 358 (full width less 16 each side) |
| Container | Corners | 8 | 8 |
| Container | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Container | Gap | 4 | 4 |
| Container | Shadow | 0 4 2, black at 15% | 0 4 2, black at 15% |
| Error | Fill | Red #E93353 | Red #E93353 |
| Success | Fill | Navy #1F415B | Navy #1F415B |
| Success | Shape | Pill, corners 24, 48 tall, padding 12 16 | Pill, corners 24, 48 tall, padding 12 16 |
| Success | Tick | check_circle 20, Antz green #37BD69 | check_circle 20, Antz green #37BD69 |
| Success | Message | 14 Medium white, one line | 14 Medium white, one line |
| Success | Undo | 14 Semibold Antz green #37BD69; only when the action can be taken back | 14 Semibold Antz green #37BD69; only when the action can be taken back |
| Success | Stays | 2.4 s, or 5 s with Undo | 2.4 s, or 5 s with Undo |
| Title | Type | 16 Semibold | 16 Semibold |
| Title | Colour | White #FFFFFF | White #FFFFFF |
| Close | Size | 24, white | 24, white |
| Body | Type | 14 Regular, line height 20 | 14 Regular, line height 20 |
| Body | Colour | White #FFFFFF | White #FFFFFF |
**Accessibility**
- The toast is a live region: error toasts are announced at once, success toasts politely.
- Close has the label "Close" and a touch area of at least 44.
- White on Red scores 4.1 for readability, just under 4.5 for the 14 body; keep the body short. White on Navy scores 11.5 for readability; the success message can be any length that fits one line.
- A toast never holds the only way to recover; the failed action can be tried again from the screen.
**Examples**
Default
```html
Screen title
Titleclose
Body text that says what to do next.
```
Variant: Success
```html
Screen title
check_circleWeight saved for Ear tag 1204Undo
```
Content: Title only
```html
Screen title
Titleclose
```
---
# Layouts
## List layout
For any screen whose job is to find one record among many.
### Two versions
| Version | Use | Items |
| --- | --- | --- |
| Default | Every list screen unless the brief asks otherwise | Request cards, 16 apart |
| Search bar version | Only when asked for | List cards, 12 apart |
### Default
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Back, screen title, search and up to two icon actions | Yes |
| 2 | Primary tabs | Count tabs that split the list by status | No |
| 3 | Count and filter | Item count, filter icon | Yes |
| 4 | Items | Request cards | Yes |
| 5 | Add button | Creates a new item | When people can add |
### Search bar version, when asked
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Back, screen title, up to two icon actions | Yes |
| 2 | Primary tabs or chips | One way of splitting the list | No |
| 3 | Count and filter | Item count, filter button | Yes |
| 4 | Items | List cards | Yes |
| 5 | Add button | Creates a new item | When people can add |
### Spacing
| Between | Phone | Tablet |
| --- | --- | --- |
| Screen edge and content | 16 | 20 |
| Items, default | 16 | 16 |
| Items, search bar version | 12 | 12 |
| Count line and first item | 16 | 16 |
| Add button and screen edge | 24, above navigation | Pill, 24 from the right |
### Rules
- Start every list screen from the default version; use the search bar version only when the brief asks for it.
- One kind of item per list.
- The splitting control holds one idea: status, owner or type, never a mix.
- An empty list shows one line of text in the middle; the add button stays.
- On tablet, choosing an item opens it beside the list. See Tablet split.
Skeleton 1 (neutral placeholder text; replace with real content)
```html
arrow_backTitlesearchnotifications
14Tab one
8Tab two
3Tab three
Counttune
categoryCategory!
Record number • Name • 2 d
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
categoryCategory!
Record number • Name • 2 d
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
categoryCategory!
Record number • Name • 2 d
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
add_circle
```
Skeleton 2 (neutral placeholder text; replace with real content)
```html
arrow_backTitlesearch
14Tab one
8Tab two
3Tab three
Counttune
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
add_circle
```
## Record layout
For one record: what it is, its details, its history, and any decision on it.
### Two versions
| Version | Use | Header |
| --- | --- | --- |
| Default | Every record screen unless the brief asks otherwise | White header with record number, category and priority, date and requester |
| Navy header | Only when asked for | Navy record header with who the record belongs to |
### Default
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Header | Back, record number, more menu; category with priority flag; date; requester with call and chat | Yes |
| 2 | Details | Sections on a Field fill, each with an icon, a small caption and the content, split by thin lines | Yes |
| 3 | Activity | Comments and status changes in one log, with a comment box at the top | Yes |
| 4 | Current status bar | Current status and how long ago it changed; the decision buttons sit here when someone must act | Yes |
### Navy header, when asked
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Record header | Back, title, more menu, who it belongs to | Yes |
| 2 | Details | Detail rows grouped by meaning | Yes |
| 3 | History | Everything that happened, newest first | Yes |
| 4 | Decision bar | Approve and Reject, or the one main action | When the viewer must decide |
### Rules
- Start every record screen from the default version; use the navy header only when the brief asks for it.
- The status shows once: in the current status bar of the default version, in the header area of the navy version.
- Activity holds both comments and status changes; there is no separate chat or history page. The navy version ends with a History section instead.
- Approve and Reject are stacked on phone, side by side on tablet. Reject always asks for a reason.
Skeleton 1 (neutral placeholder text; replace with real content)
```html
arrow_backRecord titlemore_vert
categoryCategory
Date and timeABRequestercallchat
notes
SectionSection content that can run over two lines of text
group
SectionSection content that can run over two lines of text
currency_rupee
SectionSection content that can run over two lines of text
chatActivityAdd a commentABNameComment
Current status • timeStatus
```
Skeleton 2 (neutral placeholder text; replace with real content)
```html
arrow_backRecord titlemore_vert
AB
Name
Detail
date_range
Label
Value
location_on
Label
Value
devices_other
Label
Value
login
EventDate
```
## Form layout
For creating or editing one record.
### Regions
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Close, form title | Yes |
| 2 | Sections | White section cards, each with an icon and heading, 16 apart | Yes |
| 3 | Action bar | One main action, 56 tall, pinned to the bottom | Yes |
### Rules
- The action bar stays pinned to the bottom; the form scrolls under it.
- One form with switches inside it, never two forms for the same record.
- A switch never hides fields that are still needed.
- The main action stays disabled until required fields are filled.
- Leaving with unsaved changes asks first, using Confirm.
Skeleton (neutral placeholder text; replace with real content)
```html
closeTitle
personSection
Hint text
Hint text
eventSection
Hintcalendar_month
Hintcalendar_month
```
## Result layout
For the outcome of a check: whether something passed, failed or is not ready yet.
### Regions
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Context and close | Where or what was checked, close | Yes |
| 2 | Result | 96 icon, 28 title, reference | Yes |
| 3 | Details | White sheet with who or what was checked | Yes |
| 4 | Action | One action, or Close | Yes |
### Result colours
| Result | Backdrop | Icon |
| --- | --- | --- |
| Passed | Positive #E1F9ED | Antz green tick |
| Failed | Red at 10% | Red shield |
| Not ready yet | Amber light | Amber shield |
Skeleton (neutral placeholder text; replace with real content)
```html
Placeclose
check_circle
Result
AB
Name
Detail
devices_other
Label
Value
```
## Tablet split
On tablet, the list and the open record sit side by side.
### Regions
### Grid
| Part | Value |
| --- | --- |
| Columns | 10; list takes 4, record takes 6 |
| Gap | 8 |
| Outer padding | 12 |
| Panels | White, corners 12 |
| Frame | 834 wide, portrait |
### Rules
- The chosen list item gets a 1.5 Antz green border.
- Decisions sit side by side at the bottom of the record panel.
- Landscape is out of scope.
Skeleton (neutral placeholder text; replace with real content)
```html
arrow_backTitlesearch
Count
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
arrow_backRecord titlemore_vert
AB
Name
Detail
date_range
Label
Value
location_on
Label
Value
```
---
# Patterns and parts
How screens are put together across Antz modules. Each pattern lists how it works, its rules, motion and haptics. Skeletons are wireframe-free HTML you can copy.
## All patterns
Patterns
37 ways of working found across the Antz modules, each settled into one version. Start a new module from these before drawing anything new.
### How to use
- Each pattern is built only from components already in the system.
- "Seen in" lists the modules where it was found on the Design Links hub on 26 Oct 2026; the page shows the settled version.
- Patterns tied to one kind of work live under Module patterns.
- Every card and record page is assembled from Card parts and Detail page parts.
### Choosing
Changes the site everything on the screen belongs to.
A full page to find and choose one record or many from a long list: animals, organs, tests, assessment types.
Find an enclosure or animal by search or QR, or step through Site → Section → Enclosure → Animal.
Choose who does something: a vet, a keeper, an approver.
Two to four big options that change what comes next, such as where a test happens.
A QR button beside search jumps straight to the enclosure, animal or pass.
Matches appear under the field as people type, with the match in bold.
### Entering data
A big value with its unit and an on-screen pad, for weights, doses and counts.
A value or a range on a known scale, such as heart rate or activeness.
Counts by kind and condition with a live total, such as eggs by state and temperature.
Repeat a group of fields, such as another collection date or another dose time.
A switch whose "no" needs a reason before the form can be sent.
One tap repeats the previous value or answer.
A pencil turns a read-only section into fields with Cancel and Save, without leaving the page.
A repeat or unusual entry gets a warning line and is still allowed.
### Building a request
Collect several items into one request: tests, medicines, studies.
Apply, preview and save a set of choices people make again and again.
Add photos and files, and view them full screen.
See every item, then send with the count on the button.
Long forms save as drafts; Submit turns on when complete; the record is read-only after.
Put new items into an existing record or start a new one.
### Working a list
Pick several records in a list and act on them together.
A list item opens the screen that fits its status.
Give a record to a person from the list or the record, and show who has it.
Switch whose work the list shows: everyone's, mine, or a role's.
A module opens with its numbers, then a chart or two, then the list.
Tap a number to see only those records.
One card for a clutch, litter or batch, with a tick for the whole group.
A searchable list of tabs when a record has too many to scroll.
### Record pages
The bottom of a record says where it stands and what happens next.
After submit, a short result that offers the obvious next task.
Request work from another team, then follow it with counts and steps.
Long records in sections that open and close, with tabs that follow the scroll.
A thread on a record with a box to add one.
A value with a sparkline that opens its full history.
### Feedback
What a list or section shows when there is nothing in it yet.
Confirm a change and let people take it back.
## Site switch
Patterns · Choosing
Changes the site everything on the screen belongs to.
### How it works
The site name sits on the right of the top bar.
Tapping it opens a bottom sheet with one radio per site.
Choosing a site closes the sheet and reloads the screen. No Save button.
### Rules
- One site switch per screen, always on the right of the top bar.
- The sheet lists only the sites the person may see; "All sites" comes first when the screen can show more than one.
- Each row may carry one count, such as animals or enclosures, to tell sites apart.
- The choice is kept when the person moves between tabs of the same module.
- Never a centred dialog, a menu under the chip, or a row of site tabs.
- The site switch can share the top bar with one icon, such as search; more actions go in the more menu.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Sheet opens | Slides up 260 ms | — |
| Site chosen | Sheet slides down 200 ms; list fades in | Light tick |
### Seen in
| Module | How it was drawn | Kept |
| --- | --- | --- |
| Medical · Nitin | Card anchored under the header | Bottom sheet |
| GRC · Nitin | Small menu under a header chip | Bottom sheet |
| Home · Naveen | Site tabs, a centred dialog and a bottom sheet | Bottom sheet |
| Egg · Prajwal | Site name in the header | Bottom sheet |
| Assessments · Deepannita | "All sites" menu in the table tools | Bottom sheet |
| Radiology · Swathi | "All locations" menu in the top bar | Bottom sheet |
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitleSitekeyboard_arrow_down
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
```
Skeleton 2
```html
arrow_backTitleSitekeyboard_arrow_down
Siteclose
Site oneCount of animals
radio_button_checked
Site twoCount of animals
radio_button_unchecked
Site threeCount of animals
radio_button_unchecked
```
Skeleton 3
```html
arrow_backTitleSitekeyboard_arrow_down
Record numberStatus
AB
Name
Detail
Name • Date
check_circleShowing site two
```
## Pick from a list
Patterns · Choosing
A full page to find and choose one record or many from a long list: animals, organs, tests, assessment types.
### How it works
Search, narrow with chips, tick rows. Rows already added are locked.
The bar counts the picks; the main button turns on.
Tapping the count opens the picks to review or remove.
No match keeps the picks and says so in one line.
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Close and what is being chosen | Yes |
| 2 | Search and filter | Search by name or ID; filter when the list has groups | Yes |
| 3 | Chips | Groups such as category or species, with All first | When the list has groups |
| 4 | Rows | Photo or initials, name, one detail, radio or check box on the right | Yes |
| 5 | Picks bar | "N selected" and the main button, pinned at the bottom | Yes |
### Variants
| Variant | When | Difference |
| --- | --- | --- |
| One | Exactly one record | Radios; the main button says Select |
| Many | Any number | Check boxes; the bar counts; the button says Add N |
| With locked rows | Some records are already added | Disabled fill, ticked grey, "Added" |
| Animals | Choosing several animals | Rows are full animal cards. One animal in a form uses the Picker field's animal sheet instead |
### Rules
- A full page, not a sheet, when the list can pass about 20 rows or needs search.
- The chosen row has a green border on pale green; radio for one, check box for many.
- The main button stays off until something is picked.
- Leaving with × drops the picks; the button keeps them.
- Picks survive search and chip changes; a hidden pick still counts.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Row ticked | Check box fills 180 ms | Light tick |
| Count opened | Sheet slides up 260 ms | — |
| Added | Page slides back; added items glow 2.4 s | Success pulse |
### Seen in
| Module | How it was drawn | Kept |
| --- | --- | --- |
| Necropsy · Swathi | Select organs, add specimen | Locked "Added" rows, chips, no-match line |
| Assessments · Deepannita | Search assessment type | Review of picks before saving |
| Medical · Nitin | Search animal | Main button pinned and off until a pick |
| Egg · Prajwal | Animal list | Radio rows for one |
| Family tree · Swathi | Select animal | "N selected" tray |
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeChoose items
searchSearch
tune
AllGroup oneGroup two
AB
NameDetail
check_box_outline_blank
AB
NameAdded
check_box
AB
NameDetail
check_box_outline_blank
AB
NameDetail
check_box_outline_blank
AB
NameDetail
check_box_outline_blank
0 selected keyboard_arrow_up
```
Skeleton 2
```html
closeChoose items
searchSearch
tune
AllGroup oneGroup two
AB
NameDetail
check_box
AB
NameAdded
check_box
AB
NameDetail
check_box
AB
NameDetail
check_box_outline_blank
AB
NameDetail
check_box_outline_blank
2 selected keyboard_arrow_up
```
Skeleton 3
```html
closeChoose items
searchSearch
tune
AllGroup oneGroup two
Selectedclose
AB
NameDetail
cancel
CD
NameDetail
cancel
```
Skeleton 4
```html
closeChoose items
searchSearch
tune
search_offNo matchTry another name
2 selected keyboard_arrow_up
```
## Choose a place or animal
Patterns · Choosing
Find an enclosure or animal by search or QR, or step through Site → Section → Enclosure → Animal.
### How it works
Search every enclosure at once, scan its QR, or step through the levels.
Each level opens as a bottom sheet once the one above is chosen.
The choice shows as a site card and an animal card, each with a remove icon.
### Rules
- Search covers every level; a result says which section and site it belongs to.
- The scan button sits beside the search and opens the chosen place directly.
- A level stays disabled, saying "Choose a … first", until the level above is chosen.
- The site comes from the site switch; it is not asked again.
- Removing the picked place returns to this screen with the search empty.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Level chosen | Sheet slides down; next field enables | Light tick |
| QR read | Camera closes; place appears | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeChoose place
searchSearch
qr_code_scanner
Or choose step by step
Selectkeyboard_arrow_down
Choose a section firstkeyboard_arrow_down
Choose an enclosure firstkeyboard_arrow_down
```
Skeleton 2
```html
closeChoose place
searchSearch
qr_code_scanner
Section namekeyboard_arrow_down
Selectkeyboard_arrow_down
Enclosureclose
Enclosure oneAnimals 4
radio_button_checked
Enclosure twoAnimals 12
radio_button_unchecked
Enclosure threeAnimals 2
radio_button_unchecked
```
Skeleton 3
```html
closeChoose place
Enclosure
Enclosure name
Section · Site
cancel
Animal
M
Animal IDCommon nameScientific nameEnclosure
```
## Person picker
Patterns · Choosing
Choose who does something: a vet, a keeper, an approver.
### How it works
A picker field says who is being chosen.
A sheet with search; each row shows the role and how much they already hold.
### Variants
| Variant | When | Difference |
| --- | --- | --- |
| One person | Assign, reassign | Radios |
| Several people | Notify, approvers | Check boxes and "N selected" |
### Rules
- Rows show photo or initials, name, then role and current load in one line.
- The person already assigned is ticked when the sheet opens.
- Done keeps the change; Cancel or × drops it.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Person chosen | Radio fills 180 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
personPeople
Choose personadd_circle
```
Skeleton 2
```html
closeTitle
Assign toclose
searchSearch
NameRole • 2 open
radio_button_checked
NameRole • 5 open
radio_button_unchecked
NameRole • 0 open
radio_button_unchecked
```
## Choice tiles
Patterns · Choosing
Two to four big options that change what comes next, such as where a test happens.
### How it works
Choosing a tile reveals only the fields that option needs.
An option that cannot be used stays visible, locked, with the reason as its second line.
### Rules
- Two to four tiles; five or more becomes a Dropdown.
- Each tile: a short title and one line that says what it means.
- The chosen tile has a green border on pale green and a filled radio.
- A locked tile says why in its second line; tapping it does nothing.
- Tiles sit two per row on phone when titles are short; otherwise one per row.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Tile chosen | Fields below slide open 180 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
location_onWhere will it happen?
OptionDetail
radio_button_checked
OptionDetail
radio_button_unchecked
Selectkeyboard_arrow_down
```
Skeleton 2
```html
closeTitle
location_onWhere will it happen?
OptionReason it is not possible
lock
OptionDetail
radio_button_checked
```
## Scan to find
Patterns · Choosing
A QR button beside search jumps straight to the enclosure, animal or pass.
### How it works
The scan button sits beside the search, never instead of it.
The camera opens full screen with one target frame and one line.
A known code opens its record directly.
### Rules
- Scan is a shortcut: everything it finds can also be found by search.
- A known code opens the record; an unknown one shows an error toast and keeps the camera open.
- The camera asks for permission once, with one line saying why.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Code read | Camera fades; record pushes in | Success pulse |
| Unknown code | Toast rises | Warning buzz |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitle
searchSearch
qr_code_scanner
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
```
Skeleton 2
```html
Point at the code
```
Skeleton 3
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
location_on
Label
Value
M
Animal IDCommon nameScientific nameEnclosure
```
## Search as you type
Patterns · Choosing
Matches appear under the field as people type, with the match in bold.
### How it works
Up to five matches drop under the field.
When the system already knows the answer, it fills the field and says where it came from.
### Rules
- Matches start after two characters.
- The typed part is bold; the scientific name follows in brackets.
- A filled-in value always says where it came from and stays editable.
- No match: one line, "No match. Check the spelling."
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Match chosen | List closes 150 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
petsSpecies
Typed text
Match one (Scientific name)
Match two (Scientific name)
Match three (Scientific name)
```
Skeleton 2
```html
closeTitle
petsSpecies
Chosen value
infoFilled from the parents. You can change it.
```
## Number with a pad
Patterns · Entering data
A big value with its unit and an on-screen pad, for weights, doses and counts.
### How it works
The value is large; the unit sits beside it; the last value is one tap away.
### Rules
- One value per screen; the animal it belongs to sits above it.
- The unit switch is a segmented control; switching converts the value.
- "Last" shows the previous value and date; tapping it fills it in.
- Six digits and one decimal point at most; an empty Add shows the error under the value.
- Use the pad when the screen is for one value entered again and again (weighing animal after animal). Inside a longer form, use the Text field with a unit instead.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Key pressed | Key darkens 100 ms | Light tick |
| Saved | Screen closes; new value glows | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeAdd entry
M
Animal IDCommon nameScientific nameEnclosure
42.5kgLast 41.9 kg
kgg
123456789.0⌫
```
## Slider and range
Patterns · Entering data
A value or a range on a known scale, such as heart rate or activeness.
### How it works
Single value above; a range with two knobs below. Ends say what the scale means.
### Rules
- Use a slider only when the scale has fixed ends.
- The value is shown large above the track and updates while dragging.
- Each end has a number and a word.
- Values snap to the scale step.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Knob dragged | Follows the finger | Light tick on each step |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeAdd entry
speedActiveness
6
1 · Low10 · High
monitor_heartHeart rate
60 – 90
20200
```
## Count table
Patterns · Entering data
Counts by kind and condition with a live total, such as eggs by state and temperature.
### How it works
Rows and columns of number cells; the total and the button update as people type.
### Rules
- Number cells only; empty counts as 0.
- The total and the main button carry the same number.
- Use the table for up to 4 rows and 3 columns; more becomes a list of steppers.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Count typed | Total updates | — |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeAdd eggs
grid_viewCounts
Kind oneKind twoRow one31Row two01
Total5
```
## Add another
Patterns · Entering data
Repeat a group of fields, such as another collection date or another dose time.
### How it works
One group is open; finished ones fold into a one-line summary.
### Rules
- Only one group is open at a time; the rest fold to a summary line.
- Each group can be removed except the last one.
- "Add another" is a dashed full-width button under the groups.
- A total, when there is one, sits under everything.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Group added | New group opens 180 ms; the previous folds | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeTitle
eventGroup
Date • 5expand_more
Valuecalendar_month
Value
addAdd another
Total8
```
## Yes or no with a reason
Patterns · Entering data
A switch whose "no" needs a reason before the form can be sent.
### How it works
Yes needs nothing more.
No opens a required reason; Submit stays off until it is filled.
### Rules
- The reason field appears under the switch, never in a pop-up.
- Turning the switch back to yes hides the reason but keeps the text.
- Rejecting, stopping and cancelling follow the same rule with Confirm.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Switch turned | Reason slides open 180 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
fact_checkCheck
Question
```
Skeleton 2
```html
closeTitle
fact_checkCheck
Question
Hint text
```
## Same as last
Patterns · Entering data
One tap repeats the previous value or answer.
### How it works
"Same as last" sits at the top of the answer, with the last value.
### Rules
- Shown only when there is a previous entry for the same animal.
- It fills the answer; people still press the main button.
- The date of the last entry is one tap away in its history.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Filled | Answer highlights 180 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeAdd entry
checklistAnswer
historySame as last · Value
OptionDetail
radio_button_checked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
## Edit in place
Patterns · Entering data
A pencil turns a read-only section into fields with Cancel and Save, without leaving the page.
### How it works
A pencil sits on the section title.
The section turns into fields with its own Cancel and Save.
### Rules
- Only one section is in edit at a time.
- Leaving the page with unsaved changes asks first.
- Save writes back to the read-only view and adds a line to History or Activity.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Saved | Fields fold back 180 ms | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
Sectionedit
LabelValue
LabelValue
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
Section
Value
Value
```
## Warn, don't block
Patterns · Entering data
A repeat or unusual entry gets a warning line and is still allowed.
### How it works
The warning sits under the item; the main button stays on.
### Rules
- Warn when the entry is allowed but likely a mistake; block only when it is not allowed.
- The line says what is unusual, with the date or value that makes it so.
- Amber line, never red.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeTitle
scienceTests
NameDetail
check_box
warningAlready requested on a date and still pending
```
## Add several items
Patterns · Building a request
Collect several items into one request: tests, medicines, studies.
### How it works
Start with Add or a recently used item.
Each item shows its details with edit and remove; a line says what will be created.
### Rules
- The Add button is cyan; the send button is green and carries the count.
- Recently used fills the item form with the last values.
- When items become separate requests, say how many before sending.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Item added | Card slides in and glows | Light tick |
| Sent | Screen closes | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeNew request
Recently used
ItemItemItem
```
Skeleton 2
```html
closeNew request
Selected (2)+ Add
Record number
AB
Name
Detail
Name • Date
Record number
AB
Name
Detail
Name • Date
infoThis will create 2 requests
```
## Templates
Patterns · Building a request
Apply, preview and save a set of choices people make again and again.
### How it works
Templates are chips; tapping one applies it.
With many templates, a sheet lists them with their item count.
Saving asks for a name; a name already used is refused under the field.
### Rules
- Applying a template adds its items; it never removes what is already chosen.
- Each template shows how many items it holds.
- Names must be unique; the error sits under the field.
- Templates belong to the person who saved them unless shared by an admin.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Applied | Items glow 2.4 s | Light tick |
| Saved | Chip appears | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
bookmarksTemplates
TemplateTemplateTemplate
Save as templateClear
```
Skeleton 2
```html
closeTitle
Templatesclose
Template8 items
radio_button_checked
Template5 items
radio_button_unchecked
Template3 items
radio_button_unchecked
```
Skeleton 3
```html
closeTitle
bookmarksSave as template
Name
A template with this name already exists
```
## Attachments
Patterns · Building a request
Add photos and files, and view them full screen.
### How it works
An empty section shows one upload box with what is allowed.
Camera or gallery; picked files show as tiles with a remove icon.
Tapping a file opens it full screen with the others in a rail.
### Rules
- Say what is allowed before people pick.
- Files show as tiles: image preview or a file-type icon, then the name.
- A file over the limit is refused with a toast naming the limit.
- Remove is on the tile; there is no confirm.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| File added | Tile pops in | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
attach_fileAttachments
add_photo_alternateUpload filesSupported: JPEG, PNG, PDF · up to 32 MB
```
Skeleton 2
```html
closeTitle
Add attachmentsclose
imagepicture_as_pdf
photo_cameraCameraphoto_libraryGallery
```
Skeleton 3
```html
File name · 2.4 MBclose
```
## Review before sending
Patterns · Building a request
See every item, then send with the count on the button.
### How it works
Every item as it will be sent; tap one to change it.
### Rules
- The button names the action and the count: "Send 3", "Move 2 to nursery".
- Going back keeps every choice.
- Destructive sends (discard, delete) use the red button and ask for notes when needed.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Sent | Screen closes; list glows | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backReview
Record number
AB
Name
Detail
Name • Date
Record number
AB
Name
Detail
Name • Date
Record number
AB
Name
Detail
Name • Date
```
## Draft, then submit
Patterns · Building a request
Long forms save as drafts; Submit turns on when complete; the record is read-only after.
### How it works
Save as draft at any time; a stamp under the title shows when.
After submit the record opens read-only with its status.
### Rules
- Submit stays off until every required field is filled.
- Drafts appear in the list with a Draft label and open back into the form.
- Submitted records are read-only; changes go through Edit in place or a new record.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Draft saved | Stamp updates | — |
| Submitted | Form closes | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitleDraft saved • time
descriptionSection
Hint text
Hint text
descriptionSection
Hint text
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
date_range
Label
Value
Current status • timeStatus
```
## Add to a record
Patterns · Building a request
Put new items into an existing record or start a new one.
### How it works
A chip at the top shows the record; tapping it opens the choice.
### Rules
- The most recent open record is chosen by default.
- "Create new record" is always first.
- The chip stays visible while adding, so people always know where items go.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Record chosen | Sheet slides down | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeTitleRecord number
Add toclose
Create new recordDetail
radio_button_unchecked
Or choose a record
Record numberType • date • 3 items
radio_button_checked
Record numberType • date • 1 item
radio_button_unchecked
```
## Select several
Patterns · Working a list
Pick several records in a list and act on them together.
### How it works
Holding a card or tapping the select icon starts the mode. The bar suggests the likely next step.
Holding one card can also open a short menu for that record.
### Rules
- A count bar replaces the list header: close, "N selected", select all.
- The suggested action follows what is selected (all damaged → Discard); other actions sit under it as outline buttons.
- Leaving the mode clears the selection.
- Actions that change many records show an Undo toast.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Mode starts | Bar slides in 180 ms | Light tick |
| Action done | Cards leave the list | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
```
## Open by status
Patterns · Working a list
A list item opens the screen that fits its status.
### How it works
Draft opens the form where it was left.
Waiting opens the record with its next step.
Done opens the read-only summary.
### Rules
- The list card looks the same for every status; only the screen behind it changes.
- The status label on the card tells people what will open.
- A person who cannot act on a record always gets the read-only summary.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
closeTitle
Draft saved • time
descriptionSection
Hint text
Hint text
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
Current status • timeStatus
```
Skeleton 3
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
date_range
Label
Value
Current status • timeStatus
```
## Assign and reassign
Patterns · Working a list
Give a record to a person from the list or the record, and show who has it.
### How it works
Unassigned cards show Assign; assigned ones show the person with a pencil.
In the record, "Pick up" assigns it to yourself; Reassign opens the person picker.
### Rules
- Assigning uses the Person picker.
- The assignee shows on the card, not only in the record.
- Every assign and reassign adds a line to Activity.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Assigned | Strip updates | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitle
Record numberStatus
AB
Name
Detail
Name • Date
Assignperson_add
Record numberStatus
AB
Name
Detail
Name • Date
ABAssigned nameedit
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
Not picked up yet
```
## Viewing as
Patterns · Working a list
Switch whose work the list shows: everyone's, mine, or a role's.
### How it works
A compact switch under the top bar.
A sheet lists the views with their counts.
### Rules
- Tab counts and stat tiles follow the chosen view.
- The view is kept for the person between visits.
- Only people who can see others' work get the switch.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| View chosen | List fades 150 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitle
Viewing: Everyonekeyboard_arrow_down
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
```
Skeleton 2
```html
arrow_backTitle
Viewingclose
Everyone24 records
radio_button_checked
Me6 records
radio_button_unchecked
Role9 records
radio_button_unchecked
```
## Dashboard of counts
Patterns · Working a list
A module opens with its numbers, then a chart or two, then the list.
### How it works
Stat tiles first, value tiles with sparklines next, then the records.
### Rules
- Numbers first; each number opens the list filtered to it.
- Two charts at most above the list.
- Everything follows the site switch and the chosen period.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitleSitekeyboard_arrow_down
12Labelpets
12Labelpets
12Labelpets
12Labelpets
Labelchevron_right
42.5
Labelchevron_right
42.5
Record numberStatus
AB
Name
Detail
Name • Date
```
## Counts that filter
Patterns · Working a list
Tap a number to see only those records.
### How it works
The chosen number is underlined; a removable chip shows the filter.
### Rules
- The chip uses the same word as the number's label.
- Tapping the chosen number again clears the filter.
- Counts update when other filters change.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Filter on | List fades 150 ms | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitle
12One5Two3Three2Four
Two close
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
```
## Group card
Patterns · Working a list
One card for a clutch, litter or batch, with a tick for the whole group.
### How it works
The group tick shows none, some or all; the group opens to its items.
### Rules
- The group tick has three states drawn from the same icon set: empty, partly ticked, ticked.
- Ticking the group ticks every item; unticking clears them.
- The count of items sits beside the group name.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Group ticked | Items tick together | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitle
egg
Group name · 3
Detail
indeterminate_check_boxexpand_less
Item check_box
Item check_box_outline_blank
Item check_box
Record numberStatus
AB
Name
Detail
Name • Date
```
## All tabs
Patterns · Working a list
A searchable list of tabs when a record has too many to scroll.
### How it works
A ≡ button stays pinned at the left of the tab row.
It opens every tab with its count; the current one is chosen.
### Rules
- Use when a record has more than six tabs.
- Tabs keep their order; search only filters.
- Choosing a tab closes the sheet and scrolls the tab row to it.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitle
menu
4Tab
2Tab
1Tab
Record numberStatus
AB
Name
Detail
Name • Date
```
Skeleton 2
```html
arrow_backTitle
All tabsclose
searchSearch
Tab4
radio_button_checked
Tab2
radio_button_unchecked
Tab1
radio_button_unchecked
```
## Status and next step
Patterns · Record pages
The bottom of a record says where it stands and what happens next.
### How it works
Status only, when the viewer has nothing to do.
With progress and one next step.
Two steps at most: the main one green, the other outline.
### Variants
| Variant | When | Difference |
| --- | --- | --- |
| Status only | Nothing for this viewer to do | Status and time |
| With progress | The record moves through known steps | Progress bar; "See all" opens the timeline |
| With next step | The viewer must act | One or two buttons |
### Rules
- The buttons change with the status and with who is looking.
- Reject and Cancel always ask for a reason.
- The status here is the only place the status appears on the page.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Step done | Bar updates; status cross-fades | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
M
Animal IDCommon nameScientific nameEnclosure
Current status • timeStatus
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
Current status • timeStatus
```
Skeleton 3
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
date_range
Label
Value
Current status • timeStatus
```
## Result with next step
Patterns · Record pages
After submit, a short result that offers the obvious next task.
### How it works
One line of result, the next task in green, Done in outline.
### Rules
- Offer a next task only when most people do it next.
- Without a next task, use a toast instead of a sheet.
- Done returns to the list with the changed items glowing.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Result shown | Sheet slides up 260 ms | Success pulse |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitle
Record numberStatus
AB
Name
Detail
Name • Date
Doneclose
check_circle2 items updatedDetail
```
## Send to another team and track
Patterns · Record pages
Request work from another team, then follow it with counts and steps.
### How it works
The request shows how much is done, its parts in tabs, and its status.
### Rules
- The requesting team sees the same record, read-only.
- Counts read "done of total" and turn green when complete.
- Each change by the other team adds to Activity and notifies the requester.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
12One5Two3Three2Four
TabTabTab
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
Current status • timeStatus
```
## Collapsible sections
Patterns · Record pages
Long records in sections that open and close, with tabs that follow the scroll.
### How it works
Tapping a tab opens its section and scrolls to it; the active tab follows the scroll.
### Rules
- Several sections can be open at once.
- Tab names match section names exactly.
- A section with an error opens itself and scrolls into view on Submit.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Section opens | Height grows 180 ms; chevron turns | — |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
closeTitle
SectionSectionSection
Sectioneditexpand_less
Hint text
Hint text
Sectionexpand_more
Sectionexpand_more
```
## Comments
Patterns · Record pages
A thread on a record with a box to add one.
### How it works
Newest at the bottom; the box stays pinned.
### Rules
- Comments and status changes share one Activity thread.
- People can edit or delete only their own comments.
- Attachments in comments follow the Attachments pattern.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Comment sent | Bubble rises into place | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
chatActivity
AB
NameComment textDate • time
AB
NameComment textDate • time
attach_fileAdd a commentsend
```
## Value over time
Patterns · Record pages
A value with a sparkline that opens its full history.
### How it works
Value tiles show the latest value and a sparkline.
History: range, chart, latest, highest and lowest, then every entry.
### Rules
- The sparkline colour follows the same period as the change it shows.
- The range uses the segmented control.
- People edit only their own entries; nobody deletes.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton 1
```html
arrow_backTitle
Labelchevron_right
42.5
Labelchevron_right
42.5
Record numberStatus
AB
Name
Detail
Name • Date
```
Skeleton 2
```html
arrow_backLabel
7d30D3M6M
LatestValue
HighestValue
LowestValue
Record number
AB
Name
Detail
Name • Date
```
## Empty state
Patterns · Feedback
What a list or section shows when there is nothing in it yet.
### How it works
Icon in a pale circle, a title, one line and the one action that fills it.
### Variants
| Variant | When | Difference |
| --- | --- | --- |
| First use | Nothing has ever been added | Action that adds the first item |
| No match | Search or filter hides everything | "Clear filters" as the action |
| All done | Everything is handled | No action |
### Rules
- Never a blank screen.
- The line says what will appear, not how the feature works.
- The add button on the screen stays visible.
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitle
inboxNothing yetOne line on what will appear here
```
## Undo
Patterns · Feedback
Confirm a change and let people take it back.
### How it works
The navy toast offers Undo; the changed item glows pale green.
### Rules
- Undo appears for 5 seconds after any change that can be reversed.
- Undo puts everything back as it was, including order.
- Changes that cannot be undone ask first with Confirm instead.
### Motion and haptics
| Moment | Motion | Haptic |
| --- | --- | --- |
| Saved | Toast rises 200 ms; item glows 2.4 s | Success pulse |
| Undone | Item returns | Light tick |
### Seen in
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.
Skeleton
```html
arrow_backTitle
AB
Name
Detail
Record numberStatus
AB
Name
Detail
Name • Date
Record numberStatus
AB
Name
Detail
Name • Date
check_circleSaved for nameUndo
```
## Card parts
Parts
Every list card is built from these parts, in this order. Pick the parts the record needs; leave the rest out.
### Order
### Shell
### Top row · pick one
### Middle rows · up to four
### Bottom · one or none
### Assembled
### Pick by need
| If the record… | Use |
| --- | --- |
| waits on someone | Lifted shell and status strip |
| is about one animal | Animal as the top row (full animal card) |
| has a money or measured value | Key value |
| has no status | No strip and no label |
| is looked up by number | Record number and status |
### Rules
- Always in this order: shell, top row, middle rows, bottom.
- Four middle rows at most.
- The status appears once: a label in the top row or a strip at the bottom, never both.
- No card inside a card; the animal and site rows are the card's own top row.
- The whole card opens the record; no buttons on the card.
Part: Flat · White, corners 8. Every record
```html
```
Part: Lifted · Corners 12, shadow. Records that wait on someone
```html
```
Part: Record number and status · Records people look up by number
```html
Record numberStatus
```
Part: Category and priority · Requests
```html
categoryCategory!
```
Part: Person · Records about a person
```html
AB
Name
Detail
```
Part: Animal · Records about one animal
```html
M
Animal IDCommon nameScientific nameEnclosure
```
Part: Site · Records about a place
```html
Site name
Area
```
Part: Meta line · Number • person • age
```html
Record number • Name • 2 d
```
Part: Description · Two lines at most
```html
Description up to two lines
```
Part: Fact row · Icon and one value
```html
date_rangeDate → Date
```
Part: Key value · One measured value on the right · temporary
```html
Label42.5 kg
```
Part: Status strip · Only on lifted cards
```html
paceStatusTime
```
Part: Nothing · The status label sits in the top row, or there is no status
```html
Record number • Name • 2 d
```
Part: Weight record · Flat · animal · key value · meta
```html
```
Part: Visitor pass · Flat · number and status · person · fact row
```html
Record numberStatus
AB
Name
Detail
date_rangeDate → Date
```
## Detail page parts
Parts
Every record page is built from these parts. The default uses the white header; the navy header only when the brief asks.
### Order
### Header · pick one
### Sections · pick any
### Trail · pick one
### Bottom · one or none
### Assembled
Request: white header, detail, animal, Activity, status bar.
Weight record: white header, details, animal, History, no bottom.
Approval: white header, details, person, decision bar.
### Rules
- Header first, bottom last, trail just above the bottom.
- Leave out what the record does not have: no flag without a priority, no status bar without a status.
- The white header's middle row names the kind of record (icon and name, such as Weight); its person row is whoever created it. Do not repeat that person in a section.
- One bottom part only.
- The status appears once on the page.
Skeleton 1
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
date_range
Label
Value
M
Animal IDCommon nameScientific nameEnclosure
chatActivityAdd a comment
Current status • timeStatus
```
Skeleton 2
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
monitor_weight
Label
Value
person
Label
Value
M
Animal IDCommon nameScientific nameEnclosure
check_circle
EventDate
```
Skeleton 3
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
badge
Label
Value
event
Label
Value
AB
Name
Detail
```
Part: White header (default) · Number, category and priority when they exist, the person, call and chat
```html
arrow_backRecord numbermore_vert
categoryCategory!
ABRequester
```
Part: Navy header · Only when the brief asks
```html
arrow_backRecord titlemore_vert
AB
Name
Detail
```
Part: Detail row · Icon, caption, value
```html
date_range
Label
Value
```
Part: Description · Free text
```html
Longer text that runs over two lines or more
```
Part: Animal · Full animal card
```html
M
Animal IDCommon nameScientific nameEnclosure
```
Part: People · Approvers, assignees
```html
AB
Name
Detail
CD
Name
Detail
```
Part: Two-column facts · Short facts side by side
```html
LabelValue
LabelValue
LabelValue
LabelValue
```
Part: Attachments · Files and photos
```html
imageimagepicture_as_pdf
```
Part: Activity · Comments and changes together; people discuss the record
```html
chatActivityAdd a comment
```
Part: History · Changes only
```html
check_circle
EventDate
```
Part: Status bar · Current status and how long ago
```html
Current status • timeStatus
```
Part: Decision bar · When the viewer must decide
```html
```
Part: One main action · One next step
```html
```
## Module patterns
Module patterns
Patterns found in one module. Borrow them for a similar module; they move to Patterns once a second module needs them.
Pan and zoom tree of animals, pair pills, litter boxes, zoom bar, inspector sheet.
Rows of specimens, columns of tests, a docked summary with counts.
Answer buttons, fix and flag notes, required photo, live counters.
Day strip and dose slots with Skip and Administer.
Completion bar and a month calendar coloured by result.
Range switch, trend chart, latest, highest and lowest.
Grouped rule tiles; tap to see the animals and why.
Swipe a row for Add and History.
Pass, scan screen and step-by-step track.
Module tiles, dock, site tabs, announcements.
Repeats, every and ends, with a plain-language summary sentence.
Done items struck through, "1/2 done", add an item.
See what the people filling it in will see.
The whole discard list turns pink with red checks.
---
# Guidance
## Logo
The Antz logo in colour and white. Click a logo to copy its file name; download them all in the kit.
### Versions
### Rules
- Use the colour logo on white or light backgrounds and the white logo on Navy or dark backgrounds.
- Use the files as they are: do not recolour, stretch or redraw the logo.
- Antz Astra is a separate product and is not the Antz logo.
## Colour
Three colours carry the brand. Every other colour has one job. Click a colour to copy its hex.
### House colours
### Text and lines
### Page and surfaces
### Accents and alerts
### Text on colour
How readable each pairing is. 4.5 or more works for body text; 3 or more for large text and icons.
### Using colour
| Rule | Detail |
| --- | --- |
| The page colour changes by screen | Page, Page light, Pale green or Disabled, chosen to break a run of identical screens |
| The main button is Antz green | Teal ink is allowed on the main button to vary a run of screens |
| Selected means Teal ink | Selected chips, pills and choice tiles |
| Colour is never the only signal | States change shape or icon as well |
| No raw colours | Every colour on screen is one of the colours on this page |
| Colour | Hex | Variable | Use |
| --- | --- | --- | --- |
| Antz green | #37BD69 | var(--Primary) | Main buttons, active tabs, success |
| Teal ink | #1F515B | var(--OnPrimaryContainer) | Selected items, values, navy buttons |
| Navy | #1F415B | var(--OnSecondaryContainer) | Record headers, sheet backdrop |
| Ink | #44544A | var(--OnSurfaceVariant) | Titles, labels, body text |
| Muted | #7A8684 | var(--neutralSecondary) | Dates and small notes |
| Hint | #839D8D | var(--Outline) | Hint text, disabled text |
| Line | #C3CEC7 | var(--OutlineVariant) | Field borders, dividers |
| Dark green | #006D35 | var(--OnSurface) | Positive status text, links |
| Page | #DDEBE9 | var(--displaybgSecondary) | Page behind cards |
| Page light | #E8F4F2 | var(--displaybgPrimary) | Page behind cards, bottom navigation |
| Pale green | #EFF5F2 | var(--Background) | Panels inside a page, sheet body |
| Field | #F2FFF8 | var(--Surface) | Inside fields |
| Disabled | #DAE7DF | var(--SurfaceVariant) | Disabled buttons, page option |
| Positive | #E1F9ED | var(--OnBackground) | Positive status fill |
| Turquoise | #00D6C9 | var(--Secondary) | Initials, male tag |
| Turquoise light | #AFEFEB | var(--SecondaryContainer) | Active bottom navigation item |
| Add blue | #00AFD6 | var(--addPrimary) | Add buttons |
| Coral | #FA6140 | var(--Tertiary) | Cancel, required mark, female tag |
| Red | #E93353 | var(--Error) | Reject, expired, errors |
| Amber | #E4B819 | var(--moderateSecondary) | Pending, ratings |
| Notes | #FCF4AE | var(--notes) | Notes fields |
## Type
One typeface, Inter, in twelve sizes. Nothing in between.
### Scale
### Rules
- Inter only. No sizes outside the scale; never 13, 15 or Bold.
- Line height is the size itself; paragraphs use 20, bullet lists 24.
- Sentence case for titles, tabs and buttons. No all-capital labels.
- Numbers stay light: 24 on phone, 28 on tablet, never heavier than Semibold.
## Spacing and corners
Phone screens keep 16 from the edge, tablet 20. Most corners are 8.
### Spacing scale
### Screen spacing
| Between | Phone | Tablet |
| --- | --- | --- |
| Screen edge and content | 16 | 20 |
| List items | 12 | 12 |
| Form sections | 16 | 16 |
| Inside a card | 12 | 16 |
| Label and field | 8 | 12 |
| Title bar height | 72 | 72 |
### Corners
### Depth
Border or shadow, never both. The backdrop behind a sheet is Navy at 50%.
### Touch
Every tappable thing is at least 44 by 44.
## Icons
One rounded icon family. Click an icon to copy its name.
### Sizes
| Size | Use |
| --- | --- |
| 24 | Title bars, navigation, inside fields, checkboxes, menus |
| 20 | Rows, section headings, status bars |
| 18 | Search and filter |
| 16 | Inline with small text, tabs |
| 50 | Module tiles |
| 64 · 96 | Confirm and result screens |
### Set
### States
A control's states use different icons from the same family. Colour alone is never a state.
## Status
Each meaning has one colour pair, used the same way everywhere.
### Meanings
| Meaning | Examples | Phone | Tablet | Fill · text |
| --- | --- | --- | --- | --- |
| Positive | Active, approved, entry, done | Status | Status | Positive #E1F9ED · Dark green #006D35 |
| Pending | Upcoming, waiting, draft | Status | Status | Amber light · Amber #E4B819 |
| Negative | Expired, rejected, denied | Status | Status | Red light · Red #E93353 |
| Cancelled | Cancelled | Status | Status | Coral light · Coral #FA6140 |
| Neutral | Exit, inactive | Status | Status | Light grey · Ink #44544A |
### Where status shows
| Form | Used on | Page |
| --- | --- | --- |
| Status label | Every record | Status label |
| Status bar | Request and approval cards only | Request card |
| History dot | A record's history | History |
| Result screen | The outcome of a check | Result layout |
### Rules
- Status is said once on a card.
- Pending has low contrast: keep the label short or add an icon.
- A wait or a reason is not a status; it goes in the history or a note.
## Writing
Short, plain and once.
### Formats
| Thing | Format | Example |
| --- | --- | --- |
| Date | Day month year | 10 Aug 2026 |
| Date range on a card | Short year, arrow | 10 Aug '26 → 20 Aug '26 |
| Date and time | Date, dot, time | 22 Apr 2026 • 09:14 AM |
| Age of an item | Number and letter | 2 d, 5 h |
| Waiting time | Since | Since 2 days |
| Record number | Prefix and number | ABC-1029 |
| Meta line | Parts joined by a dot | Number • Person • 2 d |
| Count line | Noun and count | Requests (6) |
| Count on a chip | Label, dash, count | All - 22 |
| Phone | Country code first | +91 98765 43210 |
| Money | Rupee sign | ₹ 12,500 |
### Rules
- No sentence that explains what the screen already shows.
- Sentence case everywhere; no colons after field labels. Identifier lines on the animal card keep their Figma form, such as Ear tag: value.
- Buttons start with a verb: Create, Approve, Reject.
- Errors say what to fix in one line.
- Sample people in designs use plain English names.
## Rules
The standing rules behind every screen.
### Figma is the source
- Copy the named source literally; never "in the spirit of" it.
- A shared Figma component is the whole container: no extra wrapping, lines or sections.
- Build nothing the frame lacks; departures are questions.
### Say less
- No explaining sentences.
- One fact, one place.
- No decorative chips, colour stripes, emoji or all-capital labels.
- Let people read the data; no verdict banners.
### Structure
- One container level.
- Each kind of information gets its own form, only when it answers a real question.
- Read and act are separate.
- One main action; the rest in the more menu. Delete never sits red beside Edit.
- No new state when a note, chat or filter can carry it.
### Type, fields and controls
- Inter on the scale only.
- Every field on a screen is 56 tall.
- Each control state is its own icon.
- Touch targets at least 44.
### Forms and records
- One form with switches inside.
- Show similar records while a name is typed.
- Delete only unused records; otherwise deactivate.
- Every record keeps its history.
- Rejecting always needs a reason.
### Before sharing
- Tap every control, role and status.
- Check the empty first screen, not only filled ones.
- Compare with the Figma frame side by side.
## Decisions
Where the Figma files disagreed, this is what was settled on 26 Oct 2026.
### Fixed
| Topic | Standard |
| --- | --- |
| Field | 56 tall, Line border, corners 8, Field fill |
| Screen and card titles | Ink |
| Title bar edge | 1px light grey line |
| Record header | Navy |
| Card corners | 8; 12 only when asked |
| Selected fill | Teal ink |
| Underline tab | Antz green text and bar |
| Secondary tab | Antz green pill on Pale green |
| Filter button | 40, light grey |
| Dark green text | Dark green #006D35 |
| Add button | Add blue |
| Outline button | Line border, Teal ink text |
| Disabled button | Disabled fill, Hint text |
| Confirm buttons | 56 |
| Sheet | Corners 16, title on the left with close |
| Sheet handle | Only when the sheet is dragged |
| Tablet | 834 wide, 20 from the edge |
### Settled gaps
| Topic | Standard |
| --- | --- |
| List screen | Help Desk request list with request cards; the search bar version only when asked |
| Record screen | Help Desk request detail; the navy header only when asked |
| List card with no status | Leave the label out |
| Animals in a list | Full animal card |
| Choosing one of two or three in a form | Dropdown |
| Number with a unit | Unit inside the field; a small unit list when several are allowed |
| Site switch | Right side of the top bar |
| Choosing an animal | Sheet with search and animal cards |
| Form section padding | 12 |
| Chosen option | Filled radio for one, check box for several; no green tick |
### Settled across modules
| Topic | Standard |
| --- | --- |
| Site switch | Opens a bottom sheet with radios |
| Segmented control | Green filled segment on a pale track (Necropsy) |
| Main action | Antz green; navy for other calls to action; cyan for Add buttons |
| Add button | Gradient square, corners 12 (Egg) |
| Choosing one option | Bottom sheet |
| Toast | Navy pill at the bottom, Undo when it can be taken back |
| Buttons | Title case, main buttons 56 |
| Field label | Above the field |
| Chosen row | Green border on pale green, filled radio |
| Animal card | Full card only; no compact versions |
| Record header | White by default; a module may choose another colour for its flow |
| Errors | Under every field that needs fixing |
| Motion and haptics | One set for every module |
| Tablet landscape | Not in scope |
### Chosen per screen
| Topic | Rule |
| --- | --- |
| Page colour | Any of four, to break a run of identical screens |
| Main action | Antz green. Navy for a call to action that is not the main step; cyan for Add buttons |
| Search | Light grey 40 standard; outlined or shadowed for more or less prominence |
| Status | Label always; status bar only on request and approval cards |
| Tabs | Primary tabs, Secondary tab, or chips, by weight |
| Approve and Reject | Stacked on phone, side by side on tablet |
| Add button | Square on phone; labelled pill on tablet when there is one action |
| Status text | 12 on phone, 14 on tablet |
| Big numbers | 24 or 20 on phone, 28 on tablet |
| Sheet footer | Two buttons standard; one for a single decision |
| Record header title | Centred or left, by screen |
| Bottom navigation | As the module designer chose |
## Not designed yet
Where Figma has no design, a temporary rule fills in until it does.
### Coverage
| Part | Default | Focus | Error | Disabled | Loading | Empty |
| --- | --- | --- | --- | --- | --- | --- |
| Text field | In Figma | Temporary | Temporary | Temporary | – | – |
| Dropdown | In Figma | Temporary | Temporary | Temporary | – | – |
| Button | In Figma | Temporary | – | Temporary | Temporary | – |
| List | In Figma | – | – | – | Temporary | In Figma |
| Bottom sheet | In Figma | – | – | – | Temporary | – |
### Temporary rules
| Missing | Use until designed |
| --- | --- |
| Field focus | Border turns Hint grey |
| Field error | Red border and a one-line red message below |
| Field disabled | Disabled fill, Hint text |
| Loading | Keep the layout; light grey blocks where text will be |
| Empty with picture | One line of text in the middle, 20 Medium |
| Offline or failed | An error toast; no lasting banner |
| Open dropdown, date picker | A bottom sheet with option rows |
| Number with a unit | Unit inside the field at the right end |
| Site switch | Site name and chevron on the right of the top bar |
| Choosing an animal | Sheet with search and animal cards |
| Section and enclosure cards | Not sourced yet; ask for the Figma frame |
| New Antz Home grid | Get its Figma frame before building |
## For developers
Build from these files. They are generated with this site, so they always match it.
### Download
Download the kit (zip)
The kit holds every file below plus the fonts, sample images and Antz logos they use. Keep the folder together: the colour file loads the fonts from its assets folder.
### Files
| File | What it holds | Open |
| --- | --- | --- |
| AGENTS.md | Start here when an AI tool builds Antz screens: what to read and the rules | Open |
| COMPONENTS.md | Every component and layout with ready HTML for each variant and state | Open |
| components.json | The same, for tools | Open |
| tokens.css | Every colour, size, corner and shadow, named as in Figma | Open |
| tokens.json | The same values for other tools | Open |
| antz.css | The component styles the examples use | Open |
| STANDARDS.md | The full written rules | Open |
| decisions.json | The settled design decisions | Open |
### How to use
- Load tokens.css, then antz.css.
- Start a screen from a layout skeleton in COMPONENTS.md and fill it with component examples; change the content, keep the styles.
- Use the named colour variables; never type a colour or size by hand.
- If you have the Figma frame for the screen, match it exactly; this system fills the gaps around it.
- Any Material Symbols Rounded icon may be used when it fits the meaning; the icon page lists the common ones.
- Anything marked temporary is not designed in Figma yet: report it as a departure.
## Motion
One set of movements for every module. Motion shows where something came from; it never decorates.
| Moment | Movement | Time | |
| --- | --- | --- | --- |
| Sheet opens | Slides up | 260 ms | Play |
| Sheet closes | Slides down | 200 ms | Play |
| Screen opens | Pushes in from the right | 260 ms | Play |
| Press | Darker layer and 0.97 scale | 100 ms | Play |
| Tab or segment change | Underline or fill slides across | 180 ms | Play |
| Switch, check box, radio | State changes | 180 ms | Play |
| Toast | Rises from the bottom, leaves after 2.4 s (5 s with Undo) | 200 ms | Play |
| New item | Glows pale green, then fades | 2.4 s | Play |
| Loading | Grey blocks pulse softly; no spinners | 1.2 s loop | Play |
### Easing
| Use | Curve |
| --- | --- |
| Things arriving | Ease out: quick start, gentle stop |
| Things leaving | Ease in: gentle start, quick exit |
| Things moving across | Ease in-out |
### Reduce motion
When the device asks for less motion, every movement becomes a 150 ms fade and nothing slides, scales or pulses.
### Source
Timings follow GRC (screens, presses) and Family tree (sheets), the two prototypes with the most complete motion. One set for every module, settled 26 Oct 2026; temporary until checked in Figma prototypes.
## Haptics
A small set of taps people feel, the same in every module. Haptics confirm; they never replace what the screen shows.
| Feel | When | Pattern (ms) | |
| --- | --- | --- | --- |
| Light tick | Pick an option, toggle, change a tab or segment, tick a row | 10 | Feel it |
| Success pulse | Save, submit or approve went through | 15 · 60 · 15 | Feel it |
| Warning buzz | Reject, delete confirmed, an error | 30 · 40 · 30 | Feel it |
| Snap | A swiped row or dragged card lands | 8 | Feel it |
| None | Scrolling, typing, opening a screen | — | |
Open this page on an Android phone to feel each pattern. iPhone and iPad give only a light tick on some taps; everything works without haptics.
### Rules
- One haptic per action, at the moment the result shows.
- No haptic on scroll, typing or screen changes.
- Haptics follow the phone's own setting; if it is off, nothing plays.
### Source
Home (Naveen) taps 8 ms; Assessments (Deepannita) ticks on keys, swipes and drags. One set for every module, settled 26 Oct 2026; temporary until tested on devices.
M
